Optimised

src/renderers/clusteredDeferred.js

@@ -36,7 +36,7 @@ export default class ClusteredDeferredRenderer extends BaseRenderer {
             numZSlices: zSlices,
             numClusters: xSlices * ySlices * zSlices
         }), {
-            uniforms: ['u_gbuffers[0]', 'u_gbuffers[1]', 'u_gbuffers[2]', 'u_gbuffers[3]', 'u_lightbuffer', 'u_viewMatrix', 'u_clipDist', 'u_clusterbuffer', 'u_cameraPos'],
+            uniforms: ['u_gbuffers[0]', 'u_gbuffers[1]', 'u_gbuffers[2]', 'u_gbuffers[3]', 'u_lightbuffer', 'u_viewMatrix', 'u_clipDist', 'u_clusterbuffer', 'u_cameraPos', 'u_projMatrixInv', 'u_viewProjectionMatrix'],
             attribs: ['a_uv'],
         });
 
@@ -98,7 +98,7 @@ export default class ClusteredDeferredRenderer extends BaseRenderer {
 
         gl.bindTexture(gl.TEXTURE_2D, this._depthTex);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
-        
+
         for (let i = 0; i < NUM_GBUFFERS; i++) {
             gl.bindTexture(gl.TEXTURE_2D, this._gbuffers[i]);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);
@@ -165,6 +165,7 @@ export default class ClusteredDeferredRenderer extends BaseRenderer {
         gl.uniform1f(this._progShade.u_clipDist, camera.far - camera.near);
 
         gl.uniformMatrix4fv(this._progShade.u_viewMatrix, false, this._viewMatrix);
+        gl.uniformMatrix4fv(this._progShade.u_viewProjectionMatrix, false, this._viewProjectionMatrix);
 
 
 
@@ -175,6 +176,9 @@ export default class ClusteredDeferredRenderer extends BaseRenderer {
             gl.bindTexture(gl.TEXTURE_2D, this._gbuffers[i]);
             gl.uniform1i(this._progShade[`u_gbuffers[${i}]`], i + firstGBufferBinding);
         }
+        var invProj = mat4.create();
+        mat4.invert(invProj, this._projectionMatrix);
+        gl.uniformMatrix4fv(this._progShade.u_projMatrixInv, false, invProj);
 
         // Set the light texture as a uniform input to the shader
         gl.activeTexture(gl.TEXTURE4);

src/renderers/clusteredDeferredBlinn.js

@@ -10,7 +10,7 @@ import fsSource_Blinn from '../shaders/deferred_Blinn.frag.glsl';
 import TextureBuffer from './textureBuffer';
 import BaseRenderer from './base';
 
-export const NUM_GBUFFERS = 3;
+export const NUM_GBUFFERS = 2;
 
 export default class ClusteredDeferredBlinnRenderer extends BaseRenderer {
     constructor(xSlices, ySlices, zSlices) {

src/shaders/deferred.frag.glsl.js

@@ -7,6 +7,8 @@ export default function(params) {
 
   uniform sampler2D u_lightbuffer;
   uniform mat4 u_viewMatrix;
+  uniform mat4 u_projMatrixInv;
+  uniform mat4 u_viewProjectionMatrix;
   uniform float u_clipDist;
 
   // TODO: Read this buffer to determine the lights influencing a cluster
@@ -30,6 +32,20 @@ export default function(params) {
 		return  vec2((v.x >= 0.0) ? +1.0 : -1.0, (v.y >= 0.0) ? +1.0 : -1.0);
 	}
 
+  vec3 WorldPosFromDepth(float depth, vec2 TexCoord) {
+    float z = depth * 2.0 - 1.0;
+
+    vec4 clipSpacePosition = vec4(TexCoord * 2.0 - 1.0, z, 1.0);
+    vec4 viewSpacePosition = u_projMatrixInv * clipSpacePosition;
+
+    // Perspective division
+    viewSpacePosition /= viewSpacePosition.w;
+
+    vec4 worldSpacePosition = u_viewMatrix * viewSpacePosition;
+
+    return worldSpacePosition.xyz;
+}
+
    vec3 oct_to_float32x3( vec2 e) {
 
 		if (e.x == -2.0 || e.y == -2.0)
@@ -95,10 +111,18 @@ export default function(params) {
   
   void main() {
     // TODO: extract data from g buffers and do lighting
-     vec4 gbPos = texture2D(u_gbuffers[0], v_uv);
-     vec4 gNor = texture2D(u_gbuffers[1], v_uv);
-     vec4 gbNor = vec4(oct_to_float32x3(vec2(gNor.x, gNor.y)), 1.0);
-     vec4 albedo = texture2D(u_gbuffers[2], v_uv);
+
+     vec4 gPos = texture2D(u_gbuffers[0], v_uv);
+     vec4 gbPos = vec4(gPos.x,gPos.y,gPos.z, 1.0);
+
+     // I tried storing everything only as depth
+    //  vec4 gbPosNew = u_viewProjectionMatrix * gbPos ;
+    //  gbPosNew = vec4(WorldPosFromDepth(gbPosNew.z, v_uv), 1.0);
+
+    
+     vec4 galbedo = texture2D(u_gbuffers[1], v_uv);
+     vec4 albedo = vec4( galbedo.y, galbedo.z,galbedo.w, 1.0);
+     vec4 gbNor = vec4(oct_to_float32x3(vec2(gPos.w, galbedo.x)), 1.0);
 
      vec3 fragColor = vec3(0.0);
      vec4 v_viewPos = u_viewMatrix * gbPos;
@@ -136,10 +160,7 @@ export default function(params) {
 
     const vec3 ambientLight = vec3(0.025);
     fragColor += vec3(albedo) * ambientLight;
-
-    //gl_FragColor = normalize(albedo);
     gl_FragColor = vec4(fragColor, 1.0);
-    //gl_FragColor = vec4(v_uv, 0.0, 1.0);
   }
   `;
 }

src/shaders/deferredToTexture.frag.glsl

@@ -42,8 +42,8 @@ void main() {
     vec3 col = vec3(texture2D(u_colmap, v_uv));
 
     // TODO: populate your g buffer
-    gl_FragData[0] = vec4(v_position, 1.0);
-    gl_FragData[1] =  vec4(float32x3_to_Oct(norm), 0.0, 1.0);
-    gl_FragData[2] =  vec4(col, 1.0);
+	vec2 normCompac= float32x3_to_Oct(norm);
+    gl_FragData[0] = vec4(v_position, normCompac.x);
+    gl_FragData[1] =  vec4( normCompac.y, col);
     // gl_FragData[3] = ??
 }