P5.js的shader()方法介绍

shader()方法是P5.js函数库的一部分，可以用于 WebGL 着色器的编写和使用。它允许用户在浏览器中创建自己的着色器并对其进行操纵。着色器是一种非常强大的视觉特效工具，可以帮助您实现各种视觉效果和动画。

用法

着色器需要使用 P5.js 的 createShader() 函数来创建。着色器可以通过 shader()方法将其应用于图形对象。以下是一个简单的示例：

let theShader;

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

function setup() {
    createCanvas(400, 400, WEBGL);
}

function draw() {
    shader(theShader);
}

在上面的代码中，我们使用 preload() 方法来加载着色器文件。在 setup() 中我们创建一个 WEBGL 画布。在 draw() 中，我们使用 shader()方法将着色器应用于画布的所有渲染。

在这个例子中，我们没有传递任何参数给shader()方法。但是，我们可以传递一些参数来操纵着色器。让我们看看如何传递参数。

以下是一个着色器文件 shader.frag 作为例子：

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
}

这就是一个简单的着色器，它将屏幕分成网格并在网格的每个角落放置颜色。

我们可以将一些参数传递给这个着色器，例如时间、鼠标位置和分辨率。这是如何使用shader()方法将这些参数传递给着色器的例子：

let theShader;

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

function setup() {
    createCanvas(400, 400, WEBGL);
}

function draw() {
    shader(theShader);
    theShader.setUniform('u_resolution', [width, height]);
    theShader.setUniform('u_mouse', [mouseX, mouseY]);
    theShader.setUniform('u_time', millis() / 1000);
}

在 draw() 中，我们使用 shader()方法将着色器应用于渲染。我们接下来使用 setUniform()方法来传递参数。其中，u_resolution参数是屏幕分辨率，u_mouse参数是鼠标位置，u_time参数是时间。这些参数可以在着色器代码中使用。

总结

shader()方法是 P5.js 函数库的一个函数，用于在浏览器中使用 WebGL 着色器。着色器是一种非常强大的视觉特效工具，可以帮助您实现各种视觉效果和动画。

在使用 shader() 方法时，需要使用 createShader() 函数来创建着色器；可以使用 setUniform() 方法来传递参数给着色器。