CN107670279A - 基于WebGL的3D网页游戏的开发方法及*** - Google Patents

Abstract

本发明涉及基于WebGL的3D网页游戏的开发方法及***，该方法包括获取HTML5的canvas元素，通过canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。本发明实施例提供的基于WebGL的3D网页游戏开发方法，无需安装文件，在浏览器内打开一个网址便能获得3D效果的游戏体验，运行该游戏也无需下载插件即可实现，而且该游戏可以跨平台使用，提升了用户的使用体验。

Description

基于WebGL的3D网页游戏的开发方法及***

技术领域

本发明涉及互联网技术领域，特别涉及一种基于WebGL的3D网页游戏的开发方法及***。

背景技术

游戏产业是当今国家战略性新兴产业中极其重要的一员，其中随着各方面技术的成熟网页游戏行业从快速发展进入了平稳扩展的阶段，2016年，网页游戏市场依旧保持较为强劲的增长势头。在网页游戏市场竞争日趋白热化的今天，技术表现力的创新有望成为快速打破同质化、强调个性化的解决方案之一。

现有技术中为了在web端实现3D效果，通常需要安装各种各样的插件，这样的做的弊端有很多。一是浏览器经常需要更新各式各样的插件以获得更好的效果，这样会让用户感到厌烦；二是越多的插件就意味着越多的安全风险，计算机受到的攻击手段越多；三是这些插件会受到不同操作***和不同浏览器的限制，比如说苹果的safari放弃支持flash，这样的用户体验会受到很大程度的降低。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种基于WebGL的3D网页游戏的开发方法。

第一方面，本发明实施例提供一种基于WebGL的3D网页游戏的开发方法，包括：获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

在一个实施例中，所述导入PlayCanvas编辑器构造游戏场景，包括：

导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

实例化一个对象，并为游戏添加光源和摄像头组件。

在一个实施例中，所述创建游戏脚本包括：对物理效果的设置和对场景的布置。

在一个实施例中，所述游戏逻辑包括：游戏状态切换、用户交互设计、游戏主角生命值设计、游戏中敌人设计、游戏得分设计和游戏关卡切换设计。

在一个实施例中，所述角色逻辑包括：动画、声音脚本、通过用户输入检测来切换状态的脚本或游戏内人物与其他对象的交互切换状态的脚本。

在一个实施例中，在所述创建游戏脚本、游戏逻辑以及角色逻辑之后，所述方法包括：

调试游戏代码，通过Node.js启动上线服务，通过websocket实现客户端和服务器端的双向实时通信。

第二方面，本发明实施例提供一种基于WebGL的3D网页游戏的开发***，包括：

获取建立模块，用于获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

建模设计模块，用于对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

提取导入模块，用于提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

创建发布模块，用于创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

在一个实施例中，所述提取导入模块中的导入PlayCanvas编辑器构造游戏场景，包括：

导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

实例化一个对象，并为游戏添加光源和摄像头组件。

在一个实施例中，还包括：通信模块，用于通过websocket实现客户端和服务器端的双向实时通信。

本发明实施例提供的上述技术方案的有益效果至少包括：

本发明实施例提供的基于WebGL的3D网页游戏的开发方法，包括获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。本发明实施例提供的基于WebGL的3D网页游戏开发方法，无需安装文件，在浏览器内打开一个网址便能获得3D效果的游戏体验，运行该游戏也无需下载插件即可实现，而且该游戏可以跨平台使用，提升了用户的使用体验。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例提供的基于WebGL的3D网页游戏的开发方法的流程图；

图2为本发明实施例提供的游戏技术框架示意图；

图3为本发明实施例提供的步骤S103的流程图；

图4为本发明实施例提供的举例的开发方法技术架构图；

图5为本发明实施例提供的基于WebGL的3D网页游戏的开发***的框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

