Tweak Directional Light (#27)

* tweaks

* default param

* rename param

* remove intermediate variable

Author: Lucas Crane

src/SoftDirectionalLight.js

@@ -1,9 +1,9 @@
 import { DirectionalLight }  from 'three';
 
 export class SoftDirectionalLight extends DirectionalLight {
-  constructor(...args) {
-    super(...args);
-    this.softness = 0.0;
+  constructor(color, intensity, softness = 0) {
+    super(color, intensity);
+    this.softness = softness;
   }
 
   copy(source) {

src/renderer/envMapCreation.js

@@ -20,17 +20,21 @@ export function generateEnvMapFromSceneComponents(directionalLights, environment
 
 export function initializeEnvMap(environmentLights) {
   let envImage;
+
   // Initialize map from environment light if present
   if (environmentLights.length > 0) {
     // TODO: support multiple environment lights (what if they have different resolutions?)
     const environmentLight = environmentLights[0];
+
     envImage = {
       width: environmentLight.map.image.width,
       height: environmentLight.map.image.height,
       data: environmentLight.map.image.data,
     };
+
     envImage.data = rgbeToFloat(envImage.data, environmentLight.intensity);
-  } else { // initialize blank map
+  } else {
+    // initialize blank map
     envImage = generateBlankMap(DEFAULT_MAP_RESOLUTION.width, DEFAULT_MAP_RESOLUTION.height);
   }
 
@@ -40,7 +44,6 @@ export function initializeEnvMap(environmentLights) {
 export function generateBlankMap(width, height) {
   const texels = width * height;
   const floatBuffer = new Float32Array(texels * 3);
-  floatBuffer.fill(0.0);
 
   return {
     width: width,
@@ -52,9 +55,11 @@ export function generateBlankMap(width, height) {
 export function addDirectionalLightToEnvMap(light, image) {
   const sphericalCoords = new THREE.Spherical();
   const lightDirection = light.position.clone().sub(light.target.position);
+
   sphericalCoords.setFromVector3(lightDirection);
   sphericalCoords.theta = (Math.PI * 3 / 2) - sphericalCoords.theta;
   sphericalCoords.makeSafe();
+
   return addLightAtCoordinates(light, image, sphericalCoords);
 }
 
@@ -63,58 +68,61 @@ function addLightAtCoordinates(light, image, originCoords) {
   const floatBuffer = image.data;
   const width = image.width;
   const height = image.height;
-  const xTexels = (floatBuffer.length / (3 * height));
-  const yTexels = (floatBuffer.length / (3 * width));
-  const density = 8;
+  const xTexels = floatBuffer.length / (3 * height);
+  const yTexels = floatBuffer.length / (3 * width);
+
   // default softness for standard directional lights is 0.01, i.e. a hard shadow
   const softness = light.softness || 0.01;
 
   // angle from center of light at which no more contributions are projected
-  const threshold = findThreshold(originCoords, softness);
+  const threshold = findThreshold(softness);
+
   // if too few texels are rejected by the threshold then the time to evaluate it is no longer worth it
   const useThreshold = threshold < Math.PI / 5;
+
   // functional trick to keep the conditional check out of the main loop
   const intensityFromAngleFunction = useThreshold ? getIntensityFromAngleDifferentialThresholded : getIntensityFromAngleDifferential;
 
-  let encounteredInThisRow = false;
   let begunAddingContributions = false;
   let currentCoords = new THREE.Spherical();
-  let falloff,
-      intensity,
-      bufferIndex;
 
   // Iterates over each row from top to bottom
   for (let i = 0; i < xTexels; i++) {
+
+    let encounteredInThisRow = false;
+
     // Iterates over each texel in row
     for (let j = 0; j < yTexels; j++) {
-      bufferIndex = j * width + i;
+      const bufferIndex = j * width + i;
       currentCoords = equirectangularToSpherical(i, j, width, height, currentCoords);
-      falloff = intensityFromAngleFunction(originCoords, currentCoords, softness, threshold);
+      const falloff = intensityFromAngleFunction(originCoords, currentCoords, softness, threshold);
 
       if(falloff > 0) {
         encounteredInThisRow = true;
         begunAddingContributions = true;
       }
-      intensity = light.intensity * falloff;
+
+      const intensity = light.intensity * falloff;
 
       floatBuffer[bufferIndex * 3] += intensity * light.color.r;
       floatBuffer[bufferIndex * 3 + 1] += intensity * light.color.g;
       floatBuffer[bufferIndex * 3 + 2] += intensity * light.color.b;
     }
+
     // First row to not add a contribution since adding began
     // This means the entire light has been added and we can exit early
     if(!encounteredInThisRow && begunAddingContributions) {
       return floatBuffer;
     }
-    // reset for next row
-    encounteredInThisRow = false;
   }
+
   return floatBuffer;
 }
 
-function findThreshold(originCoords, softness) {
+function findThreshold(softness) {
   const step = Math.PI / 128;
   const maxSteps = (2.0 * Math.PI) / step;
+
   for (let i = 0; i < maxSteps; i++) {
     const angle = i * step;
     const falloff = getFalloffAtAngle(angle, softness);
@@ -125,55 +133,54 @@ function findThreshold(originCoords, softness) {
 }
 
 function getIntensityFromAngleDifferentialThresholded(originCoords, currentCoords, softness, threshold) {
-  let deltaPhi = getAngleDelta(originCoords.phi, currentCoords.phi);
-  let deltaTheta =  getAngleDelta(originCoords.theta, currentCoords.theta);
+  const deltaPhi = getAngleDelta(originCoords.phi, currentCoords.phi);
+  const deltaTheta =  getAngleDelta(originCoords.theta, currentCoords.theta);
 
   if(deltaTheta > threshold && deltaPhi > threshold) {
     return 0;
   }
+
   const angle = angleBetweenSphericals(originCoords, currentCoords);
-  const falloffCoeficient = getFalloffAtAngle(angle, softness);
-  return falloffCoeficient;
+  return getFalloffAtAngle(angle, softness);
 }
 
 function getIntensityFromAngleDifferential(originCoords, currentCoords, softness) {
   const angle = angleBetweenSphericals(originCoords, currentCoords);
-  const falloffCoeficient = getFalloffAtAngle(angle, softness);
-  return falloffCoeficient;
+  return getFalloffAtAngle(angle, softness);
 }
 
 export function getAngleDelta(angleA, angleB) {
-  let diff = Math.abs(angleA - angleB) % (2 * Math.PI);
+  const diff = Math.abs(angleA - angleB) % (2 * Math.PI);
   return diff > Math.PI ? (2 * Math.PI - diff) : diff;
 }
 
 const angleBetweenSphericals = function() {
   const originVector = new THREE.Vector3();
   const currentVector = new THREE.Vector3();
-  const getAngle = function(originCoords, currentCoords) {
+
+  return (originCoords, currentCoords) => {
     originVector.setFromSpherical(originCoords);
     currentVector.setFromSpherical(currentCoords);
     return originVector.angleTo(currentVector);
-  }
-  return getAngle;
+  };
 }();
 
   // TODO: possibly clean this up and optimize it
   //
-  // This function was arrived at through experimentation, it provides good 
+  // This function was arrived at through experimentation, it provides good
   // looking results with percieved softness that scale relatively linearly with
   //  the softness value in the 0 - 1 range
   //
   // For now it doesn't incur too much of a performance penalty because for most of our use cases (lights without too much softness)
   // the threshold cutoff in getIntensityFromAngleDifferential stops us from running it too many times
 function getFalloffAtAngle(angle, softness) {
-  const softnessCoeficient = Math.pow(2, 14.5 * Math.max(0.001, (1.0 - clamp(softness, 0.0, 1.0))));
-  const falloff = Math.pow(softnessCoeficient, 1.1) * Math.pow(8, softnessCoeficient * -1 * (Math.pow(angle, 1.8)));
+  const softnessCoefficient = Math.pow(2, 14.5 * Math.max(0.001, 1.0 - clamp(softness, 0.0, 1.0)));
+  const falloff = Math.pow(softnessCoefficient, 1.1) * Math.pow(8, -softnessCoefficient * Math.pow(angle, 1.8));
   return falloff;
 }
 
 export function equirectangularToSpherical(x, y, width, height, target) {
   target.phi = (Math.PI * y) / height;
   target.theta = (2.0 * Math.PI * x) / width;
   return target;
-}
+}

src/renderer/rgbeToFloat.js

@@ -1,24 +1,26 @@
 // Convert image data from the RGBE format to a 32-bit floating point format
 // See https://www.cg.tuwien.ac.at/research/theses/matkovic/node84.html for a description of the RGBE format
 // Optional multiplier argument for performance optimization
-export function rgbeToFloat(buffer, multiplier = 1) {
+export function rgbeToFloat(buffer, intensity = 1) {
   const texels = buffer.length / 4;
   const floatBuffer = new Float32Array(texels * 3);
 
+  const expTable = [];
+  for (let i = 0; i < 255; i++) {
+    expTable[i] = intensity * Math.pow(2, i - 128) / 255;
+  }
+
   for (let i = 0; i < texels; i++) {
 
     const r = buffer[4 * i];
     const g = buffer[4 * i + 1];
     const b = buffer[4 * i + 2];
     const a = buffer[4 * i + 3];
+    const e = expTable[a];
 
-    const exponent = a - 128;
-    // bit shift equivilent to e = Math.pow(2, exponent);
-    const e = exponent > 0 ? 1 << exponent : 1 / (1 << (-1 * exponent));
-
-    floatBuffer[3 * i] = multiplier * r * e / 255;
-    floatBuffer[3 * i + 1] = multiplier * g * e / 255;
-    floatBuffer[3 * i + 2] = multiplier * b * e / 255;
+    floatBuffer[3 * i] = r * e;
+    floatBuffer[3 * i + 1] = g * e;
+    floatBuffer[3 * i + 2] = b * e;
   }
 
   return floatBuffer;