p5.js loadShader() 方法

在 p5.js 中，loadShader() 方法用于在 JavaScript 中加载 GLSL（OpenGL Shading Language）着色器程序，以便在 WebGL 画布上进行更复杂的图像和动画处理。

语法

loadShader(vertexURL, fragmentURL, callbackFunction)

• vertexURL：用于加载着色器程序的顶点着色器代码所在的文件路径。
• fragmentURL：用于加载着色器程序的片元着色器代码所在的文件路径。
• callbackFunction：着色器程序加载完成后要执行的回调函数。

返回值

该方法返回一个 p5.Shader 对象，该对象包含 GLSL 着色器程序的编译、链接、以及 Uniform 变量的设置等信息。

示例

let myShader;

function preload() {
  myShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(0);
  
  shader(myShader);
  // 设置 Uniform 变量 uResolution 的值
  myShader.setUniform('uResolution', [windowWidth, windowHeight]);
  
  // 绘制矩形
  rect(-width/2, -height/2, width, height);
}

上述示例中，通过 loadShader() 方法加载了 shader.vert 和 shader.frag 两个文件中的着色器程序，并将该 p5.Shader 对象存储到了 myShader 变量中。在 draw() 函数中，首先将 myShader 对象传递给 shader() 方法来激活该着色器程序，然后使用 myShader.setUniform() 方法设置 Uniform 变量 uResolution 的值为 [windowWidth, windowHeight]，最后通过 rect() 方法绘制矩形。注意，shader() 和 rect() 方法必须在 setup() 函数中使用 WEBGL 模式创建的画布中进行调用。

可用的 Uniform 变量

以下是 p5.Shader 对象可用的 Uniform 变量列表：

| 变量名 | 类型 | 描述 | | --- | --- | --- | | uPMatrix | mat4 | 投影矩阵 | | uMVMatrix | mat4 | 模型视图矩阵 | | uNormalMatrix | mat3 | 法线矩阵 | | uModelMatrix | mat4 | 模型矩阵 | | uViewMatrix | mat4 | 视图矩阵 | | uTexture | sampler2D | 纹理贴图 | | uResolution | vec2 | 画布分辨率 | | uTime | float | 时间戳 | | mouseX、mouseY | float | 鼠标坐标 | | pmouseX、pmouseY | float | 上一帧鼠标坐标 | | mousePressed | int | 鼠标是否按下（0 或 1） | | frameCount | int | 帧数 |

参考文献

• p5.js Reference