WebGL编程指南之绘制三角形

随云632
214 阅读4分钟

1 绘制三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #canvas {
      width: 600px;
      height: 600px;
      position: absolute;
      top: calc(50% - 300px);
      left: calc(50% - 300px);
      background-color: black;
    }
  </style>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // 通过元素获取二维图形的绘图上下文
      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");

      // 定义顶点着色器
      const vertexShaderSource = `
    attribute vec4 a_Position;
    void main() {
        gl_Position = a_Position; // 设置点的坐标
        gl_PointSize = 10.0;      // 设置点的大小
    }
`;

      // 定义片段着色器
      const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
    }
`;

      // 编译着色器函数
      function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        return shader;
      }

      // 创建和链接着色器程序
      const vertexShader = createShader(
        gl,
        gl.VERTEX_SHADER,
        vertexShaderSource
      );
      const fragmentShader = createShader(
        gl,
        gl.FRAGMENT_SHADER,
        fragmentShaderSource
      );
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

      // 设置顶点数据
      const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      // 连接顶点着色器的a_Position变量
      // 获取a_Position变量存储位置
      const a_Position = gl.getAttribLocation(program, "a_Position");
      // 2代表每个顶点的分量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position);

      // 设置背景颜色并清空
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // 绘制三角形，3代表三个顶点
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>

效果图

gl.drawArray方法的参数为gl.TRIANGLES，0，3，就相当于告诉WebGL，从缓冲区的第一个顶点开始，是顶点着色器执行三次，用这三个顶点绘制一个三角形，这样缓冲区中的三个顶点就不是独立的了，gl.drawArray方法非常强大，可以通过指定不同类型，绘制多个图形。

gl.POINTS绘制一系列点，在v0、v1、v2...处
gl.LINES绘制一系列单独的线段，在（v0，v1）、（v2，v3）...处
gl.LINE_STRIP绘制一系列连接的线段，在（v0，v1）、（v1，v2）...处
gl.LINE_LOOP绘制一系列连接的线段，在（v0，v1）、（v1，v2）...（vn，v0）处
gl.TRIANGLES绘制一系列单独的三角形（v0，v1、v2）、（v3，v4，v5）...处
gl.TRIANGLES_STRIP绘制一系列条带状的三角形（v0，v1、v2）、（v2，v1，v3）、（v2，v3、v4）...处

2 变换三角形

2.1 平移三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #canvas {
      width: 600px;
      height: 600px;
      position: absolute;
      top: calc(50% - 300px);
      left: calc(50% - 300px);
      background-color: black;
    }
  </style>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // 通过元素获取二维图形的绘图上下文
      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");

      // 定义顶点着色器
      const vertexShaderSource = `
    attribute vec4 a_Position;
    uniform vec4 u_translation;
    void main() {
        gl_Position = a_Position + u_translation; // 坐标相加
    }
`;

      // 定义片段着色器
      const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
    }
`;

      // 编译着色器函数
      function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        return shader;
      }

      // 创建和链接着色器程序
      const vertexShader = createShader(
        gl,
        gl.VERTEX_SHADER,
        vertexShaderSource
      );
      const fragmentShader = createShader(
        gl,
        gl.FRAGMENT_SHADER,
        fragmentShaderSource
      );
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

      // 设置顶点数据
      const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      // 连接顶点着色器的a_Position变量
      // 获取a_Position变量存储位置
      const a_Position = gl.getAttribLocation(program, "a_Position");
      // 2代表每个顶点的分量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position);

      // 设置背景颜色并清空
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // 将平移距离传递给顶点着色器
      const u_Translation = gl.getUniformLocation(program, "u_translation");
      // 将至之传递给uniform属性
      // uniform4f接受齐次坐标，且是vec4类型，这样就能与顶点a_Position相加，GLSL ES只允许相同类型相加
      gl.uniform4f(u_Translation, 0.5, 0.5, 0.0, 0.0);
      // 绘制三角形，3代表三个顶点
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>

预览图

2.2 旋转三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #canvas {
      width: 600px;
      height: 600px;
      position: absolute;
      top: calc(50% - 300px);
      left: calc(50% - 300px);
      background-color: black;
    }
  </style>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      // 通过元素获取二维图形的绘图上下文
      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");

      // 定义顶点着色器
      const vertexShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_xformMatrix;
    void main() {
        gl_Position = u_xformMatrix * a_Position; // 坐标相乘
    }
`;

      // 定义片段着色器
      const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
    }
`;

      // 编译着色器函数
      function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        return shader;
      }

      // 创建和链接着色器程序
      const vertexShader = createShader(
        gl,
        gl.VERTEX_SHADER,
        vertexShaderSource
      );
      const fragmentShader = createShader(
        gl,
        gl.FRAGMENT_SHADER,
        fragmentShaderSource
      );
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

      // 设置顶点数据
      const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      // 连接顶点着色器的a_Position变量
      // 获取a_Position变量存储位置
      const a_Position = gl.getAttribLocation(program, "a_Position");
      // 2代表每个顶点的分量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position);

      // 设置背景颜色并清空
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // 定义旋转矩阵
      // 旋转90°
      const angle = Math.PI / 2;
      // 左乘代表向量旋转 WebGL中矩阵是列主序的，以下可以生成 4x4矩阵
      const matrix = new Float32Array([
        Math.cos(angle),Math.sin(angle), 0.0,0.0,
        -Math.sin(angle),Math.cos(angle),0.0,0.0,
        0.0,0.0,1.0,0.0,
        0.0,0.0,0.0,1.0,
      ]);

      // 将旋转矩阵传递给顶点着色器
      const u_xformMatrix = gl.getUniformLocation(program, "u_xformMatrix");
      // 将至之传递给uniform属性
      // 将matrix表示的4x4矩阵分配给着色器变量u_xformMatrix
      gl.uniformMatrix4fv(u_xformMatrix, false, matrix);
      // 绘制三角形，3代表三个顶点
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>

预览图

gl.getUniformLocation(program, "u_xformMatrix") 获取Uniform类型变量

gl.getAttribLocation(program, "a_Position") 获取attributer类型变量

avatar
文章
阅读
粉丝