let myShader;

let matcap;

​

function preload() {

  // a shader is composed of two parts, a vertex shader, and a fragment shader

  // the vertex shader prepares the vertices and geometry to be drawn

  // the fragment shader renders the actual pixel colors

  // loadShader() is asynchronous so it needs to be in preload

  // loadShader() first takes the filename of a vertex shader, and then a frag shader

  // these file types are usually .vert and .frag, but you can actually use anything. .glsl is another common one

  myShader = loadShader("shader.vert", "shader.frag");

​

  matcap = loadImage("matcap2.png");

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(windowWidth, windowHeight, WEBGL);

  //noStroke();

  stroke(0);

  strokeWeight(2);

}

​

function draw() {

  background(255);

  // shader() sets the active shader with our shader

  shader(myShader);

​

  // Send the texture to the shader

  myShader.setUniform("uMatcapTexture", matcap);

​

  // Rotate our geometry on the X and Z axes

  rotateX(frameCount * 0.005);

  rotateZ(frameCount * 0.005);

​

  // Draw some geometry to the screen

  box(250);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}