Shadow Mapping

let shadow_map;

let shadow_shader;

let main_shader;

let mvMatrixs = [];

let light_pos;

let pointlight_or_not = true;

​

let radio;

​

function setup() {

  createCanvas(windowWidth*0.9, windowHeight*0.9, WEBGL);

  noStroke();

  camera(0, -80, 250, 0, 0, 0, 0, 1, 0);

  light_pos = createVector(180, 0, 0)

​

  shadow_map = createGraphics(1024, 1024, WEBGL);

  shadow_shader = shadow_map.createShader(shadow_vert, shadow_frag);

  shadow_map.shader(shadow_shader);

  main_shader = createShader(lighting_shader + vert, frag);

  shader(main_shader);

  radio = createRadio();

  radio.option('Use Point Light');

  radio.option('Use Directional Light');

  radio.selected('Use Point Light');

}

​

function draw() {

  pointlight_or_not = radio.value() == 'Use Point Light' ? true : false;

  light_pos.set(180*cos(millis()/1000.0), -180*sin(millis()/1000.0), 0);

  shadow_map.clear();

  shadow_map.noStroke();

  shadow_map.fill(0);

  shadow_map.camera(light_pos.x, light_pos.y, light_pos.z, 0, 0, 0, -sin(millis()/1000.0), -cos(millis()/1000.0), 0);

  if (pointlight_or_not == true) {

    shadow_map.perspective(HALF_PI, 1.0, 0.001, 1000.0);

  } else {

    shadow_map.ortho(-width/2, width/2, height/2, -height/2, 0.001, 1000);

  }

  shadow_shader.setUniform("uUsePointlight", pointlight_or_not);

  mvMatrixs.length = 0;

  shadow_map.push();

  shadow_map.fill(255);

  shadow_map.rotateX(HALF_PI);

  shadow_map.scale(250);

  mvMatrixs.push(shadow_map._renderer.uMVMatrix.mat4);

  shadow_map.plane(1, 1, 80, 80);

  shadow_map.pop();

  shadow_map.push();

  shadow_map.fill(255, 0, 0);

  shadow_map.translate(-50, -80, 0);

  shadow_map.scale(30);

  mvMatrixs.push(shadow_map._renderer.uMVMatrix.mat4);

  shadow_map.torus(1, 0.5, 40, 40);

  shadow_map.pop();

  shadow_map.push();

  shadow_map.fill(0, 255, 0);

  shadow_map.translate(-10, -20, 80);

  shadow_map.scale(40);

  mvMatrixs.push(shadow_map._renderer.uMVMatrix.mat4);

  shadow_map.box(1, 1, 1, 40, 40);

  shadow_map.pop();

  shadow_map.push();

  shadow_map.fill(0, 0, 255);

  shadow_map.translate(50, -30, 30);

  shadow_map.scale(25);

  mvMatrixs.push(shadow_map._renderer.uMVMatrix.mat4);

  shadow_map.sphere(1, 40, 40);

  shadow_map.pop();

  main_shader.setUniform("uUsePointlight", pointlight_or_not);

  main_shader.setUniform("uShadow", shadow_map);

  main_shader.setUniform("uShadowPMatrix", shadow_map._renderer.uPMatrix.mat4);

  background(200);

  orbitControl();

  if (pointlight_or_not == 1) {

    pointLight(255, 255, 255, light_pos);

  } else {

    directionalLight(255, 255, 255, -light_pos.x, -light_pos.y, 0);

  }

  push();

  fill(255);

  main_shader.setUniform("uShadowMVMatrix", mvMatrixs[0]);

  rotateX(HALF_PI);

  plane(250, 250, 80, 80);

  pop();

  push();

  fill(255, 50, 50);

  main_shader.setUniform("uShadowMVMatrix", mvMatrixs[1]);

  translate(-50, -80, 0);

  torus(30, 15, 40, 40);

  pop();

  push();

  fill(50, 255, 50);

  main_shader.setUniform("uShadowMVMatrix", mvMatrixs[2]);

  translate(-10, -30, 80);

  box(40, 40, 40, 40, 40);

  pop();

  push();

  fill(50, 50, 255);

  main_shader.setUniform("uShadowMVMatrix", mvMatrixs[3]);

  translate(50, -30, 30);

  sphere(25, 40, 40);

  pop();

}