Basic Shader / 基本シェーダー

これは、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.