WebGL 入门

1. 最短的 WebGL 程序：清空绘图区

1.1 demo

<canvas id="webgl" width="400" height="400"></canvas>
<script>
    const canvas = document.querySelector('#webgl')
    const gl = canvas.getContext('webgl')
    // 指定清空canvas的颜色
    gl.clearColor(0, 0, 0, 1)
    // 清空canvas颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)
</script>

1.2 几个API

gl.clearColor(red, green, blue, alpha)

指定清空绘图区背景颜色，四个参数取值范围为 0.0-1.0，若值小于0.0或者大于1.0，会阶段为0.0或者1.0。

gl.clear(buffer)

指定缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用 gl.clearColor() 指定的值。

buffer可设置为以下三种类型，分别对应 颜色缓冲区、深度缓冲区 、模板缓冲区。

缓冲区名称	常量标识	默认值	相关函数
颜色缓冲区	gl.COLOR_BUFFER_BIT	(0.0, 0.0, 0.0, 0.0)	gl.clearColor(red, green, blue, alpha)
深度缓冲区	gl.DEPTH_BUFFER_BIT	1.0	gl.clearDepth(depth)
模板缓冲区	gl.STENCIL_BUFFER_BIT	0	gl.clearStencil(s)

1.3 几个概念

本示例提到了缓冲区的概念，目前清空绘图区其实是清空颜色缓冲区，深度缓冲区与模板缓冲区在后面章节中介绍。

2. 绘制一个点

需求：期望于原点（0.0, 0.0, 0.0）处绘制大小为10像素的红点(矩形)。

2.1 demo

index.html

<canvas id="webgl" width="400" height="400"></canvas>
<script src="./initShaders.js"></script>
<script>
    const canvas = document.querySelector('#webgl')
    const gl = canvas.getContext('webgl')

    // 顶点着色器
    const VSHADER_SOURCE =
        'void main() {\n' +
        '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
        '    gl_PointSize = 10.0;\n' +
        '}\n'

    // 片元着色器
    const FSHADER_SOURCE =
        'void main() {\n' +
        '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
        '}\n'

    // 1.初始化着色器
    initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)
    // 2.指定清空canvas的颜色
    gl.clearColor(0, 0, 0, 1)
    // 3. 清空canvas颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 4.绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1)
</script>

initShaders.js

/**
 *
 * @param {context} gl 渲染上下文
 * @param {string} vshaderSource 顶点着色器代码
 * @param {string} fshaderSource 片元着色器代码
 * @return {boolean} true(成功) false(失败)
 */

function initShaders(gl, vshaderSource, fshaderSource) {
    // 1. 创建着色器对象
    const vshader = gl.createShader(gl.VERTEX_SHADER),
        fshader = gl.createShader(gl.FRAGMENT_SHADER)
    // 2. 像着色器对象填充源代码
    gl.shaderSource(vshader, vshaderSource)
    gl.shaderSource(fshader, fshaderSource)
    // 3. 编译着色器
    gl.compileShader(vshader)
    gl.compileShader(fshader)
    // 4. 创建程序对象
    const program = gl.createProgram()
    // 5. 为程序对象分配着色器
    gl.attachShader(program, vshader)
    gl.attachShader(program, fshader)
    // 6.连接程序对象
    gl.linkProgram(program)
    // 7. 使用程序对象
    gl.useProgram(program)
}