参照图1所示，本发明实施例提供的基于WebGL的3D网页游戏的开发方法，深入分析了WebGL的实现原理，并对游戏整体逻辑、开发架构进行分析筛选。其中：WebGL(全写WebGraphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助***显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。该方法包括：步骤S101～S104；

S101、获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

S102、对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

S103、提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

S104、创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

本实施例中，在三维场景或模型绘制之前，首先需要获取HTML5的canvas元素，然后通过该元素获得WebGL的绘制环境。canvas画布元素是HTML5中的一个非常重要的元素，canvas元素为HTML5能够支持较高性能的动画和游戏提供了可行性。canvas元素本质上是在浏览器中提供了一块可绘制区域，JavaScript代码可以访问该区域，并且通过一套完整的API进行二维图像的绘制。另外，只要显卡硬件支持3D图形功能，就可以使用canvas绘制3D图形。

步骤S102中，在游戏中，模型的分类是多种多样的，有场景模型、建筑模型、动画模型、人物模型以及角色使用的道具模型。本发明所述的游戏模型是指，需要运用到游戏引擎中去，在游戏中能体现出模型的质感和人们的想象力，比如闯关游戏中“闯关的主角”和“追逐闯关者的敌人”等都是游戏模型。本步骤中，比如可以利用Blender、3Dmax或maya等三维软件，进行游戏模型的三维建模，之后将创建好的三维模型导入Unity3D中创建骨骼节点。三维模型上可以分布有多个骨骼节点，当骨骼运动时，每个附着在它上的顶点也随之运动，进而骨骼自身的运动也会导致其他骨骼的运动，最终通过多个骨骼运动之间的加权运算，可以计算出经过运动之后的顶点坐标，绘制并渲染出最终的模型。其中：Blender是一款开源的跨平台全能三维动画制作软件，提供从建模、动画、材质、渲染、到音频处理、视频剪辑等一系列动画短片制作解决方案。Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

步骤S103提取上述三维游戏模型中的建模参数与骨骼节点信息，作为游戏资源使用，导入PlayCanvas编辑器构造游戏场景。其中建模参数，比如三维模型的点、线、面等位置坐标等。通过PlayCanvas实现物理效果，并使用其提供的API开发接口，通过JavaScript面向对象编程，步骤S104创建游戏脚本，游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。其中：PlayCanvas是一个用于交互式Web内容的可视化开发平台。其构建的工具和Web应用程序都由HTML5提供支持。

参照图2所示，为游戏技术框架示意图，游戏开发过程中涉及两端，客户端和服务端。客户端程序通过JavaScript编写游戏逻辑、脚本，利用WebGL进行3D渲染，并通过HTML5的接口布置音乐音效，比如可以支持网页端Audio、Video等多媒体功能，同时使用html5+Css3搭建页面UI，导入Play Canvas。服务端的数据存储在MySQL数据库中，通过Node.js建立服务，客户端程序与服务端通过WebSocket实现通信连接，双方均能接收和发送消息。

本发明实施例提供的基于WebGL的3D网页游戏开发方法，无需安装文件，在浏览器内打开一个网址便能获得3D效果的游戏体验，运行该游戏也无需下载插件即可实现，而且该游戏可以跨平台使用，提升了用户的使用体验。

在一个实施例中，参照图3所示，步骤S103中导入PlayCanvas编辑器构造游戏场景，包括：

S1031、导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

S1032、实例化一个对象，并为游戏添加光源和摄像头组件。

本实施例中，场景设置没有很复杂的操作，只需要进行实例化，然后再依次将光源、摄像头、三维模型等加入场景即可。

首先利用PlayCanvas框架提供的API接口对游戏进行初始化的布局，比如游戏作为pc.Application的一个实例化对象，然后为游戏添加基本的组件：光源和摄像头。大致代码如下：

添加完光源和摄像头这两个基本对象后，接下来简单地介绍下如何添加一个带脚本的并且拥有模型资源的对象，以及对象的脚本该以怎样的规范编写。

通过以上代码可以看出，游戏中的每个对象都是pc.Entity的实例化对象，对象通过add Component()这个方法为自己挂在组件，方法接收两个参数，第一个字符串参数指定组件的类型，比如例子中的cube指定组件的类型为“模型”(model)，第二个参数为一个对象字面量，里面存储了组件的详细信息。如果想为该对象挂载脚本对象，操作如下代码所示，首先通过add Component方法的第一个参数指定类型为“script”，然后在第二个参数中的有一个key为scripts的属性，其值为一个数组，因为同一个对象上可能不止挂载一个脚本，数组中又存储了很多对象，其中url属性则指定了该脚本的路径。

接下来说明一下脚本的结构规范，创建一个新的js文件，名为cube.js。脚本本质上都是pc.script.create()所创建的一个个实例，主要的逻辑代码都写在pc.script.create()第二个参数即回调函数中。

通过参数传递，将游戏对象app作为参数传进了回调函数中，也就是说每个脚本内都能访问到游戏实例app对象。通过函数表达式var Cube＝function(entity){this.entity＝entity}，将该脚本所属的对象赋值给this.entity，开发者可以通过this.entity访问到当前脚本的cube对象。

还比如另外本方法开发的游戏可以采用一种平行镜头的镜头机制，使镜头能够根据角色的移动而平行移动，使得游戏在3D模式下也能实现2D横板游戏的易上手性。比如开发的为闯关游戏，当游戏主角从低地跳跃至高地会产生一个视觉差，但是通过编写脚本为镜头提供平缓流畅的运动机制，使用户获得良好的游戏体验，从而不会感到镜头切换带来的生硬感。

在一个实施例中，创建游戏脚本包括对物理效果的设置和对场景的布置。通过JavaScript脚本的编写可以实现比如发光、***、透明等物理效果；场景的布置，比如通过JavaScript编写墙体、植物、山坡等场景。

在一个实施例中，上述游戏逻辑可以包括：游戏状态切换、用户交互设计、游戏主角生命值设计、游戏中敌人设计、游戏得分设计和游戏关卡切换设计等。

下面还是以闯关游戏为例，游戏主角为“Robot”，对上面的游戏逻辑进行举例说明。

比如游戏状态切换，游戏通过Java Script实现了状态机的机制，将Robot的状态存储在变量this.animation State中，idle、run、jump的状态分别用数字0、1、2表示。将各个状态的动画存储在ANIMATIONS这个对象中，Robot在哪个状态，便播放相应状态所对应的动画。

比如用户交互设计，游戏中主要通过键盘事件绑定处理用户输入，新建player_input.js文件，并将其都挂在Robot上，方便该脚本访问platform_character_controller.js中的左右移动，跳跃等函数。当玩家按下键盘后，触发相应的事件。在本游戏中，键盘按下的事件有：Robot向左移动，向右移动，跳跃。首先在app.controller上注册键盘输入事件，然后再update中通过if判断检测用户输入，然后执行相应的函数。当玩家按着A键和D键时，触发player Script中相应的move方法；当玩家每按一次空格键，便触发player Script中相应的jump方法。

游戏主角生命值设计，当游戏人物拥有了生命值，能受到伤害，游戏才能显得真实。可以通过damage.js实现这一功能。

还比如游戏中敌人设计，在设计不同的enemy之前，首先将敌人的基本模块实现，比如移动、状态切换、转身、伤害机制等基础功能的实现。这样的话，后续的敌人设计可以继承该基础父类，在此基础上添加新的功能，大大提升了开发效率。enemy的基础配置数据，分别为敌人添加了刚体、碰撞体积、脚本、模型等基本的组件，属性上的值包括速度、转身速度、敌人类型、伤害等，这些数值都将影响到游戏的体验。

敌人的基础类一共有三个状态STATE_IDLE、STATE_MOVE、STATE_TURN，默认初始状态为IDLE。每个enemy实例都会有其专属绑定的平台。

每一款游戏的敌人都有独属于该游戏的特征，本游戏的敌人就是为阻止Robot到达终点而存在的，于是如何在不被敌人抓住的前提下抵达终点是游戏玩家需要关注的问题。游戏的AI有着多种设计手法，其中被应用时间最久的就是基于规则的AI。本游戏中所用道的敌人AI就是基于规则的AI。enemy会对与Robot之间的距离进行判断，当这个距离distance小于4的时候，enemy进入攻击模式，向Robot发起攻击。

再以游戏得分设计为例：比如本游戏设计了吃星星的***，不同类型的星星都有其各自的分值，当玩家在当前关得到了一定的分数，通往下一关的传送门才会开启。在window上挂载一个全局的game对象，game对象上有一个score属性，用于存储玩家吃到的星星得到的分数，这样就能在游戏的任何地方都能访问到这个score属性。

Star对象相对来说简单一些，为它添加了碰撞体积、脚本、模型等组件，然后其worth属性指定了星星的分值。跟game.js一样，新建ui.js将其作为组件放在app的根节点上，使用Raphael.js这个前端库构建本游戏的UI框架。首先将Raphael.js作为依赖添加到游戏中，使之能够在脚本文件中访问到Raphael.js提供的API接口。从玩家吃到星星到UI显示得分一共经历了这样的过程：先出发Star中的碰撞监听函数，然后调用全局Game对象上的collect Stars()，然后执行Ui中的update Scores()函数和collect Star(star.worth)函数，将玩家吃到的星星的分值传参的方式加到全局的scores里。然后通过Raphael.js将数据更新渲染在UI上面。

以游戏关卡切换设计为例：本游戏中通过对level的enable状态进行设置来实现关卡的切换，默认将第一关的enable设置为true，其他关卡的enable状态为false。当Robot进入传送门，将当前关卡的enable状态设置为false，下一关设为true。这样就可以通过对关卡的enable进行判断，从levels数组中找到当前关卡了。

在一个实施例中，游戏角色逻辑包括：动画、声音脚本、通过用户输入检测来切换状态的脚本或游戏内人物与其他对象的交互切换状态的脚本。

还是以闯关游戏主角“Robot”为例，游戏主角设计与实现，游戏中使用面向对象编程，将游戏中的每一个模块都封装成一个个对象，其中游戏主角Robot主要由动画、声音、碰撞体积、刚体、脚本等组件组成。Robot拥有idle，run，jump，die四个状态，通过用户输入检测以及游戏内人物与其他对象的交互来切换不同的状态。

在一个实施例中，步骤S104中，在创建游戏脚本、游戏逻辑以及角色逻辑之后，上述方法还可以包括：

调试游戏代码，通过Node.js启动上线服务，通过websocket实现客户端和服务器端的双向实时通信。分别在Chrome、Fire Fox、Edge等不同的主流Web浏览器上进行游戏性能和兼容性的测试，最终通过Node.js启动上线服务。

下面通过一个完整的实施例来说明基于WebGL的3D网页游戏的开发方法。

参照图4所示，通过Blender对游戏模型进行三维建模，导入Unity3D创建骨骼动画制作，然后整体导入PlayCanvas，外加音效制作，还可以通过Aseprite(一款用来制作像素风格动画的软件)进行动画制作和二维形象设计。然后通过JavaScript完成对物理效果的设置和对场景的布置。再处理游戏主要逻辑以及角色逻辑，使用HTML+CSS进行游戏UI层的搭建。其中游戏逻辑编写中，包括与用户的交互设计(键盘、鼠标、操作杆、触摸或是手持旋转移动终端)；然后使用Git作为版本管理器，Git是一个开源的分布式版本控制***，可以有效、高速的处理从很小到很大的项目版本管理。再经调试、通过服务端Node.js，与客户端程序之间建立websocket通信，最后部署上线。

本发明实施例还提供了一种基于WebGL的3D网页游戏的开发***，该***使用本发明实施例提供的上述基于WebGL的3D网页游戏的开发方法。

基于同一发明构思，由于该***所解决问题的原理与前述基于WebGL的3D网页游戏的开发方法相似，因此该***的实施可以参见前述方法的实施，重复之处不再赘述。

参照图5所示，上述***包括：

获取建立模块51，用于获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

建模设计模块52，用于对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

提取导入模块53，用于提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

创建发布模块54，用于创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

在一个实施例中，所述提取导入模块53中的导入PlayCanvas编辑器构造游戏场景，包括：

导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

实例化一个对象，并为游戏添加光源和摄像头组件。

在一个实施例中，还包括：通信模块55，用于通过websocket实现客户端和服务器端的双向实时通信。

本领域内的技术人员应明白，本发明的实施例可提供为方法、***、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (9)

1.基于WebGL的3D网页游戏的开发方法，其特征在于，包括：

获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

2.如权利要求1所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述导入PlayCanvas编辑器构造游戏场景，包括：

导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

实例化一个对象，并为游戏添加光源和摄像头组件。

3.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述创建游戏脚本包括：对物理效果的设置和对场景的布置。

4.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述游戏逻辑包括：游戏状态切换、用户交互设计、游戏主角生命值设计、游戏中敌人设计、游戏得分设计和游戏关卡切换设计。

5.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述角色逻辑包括：动画、声音脚本、通过用户输入检测来切换状态的脚本或游戏内人物与其他对象的交互切换状态的脚本。

6.如权利要求1所述的基于WebGL的3D网页游戏的开发方法，其特征在于，在所述创建游戏脚本、游戏逻辑以及角色逻辑之后，所述方法包括：

调试游戏代码，通过Node.js启动上线服务，通过websocket实现客户端和服务器端的双向实时通信。

7.基于WebGL的3D网页游戏的开发***，其特征在于，包括：

获取建立模块，用于获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；

建模设计模块，用于对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；

提取导入模块，用于提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；

创建发布模块，用于创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

8.如权利要求7所述的基于WebGL的3D网页游戏的开发***，其特征在于，所述提取导入模块中的导入PlayCanvas编辑器构造游戏场景，包括：

导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；

实例化一个对象，并为游戏添加光源和摄像头组件。

9.如权利要求7所述的基于WebGL的3D网页游戏的开发***，其特征在于，还包括：通信模块，用于通过websocket实现客户端和服务器端的双向实时通信。