slight modifications on the suggestions

src/webgl/light.js

@@ -498,20 +498,20 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * Creates an image light with the given image.
  *
  * The image light stimulates light from all the directions.
- * This is done by using the image as a texture for a relatively
- * very huge light in a form of a sphere. This sphere contains
+ * This is done by using the image as a texture for an infinitely
+ * large sphere light. This sphere contains
  * or encapsulates the whole scene/drawing.
  * It will have different effect for varying shininess of the
  * object in the drawing.
  * Under the hood it is mainly doing 2 types of calculations,
- * first one is creating an irradiance map from the
+ * the first one is creating an irradiance map the
  * environment map of the input image.
- * Second one is managing reflections based on the shininess
+ * The second one is managing reflections based on the shininess
  * or roughness of the material used in the scene.
  *
  * Note: The image's diffuse light will be affected by fill()
  * and the specular reflections will be affected by specularMaterial()
- * and shininess()
+ * and shininess().
  *
  * @method imageLight
  * @param  {p5.image}    img  image for the background
@@ -520,26 +520,27 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * <code>
  * let img;
  * function preload() {
- *   img = loadImage('assets/laDefense.jpg');
+ *   img = loadImage('assets/outdoor_spheremap.jpg');
  * }
  * function setup() {
- *   createCanvas(windowWidth, 400, WEBGL);
+ *   createCanvas(100, 100, WEBGL);
  * }
  * function draw() {
  *   background(220);
  *   imageMode(CENTER);
+ *   push();
+ *   translate(0, 0, -200);
+ *   scale(2);
  *   image(img, 0, 0, width, height);
+ *   pop();
  *   ambientLight(50);
  *   imageLight(img);
- *   // This will use specular once we add it
  *   specularMaterial(20);
- *   // shininess(slider.value());
- *   // orbitControl();
  *   noStroke();
  *   scale(2);
  *   rotateX(frameCount * 0.005);
  *   rotateY(frameCount * 0.005);
- *   box(50);
+ *   box(25);
  * }
  * </code>
  * </div>
@@ -551,29 +552,28 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * let img;
  * let slider;
  * function preload() {
- *   img = loadImage('assets/laDefense.jpg');
+ *   img = loadImage('assets/outdoor_spheremap.jpg');
  * }
  * function setup() {
- *   createCanvas(windowWidth, 400, WEBGL);
- *   slider = createSlider(0, 800, 100, 1);
+ *   createCanvas(100, 100, WEBGL);
+ *   slider = createSlider(0, 400, 100, 1);
  *   slider.position(0, height);
  * }
  * function draw() {
  *   background(220);
  *   imageMode(CENTER);
+ *   push();
+ *   translate(0, 0, -200);
+ *   scale(2);
  *   image(img, 0, 0, width, height);
+ *   pop();
  *   ambientLight(50);
  *   imageLight(img);
- *   // This will use specular once we add it
  *   specularMaterial(20);
  *   shininess(slider.value());
- *   // orbitControl();
  *   noStroke();
  *   scale(2);
- *   // sphere(50)
- *   rotateX(frameCount * 0.005);
- *   rotateY(frameCount * 0.005);
- *   box(50);
+ *   sphere(15);
  * }
  * </code>
  * </div>

src/webgl/shaders/lighting.glsl

@@ -84,29 +84,7 @@ float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
 }
 
-/*
-vec2 mapTextureToNormal( vec3 normal ){
-  // x = r sin(phi) cos(theta)
-  // y = r cos(phi)
-  // z = r sin(phi) sin(theta)
-  float phi = acos( normal.y );
-  // if phi is 0, then there are no x, z components
-  float theta = 0.0;
-  // else 
-  if(  abs(sin(phi)) > 0.0 ){
-    theta = acos( normal.x / sin(phi) );
-  }   
-
-  vec2 newTexCoor = vec2(
-    map(theta, 0., PI, 0., 1.),
-    map(phi, 0., PI, 1., 0.)
-  );
-
-  return newTexCoor;
-}
-*/
-
-vec2 nToE( vec3 v ){
+vec2 mapTextureToNormal( vec3 v ){
   // x = r sin(phi) cos(theta)   
   // y = r cos(phi)  
   // z = r sin(phi) sin(theta)
@@ -123,7 +101,7 @@ vec2 nToE( vec3 v ){
   theta = theta / (2.0 * 3.14159);
   phi = phi / 3.14159 ;
 
-  vec2 angles = vec2( phi, theta );
+  vec2 angles = vec2( fract(theta + 0.75), 1.0 - phi );
   return angles;
 }
 
@@ -135,29 +113,19 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){
   vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );
   vec3 R = reflect(lightDirection, worldNormal);
   // use worldNormal instead of R
-  // added nToE instead of this, remove this completely if the
-  // new function works
-  // vec2 newTexCoor = mapTextureToNormal( R );
-  vec2 newTexCoor = nToE( R );
+  vec2 newTexCoor = mapTextureToNormal( R );
   vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );
-  // return texture.xyz;
   // this is to make the darker sections more dark
   // png and jpg usually flatten the brightness so it is to reverse that
-  return pow(texture.xyz, vec3(10.0));
-}
-
-vec3 powCustom(vec3 x, float y) {
-  return exp(y * log(x));
+  return smoothstep(vec3(0.0), vec3(0.8), texture.xyz);
 }
 
 vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){
   vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);
   vec3 worldNormal = normalize(vNormal);
   vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );
   vec3 R = reflect(lightDirection, worldNormal);
-  // new function works
-  // vec2 newTexCoor = mapTextureToNormal( R );
-  vec2 newTexCoor = nToE( R );
+  vec2 newTexCoor = mapTextureToNormal( R );
 #ifdef WEBGL2
   vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, levelOfDetail);
 #else
@@ -166,7 +134,6 @@ vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){
   // this is to make the darker sections more dark
   // png and jpg usually flatten the brightness so it is to reverse that
   return pow(outColor.xyz, vec3(10.0));
-  // return powCustom(outColor.xyz, 10.0);
 }
 
 void totalLight(