P5.js createShader() 方法

简介

createShader() 是 p5.js 中的一个函数，它返回一个着色器对象。着色器是一个能够在 WebGL 中绘制三维图形的程序，用于控制渲染方式。

使用 p5.js 中的 createShader() 方法，您可以创建自定义的顶点着色器和片元着色器。顶点着色器用于确定每个顶点的位置，纹理坐标，颜色和法向量。片元着色器则根据顶点着色器生成的数据为每个像素计算颜色。

示例

以下示例演示了如何使用 createShader() 方法创建着色器对象和将其用于绘制过程。

let theShader;
let img;

function preload() {
  img = loadImage('assets/image.jpg');
  theShader = loadShader('shader.vert', 'shader.frag');
}

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

function draw() {
  background(0);

  // 设置着色器
  shader(theShader);

  // 将加载的图片传入着色器的 uniform 变量
  theShader.setUniform('u_img', img);

  // 通过 p5.js 的内置 webgl 渲染管道绘制一个矩形
  rect(0,0,width,height);
}

代码分析

首先，我们通过 preload() 加载了一个图片和一个使用顶点着色器和片元着色器编写的着色器文件。

let theShader;
let img;

function preload() {
  img = loadImage('assets/image.jpg');
  theShader = loadShader('shader.vert', 'shader.frag');
}

之后，在 setup() 函数中，我们创建了一个 710 * 400 像素的画布，并且设置了一个 WEBGL 渲染模式，之后我们禁用了线段的描边效果。

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

在 draw() 函数中，我们将刚刚预加载的着色器应用到画布上，通过设置 shader() 为 theShader 变量。

function draw() {
  background(0);

  // 设置着色器
  shader(theShader);

  // 将加载的图片传入着色器的 uniform 变量
  theShader.setUniform('u_img', img);

  // 通过 p5.js 的内置 webgl 渲染管道绘制一个矩形
  rect(0,0,width,height);
}

这里为着色器文件传递了一个图片作为 uniform 变量，theShader.setUniform() 方法需要将图片传递到 shader.frag 文件，用变量名 u_img 引用该变量。

总结

createShader() 方法提供了一个非常好的方式来创建自定义的 WebGL 渲染程序，并且与 p5.js 中的其他方法一起使用，可以方便地绘制各种复杂的三维图形。由于 p5.js 的 API 非常好用，所以即使你没有太多经验，也可以很快上手。