Shadows

examples/src/scene.js

@@ -1,4 +1,5 @@
 import _controls from 'orbit-controls';
+import lerp from 'lerp';
 const controls = _controls({
   position: [0, 0, 10]
 });
@@ -12,11 +13,41 @@ NEXT.Shader.collection = NEXT.shaders;
 
 const scene = new NEXT.Scene();
 
-const dirLight = new NEXT.DirectionalLight();
-dirLight.intensity = 3;
-dirLight.position.set(0, 10, 0);
+const dirLight = new NEXT.DirectionalLight({
+  shadow: {
+    width: 2048,
+    height: 2048
+  }
+});
+
+dirLight.intensity = 0.5;
+dirLight.position.set(0, 5, 0);
 dirLight.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
+
+const dirLight2 = new NEXT.DirectionalLight({
+  shadow: {
+    width: 2048,
+    height: 2048
+  }
+});
+
+dirLight2.intensity = 0.5;
+dirLight2.position.set(0, 5, 0);
+dirLight2.quaternion.setFromEuler(-Math.PI / 3, 0, 0);
+
+const dirLight3 = new NEXT.DirectionalLight({
+  shadow: {
+    width: 2048,
+    height: 2048
+  }
+});
+
+dirLight3.intensity = 0.5;
+dirLight3.position.set(0, 5, 0);
+dirLight3.quaternion.setFromEuler(-Math.PI / 1.5, 0, 0);
+scene.add(dirLight2);
 scene.add(dirLight);
