Image Light Feature - GSOC 2023

src/webgl/light.js

@@ -494,6 +494,28 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
   return this;
 };
 
+p5.prototype.imageLight = function(img){
+  const graphic = this.textures.get(img);
+  if (!graphic){
+    let newGraphic = this.createGraphics(); // maybe switch to framebuffer
+    // draw the blurry image
+    // set the shader on the graphic and set the shader on the image
+
+    this.textures.set(img, newGraphic);
+    let width = smallWidth;
+    let height = Math.floor(smallWidth * (img.height / img.width));
+    newGraphic = createGraphics(width, height, WEBGL);
+    irradiance = newGraphic.createShader(irradianceVert, irradianceFrag);
+    newGraphic.shader(irradiance);
+    irradiance.setUniform('environmentMap', img);
+    newGraphic.noStroke();
+    newGraphic.rectMode(newGraphic.CENTER);
+    newGraphic.rect(0, 0, newGraphic.width, newGraphic.height);
+  }
+  this._renderer.activeImageLight = img;
+  return tex;
+};
+
 /**
  * Places an ambient and directional light in the scene.
  * The lights are set to ambientLight(128, 128, 128) and

src/webgl/p5.RendererGL.js

@@ -74,7 +74,9 @@ const defaultShaders = {
   lineFrag:
     lineDefs + readFileSync(join(__dirname, '/shaders/line.frag'), 'utf-8'),
   pointVert: readFileSync(join(__dirname, '/shaders/point.vert'), 'utf-8'),
-  pointFrag: readFileSync(join(__dirname, '/shaders/point.frag'), 'utf-8')
+  pointFrag: readFileSync(join(__dirname, '/shaders/point.frag'), 'utf-8'),
+  imageLightVert : readFileSync(join(__dirname, '/shaders/imageLight.vert'), 'utf-8'),
+  imageLightFrag : readFileSync(join(__dirname, '/shaders/imageLight.frag'), 'utf-8')
 };
 
 /**
@@ -438,6 +440,12 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this.spotLightAngle = [];
     this.spotLightConc = [];
 
+    // Null if no image light is set, otherwise, it is set to a p5.Image
+    this.textures = new Map();
+    // { img: newGraphic }
+    this.activeImageLight = null;
+    // img
+
     this.drawMode = constants.FILL;
 
     this.curFillColor = this._cachedFillStyle = [1, 1, 1, 1];
@@ -1543,6 +1551,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     fillShader.setUniform('uEmissive', this._useEmissiveMaterial);
     fillShader.setUniform('uShininess', this._useShininess);
 
+    this._setImageLightUniforms(fillShader);
+
     fillShader.setUniform('uUseLighting', this._enableLighting);
 
     const pointLightCount = this.pointLightDiffuseColors.length / 3;
@@ -1593,6 +1603,19 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     fillShader.bindTextures();
   }
 
+  // getting called from _setFillUniforms
+  _setImageLightUniforms(shader){
+    //set uniform values
+    shader.setUniform('useImageLight', this.activeImageLight !== null );
+    // true
+    if (this.activeImageLight) {
+      // Use this.activeImageLight as a key to look up the blurry image from
+      // this.textures
+      shader.setUniform('irradiance', this.textures.get(this.activeImageLight));
+      // newGraphic
+    }
+  }
+
   _setPointUniforms(pointShader) {
     pointShader.bindShader();
 

src/webgl/shaders/imageLight.frag

@@ -0,0 +1,113 @@
+precision mediump float;
+varying vec3 localPos;
+
+// the HDR cubemap converted (can be from an equirectangular environment map.)
+uniform sampler2D environmentMap;
+varying vec2 vTexCoord;
+
+const float PI = 3.141;
+
+vec2 normalToEquirectangular( vec3 v){
+    vec2 uv;
+    // taking the arctangent of the v.z and v.x components and dividing it by the circumference of a circle
+    // Adding 0.5 ensures that the resulting value is in the range [0, 1].
+    uv.x = atan(v.z, v.x) / 3.14159 + 0.5;
+    // taking the arcsine of the v.y component and dividing it by the half circumference of a circle
+    uv.y = asin(v.y) / 3.14159 + 0.5;
+
+
+    return uv;
+}
+
+vec2 nTOE( vec3 v ){
+  // x = r sin(phi) cos(theta)   
+  // y = r cos(phi)  
+  // z = r sin(phi) sin(theta)
+  float phi = acos( v.y );
+  // if phi is 0, then there are no x, z components
+  float theta = 0.0;
+  // else 
+  theta = acos(v.x / sin(phi));
+  float sinTheta = v.z / sin(phi);
+  if (sinTheta < 0.0) {
+    // Turn it into -theta, but in the 0-2PI range
+    theta = 2.0 * PI - theta;
+  }
+  theta = theta / (2.0 * 3.14159);
+  phi = phi / 3.14159 ;
+
+  vec2 angles = vec2( phi, theta );
+  return angles;
+}
+
+// vec2 func( vec3 localPos ){
+//   // x = r sin(phi) cos(theta)   
+//   // y = r cos(phi)  
+//   // z = r sin(phi) sin(theta)
+//   float phi = acos( localPos.y );
+//   // if phi is 0, then there are no x, z components
+//   float theta = 0.0;
+//   // else 
+//   theta = acos(normal.x / sin(phi));
+//   float sinTheta = normal.z / sin(phi);
+//   if (sinTheta < 0.0) {
+//     // Turn it into -theta, but in the 0-2PI range
+//     theta = 2.0 * PI - theta;
+//   }
+
+//   vec2 angles = vec2( theta, phi );
+//   return angles;
+// }
+
+void main()
+{   	 
+	// the sample direction equals the hemisphere's orientation
+    // vec2 angles = func( localPos );
+    // float theta = angles.a;
+    // float phi = angles.b;
+    // float x = sin(theta) * cos(phi);
+    // float y = sin(theta) * sin(phi);
+    // float z = cos(theta);
+    // vec3 normal = vec3( x, y, z);
+    float phi = vTexCoord.x * 2.0 * PI;
+    float theta = vTexCoord.y * PI;
+    float x = sin(theta) * cos(phi);
+    float y = sin(theta) * sin(phi);
+    float z = cos(theta);
+    vec3 normal = vec3( x, y, z);
+  // vec3 normal = abs(vec3( x, y, z));
+
+	// Discretely sampling the hemisphere given the integral's spherical coordinates translates to the following fragment code:
+	vec3 irradiance = vec3(0.0);  
+	vec3 up	= vec3(0.0, 1.0, 0.0);
+	vec3 right = normalize(cross(up, normal));
+	up     	= normalize(cross(normal, right));
+
+	//  We specify a fixed sampleDelta delta value to traverse the hemisphere; decreasing or increasing the sample delta will increase or decrease the accuracy respectively.
+	const float sampleDelta = 0.025;
+	float nrSamples = 0.0;
+
+	for(float phi = 0.0; phi < 2.0 * PI; phi += sampleDelta)
+	{
+    	for(float theta = 0.0; theta < ( 0.5 ) * PI; theta += sampleDelta)
+    	{
+        	// spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance
+            float x = sin(theta) * cos(phi);
+            float y = sin(theta) * sin(phi);
+            float z = cos(theta);
+        	vec3 tangentSample = vec3( x, y, z);
+
+        	vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;
+            irradiance += (texture2D(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);
+        	nrSamples++;
+    	}
+	}
+	// divide by the total number of samples taken, giving us the average sampled irradiance.
+	irradiance = PI * irradiance * (1.0 / float(nrSamples )) ;
+
+	gl_FragColor = vec4(irradiance, 1.0);
+  // gl_FragColor = vec4(normal.x, normal.y, normal.z, 1.0);
+    // gl_FragColor = vec4(normal.x, 0.0, 0.0, 1.0);
+  // gl_FragColor = vec4(0.0, normal.y, 0.0, 1.0);
+
+}

src/webgl/shaders/imageLight.vert

@@ -0,0 +1,32 @@
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord;
+
+varying vec3 localPos;
+varying vec3 vWorldNormal;
+varying vec3 vWorldPosition;
+varying vec2 vTexCoord;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform mat3 uNormalMatrix;
+
+void main() {
+  // Multiply the position by the matrix.
+  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
+  gl_Position = uProjectionMatrix * viewModelPosition;  
+
+  // orient the normals and pass to the fragment shader
+  vWorldNormal = uNormalMatrix * aNormal;
+
+  // send the view position to the fragment shader
+  vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;
+
+  localPos = vWorldPosition;
+  vTexCoord = aTexCoord;
+}
+
+
+/*
+in the vertex shader we'll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.
+*/

