一种基于WebGL的3D渲染系统及方法

摘要

本发明公开了一种基于WebGL的3D渲染系统及方法，包括场景对象库、特效库、动画框架库、矩形计算库、图形用户界面库和辅助模块库，其中，场景对象库包括场景对象模块、灯光对象模块、相机对象模块、材质对象模块、粒子对象模块、模型对象模块和纹理对象模块；动画框架库包括蒙皮动画模块和骨骼动画模块；矩形计算库包括向量计算模块和模型包围盒计算模块。本发明为用户提供一种中间件机制，从而使用户在无需了解底层细节的情况下，快速开发交互式三维图形应用；同时也支持GLSL 300es，无需加载，可以直接进行调用；用户无需熟悉计算机图形学相关知识体系也可以从事开发，降低了使用难度，并且缩短了开发周期；提高了开发的效率，降低了开发的成本。

说明书

技术领域

本发明涉及一种3D渲染系统，特别涉及一种基于WebGL的3D渲染系统及方法。

背景技术

WebGL(Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样就可以再浏览器里更流畅地展示3D场景和模型。它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持。而且它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

现有的WebGL暴露的接口较为底层，需要熟悉计算机图形学相关知识体系才能从事相关开发，使用难度非常高，而且开发周期较长；现有的基于WebGL的三维引擎封装度非常低，无法满足前端开发人员开发三维功能的需求；现有的技术的缺点包括开发成本高、效率低和周期较长等缺点。

发明内容

本发明要解决的技术问题是克服现有技术的缺陷，提供一种基于WebGL的3D渲染系统及方法。

为了解决上述技术问题，本发明提供了如下的技术方案：

本发明一种基于WebGL的3D渲染系统，包括场景对象库、特效库、动画框架库、矩形计算库、图形用户界面库和辅助模块库，其中，

所述场景对象库包括场景对象模块、灯光对象模块、相机对象模块、材质对象模块、粒子对象模块、模型对象模块和纹理对象模块；

所述特效库包括屏幕空间环境光遮蔽模块、泛光模块、高动态范围成像模块、色调映射模块、边框选中模块、发光选中模块、扫光模块、3D Tiles加载模块和倾斜摄影模块；

所述动画框架库包括蒙皮动画模块和骨骼动画模块；

所述矩形计算库包括向量计算模块和模型包围盒计算模块。

作为本发明的一种优选技术方案，所述图形用户界面库用于在页面调整对象属性。

作为本发明的一种优选技术方案，所述辅助模块库包括位置显示模块、包围盒模块和坐标轴模块。

作为本发明的一种优选技术方案，所述场景对象库的所述场景对象模块用于显示三维模型；

所述场景对象库的所述灯光对象模块用于光源发射和光线反射；

所述场景对象库的所述相机对象模块用于视角显示；

所述场景对象库的所述材质对象模块用于赋予三维模型材质特征，其中，

所述材质对象模块包括默认材质、PBR材质、自定义绘制材质、着色器材质、公告牌材质、地形材质和边框线材质；

所述场景对象库的所述粒子对象模块用于进行粒子渲染；

所述场景对象库的模型对象模块压力用于模型的加载，其中，

加载的模型包括3D OBJ、FBX、和glTF；

所述场景对象库的所述纹理对象模块包括DDS纹理格式、HDR纹理格式、Basis纹理格式和Image纹理格式。

作为本发明的一种优选技术方案，所述特效库的所述屏幕空间环境光遮蔽模块用于输出数据纹理；

所述特效库的泛光模块用于实现光溢出效果；

所述特效库的高动态范围成像模块用于渲染最亮和最暗细节；

所述特效库的色调映射模块用于转换高动态范围成像模块为LDR；

所述特效库的边框选中模块用于显示描边效果；

所述特效库的扫光模块用于实现建筑发光效果；

所述特效库的3D Tiles加载模块用于地理3D数据流式传输和渲染；

所述特效库的倾斜摄影模块包括OSGB处理模块、FBX处理模块和STL处理模块。

作为本发明的一种优选技术方案，所述动画框架库包括蒙皮动画模块和骨骼动画模块。

作为本发明的一种优选技术方案，所述矩形计算库包括二维三维向量计算模块和四元数计算模块。

本发明还包括一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，包括如下步骤：

步骤S1：初始化WebGL上下文；

步骤S2：初始化着色器；

步骤S3：初始化数据缓存；

步骤S4：初始化UV纹理；

步骤S5：创建纹理；

步骤S6：绑定数据到所述步骤S5中所述的纹理；

步骤S7：显示帧数据；

步骤S8：释放资源。

优选的，所述步骤S2中，初始化着色器包括如下步骤：

步骤S201：创建着色器；

步骤S202：附加源到着色器；

步骤S203：进行编译程序；

步骤S204：进行合并程序。

优选的，所述步骤S3中，初始化数据缓存在顶点坐标系和纹理坐标系内进行，包括如下步骤：

步骤S301：创建缓冲区；

步骤S302：绑定缓冲区；

步骤S303：将数据传递到缓冲区；

步骤S304：接触绑定。

优选的，所述步骤S4中，初始化UV纹理包括如下步骤：

步骤S401：创建U纹理和V纹理；

步骤S402：获取y采样器、u采样器和v采样器的存储位置；

步骤S403：将纹理单元编号传给着色器，其中，

分别编号0,1,2。

优选的，所述步骤S5中，创建纹理包括如下步骤：

步骤S501：创建纹理对象；

步骤S502：向目标绑定纹理对象；

步骤S503：配置纹理参数，其中，

配置参数包括纹理大小、缩小倍数、水平填充数值和垂直填充数值。

优选的，所述步骤S6中，绑定数据到所述步骤S5中所述的纹理包括如下步骤：

步骤S601：上传UV数据到纹理；

步骤S602：激活纹理单元；

步骤S603：绑定纹理；

步骤S604：指定绑定的纹理对象。

优选的，所述步骤S7中，显示帧数据包括如下步骤：

步骤S701：关联缓冲区对象和着色器程序；

步骤S702：获取属性的位置；

步骤S703：启用属性；

步骤S704：分配属性；

步骤S705：绘制所需对象；

步骤S706：在屏幕上进行显示。

优选的，所述步骤S8中，释放资源包括如下步骤：

步骤S801：释放着色器程序；

步骤S802：释放缓冲区；

步骤S803：释放YUV纹理。

优选的，所述步骤S204中，进行合并程序包括如下步骤：

步骤S20401：创建程序对象；

步骤S20402：附加着色器；

步骤S20403：链接着色器；

步骤S20404：在属性赋值后使用程序。

优选的，所述步骤S701中，关联缓冲区对象和着色器程序包括如下步骤：

步骤S70101：清除目标颜色；

步骤S70102：清除颜色缓冲区位；

步骤S70103：设置浏览窗口；

步骤S70104：绑定数据到纹理；

步骤S70105：使用程序。

本发明还包括另外的一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，包括如下步骤：

步骤SS1：创建场景对象；

步骤SS2：绑定渲染目标；

步骤SS3：创建镜头；

步骤SS4：添加灯光；

步骤SS5：添加模型；

步骤SS6：进行屏幕渲染显示。

本发明还包括另外的一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，其特征在于，包括如下步骤：

步骤SSS1:获取场景对象，

根据用户提供得容器，创建好canvas画布，新建场景对象，包括指定环境光，指定区域绘制颜色，是否开启雾化，雾化信息，是否开启动画，是否开启特效，曝光度等信息；

步骤SSS2：获取三维模型对象，

通过URL或者二进制数据来创建模型对象，通常还需要对三维模型进行数据格式解析，常见的三维模型数据格式包括GLTF、OBJ，数据格式解析的目的是将三维模型转为显示所用的通用格式，然后计算出顶点信息利用WebGL接口加入到场景中呈现；

步骤SSS3:设置三维模型对象属性，

加入到场景中之后可以给模型设置自定义得材质贴图，位置大小等，还可以设置其光照属性，是否接受阴影，是否投射阴影，是否开启双面显示等；

步骤SSS4：添加镜头旋转交互，

可以给镜头添加一些事件，比如说是否开启动画模式，旋转平移缩放等；

步骤SSS5：渲染，基于各个所述待渲染模型实例的显示位置信息和属性，以及各个所述待渲染模型实例的渲染结果，生成显示画面；

所述步骤SSS5中，为了更真实地显示三维模型，则需要添加一定光源、材质、纹理完善场景和模型细节，包括：

光源，包括用于模拟自然界多种光源特点来进行渲染，例如直线光，点光源，聚光灯，环境反射光；

材质，包括用于模拟自然界物体反射光的特点模拟的材质，如镜面反射材质，漫反射材质；

纹理，包括用于通过图片给材质赋予纹理，使得物体更真实逼真。

本发明所达到的有益效果是：本发明为用户提供一种中间件机制，从而使用户在无需了解底层细节的情况下，快速开发交互式三维图形应用；WebGL的GLSL 100，同时也支持GLSL300es，无需加载，可以直接进行调用；用户无需熟悉计算机图形学相关知识体系也可以从事开发，降低了使用难度，并且缩短了开发周期；提高了开发的效率，降低了开发的成本。

附图说明

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

图1是本发明的流程示意图之一；

图2是本发明的流程示意图之二。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

实施例

本发明提供一种基于WebGL的3D渲染系统，包括场景对象库、特效库、动画框架库、矩形计算库、图形用户界面库和辅助模块库，其中，

所述场景对象库包括场景对象模块、灯光对象模块、相机对象模块、材质对象模块、粒子对象模块、模型对象模块和纹理对象模块；

所述特效库包括屏幕空间环境光遮蔽模块、泛光模块、高动态范围成像模块、色调映射模块、边框选中模块、发光选中模块、扫光模块、3D Tiles加载模块和倾斜摄影模块；

所述动画框架库包括蒙皮动画模块和骨骼动画模块；

所述矩形计算库包括向量计算模块和模型包围盒计算模块。

进一步的，所述图形用户界面库用于在页面调整对象属性。

所述辅助模块库包括位置显示模块、包围盒模块和坐标轴模块。

所述场景对象库的所述场景对象模块用于显示三维模型；

所述场景对象库的所述灯光对象模块用于光源发射和光线反射，光源发射包括平行光、点光源光和环境光(间接光)，光线反射包括漫反射和环境反射；

所述场景对象库的所述相机对象模块用于视角显示；

所述场景对象库的所述材质对象模块用于赋予三维模型材质特征，其中，

所述材质对象模块包括默认材质、PBR材质(基于物理规则的渲染即PBR，这个概念是指使用逼真的阴影/光照模型与测得的材质参数值一起准确地表示真实世界的材质)、自定义绘制材质、着色器材质、公告牌材质、地形材质和边框线材质；

所述场景对象库的所述粒子对象模块用于进行粒子渲染，粒子渲染即粒子系统，是一种特殊的网元，没有具体的面，而是由一系列内部的顶点组成的，每个顶点显示给定的贴图。它在3D场景中可以展出烟雾，火焰等效果。纯粹由GPU计算，每次运行时候只需传入时间和其他极少的参数，性能好，但是控制难度大，绘制批次不易管理。一个容器一次生成很多粒子，一个大的粒子容器只需绘制一次，通过给GPU动态传入更改了的数据来实现动态图像。这种方式特点是在CPU端去控制很方便，可以轻易实现大量的各种效果而且很多效果只会draw一次。缺点是动态更新GPU对应的数据。而且大部分计算在CPU端，可能会耗CPU性能；

所述场景对象库的模型对象模块压力用于模型的加载，其中，加载的模型包括3DOBJ、FBX、和glTF，同时也支持glTF扩展插件，如KHR blend、KHR draco mesh compression、KHR lights punctual、KHR materials common、KHR materials unlit、KHR texturetransform、KHR materials pbrSpecularGlossiness和MSFT_lod等等；

所述场景对象库的所述纹理对象模块包括DDS纹理格式、HDR纹理格式、Basis纹理格式和Image纹理格式，

DDS纹理格式是一种纹理压缩格式S3TC(S3 Texture Compression)S3TC就是通过压缩方式,利用有限的纹理缓存空间来存储更多的纹理,因为它支持6:1的压缩比例,所以6M的纹理可以被压缩为1M存放在材质缓存中,从而在节约了缓存的同时也提高了显示性能.特性是占用磁盘空间大，但其纹理压缩格式的特性，可以节约缓存使占用内存大大降低，一些3D建模游戏会运用DDS贴图，提高游戏技能，顺畅度也大幅提高；

HDR纹理格式将每个曝光瞬间相对应最佳细节的LDR图像(Low-Dynamic Range，低动态范围)合成为最终的HDR图像；通俗来说，就是将同一个画面进行多次曝光，再合成为一张图像；

Basis纹理格式即Basis Universal纹理格式在GPU上的资源占用比传统JPEG格式小6-8倍，但文件存储所需空间大小却与JPEG相似，这使得它成为当前那些效率低下且无法跨平台运行的GPU压缩方法(如JPEG、PNG等)的一个良好替代方案。Basis Universa纹理格式创建的压缩文件适用于各种常见应用场景：游戏、VR和AR、地图、照片、短视频等；

Image纹理格式即为普通的PNG、JPG等常用图片贴图。

所述特效库的所述屏幕空间环境光遮蔽模块用于输出数据纹理，一般光照模型中，环境光用于模拟光线的二次散射，从而使得不受直接光照的地方也能有相应的亮度。在犄角旮旯里，不应该有太多的光被散射出来，所以犄角旮旯和露出表面的环境光不应该相同。而在光照模型中，环境光是一个定值。SSAO算法基于屏幕后处理，或者说直接对接延迟渲染。因为需要对每一个片元都运行一次算法，消耗巨大。前向渲染根本无法使用。其次，SSAO算法被插在GBuffer PASS之后正式渲染之前。它的输出也是一张数据纹理(记录着每个片元受多少环境光)。正式渲染时，仅仅只需要在应用环境光的时候乘上SSAO纹理中的数据即可；

所述特效库的泛光模块用于实现光溢出效果，用来模拟光源发光或发热的技术，区分明亮光源的方式是使它们发出光芒，光源的光芒向四周发散，这样观察者就会产生光源或亮区的确是强光区。原理：首先设置一个泛光的亮度阈值，然后我们根据屏幕的渲染图来进行筛选，所有小于这个阈值的像素过滤掉(黑色像素)，其他像素保留，这样子就只保留了要发光的像素，其他的都是黑色泛光效果是由衍射效果产生的，我们现实世界中看到的泛光效果，最亮的地方实际上是会向暗的地方扩散的，也就是说在亮的地方，边界是不明显的，所以我们就需要对泛光是部分，也就是我们上一步操作的结果图片进行模糊操作，达到光溢出的效果，最后，我们将处理过的图像和原图像进行叠加，就得到了最终的效果。

所述特效库的高动态范围成像模块用于渲染最亮和最暗细节；

所述特效库的色调映射模块用于转换高动态范围成像模块为LDR，在常用3D引擎渲染管线中，我们对于R、G、B通道颜色信息的数值范围通常设置在[0,1]之间(或者是[0,255])。其中，0代表没有光亮度，1代表显示器能够显示的最大光亮度。这个表示方式虽然直接易懂，但它并不能反映真实世界中光亮度的情况。在真实世界的光照环境中，光亮强度有时候会超过显示器能够显示的最大亮度。而且，人眼在观察真实世界的物体时，会根据光照强度进行自我调节。因此，更加真实的渲染方式是让颜色值超过1。这种光照计算方式或环境光照图就是我们常常在游戏引擎中看到的HDR(High Dynamic Range)光照或者HDR环境贴图。但是，采用HDR渲染出来的亮度值会超过显示器能够显示最大值。此时，我们需要将光照结果从HDR转换为显示器能够正常显示的LDR。这一过程我们通常称之为色调映射；

所述特效库的边框选中模块用于显示描边效果，即让物体表面有一层遮罩层，原理：首先要让模型更“胖”一点，能够把我们原来的大小包裹住；微观一点来看，一个面，如果我们让它向外拓展，而我们指的外，也就是这个面的法线所指向的方向，那么就让这个面朝着法线的方向平移一点；再微观一点来看，对于顶点来说，也就是vertex shader真正要写的内容了，正常计算顶点的时候，传入的vertex会经过MVP变换，最终传递给fr agmentshader，那么我们就可以在这一步让顶点沿着法线的方向稍微平移一些。然后先渲染“胖”的模型，再在相同位置渲染原模型将两者重复部分遮挡，这样就显示出描边效果了。

所述特效库的扫光模块用于实现建筑发光效果，首先需要提供一个中心点，根据计算每个顶点到中心点的距离，如果是在范围内，在初始颜色上，也就是建筑本身的颜色上叠加一个自定义的颜色；

所述特效库的3D Tiles加载模块用于地理3D数据流式传输和渲染，3D Tiles是在glTF的基础上，加入了分层LOD的结构后得到的产品，专门为大量地理3D数据流式传输和海量渲染而设计的一种格式。3D Tiles中，一个tileset是由一系列tile组成的树状结构。每个tile可以引用下面的其中一种格式：b3dm(大型异构3D模型，包括三维建筑物、地形等)，i3dm(3D模型实例，如树、风力发电机等)，pnts(点云)，cmpt(以上不同格式的切片组合到一个切片中)；

所述特效库的倾斜摄影模块包括OSGB处理模块、FBX处理模块和STL处理模块，OSGB是目前市面上生产的倾斜模型，尤其Smart3D处理的倾斜摄影三维模型数据的组织方式一般是二进制存贮的、带有嵌入式链接纹理数据(.jpg)的OSGB格式，在本实施例中，首先需要转换成3DTiles的格式，然后根据json文件的信息去渲染场景。

所述动画框架库包括蒙皮动画模块和骨骼动画模块，蒙皮动画(Morph动画)是直接指定动画每一帧的顶点位置，其动画关键中存储的是Mesh所有顶点在关键帧对应时刻的位置。关节动画的模型不是一个整体的Mesh，而是分成很多部分(Mesh)，通过一个父子层次结构将这些分散的Mesh组织在一起，父Mesh带动其下子Mesh的运动，各Mesh中的顶点坐标定义在自己的坐标系中，这样各个Mesh是作为一个整体参与运动的。动画帧中设置各子Mesh相对于其父Mesh的变换(主要是旋转，当然也可包括移动和缩放)，通过子到父，一级级的变换累加(当然从技术上，如果是矩阵操作是累乘)得到该Mesh在整个动画模型所在的坐标空间中的变换(从本文的视角来说就是世界坐标系了，下同)，从而确定每个Mesh在世界坐标系中的位置和方向，然后以Mesh为单位渲染即可；

骨骼动画，在骨骼控制下，通过顶点混合动态计算蒙皮网格的顶点，而骨骼的运动相对于其父骨骼，并由动画关键帧数据驱动。一个骨骼动画通常包括骨骼层次结构数据，网格(Mesh)数据，网格蒙皮数据(Skin Info)和骨骼的动画(关键帧)数据。

所述矩形计算库包括二维三维向量计算模块和四元数计算模块，大量封装了vec2，vec3，vec4，mat，quat等矩阵向量得计算，用户可以直接利用API去计算。

如图1，本发明还提供一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，包括如下步骤：

步骤S1：初始化WebGL上下文，其步骤具体为获取上下文对象；

步骤S2：初始化着色器；

步骤S3：初始化数据缓存；

步骤S4：初始化UV纹理；

步骤S5：创建纹理；

步骤S6：绑定数据到步骤S5中的纹理；

步骤S7：显示帧数据；

步骤S8：释放资源。

进一步的，步骤S2中，初始化着色器包括如下步骤：

步骤S201：创建着色器；

步骤S202：附加源到着色器；

步骤S203：进行编译程序；

步骤S204：进行合并程序。

进一步的，步骤S3中，初始化数据缓存在顶点坐标系和纹理坐标系内进行，包括如下步骤：

步骤S301：创建缓冲区；

步骤S302：绑定缓冲区；

步骤S303：将数据传递到缓冲区；

步骤S304：接触绑定。

进一步的，步骤S4中，初始化UV纹理包括如下步骤：

步骤S401：创建U纹理和V纹理；

步骤S402：获取y采样器、u采样器和v采样器的存储位置；

步骤S403：将纹理单元编号传给着色器，其中，

分别编号0,1,2。

进一步的，步骤S5中，创建纹理包括如下步骤：

步骤S501：创建纹理对象；

步骤S502：向目标绑定纹理对象；

步骤S503：配置纹理参数，其中，

配置参数包括纹理大小、缩小倍数、水平填充数值和垂直填充数值。

进一步的，步骤S6中，绑定数据到步骤S5中的纹理包括如下步骤：

步骤S601：上传UV数据到纹理；

步骤S602：激活纹理单元；

步骤S603：绑定纹理；

步骤S604：指定绑定的纹理对象。

进一步的，步骤S7中，显示帧数据包括如下步骤：

步骤S701：关联缓冲区对象和着色器程序；

步骤S702：获取属性的位置；

步骤S703：启用属性；

步骤S704：分配属性；

步骤S705：绘制所需对象；

步骤S706：在屏幕上进行显示。

进一步的，步骤S8中，释放资源包括如下步骤：

步骤S801：释放着色器程序；

步骤S802：释放缓冲区；

步骤S803：释放YUV纹理。

进一步的，步骤S204中，进行合并程序包括如下步骤：

步骤S20401：创建程序对象；

步骤S20402：附加着色器；

步骤S20403：链接着色器；

步骤S20404：在属性赋值后使用程序。

进一步的，步骤S701中，关联缓冲区对象和着色器程序包括如下步骤：

步骤S70101：清除目标颜色；

步骤S70102：清除颜色缓冲区位；

步骤S70103：设置浏览窗口；

步骤S70104：绑定数据到纹理；

步骤S70105：使用程序。

如图2，本发明还提供另外的一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，包括如下步骤：

步骤SS1：创建场景对象；

步骤SS2：绑定渲染目标，即屏幕渲染目标位置；

步骤SS3：创建镜头，绑定到场景中；

步骤SS4：添加灯光，即创建灯光对象，添加到场景中；

步骤SS5：添加模型，并使其在场景中显示；

步骤SS6：进行屏幕渲染显示。

在本实施例，还提供一种基于WebGL的3D渲染方法，应用于前述的基于WebGL的3D渲染系统，其特征在于，包括如下步骤：

步骤SSS1:获取场景对象，

根据用户提供得容器，创建好canvas画布，新建场景对象，包括指定环境光，指定区域绘制颜色，是否开启雾化，雾化信息，是否开启动画，是否开启特效，曝光度等信息；步骤SSS2：获取三维模型对象，

通过URL或者二进制数据来创建模型对象，通常还需要对三维模型进行数据格式解析，常见的三维模型数据格式包括GLTF、OBJ，数据格式解析的目的是将三维模型转为显示所用的通用格式，然后计算出顶点信息利用WebGL接口加入到场景中呈现；

步骤SSS3:设置三维模型对象属性，

加入到场景中之后可以给模型设置自定义得材质贴图，位置大小等，还可以设置其光照属性，是否接受阴影，是否投射阴影，是否开启双面显示等；

步骤SSS4：添加镜头旋转交互，

可以给镜头添加一些事件，比如说是否开启动画模式，旋转平移缩放等；

步骤SSS5：渲染，基于各个所述待渲染模型实例的显示位置信息和属性，以及各个所述待渲染模型实例的渲染结果，生成显示画面；

所述步骤SSS5中，为了更真实地显示三维模型，则需要添加一定光源、材质、纹理完善场景和模型细节，包括：

光源，包括用于模拟自然界多种光源特点来进行渲染，例如直线光，点光源，聚光灯，环境反射光；

材质，包括用于模拟自然界物体反射光的特点模拟的材质，如镜面反射材质，漫反射材质；

纹理，包括用于通过图片给材质赋予纹理，使得物体更真实逼真。

具体的，本发明的图形用户界面库，方便直接在页面调整对象的属性；辅助模块库包括位置、包围盒、坐标轴等辅助物体，方便功能开发调试；特效库可以支持多种类型特效；矩形计算库可以直接使用API的方式去计算向量、矩阵等；和其他3D引擎不同(不停的绘制)，只有在场景变化时才重绘场景，大大的提升了引擎的性能。

本发明为用户提供一种中间件机制，从而使用户在无需了解底层细节的情况下，快速开发交互式三维图形应用；WebGL的GLSL 100，同时也支持GLSL 300es，无需加载，可以直接进行调用；用户无需熟悉计算机图形学相关知识体系也可以从事开发，降低了使用难度，并且缩短了开发周期；提高了开发的效率，降低了开发的成本。如使用in代替attribute；varying被in/out替代；用texture代替texture2D，等等。

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

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

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

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

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。