Diffuse lighting shaders. Also made light layer rendering pass through

Author: bitnenfer

src/gameobjects/index.js

@@ -73,15 +73,15 @@ var GameObjects = {
 if (WEBGL_RENDERER)
 {
     //  WebGL only Game Objects
-    //GameObjects.LightLayer = require('./lightlayer/LightLayer');
+    GameObjects.LightLayer = require('./lightlayer/LightLayer');
     GameObjects.Mesh = require('./mesh/Mesh');
     GameObjects.Quad = require('./quad/Quad');
 
-    //GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory');
+    GameObjects.Factories.LightLayer = require('./lightlayer/LightLayerFactory');
     GameObjects.Factories.Mesh = require('./mesh/MeshFactory');
     GameObjects.Factories.Quad = require('./quad/QuadFactory');
 
-    //GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator');
+    GameObjects.Creators.LightLayer = require('./lightlayer/LightLayerCreator');
     GameObjects.Creators.Mesh = require('./mesh/MeshCreator');
     GameObjects.Creators.Quad = require('./quad/QuadCreator');
 }

src/gameobjects/lightlayer/LightLayer.js

@@ -3,15 +3,9 @@ var Class = require('../../utils/Class');
 var Components = require('../components');
 var Const = require('./Const');
 var GameObject = require('../GameObject');
-var GBufferShader = require('../../renderer/webgl/shaders/GBufferShader');
 var Light = require('./Light');
-var LightFragmentShader = require('../../renderer/webgl/shaders/LightFragmentShader');
-var Phong2DShaderDeferred = require('../../renderer/webgl/shaders/Phong2DShaderDeferred');
 var Render = require('./LightLayerRender');
 var SpriteNormalPair = require('./SpriteNormalPair');
-var TexturedAndNormalizedTintedShader = require('../../renderer/webgl/shaders/TexturedAndNormalizedTintedShader');
-var VertexBuffer = require('../../renderer/webgl/resources/VertexBuffer');
-var WebGLSupportedExtensions = require('../../renderer/webgl/WebGLSupportedExtensions');
 
 // http://cpetry.github.io/NormalMap-Online/
 
@@ -36,6 +30,7 @@ var LightLayer = new Class({
 
         GameObject.call(this, scene, 'LightLayer');
 
+        this.renderer = scene.sys.game.renderer;
         this.passShader = null;
         this.gl = null;
         this.ambientLightColorR = 0.0;
@@ -48,24 +43,24 @@ var LightLayer = new Class({
         this._z = 0;
         this.setOrigin(0, 0);
 
-        scene.sys.game.renderer.onContextRestored(function (renderer) {
-            _this.onContextRestored(renderer);
-        });
+        this.renderer.onContextRestored(function (renderer) {
+            this.onContextRestored(renderer);
+        }, this);
 
-        this.init(scene.sys.game.renderer, WebGLSupportedExtensions.has('WEBGL_draw_buffers'));
+        this.init(scene.sys.game.renderer, this.renderer.hasExtension('WEBGL_draw_buffers'));
     },
 
     onContextRestored: function (renderer)
     {
         /* It won't allow the use of drawBuffers on restored context */
         this.init(renderer, false); 
-        this.renderWebGL = require('./ForwardRenderer');
+        //this.renderWebGL = require('./ForwardRenderer');
         this.lights.length = Math.min(this.lights.length, Const.MAX_LIGHTS);
     },
 
     init: function (renderer, deferred)
     {
-        var resourceManager = renderer.resourceManager;
+        /*var resourceManager = renderer.resourceManager;
         
         this._isDeferred = deferred;
         this.renderer = renderer;
@@ -151,7 +146,7 @@ var LightLayer = new Class({
                 };
             }
 
-            /* Setup render targets */
+            // Setup render targets
             this.gBufferFbo = gl.createFramebuffer();
             this.gBufferColorTex = gl.createTexture();
             this.gBufferNormalTex = gl.createTexture();
@@ -191,7 +186,7 @@ var LightLayer = new Class({
 
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             VertexBuffer.SetDirty();
-        }
+        }*/
     },
 
     forEachLight: function (callback)
@@ -308,7 +303,7 @@ var LightLayer = new Class({
 
     updateLights: function (renderer, camera, shader)
     {
-        if (this.gl !== null)
+        /*if (this.gl !== null)
         {
             var locations = this.lightsLocations;
             var lights = this.lights;
@@ -333,7 +328,7 @@ var LightLayer = new Class({
                 gl.uniform3f(locations[index].position, point.x - (camera.scrollX * light.scrollFactorX * camera.zoom), height - (point.y - (camera.scrollY * light.scrollFactorY) * camera.zoom), light.z);
                 gl.uniform3f(locations[index].color, light.r, light.g, light.b);
             }
-        }
+        }*/
     }
 
 });

src/gameobjects/lightlayer/LightLayerWebGLRenderer.js

@@ -1,14 +1 @@
-var WebGLSupportedExtensions = require('../../renderer/webgl/WebGLSupportedExtensions');
-
-module.exports = (function () {
-    if (WebGLSupportedExtensions.has('WEBGL_draw_buffers'))
-    {
-        return require('./DeferredRenderer');
-    }
-    else
-    {
-        return require('./ForwardRenderer');
-    }
-})();
-
- 
+module.exports = function () {};

src/renderer/webgl/shaders/DeferredDiffuse.frag

@@ -0,0 +1,46 @@
+#define SHADER_NAME PHASER_DEFERRED_DIFFUSE_FS
+
+precision mediump float;
+
+struct Light
+{
+    vec3 position;
+    vec3 color;
+    float attenuation;
+    float radius;
+};
+
+const int kMaxLights = 50;
+
+uniform vec4 uCamera; /* x, y, rotation, zoom */
+uniform vec2 uResolution;
+uniform sampler2D uMainSampler; // gbuffer color
+uniform sampler2D uNormSampler; // gbuffer normal
+uniform vec3 uAmbientLightColor;
+uniform Light uLights[kMaxLights];
+
+void main()
+{
+    vec2 uv = vec2(gl_FragCoord.xy / uResolution);
+    vec3 finalColor = vec3(0.0, 0.0, 0.0);
+    vec4 gbColor = texture2D(uMainSampler, uv);
+    vec3 gbNormal = texture2D(uNormSampler, uv).rgb;
+    vec3 normal = normalize(vec3(gbNormal * 2.0 - 1.0));
+    vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;
+
+    for (int index = 0; index < kMaxLights; ++index)
+    {                
+        Light light = uLights[index];
+        vec3 lightDir = vec3((light.position.xy / res) - (gl_FragCoord.xy / res), light.position.z);
+        vec3 lightNormal = normalize(lightDir);
+        float distToSurf = length(lightDir) * uCamera.w;
+        float diffuseFactor = max(dot(normal, lightNormal), 0.0);
+        float radius = (light.radius / res.x * uCamera.w) * uCamera.w;
+        float attenuation = clamp(1.0 - distToSurf * distToSurf / (radius * radius), 0.0, 1.0);
+        vec3 diffuse = light.color * gbColor.rgb * diffuseFactor;
+        finalColor += attenuation * diffuse;
+    }
+
+    vec4 colorOutput = vec4(uAmbientLightColor + finalColor, gbColor.a);
+    gl_FragColor = colorOutput;
+}

src/renderer/webgl/shaders/DeferredDiffuse.vert

@@ -0,0 +1,10 @@
+#define SHADER_NAME PHASER_DEFERRED_DIFFUSE_VS
+
+precision mediump float;
+
+attribute vec2 inPosition;
+
+void main()
+{
+    gl_Position = vec4(inPosition, 0.0, 1.0);
+}

src/renderer/webgl/shaders/ForwardDiffuse.frag

@@ -0,0 +1,49 @@
+#define SHADER_NAME PHASER_FORWARD_DIFFUSE_FS
+
+precision mediump float;
+
+struct Light
+{
+    vec3 position;
+    vec3 color;
+    float attenuation;
+    float radius;
+};
+
+const int kMaxLights = 10;
+
+uniform vec4 uCamera; /* x, y, rotation, zoom */
+uniform vec2 uResolution;
+uniform sampler2D uMainSampler;
+uniform sampler2D uNormSampler;
+uniform vec3 uAmbientLightColor;
+uniform Light uLights[kMaxLights];
+
+varying vec2 outTexCoord;
+varying vec4 outTint;
+
+void main()
+{
+    vec3 finalColor = vec3(0.0, 0.0, 0.0);
+    vec4 color = texture2D(uMainTexture, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);
+    vec3 normalMap = texture2D(uNormTexture, outTexCoord).rgb;
+    vec3 normal = normalize(vec3(normalMap * 2.0 - 1.0));
+    vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;
+
+    for (int index = 0; index < kMaxLights; ++index)
+    {
+        Light light = uLights[index];
+        vec3 lightDir = vec3((light.position.xy / res) - (gl_FragCoord.xy / res), light.position.z);
+        vec3 lightNormal = normalize(lightDir);
+        float distToSurf = length(lightDir) * uCamera.w;
+        float diffuseFactor = max(dot(normal, lightNormal), 0.0);
+        float radius = (light.radius / res.x * uCamera.w) * uCamera.w;
+        float attenuation = clamp(1.0 - distToSurf * distToSurf / (radius * radius), 0.0, 1.0);
+        vec3 diffuse = light.color * color.rgb * diffuseFactor;
+        finalColor += attenuation * diffuse;
+    }
+
+    vec4 colorOutput = vec4(uAmbientLightColor + finalColor, color.a);
+    gl_FragColor = vec4(colorOutput.rgb * colorOutput.a, colorOutput.a);
+
+}

src/renderer/webgl/shaders/GBuffer.frag

@@ -0,0 +1,20 @@
+#extension GL_EXT_draw_buffers : require
+
+#define SHADER_NAME PHASER_GBUFFER_FS
+
+precision mediump float;
+
+uniform sampler2D uMainSampler;
+uniform sampler2D uNormSampler;
+
+varying vec2 outTexCoord;
+varying vec4 outTint;
+
+void main()
+{
+    vec4 color = texture2D(uMainSampler, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);
+    vec3 normal = texture2D(uNormSampler, outTexCoord).rgb;
+
+    gl_FragData[0] = color;
+    gl_FragData[1] = vec4(normal, color.a);
+}