一种WebGL图形渲染引擎的建立方法技术

本发明专利技术提出了一种WebGL图形渲染引擎的建立方法，包括如下步骤：步骤S1，基于WebGL标准，建立EVM图形渲染引擎的底层接口模块；步骤S2，对所述底层接口模块进行分类整理和再封装，形成多个功能模块；步骤S3，根据建立的多个功能模块，对预设的常见业务进行封装整合，提供标准API接口，供业务层使用。本发明专利技术提供的EVM图形渲染引擎，使用方便、层次清晰、接口明确、文档方便可查，方便广大开发者进行二次开发和功能定制。

Method for establishing WebGL graphics rendering engine

The invention provides a method to establish WebGL graphics rendering engine, which comprises the following steps: step S1, based on WebGL standard interface module based EVM graphics rendering engine; step S2, sorting and packaging on the bottom to form a plurality of interface module, function module; step S3, according to multiple the function module is established, encapsulate the integration of common business default, provides a standard API interface for the application layer. The EVM graphics rendering engine provided by the invention has the advantages of convenient use, clear hierarchy, clear interface, convenient document searching and convenient for two development and function customization for the developer.

【技术实现步骤摘要】
一种WebGL图形渲染引擎的建立方法
本专利技术涉及图形处理
，特别涉及一种WebGL图形渲染引擎的建立方法。
技术介绍
WebGL(WebGraphicsLibrary)是一种3D绘图标准，这种绘图技术标准把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，可以为HTML5Canvas提供硬件3D加速渲染，提供了基于浏览器的无插件三维渲染跨平台方案，可被用于创建具有复杂3D结构的网站页面。WebGL接口较底层，需要熟悉计算机图形学相关知识体系才能从事相关开发，使用难度非常高，并且直接使用WEBGL开发三维功能周期较长。WebGL标准推出并得到大多数浏览器支持的时间较短，目前国内市场基于WebGL的商业三维引擎封装度非常低，无法满足前端开发人员开发三维功能的需求。
技术实现思路
本专利技术的目的旨在至少解决所述技术缺陷之一。为此，本专利技术的目的在于提出一种WebGL图形渲染引擎的建立方法。为了实现上述目的，本专利技术的实施例提供一种WebGL图形渲染引擎的建立方法，包括如下步骤：步骤S1，基于WebGL标准，建立EVM图形渲染引擎的底层接口模块，包括：封装引擎循环框架，包括事件更新和图像帧更新；封装图形数学库模块，包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算和插值计算；封装基本物体属性模块，包括三角面、线段的核心几何体封装，以支持正方向、球体、导入的自定义模型；步骤S2，对所述底层接口模块进行分类整理和再封装，形成多个功能模块，其中，所述多个功能模块包括：相机模块、相机控制模块、灯光模块、图片精灵模块、材质模块、物理模块、粒子发射器模块、模型数据加载模块、辅助物体模块、事件绑定模块和消息传递模块；步骤S3，根据建立的多个功能模块，对预设的常见业务进行封装整合，建立EVM图形渲染引擎，提供标准API接口，供业务层使用。进一步，在所述步骤S1中，基于WebGL标准，对WebGL接口进行封装。进一步，所述多个功能模块包括：着色器、灯光控制模块、相机控制模块、场景控制模块、物理模块、粒子模块、事件绑定模块和消息传递模块。进一步，在所述步骤S3中，预设的常见业务包括：流程制定业务、物体制定业务和报表图表业务。进一步，所述步骤S2进一步包括如下步骤：封装相机模块，包括透视相机、正交相机、渲染到CUBE纹理相机；封装相机控制模块，包括飞行控制和注视旋转控制；封装灯光模块，包括环境光源、点光源、方向光源、聚光灯、穹型光源等，并实现灯光的阴影计算；封装图片精灵模块，实现图片精灵的相关特性；封装材质模块，包括点材质、线材质、基础材质、标准材质、深度材质、法线材质、Phong材质、兰伯特材质、自定义Shader材质，封装透明、半透明渲染设置；封装物理模块，实现模型碰撞检测等效果；封装粒子发射器模块、实现三维粒子特效功能；封装模型数据加载模块，包括obj格式、Collada格式；封装辅助物体模块，包括位置、包围盒、坐标轴、法线等辅助物体方便功能开发调试；封装事件绑定模块和消息传递模块，实现模块间交互机制。进一步，所述步骤S3进一步包括如下步骤：建立EVM图形渲染引擎，所述EVM图形渲染引擎提供三维场景初始化、模型加载、灯光创建及设置、材质创建及设置，以实现快速搭建web无插件三维实时渲染方案，以及提供Client/Server架构三维引擎的所有标准接口。本专利技术提供的EVM-图形渲染引擎基于WebGL标准进行开发，对底层图形硬件接口进行完整封装，生成一套完整的WebGL图形渲染引擎，比直接使用WEBGL开发降低了开发门槛，前端开发工程师通过培训能快速的使用EVM-图形渲染引擎API进行页面三维功能的开发。并且，EVM-图形渲染引擎还面向GIS显示，事件绑定，效果展现等功能进行业务层面封装,对外提供标准API，供业务层使用。根据本专利技术实施例的WebGL图形渲染引擎的建立方法，具有以下有益效果：(1)EVM-图形渲染引擎基于WebGL原生接口进行开发，在渲染效率和性能上和同类产品相比有显著提高。(2)EVM-图形渲染引擎封装了底层渲染硬件接口，区分基础功能模块，提供丰富API。(3)EVM-图形库封装了业务层接口，同时提供详尽功能文档，即使没有丰富底层硬件知识也可以做上层业务逻辑开发。EVM-图形渲染引擎使用方便，层次清晰，接口明确，文档方便可查，方便广大开发者进行二次开发和功能定制。本专利技术附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本专利技术的实践了解到。附图说明本专利技术的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：图1为根据本专利技术实施例的WebGL图形渲染引擎的建立方法的流程图；图2为根据本专利技术实施例的WebGL图形渲染引擎的建立方法的示意图。具体实施方式下面详细描述本专利技术的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本专利技术，而不能理解为对本专利技术的限制。本专利技术实施了提供一种WebGL图形渲染引擎的建立方法，该引擎可以提供API封装接口使用。如图1所示，本专利技术实施例的WebGL图形渲染引擎的建立方法，包括如下步骤：步骤S1，基于WebGL标准，建立EVM图形渲染的底层接口模块。在本步骤中，基于WebGL标准，对WebGL接口进行封装，形成EVM图形渲染引擎的底层接口模块。具体接口封装见API文档及代码清单。具体地，封装引擎循环框架，包括事件更新和图像帧更新等。封装图形数学库模块，包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算、多种方式的插值计算等。封装基本物体属性模块，包括三角面、线段等核心几何体封装，以支持正方向、球体、导入的自定义模型等。步骤S2，对底层接口模块进行分类整理和再封装，形成多个功能模块。在本专利技术的一个实施例中，参考图2，多个功能模块包括：着色器、灯光控制模块、相机控制模块、场景控制模块、物理模块、粒子模块、事件绑定模块和消息传递模块等。使EVM图形渲染引擎完整可用，功能模块清晰友好。具体地，封装相机模块，包括透视相机、正交相机、渲染到CUBE纹理相机。封装相机控制模块，包括飞行控制和注视旋转控制等。封装灯光模块，包括环境光源、点光源、方向光源、聚光灯、穹型光源等，并实现灯光的阴影计算。封装图片精灵模块，实现图片精灵的相关特性。封装材质模块，包括点材质、线材质、基础材质、标准材质、深度材质、法线材质、Phong材质、兰伯特材质、自定义Shader材质，封装透明、半透明渲染设置等。封装物理模块，实现模型碰撞检测等效果。封装粒子发射器模块、实现三维粒子特效功能。封装模型数据加载模块，包括obj格式、Collada格式等。封装辅助物体模块，包括位置、包围盒、坐标轴、法线等辅助物体方便功能开发调试。封装事件绑定模块和消息传递模块，实现模块间交互机制。步骤S3，根据建立的多个功能模块，对预设的常见业务进行封装整合，建立EVM图形渲染本文档来自技高网...

