let cam, cam_pos;

let mat, mat_frag, mat_vert, mat_depth;

let bg, bg_frag, bg_vert;

let cubemap;

let light, light_dir, light_MVmatrix, light_Pmatrix;

let shadowmap, update_shadowmap = true;

​

function preload() {

  mesh = loadModel('assets/dragon.obj'); 

  cubemap = loadImage('assets/Arches_E_PineTree_3k.jpg');

//   // Fake a depth buffer with this depth material.   

//   mat_depth = loadShader('shaders/depth.vert', 'shaders/depth.frag');

  // Main Material vert/frag files which will be preload as string[] and then parsed using `resolveLygia()` in the setup() in order to resolve all the #include dependencies. 

  mat_vert = loadStrings('shaders/material.vert');

  mat_frag = loadStrings('shaders/material.frag');

//   bg_vert = loadStrings('shaders/background.vert');

//   bg_frag = loadStrings('shaders/background.frag');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  let vertSource = resolveLygia(mat_vert);

  let fragSource = resolveLygia(mat_frag);

  // Hi There! this ^ two lines ^ use `resolveLygia( ... )` to resolve the LYGIA dependencies from the preloaded `shader.vert` and `shader.frag` files. 

  // Check `index.html` to see how it's first added to the project. 

  // And then, the `shader.frag` file to how it's used.

  mat = createShader(vertSource, fragSource);

  // let vertSrc = resolveLygia(bg_vert);

  // let fragSrc = resolveLygia(bg_frag);

  // bg = createShader(vertSrc, fragSrc);

  // Camera  

  cam = createCamera();

  cam_pos = createVector(0, -20, 25);

  cam.perspective(PI / 3.0, windowWidth / windowHeight, 0.1, 500);

  cam.setPosition(cam_pos.x, cam_pos.y, cam_pos.z);

  cam.lookAt(0, 0, 0);

//   // Light/shadow

//   shadowmap = createGraphics(512, 512, WEBGL); 

//   shadowmap.resetMatrix();  

  light_dir = createVector(0, 10, 10);

  light = createCamera();

  noStroke();

}

​

function drawShadowMap() {

  light.setPosition(light_dir.x, light_dir.y, light_dir.z);

  light.lookAt(0, 0, 0);

  light.ortho(-11, 11, 11, -11, 0, 100);

  directionalLight(255, 255, 255, light_dir.x, light_dir.y, light_dir.z);

//   shadowmap.background(255);

//   shadowmap.setCamera(light);

//   shadowmap.noStroke();

  light_MVmatrix = shadowmap._renderer.uMVMatrix;

  light_Pmatrix = shadowmap._renderer.uPMatrix;

//   shadowmap.push();

//   shadowmap.scale(10, 10, 10);

//   shadowmap.shader(mat_depth);

//   shadowmap.model(mesh);

//   shadowmap.pop();

//   shadowmap.reset();

​

  update_shadowmap = false;

}

​

function draw() {

  if (update_shadowmap || frameCount < 3)

    drawShadowMap();

  background(0);

  setCamera(cam);

  let elapsedSeconds = millis()/1000;

  let rotationAngle = elapsedSeconds * 0.8;

  cam_pos.x = sin(rotationAngle) * 50 ;

  cam_pos.y = sin(rotationAngle) * 15 - 15;

  cam_pos.z = cos(rotationAngle) * 50;

  cam.setPosition(cam_pos.x, cam_pos.y, cam_pos.z);

  cam.lookAt(0, 0, 0);

  // orbitControl();

  // // Background   

  // gl = this._renderer.GL;

  // gl.disable(gl.DEPTH_TEST);

  // shader(bg);

  // bg.setUniform('u_cubeMap', cubemap);

  // bg.setUniform('uMV', cam._renderer.uMVMatrix.mat4);

  // bg.setUniform('u_resolution', [width, height] );

  // bg.setUniform('u_mouse', [mouseX, mouseY]);

  // bg.setUniform('u_time', millis() / 1000.0);

  // plane(width, height);

  // resetShader();

  // gl.enable(gl.DEPTH_TEST);

  setCamera(cam);

  push();

  scale(20, 20, 20);

  rotate(PI);

  shader(mat);

  // mat.setUniform('u_cubeMap', cubemap);

  mat.setUniform('u_shadowMap', shadowmap);

  mat.setUniform('u_lightMatrix', light_MVmatrix.mat4);

  mat.setUniform('u_lightPMatrix', light_Pmatrix.mat4);

  mat.setUniform('u_resolution', [width, height] );

  mat.setUniform('u_mouse', [mouseX, mouseY]);

  mat.setUniform('u_time', millis() / 1000.0);

  // Dragon

  fill(255);

  model(mesh);

  // Floor

  fill(120);

  beginShape();

  vertex(-3, -0.7, -3);

  vertex( 3, -0.7, -3);

  vertex( 3, -0.7,  3);

  vertex(-3, -0.7,  3);  

  endShape();

  pop();

  // // Debug Shadowmap

  // resetMatrix();

  // ortho();

  // image(shadowmap, -width*0.5, -height*0.5, 100, 100);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  cam.perspective(PI / 3.0, windowWidth / windowHeight, 0.1, 500);

}