WebGL-画一个三角形

Posted 2021-04-25 学哥来了

1. 获取WebGL的绘图上下文

const canvas = document.getElementById('mycanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl',WebGLContextAttributes );

属性	描述
Alpha	如果它的值是true，它提供了一个alpha缓冲区到画布上。默认情况下，它的值是 true
depth	如果它的值是true，会得到一个绘图的缓冲区，其中包含至少16位的深度缓冲。默认情况下，它的值是true
stencil	如果它的值是true，会得到一个绘图的缓冲区，其中包含至少8位的模板缓存。默认情况下，它的值是false
antialias	如果它的值是true，会得到一个绘图缓冲区，执行抗锯齿。默认情况下，它的值是true
premultipliedAlpha	如果它的值是true，会得到一个绘图缓冲区，其中包含的颜色与预乘alpha。默认情况下它的值是true
preserveDrawingBuffer	如果它的值是true，缓冲区将不会被清零，直到被清除或由作者改写将保留它们的值。默认情况下，它的值是false

下面的代码片段展示了如何创建一个WebGL的上下文模板缓存，这将不执行抗锯齿。

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('webgl', { antialias: false, stencil: true });

在创建 WebGLRenderingContext 的时候，一个绘图缓冲器被创建。上下文对象管理OpenGL 状态，并呈现到图形缓冲区。

WebGLRenderingContext （webgl返回的上下文）

console.log(canvas,gl);

它是 WebGL 的主要接口。它表示 WebGL 绘图上下文。该接口包含了所有用于在绘图缓冲执行各种任务的方法。此接口的属性给出在下表中。

属性	说明
Canvas	这是一个对创建此 canvas 元素的上下文
drawingBufferWidth	此属性表示绘图缓冲器的实际宽度。它可以不同于 htmlCanvasElement 的宽度属性。
drawingBufferHeight	此属性表示绘图缓冲器的实际高度。它可以不同于 HTMLCanvasElement 的高度属性。

2. WebGL画一个三角形

1. 首先准备三个点以及下标索引，

  const vertices = [
    -0.5,0.5,0,
    -0.5,-0.5,0,
    0.5,-0.5,0, 
  ];

  const indices = [0,1,2];

2. 创建缓存区并绑定数据

  // 创建一个空缓冲区对象来存储顶点缓冲区
  const vertex_buffer = gl.createBuffer();

  // 将适当的数组缓冲区绑定到它
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

  // 将顶点数据传递给缓冲区
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // 取消绑定缓冲区
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  // 创建一个空缓冲区对象来存储索引缓冲区
  const Index_Buffer = gl.createBuffer();

  // 将适当的数组缓冲区绑定到它
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);

  // 将顶点数据传递给缓冲区
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

  // 取消绑定缓冲区
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

3. 存储和编译着色器程序

由于着色器是独立的程序，我们可以把它们作为一个单独的脚本，并在应用程序中使用。或者也可以直接将它们保存在字符串格式.

// 顶点着色器源代码
  const vertCode =
      'attribute vec3 coordinates;' +

      'void main(void) {' +
        ' gl_Position = vec4(coordinates, 1.0);' +
      '}';

  // 创建顶点着色器对象
  const vertShader = gl.createShader(gl.VERTEX_SHADER);

  // 附加顶点着色器源代码
  gl.shaderSource(vertShader, vertCode);

  // 编译顶点着色器
  gl.compileShader(vertShader);

  // 片段着色器源代码
  const fragCode =
  'void main(void) {' +
    ' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
  '}';

  // 创建片段着色器对象
  const fragShader = gl.createShader(gl.FRAGMENT_SHADER);

  // 附加片段着色器源代码
  gl.shaderSource(fragShader, fragCode); 

  // 编译片段着色器
  gl.compileShader(fragShader);

  // 创建要存储的着色器程序对象
  // 组合着色器程序
  const shaderProgram = gl.createProgram();

  // 附加顶点着色器
  gl.attachShader(shaderProgram, vertShader);

  // 附加片段着色器
  gl.attachShader(shaderProgram, fragShader);

  // 链接这两个程序
  gl.linkProgram(shaderProgram);

  // 使用组合的着色器程序对象
  gl.useProgram(shaderProgram);

4. 将着色器与缓冲对象相关联

  // 绑定顶点缓冲区对象
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

  // 绑定索引缓冲区对象
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);

  // 获取属性位置
  const coord = gl.getAttribLocation(shaderProgram, "coordinates");

  // 教程当前绑定的VBO的属性
  gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); 

  // 启用该属性
  gl.enableVertexAttribArray(coord);

5. 画三角形

  // Clear the canvas
  gl.clearColor(0.5, 0.5, 0.5, 0.9);

  // 启用深度测试
  gl.enable(gl.DEPTH_TEST);

  // 清除颜色缓冲位
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 设置视图端口
  gl.viewport(0,0,canvas.width,canvas.height);

  // Draw the triangle
  gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

我们的三角形出来了，你都记住了吗？

三角形