webgl入门（一）: webgl入门

如何用WebGL绘制三角形

demo

webgl的使用我们可以总结为以下5个步骤:

1. 创建WebGL上下文
2. 创建WebGL程序（WebGL Program）
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

1. 创建WebGL上下文

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

2. 创建WebGL程序

// 定义顶点着色器
const vertex = `
  attribute vec2 position;

  void main() {
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;

// 定义片元着色器
const fragment = `
  precision mediump float;

  void main()
  {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }    
`;

创建WebGLProgram对象:

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);


const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);


const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

3. 将数据存入缓冲区

webgl使用的坐标系:

假设我们需要绘制的三角形如下图:

那么我们的顶点数据如下:

(WebGL使用的数据需要用类型数组定义，默认格式是Float32Array).

const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);

接着，我们要将定义好的数据写入WebGL的缓冲区:

const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

有很多种不同种类的缓冲区, 比如顶点缓冲区、索引缓冲区、深度缓冲区、颜色缓冲区、模版缓冲区等. 它们都在显存中.

4. 将缓冲区数据读取到GPU

现在我们已经把数据写入缓存了，但是我们的shader现在还不能读取这个数据，还需要把数据绑定给顶点着色器中的position变量:

const vPosition = gl.getAttribLocation(program, 'position'); // 获取顶点着色器中的position变量的地址
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); // 给变量设置长度和类型
gl.enableVertexAttribArray(vPosition); // 激活这个变量

5. 执行着色器程序完成绘制

gl.clear(gl.COLOR_BUFFER_BIT); // 先清除画布

// 这步才是真正的执行绘制绘制
// gl.TRIANGLES表示绘制三角形
// 0表示指定从第1个点开始绘制
// points.length / 2表示指定绘制需要使用到多少个点
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

attribute vec2 position;中指定了一个顶点包含两个数据, 所以这里只需要指定有多少个顶点就可以了.

总结

• webglfundamentals.org/webgl/lesso…