Improve light rendering

Author: sirxemic

.idea/vcs.xml

@@ -39,7 +39,7 @@
 let direction
 let angle
 
-// Duration of the loop
+// Duration of the loop (in seconds)
 app.duration = 10
 
 // Code to run at the beginning of the loop
@@ -95,7 +95,7 @@
             <div id="progressBar"></div>
             <label id="fpsLabel">
               Frames per second:
-              <input type="number" value="25" min="1" max="60">
+              <input type="number" value="60" min="1" max="60">
             </label>
           </div>
           <canvas id="mainCanvas"></canvas>

index.html

@@ -29,6 +29,7 @@ import {
   ShaderMaterial,
   TextureLoader,
   WebGLRenderer,
+  AxesHelper,
 } from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import rawCoords from './coords.gift'
@@ -78,7 +79,7 @@ export class MainApp {
   private fpsControl: HTMLInputElement
 
   public recording = false
-  public fps = 25
+  public fps = 60
 
   private prerecorded = false
 
@@ -112,6 +113,8 @@ export class MainApp {
 
     this.createLights()
 
+    this.scene.add(new AxesHelper(1))
+
     this.state = {
       time: 0,
       duration: 60,

src/MainApp.ts

@@ -17,47 +17,79 @@ export const fragmentShader = `
 uniform sampler2D pointTexture;
 varying vec3 vColor;
 
-vec3 hsl2rgb(in vec3 c) {
-    vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
-    return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));
-}
-
-vec3 rgb2hsl( in vec3 c ){
-  float h = 0.0;
-	float s = 0.0;
-	float l = 0.0;
-	float r = c.r;
-	float g = c.g;
-	float b = c.b;
-	float cMin = min( r, min( g, b ) );
-	float cMax = max( r, max( g, b ) );
-
-	l = ( cMax + cMin ) / 2.0;
-	if ( cMax > cMin ) {
-		float cDelta = cMax - cMin;
-		s = l < .0 ? cDelta / ( cMax + cMin ) : cDelta / ( 2.0 - ( cMax + cMin ) );
-        
-		if ( r == cMax ) {
-			h = ( g - b ) / cDelta;
-		} else if ( g == cMax ) {
-			h = 2.0 + ( b - r ) / cDelta;
-		} else {
-			h = 4.0 + ( r - g ) / cDelta;
-		}
-
-		if ( h < 0.0) {
-			h += 6.0;
-		}
-		h = h / 6.0;
-	}
-	return vec3( h, s, l );
+vec3 rgb2xyz(vec3 c) {
+  vec3 tmp = vec3(
+    (c.r > .04045) ? pow((c.r + .055) / 1.055, 2.4) : c.r / 12.92,
+    (c.g > .04045) ? pow((c.g + .055) / 1.055, 2.4) : c.g / 12.92,
+    (c.b > .04045) ? pow((c.b + .055) / 1.055, 2.4) : c.b / 12.92
+  );
+  mat3 mat = mat3(
+    .4124, .3576, .1805,
+    .2126, .7152, .0722,
+    .0193, .1192, .9505
+  );
+  return 100. * tmp * mat;
+}
+
+vec3 xyz2lab(vec3 c) {
+  vec3 n = c / vec3(95.047, 100., 108.883);
+  vec3 v = vec3(
+    (n.x > .008856) ? pow(n.x, 1./3.) : (7.787 * n.x) + (16. / 116.),
+    (n.y > .008856) ? pow(n.y, 1./3.) : (7.787 * n.y) + (16. / 116.),
+    (n.z > .008856) ? pow(n.z, 1./3.) : (7.787 * n.z) + (16. / 116.)
+  );
+  return vec3((116. * v.y) - 16., 500. * (v.x - v.y), 200. * (v.y - v.z));
+}
+
+vec3 rgb2lab(vec3 c) {
+  vec3 lab = xyz2lab(rgb2xyz(c));
+  return vec3(lab.x / 100., .5 + .5 * (lab.y / 127.), .5 + .5 * (lab.z / 127.));
+}
+
+vec3 lab2xyz(vec3 c) {
+  float fy = (c.x + 16.) / 116.;
+  float fx = c.y / 500. + fy;
+  float fz = fy - c.z / 200.;
+
+  return vec3(
+     95.047 * ((fx > .206897) ? fx * fx * fx : (fx - 16. / 116.) / 7.787),
+    100.000 * ((fy > .206897) ? fy * fy * fy : (fy - 16. / 116.) / 7.787),
+    108.883 * ((fz > .206897) ? fz * fz * fz : (fz - 16. / 116.) / 7.787)
+  );
+}
+
+vec3 xyz2rgb(vec3 c) {
+  mat3 mat=mat3(
+    3.2406, -1.5372, -0.4986,
+    -0.9689, 1.8758, 0.0415,
+    0.0557, -.2040, 1.0570
+  );
+  vec3 v = 0.01 * c * mat;
+  vec3 r = vec3(
+    (v.r > .0031308) ? ((1.055 * pow(v.r, (1. / 2.4))) - .055) : 12.92 * v.r,
+    (v.g > .0031308) ? ((1.055 * pow(v.g, (1. / 2.4))) - .055) : 12.92 * v.g,
+    (v.b > .0031308) ? ((1.055 * pow(v.b, (1. / 2.4))) - .055) : 12.92 * v.b
+  );
+  return r;
+}
+vec3 lab2rgb(vec3 c){
+  return xyz2rgb(
+    lab2xyz(
+      vec3(
+        100. * c.x,
+        2. * 127. * (c.y - .5),
+        2. * 127. * (c.z - .5)
+      )
+    )
+  );
 }
 
 void main() {
   float lightness = texture2D(pointTexture, gl_PointCoord).r;
-  vec3 color = rgb2hsl(vColor);
-  color.z *= 2.0 * lightness * lightness * lightness;
-  color = hsl2rgb(color);
-  gl_FragColor = vec4(color, 1.0);
+  vec3 color = clamp(vColor, vec3(0.0), vec3(1.0));
+  color = rgb2lab(color);
+  color.x *= 2.0 * lightness * lightness;
+  color = lab2rgb(color);
+  gl_FragColor = vec4(color, lightness);
 }
 `