WebGL（画一个点）

什么是WebGL

---

WebGL使得在支持HTML的canvas标签的浏览器中，不需要安装任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染。WebGL程序包括用JavaScript写的控制代码，以及在图形处理单元（GPU）中执行的特效代码（shader code）。WebGL元素可以和其他 HTML元素混合使用，并且可以和网页其他部分或者网页背景结合起来。—— MDN

虽然WebGL也是利用HTML的canvas元素，但是比2D难以驾驭多了。下面先从画一个点开始，进入WebGL的世界。

准备一个html文件

---

上面这段代码很简单，就是创建一个html文件里面包含一个canvas元素，并设置一下相关样式。

创建gl.js文件

---

const gl = document.querySelector('canvas').getContext('webgl')

if (!gl) alert('Failed to get webgl')



// 着色器源代码
const VSHADER_SRC = `
    void main() {
        gl_Position     = vec4(.0, .0, .0, 1.0);
        gl_PointSize     = 10.0;
    }
`

const FSHADER_SRC = `
    void main() {
        gl_FragColor = vec4(.0, .0, 1.0, 1.0);
    }
`
gl.clearColor(1.0, .0, .0, .2)
gl.clear(gl.COLOR_BUFFER_BIT)


// 创建着色器对象
const fShader = gl.createShader(gl.FRAGMENT_SHADER)
const vShader = gl.createShader(gl.VERTEX_SHADER)

// 将着色器源码写入对象
gl.shaderSource(vShader, VSHADER_SRC)
gl.shaderSource(fShader, FSHADER_SRC)

// 编译着色器
gl.compileShader(vShader)
gl.compileShader(fShader)

// 创建程序
const program = gl.createProgram()

// 程序绑定着色器
gl.attachShader(program, vShader)
gl.attachShader(program, fShader)

// 链接程序
gl.linkProgram(program)

// 使用程序
gl.useProgram(program)

// 绘制点
gl.drawArrays(gl.POINTS, 0, 1)

如果你没有研究过WebGL一定对上面的代码很陌生，是不是没有一点JavaScript的感觉。哈哈，那就对了。运行成功后，应该是这个样子。

分步介绍

---

未完待续……