简介JavaScriptWebGL基本疑惑经过一些优化，然后尝试绘制一个普通的二维曲面。WebGL中的几何图形最终是由三角形组成的，从三角形切入比较合适。来源我的GitHub画了一个三角形。这是一个例子。在画直线的基础上，主要的变化是：vertexdrawingprimitivevertex三角形有三个顶点。在基本疑点中，我们知道坐标系是右手坐标系。个人习惯描述以图形中心为Origin的顶点顺序，从第一象限到第四象限。letvertices=[0.5,0.5,0.0,//第一象限-0.5,0.5,0.0,//第二象限-0.5,-0.5,0.0,//第三象限];//这次绘制三角形图元绘制的是一个面，drawArrays中的绘制模式变为gl.TRIANGLES。顺便看看原语的几种模式。gl.POINTS：绘制一系列点。gl.LINES:绘制一系列单独的线段，每段以两个点为端点，线段之间互不相连。例如，如果您有顶点A、B、C、D、E和F，您将得到三个线段。gl.LINE_STRIP：绘制一系列线段，将一点连接到下一点。gl.LINE_LOOP:绘制一系列线段，前一个点连接下一个点，最后一个点连接第一个点。gl.TRIANGLES：绘制一系列三角形，每个三角形以三个点为顶点。例如，有6个顶点A、B、C、D、E、F，将绘制2个三角形：ABC和DEF。gl.TRIANGLE_STRIP：用于绘制具有共享边的三角形。从第二个三角形开始，一次读取一个顶点，与前一个三角形的最后两个顶点组成一个三角形，以此类推。例如，有6个顶点A、B、C、D、E、F，将绘制4个三角形：ABC和BCD以及CDE和DEF。gl.TRIANGLE_FAN：绘制具有共享边的三角形。从第二个三角形开始，一次读取一个顶点，用第一个顶点和前面的最后一个顶点组成一个三角形，以此类推。例如，有6个顶点A、B、C、D、E、F，将绘制4个三角形：ABC和ACD以及ADE和AEF。执行过程这里把绘制三角形的执行过程可视化，可以帮助加深理解。高清处理上面的例子，模糊和锯齿在高清屏幕上很明显，但它与处理2d上下文的模糊有点不同。主要区别在于，在WebGL中，需要使用视口方法来指定从标准设备到窗口坐标的映射变换。详见本文中的解释。这是高清示例。函数WebGLHD(w=300,h=150){constratio=window.devicePixelRatio||1;constcanvas=document.createElement("canvas");constcontext=canvas.getContext("webgl");//高清画面模糊问题处理canvas.width=w*ratio;//实际渲染像素canvas.height=h*ratio;//实际渲染像素canvas.style.width=`${w}px`;//控制显示大小画布。style.height=`${h}px`;//控制显示尺寸context.viewport(0,0,context.canvas.width,context.canvas.height);}在绘制矩形之前说过，WebGL中的几何图形最终是由三角形组成的，在绘制多边形时需要分解成多个三角形。这是一个例子，一个矩形可以分成两个三角形：letvertices=[0.5,0.5,0.0,-0.5,0.5,0.0,-0.5,-0.5,0.0,//第一个三角形-0.5,-0.5,0.0,0.5,-0.5,0.0,0.5,0.5,0.0,//第二个三角形];//矩形可以发现有一侧是公共的，此时可以对缓冲区对象进行索引，减少冗余数据。IndexBufferObject索引缓冲对象的全称是IndexBufferObject(IBO)，它通过索引重用已有的数据。在上面的正方形例子的基础上，主要变化如下：databufferdrawingdata顶点位置数据只需要4个就够了，普通数据改用index。constvertices=[0.5,0.5,0.0,//第一个顶点-0.5,0.5,0.0,//第二个顶点-0.5,-0.5,0.0,//第三个顶点0.5,-0.5,0.0,//第四个顶点];//矩形索引数据与上面提到的图元绘制模式有关。当绘制模式为gl.TRIANGLES时，两个三角形是独立的，索引数据如下：constindexData=[0,1,2,//对应顶点1,2,的索引0,2,3,and3inthevertexpositiondata//Indexes对应于顶点位置数据中的顶点1、3、4]当绘制模式为gl.TRIANGLE_STRIP时，使用前面三角形末端的两个顶点构造一个三角形：constindexData=[1,0,2,3//Draw,先用index1,0,2的位置数据绘制第一个三角形，然后用index0,2,3的位置数据绘制第二个三角形]当绘制模式为gl.TRIANGLE_FAN时，使用第一个顶点，Buildatrianglewithavertexattheendoftheprevioustriangle,addthenewreadvertex:constindexData=[0,1,2,3//绘制时，先取索引0、1、2的位置数据绘制第一个三角形，再取索引0、2、3的位置数据绘制第二个三角形]buffer索引的数据需要缓存到对应的变量才可以使用。/***缓冲区索引数据*@param{*}glWebGL上下文*@param{*}数据索引数据*/functionsetIndexBuffers(gl,data){//创建一个空白缓冲区对象constbuffer=gl.createBuffer();//绑定目标gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,buffer);//WebGL不支持直接使用JavaScript原始数组类型，需要转换constdataFormat=newUint16Array(data);//初始化数据存储gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,dataFormat,gl.STATIC_DRAW);}索引缓冲对象用于绘图，需要使用drawElements方法而不是drawArrays。这个方法有一个额外的类型参数，它指的是索引缓冲区数据的类型。可以使用以下值：gl.UNSIGNED_BYTEgl.UNSIGNED_SHORT之前的缓冲区索引数据类型转换为Uint16Array，这里应该使用gl.UNSIGNED_SHORT。三种方法示例如下：TRIANGLES示例TRIANGLE_STRIP示例TRIANGLE_FAN示例参考资料WebGL基础绘图二：绘制三角形WebGL教程你好，三角形WebGL1.0官方索引卡
