在相关联的缓冲器与着色之后，最后的步骤是画出所需的原语。&WebGL 提供了两种方法，即：drawArrays()和 drawElements()来绘制模型。
drawArrays()
drawArrays()是用于使用顶点来绘制模型方法。下面是它的语法&-
void drawArrays(enum mode, int first, long count)
此方法采用以下三个参数&-
mode&-&在WebGL中，模型采用原始类型绘制。使用模式，程序员不得不选择通过WebGL提供的原始类型。该选项的可能值为&- gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, 和 gl.TRIANGLES.
first&-&此选项指定启用数组开始元素。它不能是负值。
count&-&此选项指定要呈现的元素数。
如果您使用drawArray()方法s绘制模型，那么WebGL在渲染图形时，也定义几何形状的顺序创建顶点坐标。
如果你想使用 drawArray()方法来绘制一个三角形，那么你必须通过三个顶点并调用drawArrays()方法，如下图所示。
var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);
它会产生一个三角形，如下所示。
假设你想绘制连续的三角形，那么必须通过下一个三个顶点顺序在顶点缓冲区并注明元素的数量呈现为6。
var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);
这会产生一种连续的三角形，如下所示。
drawElements()
drawElements()是用于绘制用顶点和索引模型方法。它的语法如下&-
void drawElements(enum mode, long count, enum type, long offset)
该方法采用以下四个参数&-
mode&-&WebGL模型使用的是原始类型绘制。使用模式，程序员必须选择WebGL提供的原始类型之一。对于此选项可能值的列表是-&l.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, 和 gl.TRIANGLES.
count&-&此选项指定待渲染的元素数量。
type&-&此选项指定必须是UNSIGNED_BYTE或UNSIGNED_SHORT索引的数据类型。
offset&-&此选项指定渲染起点。它通常是第一个元素(0)。
如果您使用drawElements()方法绘制模型，则指数缓冲区对象也应随着顶点缓冲对象创建。如果使用此方法，该顶点数据将被处理一次，并作为中提到的索引多次。
如果想使用索引来画一个三角形，需要通过指数以及顶点并调用drawElements()方法，如下图所示。
var vertices =[-0.5,-0.5,0.0,-0.25,0.5,0.0,0.0,-0.5,0.0];
var indices =[0,1,2];
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
它会产生下面的输出&-
如果你想使用 drawElements()方法来绘制渲染三角形，只需添加其他顶点并注明余下顶点的索引。
var vertices =[-0.5,-0.5,0.0,-0.25,0.5,0.0,0.0,-0.5,0.0,0.25,0.5,0.0,0.5,-0.5,0.0];
var indices =[0,1,2,2,3,4];
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
它会产生下面的输出&-
所需的操作
绘制一个原语之前，您需要执行一些操作，这说明如下。
清除Canvas
首先，应该用clearColor()方法清除canvas。可以传递所需颜色的RGBA值作为参数传递到这个方法。然后WebGL清除canvas，并使用指定的颜色进行填充。因此，你可以用这个方法来设置背景颜色。
看看下面的例子。在这里，我们传递一个灰色的RGBA值。
gl.clearColor(0.5, 0.5, .5, 1);
启用深度测试
使用&enable()&方法使深度测试，如下所示。
gl.enable(gl.DEPTH_TEST);
清除颜色缓冲区位
清除颜色以及通过使用 clear()方法，如下图所示的深度缓冲。
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
设置浏览端口
观察端口表示包含绘图缓冲器的渲染结果的矩形可视区域。可以使用 viewport() 方法来设置视口的尺寸。在下面的代码，观察口的尺寸被设置为所述画布的大小。
gl.viewport(0,0,canvas.width,canvas.height);
加QQ群啦！
JAVA技术QQ群：
MySQL/SQL语句QQ群：
Python QQ群：
大数据开发技术：
易百教程移动端：请扫描本页面底部(右侧)二维码关注微信公众号，或直接手机访问：
上一篇：下一篇：WebGL入门_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
&&WebGL入门教程。
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩41页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢所有回答(1)
设置material.map.wrapS和material.map.wrapT
&&&您需要以后才能回答，未注册用户请先。404 - 找不到文件或目录。
404 - 找不到文件或目录。
您要查找的资源可能已被删除，已更改名称或者暂时不可用。[发明专利]基于webgl的三维模型轻量化展示技术在审
申请/专利权人：;
公开/公告号：CNA
发明/设计人：;;;
公开/公告日：
主分类号：
搜索关键词：
【说明书】：
技术领域本发明涉及一种在web上展示三维模型的技术，尤其是涉及一种基于webgl的三维模型轻量化展示技术。背景技术随着网络技术和计算机技术的发展，基于Web的三维可视化技术也得到了快速的发展，并有着广泛的应用。但传统的用于实现三维数据的Web3D技术，包括VRML、Java3D、Flash3D等技术，都需要安装插件或着加载组件，而且具有操作性复杂、兼容性差等缺点。webgl规范的出现使得三维数据无需插件直接在网络浏览器中的可视化成为现实。webgl可以为浏览器提供硬件图形加速渲染，借助系统显卡，开发人员可以在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。webgl技术标准免去了开发网页专用渲染插件的麻烦，能够跨平台且被众多浏览器厂商广泛支持。目前webgl越来越被广泛的用于在web上展示3D模型，完成各种交互。但很多原始3D模型是在PC三维设计软件中产生的，格式会多种多样，并不能被webgl直接解析，而且三维产品模型往往复杂程度高、数据规模庞大，在基于web展示时会由于数据过大导致无法加载或者加载过于缓慢，严重影响用户体验。在进行webgl显示前，首先要对原始格式的3D模型数据进行解析和转换，在转换过程中对数据进行轻量化，得到尽可能小的中间格式文件，使3D模型能被快速加载，并减少服务器上3D模型所占用的空间，是基于webgl展示技术的关键。发明内容为了克服现有技术存在的不足，本发明提供了一种基于webgl的三维模型轻量化展示技术，其可基于webgl直接在浏览器中进行展示，缩减了模型大小，提高了模型在网页中的加载和显示速度。本发明采用的技术方案是：一种基于webgl的三维模型轻量化展示技术，包括下列步骤：(1)对第三方格式的三维模型进行预处理，获取所有几何对象并去除重复的对象，再根据其材质信息生成对应的材质对象，根据模型树结构生成对应的场景树结构，若模型存在动画，则生成对应的动画树结构；(2)对所有几何对象进行预处理，获取几何对象的离散三角形和离散线段数据，离散三角形包括顶点数据、UV数据、法向数据和索引数据，离散线段包括顶点数据和索引数据；(3)对离散三角形的索引数据进行排序并对其值进行缩小化处理，以提高压缩算法对索引数据的压缩率；先找出每个三角形的索引的最小值，以最小值重新定义三角形索引顺序，而后将所有三角形以第一个顶点和第二个顶点的索引大小进行从小到大的排序，最后利用错位相减法对所有三角形的索引进行缩小化处理；(4)对离散三角形的法向量按照象限区分后进行整数化处理，减少法向数据存储的字节数；(5)对离散线段的索引数据进行缩小化处理；(6)对所有几何对象进行分块处理；(7)对所有的几何对象的分块分别进行lzma的压缩处理并生成后缀为bin的若干文件；(8)对所有几何对象和材质对象的属性数据、场景树和动画树进行json化处理，生成后缀为js的主文件，记录几何对象、材质对象、场景树结构、动画树结构以及其他自定义数据；(9)前端分别读取js主文件和bin文件，对bin文件进行解压后，再对离散三角形和离散线段的数据进行还原处理，根据场景树结构和动画树结构分别建立场景和动画对象，之后利用webgl渲染场景和动画对象。作为优选，所述的步骤(1)按下述方法进行：先通过相关api获取模型中所有几何对象节点，然后对重复节点去冗余，记录其相关属性数据，同时获取几何对象对应的材质信息，生成材质对象，最后根据模型树结构生成对应的场景树结构。作为优选，所述的步骤(2)按下述方法进行：根据设置的精细度(粗糙、中等、精细)，通过相关api控制离散精度，获取离散三角形和离散线段数据，其中，离散三角形的数据定义为：顶点数据为每个顶点坐标由三个单精度浮点数表示；UV数据为每个顶点的UV由两个单精度浮点数表示；法向数据为每个顶点的法向量由三个单精度浮点数表示；索引数据为每个三角形的索引由4位的三个整数表示；其中，离散线段的数据形式为：顶点数据为每个顶点坐标由三个单精度浮点数表示；索引数据为每个线段的索引由4位的两个整数表示。作为优选，所述的步骤(3)按下述方法进行：对于每个三角形的三个索引v1、v2和v3，在右手法则的约束下，找出其中的最小值，假定最小值为v2，则新的索引顺序为v2、v3、v1，将所有三角形按照第一个顶点和第二个顶点的索引大小进行从小到大的排序，假设排序后的离散三角形索引为f(n)＝(v1,v2,v3,v4,v5,v6,…,vn)，其中n为所有三角形的顶点数量，利用错位相减法进行缩小，对于第一个三角形(v1,v2,v3)，执行v2＝v2–v1和v3＝v3–v1的运算，对于其他三角形，如(v4,v5,v6)，先执行v6＝v6–v4的运算，然后若v4等于v1，则执行v5＝v5–v2的运算，若v4不等于v1，则执行v5＝v5–v4的运算，最后执行v4＝v4–v1的运算，其他三角形依次类推。作为优选，所述的步骤(4)按下述方法进行：对于离散三角形的归一化法向量(n1,n2,n3)，首先在三维空间的八象限中计算出其值所在的对应象限并记录下象限编号gradNum，其中(0,1,2,3,4,5,6,7)分别代表一至八象限，象限编号用一个字节表示；若法向的精度设置为中等，则执行n1＝abs(n1)*、n2＝abs(n2)*和n3＝abs(n3)*的运算，值取整后每个分量用2个字节表示；若法向的精度设置为粗糙，则执行n1＝abs(n1)*255+0.5、n2＝abs(n2)*255+0.5和n3＝abs(n3)*255+0.5的运算，值取整后每个分量用1个字节表示；经过上述处理后，一个包含3个浮点数，12个字节的法向数据可以用(gradNum,n1,n2,n3)表示，中等精度下压缩为7个字节，粗糙精度下压缩为4个字节。作为优选，所述的步骤(5)按下述方法进行：对于离散线段的索引，假设其为f(m)＝(v1,v2,v3,v4,…,vm)，其中m为所有线段的端点数量，若f(m)满足连续递增的条件，则遍历所有索引，并分别执行vm＝vm–v(m-1)的运算。作为优选，所述的步骤(6)按下述方法进行：对于所有几何对象，其几何数据经过步骤(3)、(4)和(5)的处理后，按照设定的顶点数量和UV数量，将其分成多个分块chunk，分为(geometryChunk1,geometryChunk2…geometryChunkN)，将一个大数据转为多块小数据，以支持渐进加载和显示。作为优选，所述的步骤(7)按下述方法进行：经过步骤(6)的处理后，将其分块(geometryChunk1,geometryChunk2…geometryChunkN)分别利用lzma压缩算法对其进行压缩并分别生成对应的bin文件。作为优选，所述的步骤(8)按下述方法进行：对所有几何对象和材质对象的属性数据进行json化处理，生成后缀为js的主文件，记录几何对象和材质对象的引用关系以及其他自定义数据，几何对象的属性数据包括唯一标识符(uuid)、类型(type)和空间包围盒(box)，材质对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、基础颜色值(color)、环境光(ambient)、镜面光(specular)、自发光(emissive)、自发光强度(emissiveIntensity)、环境反射强度(reflectivity)、折射系数(refractionRatio)、镜面光强度(shininess)、不透明度(opacity)、基础贴图(mapDiffuse)、凹凸贴图(mapBump)、凹凸系数(bumpScale)、线段宽度(linewidth)、粗糙系数(roughness)、金属光泽系数(metalness)、双面渲染(doubleSided)；场景树结构中每个子对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、变换矩阵(matrix)、绑定的几何对象的ID(geometry)、绑定的材质对象的ID(material)、所有的子对象(children)，动画树中每个动画的属性数据包括唯一标识符(uuid)、动画名称(name)、每秒的帧率(fps)、动画时长(duration)、动画对应的场景树结构(animationObject)、动画的关键帧数据(tracks)。作为优选，所述的步骤(9)按下述方法进行：前端分别读取js主文件和bin文件，对bin文件进行解压后，按照步骤(3)、步骤(4)、步骤(5)中的方法，再对离散三角形和离散线段的数据进行还原处理，同时根据js主文件中的场景树结构和动画树结构分别建立场景和动画对象，之后利用webgl渲染场景和动画对象。
友情链接：交换友情链接需要网站权重大于3，网站收录10W以上，如符合条件，请联系QQ：。
行业网站：相关推荐：
400-周一至周五 9:00-18:00
服务热线：400-投诉建议：022-
扫一扫，微信关注高智网
高智&让创新无法想象2000万件&专利数据}