+scene.add(dirLight3);
 
 const camera = new NEXT.Camera({
   type: 'perspective',
@@ -82,7 +113,7 @@ const flat2 = new NEXT.FlatMaterial({
     `,
     f_main: () => `
       // float n = 1.0;
-      // float f = 100.0;
+      // float f = 1000.0;
       // float z = texture(fbo, v_uv).x;
       // float grey = (2.0 * n) / (f + n - z*(f-n));
       // color = vec3(grey);
@@ -99,18 +130,19 @@ const flat2 = new NEXT.FlatMaterial({
 
 setTimeout(() => {
   console.log(flat2.uniforms);
-  flat2.uniforms.fbo = window.shadowMap.texture;
+  flat2.uniforms.fbo = dirLight3.shadowMap.depthTexture;
 }, 1000);
 
 // flat2
 
 const plane = new NEXT.Plane({
   width: 4,
-  height: 2,
+  height: 4,
   shader: flat2
 });
 
 plane.position.set(6, 0, 0);
+window.test = plane;
 // plane.quaternion.setFromEuler(-Math.PI, 0, 0);
 
 // vec3.set(plane.position, 6, 0, 0);
@@ -119,7 +151,7 @@ scene.add(plane);
 
 let cam = camera;
 
-(function update() {
+(function update(time) {
   requestAnimationFrame(update);
 
   controls.update();
@@ -134,6 +166,13 @@ let cam = camera;
 
   // plane.visible = false;
   // renderer.render(orthoCamera, fb);
+  const progress = (Math.sin(time / 400) + 1) / 2;
+
+  if (typeof dirLight !== 'undefined') {
+    dirLight.position.y = lerp(10, 5, progress);
+    dirLight.quaternion.setFromEuler(lerp(-Math.PI / 2, -Math.PI/ 3, progress), 0, 0);
+  }
+
   plane.visible = true;
   renderer.render(camera);
 })();

package.json

@@ -27,6 +27,7 @@
     "gulp": "^3.9.1",
     "gulp-cli": "^2.0.1",
     "gulp-watch": "^5.0.1",
+    "lerp": "^1.0.3",
     "normals": "^1.1.0",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^4.0.0-beta.8",

src/core/Camera.js

@@ -4,10 +4,11 @@ import {Mat4} from '../math/Mat4';
 export class Camera extends Object3D {
   static ortho(width, height, near = 1, far = 100) {
     return new Camera({
+      type: 'ortho',
       left: -width / 2,
       right: width / 2,
-      top: height / 2,
-      bottom: -height / 2,
+      top: -height / 2,
+      bottom: height / 2,
       near, far
     });
   }

src/core/Light.js

@@ -3,6 +3,11 @@ import {Object3D} from './Object3D';
 export class Light extends Object3D {
   isLight = true;
 
+  static shadowDefaults = {
+    width: 1024,
+    height: 1024
+  }
+
   constructor() {
     super();
     this.color = [1, 1, 1];

src/core/Object3D.js

@@ -27,14 +27,14 @@ export class Object3D extends Events {
     this.matrix.compose(this.position, this.quaternion, this.scale);
   }
 
-  updateMatrixWorld() { // Consider to be called after updateMatrix()
+  updateMatrixWorld(parent) { // Consider to be called after updateMatrix()
     // TODO: Replace with Math API
-    if (!this.parent) {
+    if (!this.parent && !parent) {
       copy(this.matrixWorld.value, this.matrix.value);
       return;
     }
 
-    multiply(this.matrixWorld.value, this.matrix.value, this.parent.matrix.value);
+    multiply(this.matrixWorld.value, this.matrix.value, (parent || this.parent).matrix.value);
   }
 
   add(child) {

src/core/Program.js

@@ -6,28 +6,56 @@ import {Geometry} from './Geometry';
 
 const _geometryRefs = new WeakMap();
 
+function unrollLoops(string) {
+  const regex = /#define ([aA-zZ]+) (\d+)/g;
+
+  const defines = string.match(regex)
+    .map(regex.exec.bind(regex))
+    .reduce((c, v) => Object.assign(c, v ? {[v[1]]: Number(v[2])} : {}), {});
+
+	const pattern = /#pragma unroll_loop[\s]+?for \(int i \= (\d+)\; i < ([aA-zZ]+)\; i\+\+\) \{([\s\S]+?)(?=\})\}/g;
+
+	function replace(match, start, end, snippet) {
+    console.log(end in defines ? defines[end] : end);
+		let unroll = '';
+
+		for (let i = parseInt( start ); i < parseInt( end in defines ? defines[end] : end ); i++) {
+			unroll += snippet.replace(/\[i\]/g, '[' + i + ']').replace(/([^aA-zZ]+)i([^aA-zZ]+)/g, `$1${i}$2`);
+      console.log(snippet);
+		}
+
+		return unroll;
+	}
+
+  const res = string.replace(pattern, replace);
+  // console.log(res);
+
+	return res;
+}
+
 export class Program {
+  static sources = new Map();
+
   static createShader = (gl, type, source) => {
     type = type === 'vertex' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER;
     const shader = gl.createShader(type);
 
-    gl.shaderSource(shader, source);
+    gl.shaderSource(shader, Program.preprocessShader(source));
     gl.compileShader(shader);
 
     return Program.debugShader(gl, shader);
   }
 
   static dynamicDefines = (gl, shader, defines) => {
-    let source = gl.getShaderSource(shader);
+    let source = shader.source || gl.getShaderSource(vertexShader);
     source = source.substr(source.indexOf('#version 300 es') + 15, source.length);
 
     for (let name in defines) {
       source = source.replace(new RegExp(`\\#define\\s(${name})\\s(.*)`), '#define $1 ' + defines[name]);
       if (source.indexOf(`#define ${name}`) < 0) source = `#define ${name} ${defines[name]} \n` + source;
     }
 
-    gl.shaderSource(shader, '#version 300 es\n' + source);
-    // gl.compileShader(shader);
+    shader.source = '#version 300 es\n' + source;
   }
 
   static debugShader = (gl, shader) => {
@@ -71,6 +99,11 @@ export class Program {
     gl.deleteProgram(program);
   }
 
+  static preprocessShader = source => {
+    // return source;
+    return unrollLoops(source);
+  }
+
   constructor(options = {}, geometry) {
     const {
       vert, frag, draw, count,
@@ -90,8 +123,11 @@ export class Program {
     this.vertexShader = vertexShader;
     this.fragmentShader = fragmentShader;
 
-    this.vert = vertexShader ? 'linked shader is used' : vert;
-    this.frag = fragmentShader ? 'linked shader is used' : frag;
+    this.vert = vertexShader ? gl.getShaderSource(vertexShader) : vert;
+    this.frag = fragmentShader ? gl.getShaderSource(fragmentShader) : frag;
+
+    // console.log(Program.sources.get(this.vertexShader));
+    // debugger;
 
     this.draw = draw || 'triangles';
     this.uniforms = uniforms instanceof UniformStack ? uniforms : new UniformStack(uniforms);
@@ -135,6 +171,20 @@ export class Program {
     this.vertexShader = this.vertexShader || Program.createShader(gl, 'vertex', this.vert);
     this.fragmentShader = this.fragmentShader || Program.createShader(gl, 'fragment', this.frag);
 
+    Object.defineProperty(this.vertexShader, 'source', {
+      get: () => this.vert,
+      set: (source) => {
+        this.vert = source;
+      }
+    });
+
+    Object.defineProperty(this.fragmentShader, 'source', {
+      get: () => this.frag,
+      set: (source) => {
+        this.frag = source;
+      }
+    });
+
     const program = gl.createProgram();
 
     gl.attachShader(program, this.vertexShader);

src/core/Renderer.js

@@ -62,9 +62,6 @@ export class Renderer {
   }
 
   attach(program) {
-    if (!program._compiledProgram)
-      program._compiledProgram = program._compile(this.context, this);
-
     const uniforms = Object.entries(Object.getOwnPropertyDescriptors(program.uniforms));
     const self = _locals.get(this);
 
@@ -170,28 +167,41 @@ export class Renderer {
     });
 
     // Clear the canvas
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    if (frameBuffer)
+      gl.viewport(0, 0, frameBuffer.width, frameBuffer.height);
+    else
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
     self.TEXTURE_UNIT = 0;
 
     for (let i = 0, l = this._programs.length; i < l; i++) {
       const program = this._programs[i];
       if (!program.enabled) continue;
+
+      if (!program._compiledProgram)
+        program._compiledProgram = program._compile(gl, this);
       // const uniforms = Object.entries(Object.getOwnPropertyDescriptors(program.uniforms));
 
       for (let i = 0, l = this.extensions.length; i < l; i++)
         if (this.extensions[i].program) this.extensions[i].program.call(this, gl, program, self);
 
       if (program.needsUpdate) {
-        gl.compileShader(program.fragmentShader);
-        gl.compileShader(program.vertexShader);
+        const {vertexShader, fragmentShader} = program;
+
+        gl.shaderSource(vertexShader, Program.preprocessShader(vertexShader.source));
+        gl.shaderSource(fragmentShader, Program.preprocessShader(fragmentShader.source));
+
+        gl.compileShader(vertexShader);
+        gl.compileShader(fragmentShader);
+
         gl.linkProgram(program._compiledProgram);
 
-        Program.debugProgram(gl, program._compiledProgram, program.fragmentShader, program.vertexShader);
+        Program.debugProgram(gl, program._compiledProgram, fragmentShader, vertexShader);
 
-        Program.debugShader(gl, program.fragmentShader);
-        Program.debugShader(gl, program.vertexShader);
+        Program.debugShader(gl, fragmentShader);
+        Program.debugShader(gl, vertexShader);
 
         program.needsUpdate = false;
 

src/core/Texture.js

@@ -94,7 +94,7 @@ export class Texture {
   _bind(gl) {
     const unit = textureUnit.get(this);
 
-    gl.activeTexture(gl['TEXTURE' + unit]);
+    gl.activeTexture(gl.TEXTURE0 + unit);
     gl.bindTexture(gl.TEXTURE_2D, this._compiledTexture);
 
     return textureUnit.get(this);