Lights extension

README.md

@@ -30,7 +30,7 @@ Features
 - [ ] Selection of tonemapping algorithms for IBL
 - [x] Support for the KHR_materials_unlit extension
 - [x] Support for the KHR_texture_transform extension
-- [ ] Support for the KHR_lights_punctual extension
+- [x] Support for the KHR_lights_punctual extension
 - [ ] Educational GUI for inspecting BRDF components
 
 If you would like to see this in action, [view the live demo](http://gltf.ux3d.io/).

src/light.js

@@ -1,15 +1,19 @@
 class gltfLight
 {
     constructor(type = "directional",
-                color = jsToGl([1, 1, 1]),
+                color = [1, 1, 1],
                 intensity = 1,
-                range = undefined,
+                innerConeAngle = 0.0,
+                outerConeAngle = Math.PI / 4.0,
+                range = -1.0, // if no range is defined in the json, this is the default the shader understands
                 name = undefined,
                 node = undefined)
     {
         this.type = type;
         this.color = color;
         this.intensity = intensity;
+        this.innerConeAngle = innerConeAngle;
+        this.outerConeAngle = outerConeAngle;
         this.range = range;
         this.name = name;
         this.node = node; // non-standard
@@ -20,20 +24,26 @@ class gltfLight
         fromKeys(this, jsonLight);
     }
 
-    toUniform(transform)
+    toUniform(gltf)
     {
         let uLight = new UniformLight();
-        let rotation = mat3.create();
-        mat4.getRotation(rotation, transform);
-        mat3.multiply(uLight.direction, uLight.direction, rotation);
+
+        if (this.node !== undefined)
+        {
+            let transform = gltf.nodes[this.node].worldTransform;
+            let rotation = quat.create();
+            let alongNegativeZ = vec3.fromValues(0, 0, -1);
+            mat4.getRotation(rotation, transform);
+            vec3.transformQuat(uLight.direction, alongNegativeZ, rotation);
+            mat4.getTranslation(uLight.position, transform);
+        }
 
         uLight.range = this.range;
-        uLight.color = this.color;
+        uLight.color = jsToGl(this.color);
         uLight.intensity = this.intensity;
 
-        mat4.getTranslation(uLight.position, transform);
-        uLight.innerConeAngle = this.innerConeAngle;
-        uLight.outerConeAngle = this.outerConeAngle;
+        uLight.innerConeCos = Math.cos(this.innerConeAngle);
+        uLight.outerConeCos = Math.cos(this.outerConeAngle);
 
         switch(this.type)
         {
@@ -57,20 +67,23 @@ const Type_Directional = 0;
 const Type_Point = 1;
 const Type_Spot = 2;
 
-class UniformLight
+class UniformLight extends UniformStruct
 {
     constructor()
     {
-        this.direction = jsToGl([0, 0, -1]);
+        super();
+
+        const defaultDirection = vec3.fromValues(-0.7399, -0.6428, -0.1983);
+        this.direction = defaultDirection;
         this.range = -1.0;
 
         this.color = jsToGl([1, 1, 1]);
         this.intensity = 1.0;
 
         this.position = jsToGl([0, 0, 0]);
-        this.innerConeAngle = 0.0;
+        this.innerConeCos = 0.0;
 
-        this.outerConeAngle = Math.PI / 4.0;
+        this.outerConeCos = Math.PI / 4.0;
         this.type = Type_Directional;
         this.padding = vec2.create();
     }

src/renderer.js

@@ -22,8 +22,7 @@ class gltfRenderer
 
         LoadWebGLExtensions(requiredWebglExtensions);
 
-        this.lightCount = 0;
-        this.defaultLight = new gltfLight();
+        this.visibleLights = [];
 
         this.viewMatrix = mat4.create();
         this.projMatrix = mat4.create();
@@ -112,7 +111,7 @@ class gltfRenderer
             this.currentCameraPosition = this.viewer.getCameraPosition();
         }
 
-        this.lightCount = gltf.lights.length > 0 ? gltf.lights.length : 1;
+        this.visibleLights = this.getVisibleLights(gltf, scene);
 
         mat4.multiply(this.viewProjMatrix, this.projMatrix, this.viewMatrix);
 
@@ -131,6 +130,23 @@ class gltfRenderer
         }
     }
 
+    // returns all lights that are relevant for rendering or the default light if there are none
+    getVisibleLights(gltf, scene)
+    {
+        let lights = [];
+        for (let light of gltf.lights)
+        {
+            if (light.node !== undefined)
+            {
+                if (scene.nodes.includes(light.node))
+                {
+                    lights.push(light);
+                }
+            }
+        }
+        return lights.length > 0 ? lights : [ new gltfLight() ];
+    }
+
     // same transform, recursive
     drawNode(gltf, scene, nodeIndex, recursive)
     {
@@ -176,7 +192,7 @@ class gltfRenderer
 
         let fragDefines =  material.getDefines().concat(primitive.getDefines());
 
-        fragDefines.push("LIGHT_COUNT " + this.lightCount);
+        fragDefines.push("LIGHT_COUNT " + this.visibleLights.length);
 
         if (this.viewer.parameters.useIBL)
         {
@@ -199,7 +215,10 @@ class gltfRenderer
 
         gl.useProgram(this.shader.program);
 
-        // this.applyLights(gltf);
+        if (this.viewer.parameters.usePunctual)
+        {
+            this.applyLights(gltf);
+        }
 
         // update model dependant matrices once per node
         this.shader.updateUniform("u_MVPMatrix", mvpMatrix);
@@ -294,23 +313,9 @@ class gltfRenderer
     applyLights(gltf)
     {
         let uniformLights = [];
-
-        function addLight(light)
-        {
-            const transform = gltf.nodes[light.node].worldTransform;
-            uniformLights.push(light.toUniform(transform));
-        }
-
-        if (gltf.lights.length > 0)
-        {
-            for (let l of gltf.lights)
-            {
-                addLight(l);
-            }
-        }
-        else
+        for (let light of this.visibleLights)
         {
-            addLight(this.defaultLight);
+            uniformLights.push(light.toUniform(gltf));
         }
 
         this.shader.updateUniform("u_Lights", uniformLights);
@@ -329,8 +334,6 @@ class gltfRenderer
         SetTexture(this.shader.getUniformLocation("u_SpecularEnvSampler"), gltf, specularEnvMap, texSlotOffset + 1);
         SetTexture(this.shader.getUniformLocation("u_brdfLUT"), gltf, lut, texSlotOffset + 2);
 
-        this.shader.updateUniform("u_ScaleDiffBaseMR", jsToGl([0, 0, 0, 0]));
-        this.shader.updateUniform("u_ScaleFGDSpec", jsToGl([0, 0, 0, 0]));
         this.shader.updateUniform("u_ScaleIBLAmbient", jsToGl([1, 1, 0, 0]));
     }
 

src/shader.js

@@ -67,9 +67,46 @@ class gltfShader
         }
     }
 
+
+    updateUniform(objectName, object, log = true)
+    {
+        if (Array.isArray(object))
+        {
+            this.updateUniformArray(objectName, object, log);
+        }
+        else if (object instanceof UniformStruct)
+        {
+            this.updateUniformStruct(objectName, object, log);
+        }
+        else
+        {
+            this.updateUniformValue(objectName, object, log);
+        }
+    }
+
+    updateUniformArray(arrayName, array, log)
+    {
+        for (let i = 0; i < array.length; ++i)
+        {
+            let element = array[i];
+            let uniformName = arrayName + "[" + i + "]";
+            this.updateUniform(uniformName, element, log);
+        }
+    }
+
+    updateUniformStruct(structName, object, log)
+    {
+        let memberNames = Object.keys(object);
+        for (let memberName of memberNames)
+        {
+            let uniformName = structName + "." + memberName;
+            this.updateUniform(uniformName, object[memberName], log);
+        }
+    }
+
     // upload the values of a uniform with the given name using type resolve to get correct function call
     // vec3 => gl.uniform3f(value)
-    updateUniform(uniformName, value, log = true)
+    updateUniformValue(uniformName, value, log)
     {
         const uniform = this.uniforms.get(uniformName);