[发明专利]一种可编辑的网页三维几何造型渲染方法

摘要

一种可编辑的网页三维几何造型渲染方法，属于计算机图形处理技术领域。本发明在使用基于场景树的渲染引擎，解析数据交换协议实现Web3D的基础上，通过解析图形节点中的几何造型，使用渲染引擎几何造型工场生成几何造型对象，通过插件扩展JavaScript底层API接口实现可编辑的三维几何造型渲染。本发明在实现顶点粒度可编辑的Web3D几何造型渲染的基础上，结合了两种基本Web3D渲染思路，提高了几何造型重绘制的效率。本发明属于一种Web富客户端的三维几何造型渲染方法，可应用于动漫行业。

主权项

一种可编辑的网页三维几何造型渲染方法，包括以下步骤：1.客户端接收来自于服务器的X3D格式的数据交换文本；2.解析数据交换文本中X3D根节点，创建与之对应的渲染引擎场景树节点作为场景树根节点；3.如果数据交换文本中出现组节点，创建与之对应的渲染引擎场景树节点；4.如果数据交换文本中出现空间坐标变换节点，创建与之对应的渲染引擎场景树节点，并读取空间坐标变换节点中的变换参数，在此场景树中生成对应的几何造型变换矩阵；5.如果数据交换文本中出现图形节点，创建与之对应的渲染引擎场景树节点作为场景树叶节点；6.解析图形节点中的几何造型节点；如果为简单几何造型节点则使用渲染引擎几何造型工场依照其属性中的参数生成几何造型对象，如果为复杂几何造型节点则生成不包含几何数据的几何造型对象；再将复杂几何造型节点及其子节点中的数据读取到几何造型对象中；几何造型对象使用OpenGL VBO作为数据存储区；几何造型节点具体解析流程为：6.1解析简单几何造型节点；6.1.1将简单几何造型节点的节点名、节点Id、几何造型参数传入准备好的几何图形工场类的几何造型生成接口中；6.1.2几何图形工场类为事先准备的几何造型对象分配顶点数据；视图形为平面或者三维，将顶点向量维数解释为二维或者三维，存入几何造型对象中；计算顶点数量，将顶点向量的数量存入几何造型对象中；即时生成几何造型全部顶点，将顶点数据存入几何造型对象的顶点缓存区中；统计顶点数据大小单位为字节，将大小信息存入几何造型对象中；6.1.3几何图形工场类为事先准备的几何造型对象分配颜色参数；视颜色参数为RGB色或RGBA色，本次默认使用RGBA色，将颜色向量维度解释为三维或者四维；工场类的几何图形生成接口将颜色向量维度存放在几何造型对象中；计算颜色向量数存入几何造型对象中；即时生成几何造型顶点向量对应的全部颜色向量，将颜色数据存入几何造型对象颜色缓冲区中；计算颜色颜色数据大小单位为字节，将大小信息存入几何造型对象中；6.1.4几何图形工场类为事先准备的几何造型对象分配法线参数；法线参数为三维向量；工场类的几何图形接口将法线向量数量存放在几何造型对象中；即时生成几何造型顶点向量对应的的全部法线向量，存入几何造型对象中；计算法线数据大小单位为字节，将法线数据大小信息存入几何造型对象中；6.1.5几何图形工场类为事先准备的几何造型对象分配雾坐标参数；雾坐标参数为单值；工场类的几何图形接口将雾坐标数量存放在几何造型对象中；即时生成几何造型顶点向量对应的全部雾坐标，存入几何造型对象中；计算雾坐标数据大小单位为字节，将雾坐标大小信息存入几何造型对象中；6.1.6几何图形工场类为事先准备的几何造型对象分配纹理坐标参数；纹理坐标使用三维向量表示纹理坐标(s、t、r)，其中r＝0，表示默认使用二维纹理；将纹理坐标数量存放在几何造型对象中；即时生成几何造型顶点向量对应的全部纹理坐标值，存入几何造型对象中；计算纹理坐标数据大小单位为字节，将纹理坐标大小信息存入几何造型对象中；6.1.7几何图形工场类为事先准备的几何造型对象分配索引；视基本图形不同，构成几何造型的顶点解释成不同类型多边形，索引表示几何造型顶点构成多边形的序列；将索引数量、多边形绘制方式、每个多边形单元的顶点数存入几何造型对象；计算索引数据大小单位为字节，将大小信息存入几何造型对象中；6.2解析复杂几何造型节点；6.2.1生成未分配几何造型数据的几何造型对象；6.2.2读取复杂结合节点中存储的顶点数据、节点名，将顶点数存入几何造型对象中；使用解析器将顶点数据、顶点向量维度、顶点个数、顶点数据大小存入几何造型对象中；按照复杂几何造型节点名解释几何造型顶点索引，将索引、多边形绘制方式、索引个数、每个多边形单元的顶点数、索引数据大小存入几何造型对象中；6.2.2如果存在颜色节点，则读取颜色数据、节点名，并将颜色数据存入几何造型对象中。根据颜色节点名将颜色节点数据解释为RGB或RGBA；将颜色向量解释方式、颜色向量数、颜色数据大小存入几何造型对象；6.2.3如果存在法线节点，则读取法线数据，并将法线数据存入几何造型对象中；同时解析并存入几何造型对象的数据还包括法线向量个数、法线数据大小；6.2.4如果存在纹理坐标节点，则读取纹理坐标数据，存入几何造型对象中；同时存入几何造型对象的数据还包括纹理坐标解释方式、纹理坐标个数、纹理数据大小；7.解析图形节点中的外观节点，读取外观数据中光照数据，并存入几何造型对象中；8.完成步骤5以后，将解析完成后的几何造型节点加入到步骤3中生成的场景树节点中；并将该树节点添加到场景树叶节点键值对中；如果解析过程中存在步骤2中生成的场景树节点，则将场景树节点加入到步骤2中生成的节点中；如果组节点包含其余图形节点重复步骤3、4、5、6、7，如果组节点包含子组节点重复步骤2、3、4、5、6、7；直到所有组节点包含子节点解析完成；9.完成步骤8后将生成的子树加入到场景树根节点中；如果还有未解析组节点，则重复步骤2、3、4、5、6、7、8，直到交换协议所有节点解析完成；10.渲染步骤9中生成的场景树；将从场景树根节点到场景树叶节点中的几何变换矩阵连续相乘，得到最终几何变矩阵；将几何变换矩阵与OpenGL的ModelView矩阵相乘；将存放在场景树叶节点下的几何造型对象中的几何造型数据通过OpenGL渲染管线指令发送到OpenGL渲染几何造型；对根节点到每个叶节点的分支做同样操作；如果用户使用JavaScript脚本语言，编辑场景中的某个几何造型对象，则需如下步骤：11.使用JavaScript脚本语言，生成脚本语言插件对象；12.如果用户需要读取几何造型对象，则须指定几何造型对象的Id值，访问数据区，调用脚本语言插件对象的几何造型访问方法；具体包括如下步骤：12.1在场景树叶节点键值对中收索指定Id值对应的几何造型对象；如果不存在此对象则返回错误信息；如果存在几何造型对象则访问几何造型对象的几何造型数据访问接口；12.2调用几何造型对象数据访问方法，查找需访问的几何数据大小信息，如果需查找的数据大小为零，则返回空数据；如果数据大小不为零，则读取数据区数据值，将拷贝的数据值返回到脚本语言中；使用OpenGLMapBuffer方法作为数据访问方法；13.如果用户需编辑几何造型对象，则需指定几何造型对象Id值、访问数据区、新数据值，调用脚本语言插件对象的几何造型编辑方法；具体包括如下步骤：13.1在场景树叶节点键值对中收索指定Id值对应的几何造型对象；如果不存在此对象则返回错误信息；如果存在几何造型对象则访问几何造型对象的几何造型数据编辑接口；13.2调用几何造型对象的数据编辑接口；查找需编辑的几何数据，如果需查找的数据区大小为零则不能编辑；如果查找数据区非零，但不等于新数据值的数据总大小则不允许修改原数据；如果查找数据区非零，且等于新数据值的数据总大小则将数据区更新为新数据；13.3在完成几何造型对象数据修改后，通过JavaScript指令命令系统重新渲染整个场景树。