Various cleanups and removal of some passes.

package-lock.json

@@ -8,9 +8,7 @@
       "name": "package",
       "version": "0.0.0",
       "dependencies": {
-        "@dimforge/rapier3d": "^0.11.2",
         "mersenne-twister": "^1.1.0",
-        "n8ao": "^1.6.8",
         "three": "^0.156.0",
         "vite-plugin-solid": "^2.7.0",
         "vite-plugin-top-level-await": "^1.3.0",
@@ -513,11 +511,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@dimforge/rapier3d": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d/-/rapier3d-0.11.2.tgz",
-      "integrity": "sha512-B+AKkPmtJxED3goMTGU8v0ju8hUAUQGLgghzCos4G4OeN9X+mJ5lfN2xtNA0n8tJRJk2YfsMk9BOj/6AN89Acg=="
-    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -1997,15 +1990,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
-    "node_modules/n8ao": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.6.8.tgz",
-      "integrity": "sha512-3xaBaoMIplgPdBK+9mZefa8stWEoA2673h2734wYMxm/hUkMLENMhzymDe+WZueFQq93ly4xpl5s1NJrQBzFOQ==",
-      "peerDependencies": {
-        "postprocessing": ">=6.30.0",
-        "three": ">=0.137"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -2195,18 +2179,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postprocessing": {
-      "version": "6.33.2",
-      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.33.2.tgz",
-      "integrity": "sha512-xGirHyjArISGVfmjCwXyvuhZm9JpLxEkjdE+ZOSq+7SmSetqFfdpaGfkEjbbFxWShwgwXWmgtcPxvrg9BP+r8g==",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.13.2"
-      },
-      "peerDependencies": {
-        "three": ">= 0.138.0 < 0.158.0"
-      }
-    },
     "node_modules/protobufjs": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.5.tgz",

package.json

@@ -17,9 +17,7 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "@dimforge/rapier3d": "^0.11.2",
     "mersenne-twister": "^1.1.0",
-    "n8ao": "^1.6.8",
     "three": "^0.156.0",
     "vite-plugin-solid": "^2.7.0",
     "vite-plugin-top-level-await": "^1.3.0",

public/shaders/grass-lighting-model-vsh.glsl

