【p5js shader翻译教程】1.4 在p5.js中设置shader

该文章为翻译而来，原文链接：
https://itp-xstory.github.io/p5js-shaders/#/./docs/setting-up-shaders-in-p5

该系列翻译文章将不定期更新，将用于学习记录，若有侵权，请联系我。

1.4 在p5.js中设置shader

现在我们知道了什么是shader，以及它与之前写的p5js代码有什么不同，让我们看看p5中shader的一个简单例子，这样我们就可以开始写我们自己的shader了！

我们先看一下p5.js的代码。

首先，我们创建一个变量，用来存放我们的p5草图中的shader。

let theShader;

然后，我们必须预先加载我们的shader文件，并将其存储在我们的shader变量中，使程序在运行其setup() or draw() 函数之前加载它们。我们的shader需要两个文件，这一点稍后再谈。

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

现在在setup()函数中，我们创建画布。p5.js中的shader是使用WebGL渲染的，所以我们必须确保在createCanvas()函数中指定WEBGL作为第三个参数。

我们还为这个例子指定了noStroke()，所以我们的shader是无边界的。

function setup() {
  createCanvas(200,200,WEBGL);
  noStroke();
}

现在在draw()函数中，我们必须使用内置的shader()函数设置我们的活动shader，并为shader创建一个p5js中的矩形。

你可以将shader应用于任何形状，除非你在代码中指定一个形状，否则shader不会工作。

function draw() {
  shader(theShader);
  rect(0,0,width,height);
}

完整代码如下。

// a shader variable
let theShader;
function preload(){
  // load the shader
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  // shaders require WEBGL mode to work
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {
  // shader() sets the active shader with our shader
  shader(theShader);
  // rect gives us some geometry on the screen
  rect(0,0,width,height);
  // print out the framerate
  //  print(frameRate());
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

这就是p5js中加载shader的代码! 现在你知道如何将shader加载到p5中。下一节我们将看看如何编写shader。

上文是本地编辑代码部分，原文中还有两个设置，可以在线编辑代码（p5.js Editor和Glitch），但国内不好打开，故这边我就没有翻译了，感兴趣的小伙伴可以上开头的链接查看。

写在最后

我创建了一个公众小号【p5js艺术小站】，里面会更新各种作品、教程等精彩内容，欢迎各位大佬关注指导，共同进步！！！