【技术保护点】
一种WebGL图形渲染引擎的建立方法，其特征在于，包括如下步骤：步骤S1，基于WebGL标准，建立EVM图形渲染引擎的底层接口模块，包括：封装引擎循环框架，包括事件更新和图像帧更新；封装图形数学库模块，包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算和插值计算；封装基本物体属性模块，包括三角面、线段的核心几何体封装，以支持正方向、球体、导入的自定义模型；步骤S2，对所述底层接口模块进行分类整理和再封装，形成多个功能模块，其中，所述多个功能模块包括：相机模块、相机控制模块、灯光模块、图片精灵模块、材质模块、物理模块、粒子发射器模块、模型数据加载模块、辅助物体模块、事件绑定模块和消息传递模块；步骤S3，根据建立的多个功能模块，对预设的常见业务进行封装整合，建立EVM图形渲染引擎，提供标准API接口，供业务层使用。

【技术特征摘要】
1.一种WebGL图形渲染引擎的建立方法，其特征在于，包括如下步骤：步骤S1，基于WebGL标准，建立EVM图形渲染引擎的底层接口模块，包括：封装引擎循环框架，包括事件更新和图像帧更新；封装图形数学库模块，包括向量及计算、欧拉角及计算、四元数及计算、欧拉角转四元数、四元数转欧拉角、射线拾取计算、模型包围盒计算、颜色计算和插值计算；封装基本物体属性模块，包括三角面、线段的核心几何体封装，以支持正方向、球体、导入的自定义模型；步骤S2，对所述底层接口模块进行分类整理和再封装，形成多个功能模块，其中，所述多个功能模块包括：相机模块、相机控制模块、灯光模块、图片精灵模块、材质模块、物理模块、粒子发射器模块、模型数据加载模块、辅助物体模块、事件绑定模块和消息传递模块；步骤S3，根据建立的多个功能模块，对预设的常见业务进行封装整合，建立EVM图形渲染引擎，提供标准API接口，供业务层使用。2.如权利要求1所述的WebGL图形渲染引擎的建立方法，其特征在于，在所述步骤S1中，基于WebGL标准，对WebGL接口进行封装。3.如权利要求1所述的WebGL图形渲染引擎的建立方法，其特征在于，所述多个功能模块包括：着色器、灯光控制模块、相机控制模块、场景控制模块、物理模块、粒子模块、事件绑定模块和消息传递模块。4.如权利要求1所述的WebGL图形渲染引擎的建立方法...

【专利技术属性】
技术研发人员：高鹏，
申请(专利权)人：易网数通北京科技有限公司，
类型：发明
国别省市：北京,11