html三角形怎么画（webgl 系列 —— 三角形）

三角形

有人说三维模型的基本单元是三角形    
    
    
    
。比如复杂的游戏角色 
    
    
    
 ，也只是用许多三角形画出来的  


     


     


     


 。

不管上述说法是否属实
     


     


     


     ，本篇先把三角形画出来


 




 




 




 。

如何绘制一个三角形

鼠标点击绘点示例我们写了这样的代码：

points.forEach(item => { gl.vertexAttrib3f(a_Position, item.x, item.y, 0.0); gl.drawArrays(gl.POINTS, 0, 1); })

这种方法一次只能绘制一个点   

   

   

   

。

比如需要绘制一个三角形 




 




 




 




，应该是一个连贯的动作   

     

     

     

。比如在顶点着色器中一次性画三个点 

   

   

   

，然后用线连接；而不是绘制一个点
     

     

     

     ，在绘制一个点  




  




  




  



，在绘制一个点... 


  


  


  


，不应该是零散的

Tip：提前透露 - 只要一次性将三个点绘制出来
     
     
     
    ，其实三角形也就画出来了



  




  




  




  。

一次性绘制多个顶点可以使用缓冲区对象  


  


  


  

。

缓冲区对象

可以使用 webgl 中的缓冲区对象(buffer object) 一次性的向着色器传入多个顶点数据    
     
     
     
。

使用缓冲区对象向顶点着色器传入多个顶点数据   




   




   




   


，需要如下5个步骤：

创建缓冲区对象 绑定缓冲区对象 写入数据到缓冲区对象 分配缓冲区对象给一个 attribute 变量 开启 attribute 变量

一次绘制三个点

效果 实现

完整代码如下：

// 一次绘制三个点 const VSHADER_SOURCE = ` attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; } ` const FSHADER_SOURCE = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } ` function main() { const canvas = document.getElementById(webgl); const gl = canvas.getContext("webgl"); if (!gl) { console.log(Failed to get the rendering context for WebGL); return; } if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log(Failed to intialize shaders.); return; } gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // 顶点数据 const vertices = { // 顶点数据




   




   




   




  。Float32Array 当做普通数组 



 



 



 



，对应 C 语言的 float data: new Float32Array([ 0.0, 0.5, -0.5, -0.5, 0.5, -0.5 ]), // 顶点数 vertexNumber: 3, // 每个顶点分量数                  ，例如第一个点(0.0, 0.5) count: 2, } // 将顶点的位置写入顶点着色器 initVertexBuffers(gl, vertices) // gl.drawArrays(mode, first, count) // 还是画点（gl.POINTS）
    




    




    




    

，从缓冲区的第一个位置（0）开始画



















，绘制3（vertices.vertexNumber）个点 gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber); } // 将三个顶点通过缓冲对象一次写入着色器 function initVertexBuffers(gl, {data, count}) { // 1. 创建缓冲区对象 const vertexBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log(创建缓冲区对象失败); return -1; } // 绑定缓冲区对象绑定到`目标` 



 



 



 

。只能通过目标向缓冲区写数据 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将数据写入缓冲区 gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(gl.program, a_Position); if (a_Position < 0) { console.log(Failed to get the storage location of a_Position); return -1; } // 将整个缓冲区对象分配给 atttibute(a_Position) 变量 gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0); // 激活 attribute 变量                  ，使缓冲区对 attribute 变量分配生效 gl.enableVertexAttribArray(a_Position); }

通过 initVertexBuffers() 将3个顶点分配给 attribute 变量
     



     



     



     
，执行 gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber) 时



















，顶点着色器执行了3次                    。顶点着色器执行过程和缓冲区数据传入过程如下：

绘制出所有点后 
    
    
    
 ，颜色缓冲区的内容就会自动显示在浏览器中




    




    




    




  。

initVertexBuffers() 里面涉及了许多概念和api
     


     


     


     ，请往下阅读

















。

Float32Array

绘制三维图形 webgl 需要处理大量相同的数据 




 




 




 




，例如顶点坐标                    。为了优化性能 

   

   

   

，就引入了一种特殊的数组（类型化数组）
     

     

     

     ，浏览器事先知道数组中的数据类型  




  




  




  



，处理起来就更有效率 



     



     



     



  。

