これは、p5.jsでシェーダーを読み込む方法を示す基本的な例です。
shader GLSL WEBGL
3D Shader
View Source Code
/*
* @name Basic Shader
* @arialabel Background with a cyan to purple gradient
* @description This is a basic example showing how to load shaders in p5.js.
* <br> To learn more about using shaders in p5.js: <a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>
*/
// this variable will hold our shader object
let theShader;
function preload(){
// load the shader
// theShader = loadShader('assets/basic.vert', 'assets/basic.frag');
theShader = loadShader('../../../../p5js-website-legacy-examples/assets/basic.vert', '../../../../p5js-website-legacy-examples/assets/basic.frag');
}
function setup() {
// shaders require WEBGL mode to work
// createCanvas(710, 400, WEBGL);
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);
}
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.