webgl基础：绘制多边形

Posted 2021-06-02 豆皮范儿

hi~ 豆皮粉儿. 又到了愉快的分享时刻了。

在前面两节内容中给大家分享了如何通过 webgl 来绘制一个点，并且介绍了（可点击）。

当然了，仅仅只有文字的描述是不能勾起大家学习 webgl 的欲望的，还需要自己动手实现下。观察自己写的代码是如何运作的。

好了，之前的内容仅仅是绘制一个点，可能内容上略显简单了，今天就来介绍下如何绘制多边形。

本节内容中涉及到较多的方法介绍，可先忽略。待有需要的时候查阅。

1.通过JS控制图形

学习绘制多边形之前，我们先来看一个问题 -- 如何通过js来控制图形的大小、颜色……等内容

在之前的代码中，都是将这些信息固定的写在了着色器的源码中。类似于以下内容：

// 顶点着色器源代码const VERTEX_SHADER_SOURCE = '' + 'void main() {' + ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);' + ' gl_PointSize = 10.0;' + '}'// 片元着色器源代码const FRAGMENT_SHADER_SOURCE = '' + 'void main() {' + ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' + '}'

那如何用js来控制这些信息呢？字符串模板吗？nonono，当然是不行的，因为webgl有自己的渲染管线，之前也给大家介绍过，所以通过字符串模板的形式肯定是不可以的。

接下来就来看下，如何通过js来控制图形信息。

1.1 动态传入信息

动态传入图形信息总共分以下四步进行：

•定义一个着色器变量。变量类型与引用位置相同•获取变量信息•传入数据•绘制图形

实例演示：

1. 定义一个着色器变量，

// 这里我们需要定义一个着色器变量 a_PointSize // 变量的类型是 float 因为变量的引用是在 gl_PointSize 中引用的，gl_Position 的类型是 float// 其他的信息固定const VERTEX_SHADER_SOURCE = '' + 'attribute float a_PointSize;' +  'void main() {' + ' gl_Position = vec4(0.0,0.0,0.0,1.0);' + ' gl_PointSize = a_PointSize;' + '}'const FRAGMENT_SHADER_SOURCE = '' + 'void main() {' + ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' + '}'

2. 获取变量信息

// 初始化着色器，并获取程序对象const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 获取着色器变量const a_Position = gl.getAttribLocation(program, 'a_Position')// 初始化着色器方法function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) { const vertexShader = gl.createShader(gl.VERTEX_SHADER) const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) gl.compileShader(vertexShader) gl.compileShader(fragmentShader) const program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) gl.useProgram(program) return program}

这里将初始化着色器的方法做了一层封装。方便之后取用。

拓展1：

•获取 attribute 变量可以使用 gl.getAttribLocation(program, '变量名称')•获取 uniform 变量可以使用 gl.getUniformLocation(program, '变量名称')

3. 传入数据

当准备工作就绪之后，就可以通过 js 传入数据了。

gl.vertexAttrib1f(a_PointSize, 20.0);

这里通过 gl.vertexAttrib1f(location, v1) 方法传入一个数据。

注意：因为是 a_PointSize变量是float类型 所以，这里需要传入的是 20.0 而不是 20

接下来的拓展内容里，会对 gl.vertexAttrib1f 进行详细的介绍。

4. 绘制图形

// 添加蓝色底色gl.clearColor(0.0,0.0,1.0,1.0)gl.clear(gl.COLOR_BUFFER_BIT)// 绘制一个点。gl.drawArrays(gl.POINTS, 0, 1)

拓展2：

相对于 gl.vertexAttrib1f 来说，它还有以下几个同族函数：

gl.vertexAttrib1f(location, x);gl.vertexAttrib2f(location, x, y);gl.vertexAttrib3f(location, x, y, z);gl.vertexAttrib4f(location, x, y, z, w);gl.vertexAttrib1fv(location, value);gl.vertexAttrib2fv(location, value);gl.vertexAttrib3fv(location, value);gl.vertexAttrib4fv(location, value);

以上方法功能类似，都是属于赋值的方法。只不过是传入的参数不同。

•location：代表的是需要修改的变量。如：a_Position•方法中不是 fv 结尾的，传入单个值，传入几个就修改几个。剩下的走默认。•方法中以 fv 结尾的，传入一个数组，数组中有几个就修改几个，剩下的走默认。

栗子：

如果要给一个 vec4 类型的 a_Position 的变量赋值。所有方法的设置和结果如下。

gl.vertexAttrib1f(a_Position, 1.0); // [1.0, 0.0, 0.0, 1.0]gl.vertexAttrib2f(a_Position, 1.0, 1.0); // [1.0, 1.0, 0.0, 1.0]gl.vertexAttrib3f(a_Position, 1.0, 1.0, 1.0); // [1.0, 1.0, 1.0, 1.0]gl.vertexAttrib4f(a_Position, 1.0, 1.0, 1.0, 1.0); // [1.0, 1.0, 1.0, 1.0]gl.vertexAttrib1fv(a_Position, [1.0]); // [1.0, 0.0, 0.0, 1.0]gl.vertexAttrib2fv(a_Position, [1.0, 1.0]); // [1.0, 1.0, 0.0, 1.0]gl.vertexAttrib3fv(a_Position, [1.0, 1.0, 1.0]); // [1.0, 1.0, 1.0, 1.0]gl.vertexAttrib4fv(a_Position, [1.0, 1.0, 1.0, 1.0]); // [1.0, 1.0, 1.0, 1.0]

好了，烦人的前缀知识分享完了，恭喜你，能看到这里说明你有很大的耐心了。希望接下来的内容能存储到你的知识体系中。

