WebGL 笔记

在这里主要写点自己的笔记。最终目标是写个在线测试 Shader 的小工具。之前有看到过相似的工具但是网页始终打不开……所以自己写一个吧，以后可能（？）用得上。 flag 倒了，当时想得太简单了（

2020.12.25 写了一个超简单的版本用来学习 😃。

参考的是 MDN 的教程 和 LearnOpenGL。

• WebGL内容在canvas中渲染。

• gl上下文 const gl=canvas.getContext("webgl")

• 着色器同样是字符串。简单的着色器

  //注意分号
  const vertexSource = `
  attribute vec3 pos;
  void main(){
      gl_Position=vec4(pos.x,pos.y,pos.z,1.0);
  }
  `;
  const fragmentSource = `
  void main(){
          gl_FragColor = vec4(1.0,1.0,1.0,1.0);
      }
  `;
  

• 编译着色器，两种都需要

  //gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  //source 为之前写好的着色器代码（字符串）
  gl.shaderSource(vertexShader, vertexSource);
  gl.compileShader(vertexShader); //void
  

• 创建着色器程序：

  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragShader);
  gl.linkProgram(shaderProgram);
  

• 渲染对象顶点组（正方形）

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

• 创建缓冲器存储对象顶点数据：

  //初始化一个 buffer 对象
  buffer = gl.createBuffer();
  //参数一：指定绑定 buffer 类型，参数二：要绑定的 buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  //创建 buffer 的数据存储区域：类型，源数据，使用方法。
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  

• 链接着色器和顶点数据

  //参数为顶点属性索引，每个顶点中组成数量，数据类型，是否归一化，步长，offset
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  //启用顶点属性，参数为要激活的顶点属性索引
  //使用 getAttribLocation 获取索引的例子
  var index = gl.getAttribLocation(shaderProgram, "pos");
  gl.enableVertexAttribArray(index);
  

• 渲染场景

  • 清除canvas:

    gl.clearColor(0, 0, 0, 1); // 设置清除颜色
    gl.clear(gl.COLOR_BUFFER_BIT);
    

  • 画图：

    gl.useProgram(shaderProgram);
    gl.drawArrays(gl.LINE_LOOP, 0, 4);