README

js/deferredRender.js

@@ -71,7 +71,7 @@
         for (var i = 0; i < R.lights.length; i++) {
             var mn = R.light_min[1];
             var mx = R.light_max[1];
-            R.lights[i].pos[1] = (R.lights[i].pos[1] + R.light_dt - mn + mx) % mx + mn;
+            //R.lights[i].pos[1] = (R.lights[i].pos[1] + R.light_dt - mn + mx) % mx + mn;
         }
 
         // Update light textures with new position values
@@ -84,7 +84,7 @@
             // Do a debug render instead of a regular render
             // Don't do any post-processing in debug mode
             R.pass_debug.render(state);
-        } else if (cfg.optimization === 1) {
+        } else if (cfg.optimization == 1) {
             R.pass_tiled.render(state);
             R.pass_post1.render(state);
         } else {
@@ -154,7 +154,6 @@
         var TILES_WIDTH  = Math.ceil((width+1)  / TILE_SIZE);
         var TILES_HEIGHT = Math.ceil((height+1) / TILE_SIZE);
         var NUM_TILES = TILES_WIDTH * TILES_HEIGHT;
-        var MAX_LIGHTS = 200;
 
         // [ tiles ] [ lights per tile ].
         var tileLights = [];
@@ -190,7 +189,7 @@
         }
 
         // Generate textures from tileLights.
-        var lightIndices = new Float32Array(MAX_LIGHTS * NUM_TILES);
+        var lightIndices = new Float32Array(R.MAX_LIGHTS * NUM_TILES);
         var tileOffsets  = new Float32Array(3 * NUM_TILES);
 
         // Loop over tiles
@@ -203,7 +202,7 @@
             tileOffsets[3*tileIdx+1] = (totalOffset % 4096) + 0.5;
             tileOffsets[3*tileIdx+2] = Math.floor(totalOffset / 4096) + 0.5;
 
-            for (lightIdx = 0; lightIdx < Math.min(len, MAX_LIGHTS); lightIdx++) {
+            for (lightIdx = 0; lightIdx < Math.min(len, R.MAX_LIGHTS); lightIdx++) {
                 lightIndices[totalOffset] = lights[lightIdx];
                 totalOffset++;
             }
@@ -283,8 +282,9 @@
         gl.uniform1f(R.prog_Ambient.u_ambientTerm, cfg.ambient);
         renderFullScreenQuad(R.prog_Ambient);
 
-        if (cfg.enableScissor) {
+        if (cfg.optimization == 0) {
             gl.enable(gl.SCISSOR_TEST);
+        } else {
         }
 
         // * Bind/setup the Blinn-Phong pass, and render using fullscreen quad
@@ -356,12 +356,7 @@
         // vertex shader doesn't have to do any transformation; draw two
         // triangles which cover the screen over x = -1..1 and y = -1..1.
         // This array is set up to use gl.drawArrays with gl.TRIANGLE_STRIP.
-        var positions = new Float32Array([
-            -1.0, -1.0, 0.0,
-             1.0, -1.0, 0.0,
-            -1.0,  1.0, 0.0,
-             1.0,  1.0, 0.0
-        ]);
+        var positions = R.quadPositions;
 
         var vbo = null;
 

js/deferredSetup.js

@@ -10,29 +10,37 @@
     R.lights = [];
     R.lightTexturePosRad = new Float32Array();
     R.lightTextureCol    = new Float32Array();
+    R.quadPositions = new Float32Array([
+            -1.0, -1.0, 0.0,
+             1.0, -1.0, 0.0,
+            -1.0,  1.0, 0.0,
+             1.0,  1.0, 0.0
+        ]);
+    R.lightIndices = new Float32Array(100);
 
     R.NUM_GBUFFERS = 4;
 
     /**
      * Set up the deferred pipeline framebuffer objects and textures.
      */
     R.deferredSetup = function() {
-        R.setupLights(R.NUM_LIGHTS, R.LIGHT_RADIUS);
+        R.setupLights(R.NUM_LIGHTS, R.LIGHT_RADIUS, 48);
         loadAllShaderPrograms();
         R.pass_copy.setup();
         R.pass_deferred.setup();
         R.pass_tiled.setup();
     };
 
-    R.light_min = [-14, 0, -6];
-    R.light_max = [14, 18, 6];
+    R.light_min = [-14, 0, -4];
+    R.light_max = [14, 18, 4];
     R.light_dt = -0.03;
 
     // defaults
     R.LIGHT_RADIUS = 4.0;
     R.NUM_LIGHTS = 20;
+    R.MAX_LIGHTS = 200;
 
-    R.setupLights = function(numLights, lightRadius) {
+    R.setupLights = function(numLights, lightRadius, numTiles) {
         Math.seedrandom(0);
 
         var posfn = function() {
@@ -65,6 +73,9 @@
 
         R.lightTexturePosRad = new Float32Array(4 * numLights);
         R.lightTextureCol    = new Float32Array(3 * numLights);
+
+        R.lightIndices = new Float32Array(R.MAX_LIGHTS, numTiles);
+
         // Store colors
         for (i = 0; i < numLights; i++) {
             var light = R.lights[i];

js/framework.js

@@ -68,7 +68,7 @@ var width, height;
 
     var init = function() {
         // TODO: For performance measurements, disable debug mode!
-        var debugMode = true;
+        var debugMode = false;
 
         canvas = document.getElementById('canvas');
         renderer = new THREE.WebGLRenderer({

js/ui.js

@@ -12,7 +12,7 @@ var cfg;
 
         this.ambient = 0.1;
         this.lightRadius = 4.0;
-        this.numLights = 10;
+        this.numLights = 50;
 
         this.tileSize = 100;
         this.tileDebugView = -1;
@@ -32,7 +32,6 @@ var cfg;
             '[4] Normal map':      4,
             '[5] Surface normal':  5
         });
-        debug.add(cfg, 'debugScissor');
         debug.open();
 
         var opt = gui.addFolder('Optimizations');
@@ -41,25 +40,31 @@ var cfg;
             'Scissor': 0,
             'Tile':    1,
         });
+        opt.add(cfg, 'debugScissor');
         opt.open();
 
         var effects = gui.addFolder('Effects');
         effects.add(cfg, 'toon');
         effects.open();
 
         var updateLights = function() {
-            R.setupLights(cfg.numLights, cfg.lightRadius);
+            var TILE_SIZE = cfg.tileSize;
+            var TILES_WIDTH  = Math.ceil((width+1)  / TILE_SIZE);
+            var TILES_HEIGHT = Math.ceil((height+1) / TILE_SIZE);
+            var NUM_TILES = TILES_WIDTH * TILES_HEIGHT;
+            R.setupLights(cfg.numLights, cfg.lightRadius, NUM_TILES);
         };
 
         var consts = gui.addFolder('Constants');
         consts.add(cfg, 'ambient', 0.1, 1.0);
         consts.add(cfg, 'lightRadius', 0.5, 10.0).onFinishChange(updateLights);
         consts.add(cfg, 'numLights').min(5).max(500).step(5).onFinishChange(updateLights);
+        //consts.add(cfg, 'numLights').min(50).max(100).step(10).onFinishChange(updateLights);
 
         consts.open();
 
         var tileOpts = gui.addFolder('Tile Options');
-        tileOpts.add(cfg, 'tileSize').min(10).max(100).step(5);
+        tileOpts.add(cfg, 'tileSize').min(10).max(150).step(25);
         tileOpts.add(cfg, 'tileDebugView', {
             'None': -1,
             '# Lights': 0