返回

WebGL第八课：玩转顶点着色器(2)

前端

WebGL第八课：玩转顶点着色器(2)

本节要点

本节内容涉及到如何将滑竿融入顶点着色器，进而控制顶点着色器的表现。

顶点着色器与滑竿

传统的顶点着色器可以通过接收uniform参数的方式，可以接收来自外部的变量。我们可以在外部创建一个滑竿，绑定到顶点着色器中作为uniform参数，进而实现外部属性对内部表现的调节。

实现原理

实现这一功能只需要绑定一个滑竿到uniform参数上。

  1. 在程序中创建滑竿。
  2. 在顶点着色器中声明一个uniform参数。
  3. 在程序中将滑竿与uniform参数进行绑定。

具体步骤

  1. 创建一个WebGl程序，并获取其顶点着色器。
  2. 在顶点着色器中声明一个uniform变量。
  3. 在HTML中创建一个滑竿。
  4. 在JavaScript中获取滑竿和WebGl程序。
  5. 将滑竿与顶点着色器的uniform变量进行绑定。
  6. 渲染场景。

注意

使用滑竿控制uniform变量时，需要确保滑竿的值在uniform变量的取值范围内，否则可能会导致程序崩溃。

代码实现

// 顶点着色器
const vertexShaderSource = `
    attribute vec3 a_position;
    uniform float u_time;
    void main() {
      gl_Position = vec4(a_position * sin(u_time), 1.0);
    }
`;

// 片段着色器
const fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 创建WebGl程序
const gl = createWebGLContext();

// 创建顶点着色器
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

// 创建片段着色器
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

// 创建程序对象
const program = createProgram(gl, vertexShader, fragmentShader);

// 获取uniform变量的位置
const timeLocation = gl.getUniformLocation(program, "u_time");

// 创建滑竿
const slider = createSlider();

// 绑定滑竿和uniform变量
gl.useProgram(program);
gl.uniform1f(timeLocation, slider.value);

// 渲染场景
gl.drawArrays(gl.TRIANGLES, 0, 3);

运行结果

我们现在可以改变滑竿的值来控制正弦曲线的周期，从而改变三角形在屏幕上的位置。

滑竿控制正弦曲线周期

  • 滑动滑竿，控制正弦曲线周期
  • 观察三角形在屏幕上的位置发生变化

注意

本课内容涉及到比较复杂的概念，因此可能需要一定的时间来理解和消化。如果您在学习过程中遇到任何困难，请随时寻求帮助。

更多资源