src/webgl/shaders/lighting.glsl

@@ -33,6 +33,9 @@ uniform float uConstantAttenuation;
 uniform float uLinearAttenuation;
 uniform float uQuadraticAttenuation;
 
+// uniform bool uUseImageLight;
+uniform sampler2D equiRectangularTextures;
+
 const float specularFactor = 2.0;
 const float diffuseFactor = 0.73;
 
@@ -67,6 +70,40 @@ LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector) {
   return lr;
 }
 
+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;
+}
+
+vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){
+  // put the code from the sketch frag here
+  // hardcoded world camera position
+  vec3 worldCameraPosition =  [0.0, 0.0, 0.0];
+  vec3 worldNormal = normalize(vNormal);
+  vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );
+  vec3 R = reflect(lightDirection, worldNormal);
+  vec2 newTexCoor = mapTextureToNormal( R );
+  vec4 texture = texture2D( equiRectangularTextures, newTexCoor );
+  return texture.xyz;
+}
+
+// TODO
+// vec3 calculateImageSpecular(){}
+
 void totalLight(
   vec3 modelPosition,
   vec3 normal,
@@ -138,6 +175,12 @@ void totalLight(
     }
   }
 
+  if( equiRectangularTextures !== NULL ){
+    totalDiffuse += calculateImageDiffuse(normal, modelPosition);
+    // TODO
+    // totalSpecular += calculateImageSpecular();
+  }
+
   totalDiffuse *= diffuseFactor;
   totalSpecular *= specularFactor;
 }