Float32Array 就是其中一种类型化数组 


  


  


  


，通常用于存储顶点坐标或颜色

















。

Tip: webgl 中很多操作都需要用到类型化数组    
    
    
    
。

webgl 中有如下类型化数组：

数组类型 每个元素所占字节数 对应C语言的数据类型 Int8Array 1 8 位有符号整数 Uint8Array 1 8 位无符号整型 Int16Array 2 16 位有符号整数 Uint16Array 2 16 位无符号整型 Int32Array 4 32 位有符号的整型 Uint32Array 4 32 位无符号的整型 Float32Array 4 32 位的浮点数 float Float64Array 8 64 位的浮点数 double bindBuffer

gl.bindBuffer(target, buffer) - 绑定缓冲区  


     


     


     


 。例如示例中的： gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

为什么要将绑定缓冲区对象？不能直接向缓冲区写入数据
     
     
     
    ，只能通过目标写入数据


 




 




 




 。就像这样：

目标表示缓冲区的用途   

   

   

   

。例如这里的 gl.ARRAY_BUFFER 指包含顶点属性（例如顶点坐标    
    
    
    
、纹理坐标数据或顶点颜色数据）的缓冲区   

     

     

     

。

bufferData

gl.bufferData(target, size, usage) - 将数据写入缓冲区



  




  




  




  。例如示例中的：gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

gl.STATIC_DRAW 是 usage 中的一种   




   




   




   


，指缓冲区的内容可能经常使用 



 



 



 



，而不会经常更改  


  


  


  

。内容被写入缓冲区                  ，但不被读取    
     
     
     
。

此方法执行后
    




    




    




    

，webgl 系统内部状态如下：

vertexAttribPointer

g.vertexAttribPointer(index, size, type, normalized, stride, offset) - 将整个缓冲区对象分配给 atttibute 变量




   




   




   




  。

例如示例中的：

// count - 指定缓冲区每个顶点的分量个数



















，缺少则按照 vertexAttrib3f 的补全方式 // gl.FLOAT 与上文的 Float32Array 对应 // normalized - 对于类型gl.FLOAT和gl.HALF_FLOAT                  ，此参数无效 // stride - 指定相邻两个顶点间的字节数 



 



 



 

。默认为0 // offset - 指定缓冲区对象中的偏移量                    。即attribute 从缓冲区何处开始存储 gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);

此方法执行后
     



     



     



     
，webgl 系统内部状态如下：

疑惑: 说vertexAttribPointer最后一个参数(offset)必须是类型的字节长度的倍数




    




    




    




  。尝试将 0 改成 4



















，效果却是：

enableVertexAttribArray

gl.enableVertexAttribArray(index) - 激活 attribute 变量 
    
    
    
 ，使缓冲区对 attribute 变量分配生效

















。

此方法执行后
     


     


     


     ，webgl 系统内部状态如下：

drawArrays

gl.drawArrays(mode, first, count) - 执行顶点着色器 




 




 




 




，按照 mode 指定的参数绘制图形                    。first 指定从哪个点开始绘制 

   

   

   

，count 指绘制需要几个点 



     



     



     



  。

能绘制的图形有：

Tip: drawArrays 更多细节请看这里

三角形

只要一次性将三个点绘制出来
     

     

     

     ，其实三角形也就画出来了

















。

修改上面示例一行代码就好（gl.POINTS -> gl.LINE_LOOP）：

// 前 gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber); // 后 gl.drawArrays(gl.LINE_LOOP, 0, vertices.vertexNumber);

效果如下：

矩形

效果如下：

核心代码如下：

// 定义四个点 const vertices = { data: new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5, ]), // 顶点数 vertexNumber: 4, count: 2, } initVertexBuffers(gl, vertices) // TRIANGLE_STRIP gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.vertexNumber);

Tip：四个点的顺序有要求

三角扇

效果如下：

在矩形的基础上  




  




  




  



，改为 gl.TRIANGLE_FAN 即可    
    
    
    
。

Tip：GL_TRIANGLE_FAN - 绘制各三角形形成一个扇形序列 


  


  


  


，以 v0 为起点：(v0, v1, v2)  


     


     


     


 、(v0, v2, v3)


 




 




 




 、(v0, v3, v4)