一种基于WebGL的3D网页游戏的开发方法与流程

文档序号:17471003发布日期:2019-04-20 05:49阅读:2160来源:国知局
一种基于WebGL的3D网页游戏的开发方法与流程

本发明涉及游戏开发技术领域,尤其涉及一种基于webgl的3d网页游戏的开发方法。



背景技术:

webgl(全写webgraphicslibrary)是一种3d绘图协议,这种绘图技术标准允许把javascript和opengles2.0结合在一起,通过增加opengles2.0的一个javascript绑定,webgl可以为html5canvas提供硬件3d加速渲染,这样web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3d场景和模型了,还能创建复杂的导航和数据视觉化。显然,webgl技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3d结构的网站页面,甚至可以用来设计3d网页游戏等等。

webgl完美地解决了现有的web交互式三维动画的两个问题:第一,它通过html脚本本身实现web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的opengl接口实现的。

现有技术中的3d网页游戏在运行过程中往往需要加载其他的插件,以保证游戏的正常运行,但在插件加载过程中存在感染病毒的风险,另外3d网页游戏对电脑硬件配置要求较高,在游戏运行过程中容易出现卡顿现象,存在一定的缺陷。



技术实现要素:

本发明的目的在于克服现有技术中存在的上述问题,提供一种基于webgl的3d网页游戏的开发方法,能够不需要借助插件来进行游戏的运行,同时还能流畅运行,提升游戏体验。

为实现上述技术目的,达到上述技术效果,本发明是通过以下技术方案实现:

一种基于webgl的3d网页游戏的开发方法,包括如下步骤:

s100、素材收集:根据游戏的人物、场景、情节进行相关素材的收集,并分类打包;

s200、模型构建:根据游戏内的人物形象并利用webgl进行相关人物3d模型的构建;

s300、场景搭建:根据游戏的场景内容并利用unity软件进行场景的渲染搭建;

s400、动画创建:根据游戏的情节并利用骨骼动画对相应的3d人物模型创建动画;

s500、脚本编写:根据游戏情节以及相关人物模型的动作编写相应的控制脚本;

s600、运行调试:在网页环境中运行该游戏,并根据运行过程中的漏洞进行修复。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s100中收集的素材包括音频素材、ui素材以及贴图素材。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s200中模型构建的具体步骤为:

s201、获取webgl上下文环境,根据着色器代码片创建着色器,并将着色器绑定给webgl上下文链接之后生成的webglprogram;

s202、为需要绘制的图形对象创建顶点数组与颜色数组,同时根据贴画素材生成纹理对象以及顶点纹理坐标数组;

s203、为webgl上下文绑定着色器所需的数组以及纹理对象,同时为webgl上下文设置着色器需要的变量;

s204、调用webgl的基本图元绘制方法进行图形对象的绘制。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s101中创建的着色器包括顶点着色器和片元着色器。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s203中设置的着色器变量包括投影矩阵、模型视图矩阵。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s400中动画创建的具体步骤包括:

s401、使用maya建模软件建立一个手臂模型,并绑定好骨骼,保存成.ma格式;

s402、利用ajax技术,读取模型文件中的顶点、法线、贴图以及骨骼信息;

s403、利用handanim对象中的相应参数初始化对应的缓存;

s404、设置相机,即投影矩阵和模型视图矩阵;

s405、调用绘制函数绘制输出;

s406、根据骨骼动画的运动数据,更新骨骼的运动算子,重新计算顶点坐标。至此,循环到步骤s403,利用计算后的顶点坐标重新初始化顶点缓存。

优选地,上述基于webgl的3d网页游戏的开发方法中,步骤s600中,反复进行游戏的测试,并将游戏中出现的漏洞及时修复,直至没有漏洞。

本发明的有益效果是:

本发明基于webgl软件进行3d网页游戏的开发,在游戏运行过程中不需要插件的参与,避免了插件安装加载过程中感染病毒的风险,另外本发明通过webgl软件与3d骨骼动画算法相结合进行游戏的开发,在网页端运行游戏过程中fps值非常小,并且可以节省大量的内存空间,大大提升了3d网页游戏运行的流畅度。

当然,实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例的技术方案,下面将对实施例描述所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1为本发明的3d网页游戏开发方法流程图。

具体实施方式

下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。

请参阅图1所示,本实施例为一种基于webgl的3d网页游戏的开发方法,包括如下步骤:

s100、素材收集:根据游戏的人物、场景、情节进行相关素材的收集,收集的素材包括音频素材、ui素材以及贴图素材,根据素材的类型进行分类打包;

s200、模型构建:根据游戏内的人物形象并利用webgl进行相关人物3d模型的构建,具体步骤为:首先获取webgl上下文环境,根据着色器代码片创建着色器,并将着色器绑定给webgl上下文链接之后生成的webglprogram;再为需要绘制的图形对象创建顶点数组与颜色数组,同时根据贴画素材生成纹理对象以及顶点纹理坐标数组;然后为webgl上下文绑定着色器所需的数组以及纹理对象,同时为webgl上下文设置着色器需要的变量,变量包括投影矩阵、模型视图矩阵最后调用webgl的基本图元绘制方法进行图形对象的绘制。

s300、场景搭建:根据游戏的场景内容并利用unity软件进行场景的渲染搭建;

s400、动画创建:根据游戏的情节并利用骨骼动画对相应的3d人物模型创建动画,具体步骤为:首先使用maya建模软件建立一个手臂模型,并绑定好骨骼,保存成.ma格式;再利用ajax技术,读取模型文件中的顶点、法线、贴图以及骨骼信息;随后利用handanim对象中的相应参数初始化对应的缓存;接下来设置相机,即投影矩阵和模型视图矩阵;然后调用绘制函数绘制输出;最后根据骨骼动画的运动数据,更新骨骼的运动算子,重新计算顶点坐标。至此,循环第三步,利用计算后的顶点坐标重新初始化顶点缓存。

s500、脚本编写:根据游戏情节以及相关人物模型的动作编写相应的控制脚本,实现整个游戏逻辑需要编写多个脚本,有用于控制游戏分数判断和主游戏进程的游戏控制器,还有用于音频播放的音频控制器,用于控制按钮点击事件的按钮控制器,用于场景切换的ui控制器和人物控制器等等。游戏主逻辑控制器是最为重要的脚本,它主要承担控制游戏进程的作用,同时游戏的载入,也由它对所有参数进行初始化设置;

s600、运行调试:在网页环境中运行该游戏,并根据运行过程中的漏洞进行修复,反复进行游戏的测试,并将游戏中出现的漏洞及时修复,直至没有漏洞,实现对游戏的完善。

本发明基于webgl软件进行3d网页游戏的开发,在游戏运行过程中不需要插件的参与,避免了插件安装加载过程中感染病毒的风险,另外本发明通过webgl软件与3d骨骼动画算法相结合进行游戏的开发,在网页端运行游戏过程中fps值非常小,并且可以节省大量的内存空间,大大提升了3d网页游戏运行的流畅度。

在本说明书的描述中,参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节,也不限制该发明仅为所述的具体实施方式。显然,根据本说明书的内容,可作很多的修改和变化。本说明书选取并具体描述这些实施例,是为了更好地解释本发明的原理和实际应用,从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1