2.绘制多边形

2.1 相关概念介绍

绘制多边形，需要了解两个概念：

•缓冲区对象：对于缓冲区对象的介绍有很多，当然，概念这种东西我们是不屑于记忆的， 这里来个通俗点儿的说法：缓冲区对象就是一次性给着色器传入多个点的信息，让着色器做个缓存，之后的绘制不在传入信息，而是根据设定的规则从缓存中取。•类型化数组：注意：类型化数组不支持 push 和 pop 方法类型化数组就是一个数组中所有的数据都是相同类型的。类型化数组的分类如下：•Int8Array: 8位整数型•UInt8Array: 8位无符号整数型•Int16Array: 16位整数型•UInt16Array: 16位无符号整数型•Int32Array: 32位整数型•UInt32Array: 32位无符号整数型•Float32Array: 单精度32位浮点数•Float64Array: 双精度64位浮点数

这两个内容至关重要，在绘制多边形甚至之后的使用过程中都少不了这两个步骤。

2.2 绘制多边形的步骤

•创建缓冲区对象 -- gl.createBuffer()•绑定缓冲区对象 -- gl.bindBuffer()•将数据写入缓冲区对象 -- gl.bufferData()•将缓冲区对象分配给一个着色器变量 --gl.vertexAttribPointer()•开启attribute变量 -- gl.enableVertexAttribArray()

1. 创建缓冲区对象 -- gl.createBuffer()

const buffer = gl.createBuffer();

此方法比较简单，没有参数，返回一个创建好的缓冲区对象。

2. 绑定缓冲区对象 -- gl.bindBuffer()

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

gl.bindBuffer(target, buffer);

•target 可能出现的值•gl.ARRAY_BUFFER：表示使用顶点数据绘制•gl.ELEMENT_ARRAY_BUFFER：表示使用索引值绘制。之后的分享中会提到这个方法的使用

3. 将数据写入缓冲区对象 -- gl.bufferData()

// 首先创建一个类型化数组const data = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5])// 将数据写入缓冲区对象gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);

gl.bufferData(target, data, usage);

•target：可能出现的值。需要与 gl.bindBuffer(target, buffer) 中的内容相同•gl.ARRAY_BUFFER：表示使用顶点数据绘制•gl.ELEMENT_ARRAY_BUFFER：表示使用索引值绘制。•data：写入缓冲区的数据•usage：•gl.STATIC_DRAW：向缓冲区对象中写入一次，绘制多次•gl.STREAM_DRAW：向缓冲区对象中写入一次，绘制若干次•gl.DYNAMIC_DRAW：向缓冲区对象中多次写入，绘制多次

4. 将缓冲区对象分配给一个着色器变量 --gl.vertexAttribPointer()

// 首先获取着色器变量const a_Position = gl.getAttribLocation(program, 'a_Position')// 将缓冲区对象分配给一个着色器变量gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);

gl.vertexAttribPointer(location, size, type, normalized, stride, offset);

•location: 指定修改的着色器变量的位置•size: 每次绘制需要几个顶点，定义的数据如何分配。•type：顶点的数据类型。与类型化数组的类型相同。•gl.BYTE：带符号的8位整数•gl.SHORT：带符号的16位整数•gl.UNSIGNED_BYTE：无符号8位整数•gl.UNSIGNED_SHORT：无符号16位整数•gl.FLOAT：32位浮点数•normalized：是否将浮点数归一化到 [0, 1] 或 [-1, 1] 之间•stride：相邻两个顶点间的字节数。默认为 0•offset：偏移几个顶点开始绘制

5. 开启attribute变量 -- gl.enableVertexAttribArray()

gl.enableVertexAttribArray(a_Position);

gl.enableVertexAttribArray(location);

•location: 指定修改的着色器变量的位置

完整版栗子：

const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');const VERTEX_SHADER_SOURCE = '' + 'attribute vec4 a_Position;' + 'void main() {' + ' gl_Position = a_Position;' + ' gl_PointSize = 10.0;' + '}'const FRAGMENT_SHADER_SOURCE = '' + 'void main() {' + ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' + '}'// 获取程序对象const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 创建缓冲区const buffer = gl.createBuffer();// 创建类型化数组const data = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5])// 绑定缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, buffer)// 向缓冲区写入数据gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);// 获取 attribute 变量const a_PointSize = gl.getAttribLocation(program, 'a_Position')// 指定顶点数据gl.vertexAttribPointer(a_PointSize, 2, gl.FLOAT, false, 0, 0);// 启用 attribute 变量gl.enableVertexAttribArray(a_PointSize)// 绘制多边形gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

这样，一个精美的四边形就出现在屏幕上了。

通过给 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4) 传入不同的绘制方式，会有意想不到的效果哟~

考考你：

本文中，定义着色器变量我们使用的 attribute ，还知道其他几个变量 uniform, varying 的使用方法吗？

好了，今天的内容就分享到这里了。Bye~

The     End

如果你觉得这篇文章对你有帮助，有启发，我想请你帮我2个小忙：

1、点个「在看」，让更多的人也能看到这篇文章内容；

1、豆皮范儿后台回复「vis」，还可以获取更多可视化免费学习资料。

2、豆皮范儿后台回复「webgl」，还可以获取webgl免费学习资料。

3、豆皮范儿后台回复「算法」，还可以获取算法的学习资料。

4、豆皮范儿后台回复「校招」，获取校招内推码

5、豆皮范儿后台回复「社招」，获取内推二维码；

6、豆皮范儿后台回复「实习生」，获取内推二维码