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);// 声明颜色 rgbagl.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);

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;
}

• 关于 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是浮点的意思