​

let cam; 

let cam_pos;

​

let mat;

let mat_frag;

let mat_vert;

​

let bg;

let bg_frag;

let bg_vert;

​

let cubemap;

​

function preload() {

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

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

  // 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);

  noStroke();

}

​

function draw() {

  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);

  // Dragon

  push();

  scale(20, 20, 20);

  rotate(PI);

  shader(mat);

  directionalLight(255, 255, 255, 0, 10, 10);

  mat.setUniform('u_cubeMap', cubemap);

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

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

  fill(255);

  model(mesh);

  pop();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

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

}