@@ -145,10 +145,10 @@ void main() {
 
   grassVertexPosition += grassOffset;
 
-  vec3 b1 = GAMMA_TO_LINEAR(vec3(0.02, 0.075, 0.01));
-  vec3 b2 = GAMMA_TO_LINEAR(vec3(0.025, 0.1, 0.01));
-  vec3 t1 = GAMMA_TO_LINEAR(vec3(0.25, 0.3, 0.15));
-  vec3 t2 = GAMMA_TO_LINEAR(vec3(0.3, 0.4, 0.2));
+  vec3 b1 = vec3(0.02, 0.075, 0.01);
+  vec3 b2 = vec3(0.025, 0.1, 0.01);
+  vec3 t1 = vec3(0.65, 0.8, 0.25);
+  vec3 t2 = vec3(0.8, 0.9, 0.4);
 
   vec3 baseColour = mix(b1, b2, hashGrassColour.x);
   vec3 tipColour = mix(t1, t2, hashGrassColour.y);

public/shaders/sky.glsl

@@ -1,5 +1,5 @@
 
-vec3 SKY_lighterBlue = vec3(0.39, 0.57, 0.86) * 0.35;
+vec3 SKY_lighterBlue = vec3(0.39, 0.57, 0.86) * 0.25;
 vec3 SKY_midBlue = vec3(0.1, 0.11, 0.1) * 0.5;
 vec3 SKY_darkerBlue = vec3(0.0);
 vec3 SKY_SUN_COLOUR = vec3(0.5);
@@ -8,19 +8,19 @@ vec3 SKY_FOG_GLOW_COLOUR = vec3(vec3(0.75, 0.75, 1.0) * 0.15);
 float SKY_POWER = 16.0;
 float SUN_POWER = 128.0;
 float SKY_DARK_POWER = 2.0;
-float SKY_fogScatterDensity = 0.0002;
-float SKY_fogExtinctionDensity = 0.006;
+float SKY_fogScatterDensity = 0.0005;
+float SKY_fogExtinctionDensity = 0.003;
 vec3 SUN_DIR = vec3(-1.0, 0.45, 1.0);
 
 // This is just a bunch of nonsense since I didn't want to implement a full
 // sky model. It's just a simple gradient with a sun and some fog.
 vec3 CalculateSkyLighting(vec3 viewDir, vec3 normalDir) {
-  vec3 lighterBlue = col3(GAMMA_TO_LINEAR(SKY_lighterBlue));
-  vec3 midBlue = col3(GAMMA_TO_LINEAR(SKY_midBlue));
-  vec3 darkerBlue = col3(GAMMA_TO_LINEAR(SKY_darkerBlue));
+  vec3 lighterBlue = col3(SKY_lighterBlue);
+  vec3 midBlue = col3(SKY_midBlue);
+  vec3 darkerBlue = col3(SKY_darkerBlue);
 
-  vec3 SUN_COLOUR = col3(GAMMA_TO_LINEAR(SKY_SUN_COLOUR));
-  vec3 SUN_GLOW_COLOUR = col3(GAMMA_TO_LINEAR(SKY_SUN_GLOW_COLOUR));
+  vec3 SUN_COLOUR = col3(SKY_SUN_COLOUR);
+  vec3 SUN_GLOW_COLOUR = col3(SKY_SUN_GLOW_COLOUR);
 
   float viewDirY = linearstep(-0.01, 1.0, viewDir.y);
 

public/shaders/terrain-lighting-model-vsh.glsl

@@ -50,15 +50,15 @@ void main() {
   // vec3 baseColour = vec3(0.02, 0.2, 0.01);
   // vec3 tipColour = vec3(0.5, 0.5, 0.1);
 
-  vec3 baseColour = GAMMA_TO_LINEAR(vec3(0.05, 0.2, 0.01));
-  vec3 tipColour = GAMMA_TO_LINEAR(vec3(0.3, 0.3, 0.1));
+  vec3 baseColour = vec3(0.05, 0.2, 0.01);
+  vec3 tipColour = vec3(0.3, 0.3, 0.1);
 
   float aoDist = smoothstep(25.0, 50.0, distToVertex);
   float colourDist = smoothstep(50.0, 100.0, distToVertex);
-  float ao = mix(0.125, 1.0, aoDist);
+  float ao = mix(0.25, 1.0, aoDist);
   ao = mix(ao, 1.0, isSandy);
 
-  vec3 SAND_COLOUR = GAMMA_TO_LINEAR(vec3(0.6, 0.4, 0.2));
+  vec3 SAND_COLOUR = vec3(0.6, 0.4, 0.2);
 
   vTerrainColour = mix(baseColour, tipColour, colourDist);
   vTerrainColour = mix(vTerrainColour, SAND_COLOUR, smoothstep(-11.0, -14.0, height));

src/base/threejs-component.js

@@ -1,5 +1,4 @@
 import { THREE, RenderPass, ShaderPass, FXAAShader, ACESFilmicToneMappingShader } from './three-defs.js';
-import {N8AOPass} from "n8ao";
 
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
@@ -19,7 +18,8 @@ const LIGHT_FAR = 1000.0;
 const GammaCorrectionShader2 = {
 	name: 'GammaCorrectionShader2',
 	uniforms: {
-		'tDiffuse': { value: null }
+		'tDiffuse': { value: null },
+    'exposure': { value: 1.0 },
 	},
 	vertexShader: /* glsl */`
 		varying vec2 vUv;
@@ -33,6 +33,8 @@ const GammaCorrectionShader2 = {
 		uniform sampler2D tDiffuse;
 		varying vec2 vUv;
 
+    #define saturate(a) clamp( a, 0.0, 1.0 )
+
     float inverseLerp(float minValue, float maxValue, float v) {
       return (v - minValue) / (maxValue - minValue);
     }
@@ -42,6 +44,44 @@ const GammaCorrectionShader2 = {
       return mix(outMin, outMax, t);
     }
 
+		uniform float exposure;
+
+		vec3 RRTAndODTFit( vec3 v ) {
+
+			vec3 a = v * ( v + 0.0245786 ) - 0.000090537;
+			vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081;
+			return a / b;
+
+		}
+
+		vec3 ACESFilmicToneMapping( vec3 color ) {
+
+		// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
+			const mat3 ACESInputMat = mat3(
+				vec3( 0.59719, 0.07600, 0.02840 ), // transposed from source
+				vec3( 0.35458, 0.90834, 0.13383 ),
+				vec3( 0.04823, 0.01566, 0.83777 )
+			);
+
+		// ODT_SAT => XYZ => D60_2_D65 => sRGB
+			const mat3 ACESOutputMat = mat3(
+				vec3(  1.60475, -0.10208, -0.00327 ), // transposed from source
+				vec3( -0.53108,  1.10813, -0.07276 ),
+				vec3( -0.07367, -0.00605,  1.07602 )
+			);
+
+			color = ACESInputMat * color;
+
+		// Apply RRT and ODT
+			color = RRTAndODTFit( color );
+
+			color = ACESOutputMat * color;
+
+		// Clamp to [0, 1]
+			return saturate( color );
+
+		}
+
     vec3 vignette(vec2 uvs) {
       float v1 = smoothstep(0.5, 0.3, abs(uvs.x - 0.5));
       float v2 = smoothstep(0.5, 0.3, abs(uvs.y - 0.5));
@@ -54,6 +94,9 @@ const GammaCorrectionShader2 = {
 		void main() {
 			vec4 tex = texture2D( tDiffuse, vUv );
 
+      tex.rgb *= exposure / 0.6; // pre-exposed, outside of the tone mapping function
+      tex.rgb = ACESFilmicToneMapping( tex.rgb );
+
       tex = LinearTosRGB(tex);
       tex.rgb *= vignette(vUv);
 
@@ -297,16 +340,6 @@ export const threejs_component = (() => {
       this.writeBuffer_.depthTexture.type = THREE.UnsignedInt248Type;
 
       this.#opaquePass_ = new RenderPass(this.#opaqueScene_, this.#opaqueCamera_);
-      this.#ssaoPass_ = new N8AOPass(this.#opaqueScene_, this.#opaqueCamera_, this.writeBuffer_.width, this.writeBuffer_.height);
-      this.#ssaoPass_.configuration.aoRadius = 3.0;
-      this.#ssaoPass_.configuration.distanceFalloff = 0.25;
-      this.#ssaoPass_.configuration.intensity = 5.0;
-      this.#ssaoPass_.configuration.color = new THREE.Color(0, 0, 0);
-      // this.#ssaoPass_.configuration.halfRes = true;
-      this.#ssaoPass_.beautyRenderTarget.dispose();
-      this.#ssaoPass_.beautyRenderTarget = this.writeBuffer_;
-      this.#ssaoPass_.setQualityMode("High");
-
       this.#waterPass_ = new RenderPass(this.#waterScene_, this.#opaqueCamera_);
       this.#transparentPass_ = new RenderPass(this.#transparentScene_, this.#transparentCamera_);
 
@@ -388,8 +421,6 @@ export const threejs_component = (() => {
       this.readBuffer_.setSize(w, h);
       // this.csm_.updateFrustums();
 
-      this.#ssaoPass_.setSize(w, h);
-
       this.#waterTexturePass_.setSize(w, h);
 
       this.#fxaaPass_.material.uniforms['resolution'].value.x = 1 / w;
@@ -438,14 +469,6 @@ export const threejs_component = (() => {
       this.#threejs_.setRenderTarget(this.readBuffer_);
       this.#threejs_.clear();
       this.#threejs_.setRenderTarget(null);
-
-      const gl = this.#threejs_.getContext();
-      const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
-      if (this.timerQuery === null && ext !== null) {
-        this.timerQuery = gl.createQuery();
-        gl.beginQuery(ext.TIME_ELAPSED_EXT, this.timerQuery);
-      }
-
       this.#opaquePass_.renderToScreen = false;
       this.#opaquePass_.render(this.#threejs_, null, this.writeBuffer_, timeElapsedS, false);
       this.writeBuffer_.ACTIVE_HAS_OPAQUE = true; 
@@ -456,42 +479,8 @@ export const threejs_component = (() => {
       this.#threejs_.autoClearColor = false;
       this.#threejs_.autoClearDepth = false;
       this.#threejs_.autoClearStencil = false;
-
-      if (this.timerQuery !== null) {
-        gl.endQuery(ext.TIME_ELAPSED_EXT);
-        gl.flush();
-        const available = gl.getQueryParameter(this.timerQuery, gl.QUERY_RESULT_AVAILABLE);
-        if (available) {
-          const elapsedTimeInNs = gl.getQueryParameter(this.timerQuery, gl.QUERY_RESULT);
-          const elapsedTimeInMs = elapsedTimeInNs / 1000000;
-          this.grassTimingAvg_ = this.grassTimingAvg_ * 0.9 + elapsedTimeInMs * 0.1;
-          // console.log(`Render time: ${this.grassTimingAvg_}ms`);
-          this.grassStats_.update(elapsedTimeInMs, 10);
-        }
-        this.timerQuery = null;
-      }
-
-      this.#ssaoPass_.clear = false;
-      this.#ssaoPass_.renderToScreen = false;
-      this.#ssaoPass_.beautyRenderTarget = this.readBuffer_;
-      this.#ssaoPass_.configuration.autoRenderBeauty = false;
-      this.#ssaoPass_.configuration.intensity = 5.0;
-      // this.#ssaoPass_.setDisplayMode("Split");
-      this.#ssaoPass_.render(this.#threejs_, this.writeBuffer_, null, timeElapsedS, false);
-      this.writeBuffer_.ACTIVE_HAS_SSAO_OPAQUE = true; 
-      this.readBuffer_.ACTIVE_HAS_SSAO_OPAQUE = false; 
       this.swapBuffers_();
 
-      // SSAO buffer has colour, but other one has depth, which I want to reuse
-      // Swapping them should work, but doesn't, and I don't feel like figuring out why.
-      this.#copyPass_.renderToScreen = false;
-      this.#copyPass_.clear = false;
-      this.#copyPass_.material.depthWrite = false;
-      this.#copyPass_.material.depthTest = false;
-      this.#copyPass_.render(this.#threejs_, this.writeBuffer_, this.readBuffer_, timeElapsedS, false);
-      this.writeBuffer_.ACTIVE_HAS_FINAL_OPAQUE = true; 
-      this.readBuffer_.ACTIVE_HAS_FINAL_OPAQUE = false; 
-
       this.#waterTexturePass_.clear = false;
       this.#waterTexturePass_.renderToScreen = false;
       this.#waterTexturePass_.material.uniforms.colourTexture.value = this.writeBuffer_.texture;
@@ -508,20 +497,6 @@ export const threejs_component = (() => {
       this.readBuffer_.ACTIVE_HAS_WATER = false;
       this.swapBuffers_();
 
-      this.#fxaaPass_.clear = false;
-      this.#fxaaPass_.render(this.#threejs_, this.writeBuffer_, this.readBuffer_, timeElapsedS, false);
-      this.swapBuffers_();
-
-      // SHADERPASS SWAPS ORDER OF READ/WRITE BUFFERS
-      this.#acesPass_.clear = false;
-      this.#acesPass_.material.uniforms.exposure.value = 1.0;
-      this.#acesPass_.material.depthTest = false;
-      this.#acesPass_.material.depthWrite = false;
-      this.#acesPass_.render(this.#threejs_, this.writeBuffer_, this.readBuffer_, timeElapsedS, false);
-      this.writeBuffer_.ACTIVE_HAS_ACES = true;
-      this.readBuffer_.ACTIVE_HAS_ACES = false;
-      this.swapBuffers_();
-
       this.#gammaPass_.clear = false;
       this.#gammaPass_.renderToScreen = true;
       this.#gammaPass_.render(this.#threejs_, null, this.readBuffer_, timeElapsedS, false);