Shader Using Webcam / ウェブカメラを使用したシェーダー

ウェブカメラはテクスチャとしてシェーダーに渡すことができます。

webcam video texture shader
3D Shader Video

View Source Code

/*
 * @name Shader Using Webcam
 * @arialabel Neon texture added to the scene displayed by the user’s built-in webcam
 * @description The webcam can be passed to shaders as a texture.
 * <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;
 // this variable will hold our webcam video
 let cam;

 function preload(){
   // load the shader
   // theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag');
   theShader = loadShader('../../../../p5js-website-legacy-examples/assets/webcam.vert', '../../../../p5js-website-legacy-examples/assets/webcam.frag');
 }

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

   cam = createCapture(VIDEO);
   cam.size(710, 400);

   cam.hide();
 }

 function draw() {
   // shader() sets the active shader with our shader
   shader(theShader);

   // passing cam as a texture
   theShader.setUniform('tex0', cam);

   // 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.