webGL入门-1

清理画布

const ctx = document.getElementById('canvas');
const gl = ctx.getContext('webgl');
gl.clearColor(r, g, b, a); // 设置清空canvas颜色,取值0.0～1.0
gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区
// gl.clear(gl.DEPTH_BUFFER_BIT) // 清空深度缓冲区(3D 配合gl.clearDepth(1.0)使用
// gl.clear(gl.STENCIL_BUFFER_BIT) // 清空模板缓冲区(3D 配合gl.clearStencil(0) 使用

着色器

顶点着色器（用来描述顶点的特征，通过计算获取位置信息）

顶点是指二维三维空间中的一个点，一个坐标

    // 顶点着色器
    const VERTEX_SHADER = `
      void main() {
        // 设置坐标 x y z w(齐次坐标) => (x/w, y/w, z/w)
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
      }
    `

片元着色器（进行逐片元处理程序，通过计算获取颜色信息）

片元可以理解为一个个像素

    // 片元着色器
    const FRAG_SHADER = `
      void main() {
        // 设置颜色 rgba
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `

封装公共方法 initShader

function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
  // 创建着色器
  const vertexShader = gl.createShader(gl.VERTEX_SHADER); // 顶点着色器
  const fragShader = gl.createShader(gl.FRAGMENT_SHADER); // 片元着色器
  // 指定着色器源码
  gl.shaderSource(vertexShader, VERTEX_SHADER); // 顶点着色器 => gl.VERTEX_SHADER
  gl.shaderSource(fragShader, FRAG_SHADER); // 片元着色器 => gl.FRAGMENT_SHADER
  // 编译着色器
  gl.compileShader(vertexShader);
  gl.compileShader(fragShader);
  // 创建程序对象，程序对象是webgl的上下文对象，用于管理着色器，
  const program = gl.createProgram();
  // 附着着色器
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragShader);
  // 链接程序对象
  gl.linkProgram(program);
  // 使用程序对象
  gl.useProgram(program);
​
  return program;
}

webgl坐标系

attribute变量

顶点着色器中设置顶点坐标变量,只能在顶点着色器中使用

    // 顶点着色器
    const VERTEX_SHADER = `
    // attribute 变量 => 只传递顶点数据，默认值为 vec4(1.0, 0.0, 0.0, 1.0)
    attribute vec4 a_Position; 
      void main() {
        // 设置坐标 x y z w(齐次坐标) => (x/w, y/w, z/w)
        gl_Position = a_Position;
        gl_PointSize = 10.0;
      }
    `
    
    
    // 获取 attribute 变量的存储位置,必须在 initShader 之后
    const a_Position = gl.getAttribLocation(program, 'a_Position')
    // 将顶点位置传输给 attribute 变量
    gl.vertexAttrib4f(a_Position, 0.5, 0.0, 0.0 ,1.0)

uniform变量

可以在顶点着色器和片元着色器中使用

    // 片元着色器
    const FRAG_SHADER = `
    // 高精度 heightp, 中精度 mediump, 低精度 lowp
    precision mediump float; // 设置精度 
    uniform vec4 u_FragColor; // 声明颜色变量
      void main() {
        // 设置颜色 rgba
        gl_FragColor = u_FragColor;
      }
    `
/* 
  uniform vec4 u_FragColor;=> gl_FragColor = vec4(u_FragColor.r, u_FragColor.g, u_FragColor.b, u_FragColor.a);

  uniform vec3 u_FragColor;=> gl_FragColor = vec4(u_FragColor.r, u_FragColor.g, u_FragColor.b, 1.0);

  uniform vec2 u_FragColor;=> gl_FragColor = vec4(u_FragColor.r, u_FragColor.g, 0.0, 1.0);
  
  uniform float u_FragColor;=> gl_FragColor = vec4(u_FragColor, 0.0, 0.0, 1.0);
*/    
    // 获取 uniform 变量的存储位置
    const u_FragColor = gl.getUniformLocation(program, 'u_FragColor')
    // 将颜色传输给 uniform 变量
    gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0)