前言

WebGL 编程是专门用于 Web 端的可编程着色器方法，是由 Web 端控制 GPU 渲染的编程途径

它的标准基于 OpenGL ES 2.0，本身也使用 GLSL 作为着色器语言。使用的 GLSL 标准叫 GLSL ES，专门用于 Web 端的着色器编写

WebGL 本身也提供了很多接口用于和 Web 端本身进行数据传输，一般都会放在初始化后 WebGLRenderingContext 上，即 getContext 的返回值，大部分的 API 都可以从上面看到

WebGL 编程初探

在 canvas 上用 WebGL 初始化画布（注意这里的 getWebGLContext 用了 WebGL 编程指南书中提供的封装好的代码，省略了compile 和 attach 等复杂操作）

function main() {
  const canvas = document.getElementById('webgl')
  // 获取 webgl 上下文
  const gl = getWebGLContext(canvas)
  // 指定清空 canvas 的颜色（用黑色），注意颜色和 Alpha 值只有 0.0. - 1.0 之间
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  // 清空 canvas
  gl.clear(gl.COLOR_BUFFER_BIT)
}


// 另一种获取上下文的方法
// 现行标准下的获取 WebGL 上下文
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')

绘制一个点，这里可以看到用字符串编写的顶点着色器 VertexShader 和片元着色器 FragmengShader，在传入并初始化后，调用 gl.drawArrays 就可以在画布上画出一个像素点

const VertexShader = `
    function main() {
        gl_Position = vec4(0.0, 0.0, 1.0, 1.0);
        gl_PointSize = 10.0;
    }
`
const FragmentShader = `
    precision mediump float;
    function main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

function main() {
    // 获取 id 为 webgl 的 canvas 元素
    const canvas = document.getElementById('webgl')
    // 获取 webgl 上下文
    const gl = getWebGLContext(canvas)
    initShaders(gl, VertexShader, FragmentShader)
    
    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.POINTS, 0, 1)
}

API

JS

getWebGLContext
- 开启 WebGL 功能并获取 WebGLRenderingContext，即 WebGL API 所在的上下文
initShaders
- 初始化 Shaders，同时为 Shaders 的编译添加部分报错信息
- 注意这里必须是主动添加 log 才能将错误展示出来，因为本质是在 GPU 中读取出错
gl.clearColor
- 初始化颜色 API，实际上是操作了 COLOR_BUFFER_BIT 作为
gl.clear
- 初始化几个特定的 Buffer，代码中这里对应了 COLOR_BUFFER
gl.COLOR_BUFFER_BIT
- 颜色 Buffer
gl.drawArrays
- 绘制函数，通过传递绘制方式和绘制的点，来绘制图形
gl.POINTS
- 绘制方式，这里画一个点就选择了 gl.POINTS 模式，之后会介绍更多的模式。这些模式都多少和三角形有些关系，也就意味着其实 WebGL 就是拆解了很多复杂的几何图形后，再把他们用绘制三角形并组合近似的的方式重新渲染出来

GLSL

gl_Position
- 表明顶点的位置，在 GLSL 中是 vec4 类型的数据，后面会陆续扩展
gl_PointSize
- 表明顶点的大小，必须是浮点数
gl_FragColor
- 片元的颜色，接收 GLSL 特有的向量数据类型，分别代表 RGBA 四个颜色分量，比如上面代码里的 vec4(1.0, 0.0, 0.0, 1.0)，最后的片元颜色就是不透明的红色

precision mediump float 实际上是个片元着色器内的全局精度定义，之后会说到

原理

顶点着色器根据顶点信息，这里我们可以通过 JS 的接口控制顶点的读取和设置，也因此 JS 得以使用 GLSL 来实现 GPU 的操作

片元着色器根据片元信息渲染每个像素，注意这里的片元着色器其实是每个像素都会调用的

总结

WebGL 其实是一种对 GPU 的编程方式，其通过控制顶点着色器和片元着色器能够绘制各种复杂的图形图案 GLSL ES 是 WebGL 中的着色器语言，有着类似 OpenGL 的 API，这里面 JS 扮演这 C++ 的作用，和 GLSL 语言共同使用 GPU 为渲染服务

WebGL 编程指南学习笔记 - 1

前言

WebGL 编程初探

API

JS

GLSL

原理

总结