WebGL笔记：WebGL中JS与GLSL ES 语言通信，着色器间的数据传输示例：js控制绘制点位

js改变点位，动态传值

  <canvas id="canvas">canvas>

  
  <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main() {
          // 点位
          gl_Position = a_Position;
          // 尺寸
          gl_PointSize = 50.0;
      }
    script>

  
  <script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1, 1, 0, 1);
    }
  script>

  <script type="module">
    import { initShaders } from "./utils.js";

    const canvas = document.querySelector("#canvas");
    canvas.width = 200;
    canvas.height = 200;

    // 获取着色器文本
    const vsSource = document.querySelector("#vertexShader").innerText;
    const fsSource = document.querySelector("#fragmentShader").innerText;

    // 三维画笔
    const gl = canvas.getContext("webgl");

    // 初始化着色器
    initShaders(gl, vsSource, fsSource);

    // 声明颜色 rgba
    gl.clearColor(0, 0, 0, 1);
    // 刷底色
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 设置attribute 变量
    // a_Position=vec4(1,0,0,1)
    const a_Position = gl.getAttribLocation(gl.program, "a_Position");

    // 修改attribute 变量
    // gl.vertexAttrib3f(a_Position, 0, 1, 0);
    // gl.vertexAttrib2f(a_Position, 0.5, 0.5);
    gl.vertexAttrib1f(a_Position, 0.1);

    // 绘制顶点
    gl.drawArrays(gl.POINTS, 0, 1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

utils.js

export function initShaders(gl, vsSource, fsSource) {
  // 创建程序对象
  const program = gl.createProgram();
  // 建立着色对象
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
  // 把顶点着色对象装进程序对象中
  gl.attachShader(program, vertexShader);
  // 把片元着色对象装进程序对象中
  gl.attachShader(program, fragmentShader);
  // 连接webgl上下文对象和程序对象
  gl.linkProgram(program);
  // 启动程序对象
  gl.useProgram(program);
  // 将程序对象挂到上下文对象上
  gl.program = program;
  return true;
}

function loadShader(gl, type, source) {
  // 根据着色类型，建立着色器对象
  const shader = gl.createShader(type);
  // 将着色器源文件传入着色器对象中
  gl.shaderSource(shader, source);
  // 编译着色器对象
  gl.compileShader(shader);
  // 返回着色器对象
  return shader;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• 关于 attribute

  • 是存储限定符，是专门用于向外部导出与点位相关的对象的，这类似于es6模板语法中export
  • attribute变量只有顶点着色器才能使用
  • js可以通过attribute变量向顶点着色器传递与顶点相关的数据
  • 不能使用js语法来修改attribute变量的值，需要使用特定方法改变，如：vertexAttrib1f，vertexAttrib2f，vertexAttrib3f
    • gl.vertexAttrib3f() 方法的参数中：
      • a_Position 就是咱们之前获取的着色器变量
      • 后面的3个参数是顶点的x、y、z位置

• 关于 gl.getAttribLocation

  • 是获取着色器中attribute变量的方法
  • getAttribLocation() 方法的参数中：
    • gl.program 是初始化着色器时，在上下文对象上挂载的程序对象
    • ‘a_Position’ 是着色器暴露出的变量名

• 关于 vertexAttrib3f() 同族函数命名规律

  • 同族函数是一系列修改着色器中的 attribute 变量的方法之一
  • vertexAttrib1f(location, v0)
  • vertexAttrib2f(location, v0, v1)
  • vertexAttrib3f(location, v0, v1, v2)
  • vertexAttrib4f(location, v0, v1, v2, v3)
    • 备注
      • 1,2,3是参数个数
      • f是浮点的意思