@takram/three-geospatial-effects 0.0.1-alpha.0

package/src/setupMaterialsForGeometryPass.ts

@@ -0,0 +1,131 @@
+// cSpell:words defaultnormal specularmap envmap
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import { ShaderLib, type ShaderLibShader } from 'three'
+
+import { packingShader } from '@takram/three-geospatial'
+
+const SETUP = Symbol('SETUP')
+
+declare module 'three' {
+  interface ShaderLibShader {
+    [SETUP]?: boolean
+  }
+}
+
+function injectNormal(shader: ShaderLibShader): ShaderLibShader {
+  const vertexShader = shader.vertexShader
+    .replace(
+      /* glsl */ `#include <fog_pars_vertex>`,
+      /* glsl */ `
+        #include <fog_pars_vertex>
+        #include <normal_pars_vertex>
+      `
+    )
+    .replace(
+      /* glsl */ `#include <defaultnormal_vertex>`,
+      /* glsl */ `
+        #include <defaultnormal_vertex>
+        #include <normal_vertex>
+      `
+    )
+    .replace(
+      /* glsl */ `#if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )`,
+      /* glsl */ `#if 1`
+    )
+    .replace(
+      /* glsl */ `#include <clipping_planes_vertex>`,
+      /* glsl */ `
+        #include <clipping_planes_vertex>
+        vViewPosition = - mvPosition.xyz;
+      `
+    )
+  shader.vertexShader = /* glsl */ `
+    #undef FLAT_SHADED
+    varying vec3 vViewPosition;
+    ${vertexShader}
+  `
+
+  const fragmentShader = shader.fragmentShader
+    .replace(
+      /#ifndef FLAT_SHADED\s+varying vec3 vNormal;\s+#endif/m,
+      /* glsl */ `#include <normal_pars_fragment>`
+    )
+    .replace(
+      /* glsl */ `#include <common>`,
+      /* glsl */ `
+        #include <common>
+        #include <packing>
+      `
+    )
+    .replace(
+      /* glsl */ `#include <specularmap_fragment>`,
+      /* glsl */ `
+        #include <specularmap_fragment>
+        #include <normal_fragment_begin>
+        #include <normal_fragment_maps>
+      `
+    )
+  shader.fragmentShader = /* glsl */ `
+    #undef FLAT_SHADED
+    varying vec3 vViewPosition;
+    ${fragmentShader}
+  `
+
+  return shader
+}
+
+function injectGBuffer(
+  shader: ShaderLibShader,
+  { type }: { type?: 'basic' | 'physical' } = {}
+): ShaderLibShader {
+  if (shader[SETUP] === true) {
+    return shader
+  }
+  if (type === 'basic') {
+    injectNormal(shader)
+  }
+  const outputBuffer1 =
+    type === 'physical'
+      ? /* glsl */ `
+          vec4(
+            packNormalToVec2(normal),
+            metalnessFactor,
+            roughnessFactor
+          )
+        `
+      : /* glsl */ `
+          vec4(
+            packNormalToVec2(normal),
+            reflectivity,
+            0.0
+          );
+        `
+  shader.fragmentShader = /* glsl */ `
+    layout(location = 1) out vec4 outputBuffer1;
+
+    #ifndef USE_ENVMAP
+      uniform float reflectivity;
+    #endif
+
+    ${packingShader}
+    ${shader.fragmentShader.replace(
+      /}\s*$/m, // Assume the last curly brace is of main()
+      /* glsl */ `
+          outputBuffer1 = ${outputBuffer1};
+        }
+      `
+    )}
+  `
+  shader[SETUP] = true
+  return shader
+}
+
+export function setupMaterialsForGeometryPass(): void {
+  injectGBuffer(ShaderLib.lambert)
+  injectGBuffer(ShaderLib.phong)
+  injectGBuffer(ShaderLib.basic, { type: 'basic' })
+  injectGBuffer(ShaderLib.standard, { type: 'physical' })
+  injectGBuffer(ShaderLib.physical, { type: 'physical' })
+}

package/src/shaders/depthEffect.frag

@@ -0,0 +1,26 @@
+uniform float near;
+uniform float far;
+
+// A fifth-order polynomial approximation of Turbo colormap.
+// See: https://observablehq.com/@mbostock/turbo
+// prettier-ignore
+vec3 turbo(const float x) {
+  float r = 0.1357 + x * (4.5974 - x * (42.3277 - x * (130.5887 - x * (150.5666 - x * 58.1375))));
+  float g = 0.0914 + x * (2.1856 + x * (4.8052 - x * (14.0195 - x * (4.2109 + x * 2.7747))));
+  float b = 0.1067 + x * (12.5925 - x * (60.1097 - x * (109.0745 - x * (88.5066 - x * 26.8183))));
+  return vec3(r, g, b);
+}
+
+void mainImage(const vec4 inputColor, const vec2 uv, out vec4 outputColor) {
+  float depth = readDepth(uv);
+  depth = reverseLogDepth(depth, cameraNear, cameraFar);
+  depth = linearizeDepth(depth, near, far) / far;
+
+  #ifdef USE_TURBO
+  vec3 color = turbo(1.0 - depth);
+  #else
+  vec3 color = vec3(depth);
+  #endif // USE_TURBO
+
+  outputColor = vec4(color, inputColor.a);
+}

package/src/shaders/ditheringEffect.frag

@@ -0,0 +1,7 @@
+#define DITHERING
+
+#include <dithering_pars_fragment>
+
+void mainImage(const vec4 inputColor, const vec2 uv, out vec4 outputColor) {
+  outputColor = vec4(dithering(inputColor.rgb), inputColor.a);
+}

package/src/shaders/downsampleThreshold.frag

@@ -0,0 +1,73 @@
+#include <common>
+
+uniform sampler2D inputBuffer;
+
+uniform float thresholdLevel;
+uniform float thresholdRange;
+
+in vec2 vCenterUv1;
+in vec2 vCenterUv2;
+in vec2 vCenterUv3;
+in vec2 vCenterUv4;
+in vec2 vRowUv1;
+in vec2 vRowUv2;
+in vec2 vRowUv3;
+in vec2 vRowUv4;
+in vec2 vRowUv5;
+in vec2 vRowUv6;
+in vec2 vRowUv7;
+in vec2 vRowUv8;
+in vec2 vRowUv9;
+
+float clampToBorder(const vec2 uv) {
+  return float(uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0);
+}
+
+// Reference: https://learnopengl.com/Guest-Articles/2022/Phys.-Based-Bloom
+void main() {
+  vec3 color = 0.125 * texture2D(inputBuffer, vec2(vRowUv5)).rgb;
+  vec4 weight =
+    0.03125 *
+    vec4(
+      clampToBorder(vRowUv1),
+      clampToBorder(vRowUv3),
+      clampToBorder(vRowUv7),
+      clampToBorder(vRowUv9)
+    );
+  color += weight.x * texture2D(inputBuffer, vec2(vRowUv1)).rgb;
+  color += weight.y * texture2D(inputBuffer, vec2(vRowUv3)).rgb;
+  color += weight.z * texture2D(inputBuffer, vec2(vRowUv7)).rgb;
+  color += weight.w * texture2D(inputBuffer, vec2(vRowUv9)).rgb;
+
+  weight =
+    0.0625 *
+    vec4(
+      clampToBorder(vRowUv2),
+      clampToBorder(vRowUv4),
+      clampToBorder(vRowUv6),
+      clampToBorder(vRowUv8)
+    );
+  color += weight.x * texture2D(inputBuffer, vec2(vRowUv2)).rgb;
+  color += weight.y * texture2D(inputBuffer, vec2(vRowUv4)).rgb;
+  color += weight.z * texture2D(inputBuffer, vec2(vRowUv6)).rgb;
+  color += weight.w * texture2D(inputBuffer, vec2(vRowUv8)).rgb;
+
+  weight =
+    0.125 *
+    vec4(
+      clampToBorder(vRowUv2),
+      clampToBorder(vRowUv4),
+      clampToBorder(vRowUv6),
+      clampToBorder(vRowUv8)
+    );
+  color += weight.x * texture2D(inputBuffer, vec2(vCenterUv1)).rgb;
+  color += weight.y * texture2D(inputBuffer, vec2(vCenterUv2)).rgb;
+  color += weight.z * texture2D(inputBuffer, vec2(vCenterUv3)).rgb;
+  color += weight.w * texture2D(inputBuffer, vec2(vCenterUv4)).rgb;
+
+  float l = luminance(color);
+  float scale = saturate(
+    smoothstep(thresholdLevel, thresholdLevel + thresholdRange, l)
+  );
+  gl_FragColor = vec4(color * scale, 1.0);
+}

package/src/shaders/downsampleThreshold.vert

@@ -0,0 +1,34 @@
+uniform vec2 texelSize;
+
+out vec2 vCenterUv1;
+out vec2 vCenterUv2;
+out vec2 vCenterUv3;
+out vec2 vCenterUv4;
+out vec2 vRowUv1;
+out vec2 vRowUv2;
+out vec2 vRowUv3;
+out vec2 vRowUv4;
+out vec2 vRowUv5;
+out vec2 vRowUv6;
+out vec2 vRowUv7;
+out vec2 vRowUv8;
+out vec2 vRowUv9;
+
+void main() {
+  vec2 uv = position.xy * 0.5 + 0.5;
+  vCenterUv1 = uv + texelSize * vec2(-1.0, 1.0);
+  vCenterUv2 = uv + texelSize * vec2(1.0, 1.0);
+  vCenterUv3 = uv + texelSize * vec2(-1.0, -1.0);
+  vCenterUv4 = uv + texelSize * vec2(1.0, -1.0);
+  vRowUv1 = uv + texelSize * vec2(-2.0, 2.0);
+  vRowUv2 = uv + texelSize * vec2(0.0, 2.0);
+  vRowUv3 = uv + texelSize * vec2(2.0, 2.0);
+  vRowUv4 = uv + texelSize * vec2(-2.0, 0.0);
+  vRowUv5 = uv + texelSize;
+  vRowUv6 = uv + texelSize * vec2(2.0, 0.0);
+  vRowUv7 = uv + texelSize * vec2(-2.0, -2.0);
+  vRowUv8 = uv + texelSize * vec2(0.0, -2.0);
+  vRowUv9 = uv + texelSize * vec2(2.0, -2.0);
+
+  gl_Position = vec4(position.xy, 1.0, 1.0);
+}

package/src/shaders/geometryEffect.frag

@@ -0,0 +1,17 @@
+uniform sampler2D geometryBuffer;
+
+void mainImage(const vec4 inputColor, const vec2 uv, out vec4 outputColor) {
+  vec4 normalMetalnessRoughness = texture2D(geometryBuffer, uv);
+
+  #ifdef OUTPUT_NORMAL
+  vec3 normal = unpackVec2ToNormal(texture2D(geometryBuffer, uv).xy);
+  outputColor = vec4(normal * 0.5 + 0.5, inputColor.a);
+  #endif // OUTPUT_NORMAL
+
+  #ifdef OUTPUT_PBR
+  outputColor = vec4(
+    vec3(normalMetalnessRoughness.b, normalMetalnessRoughness.a, 0.0),
+    inputColor.a
+  );
+  #endif // OUTPUT_PBR
+}

package/src/shaders/lensFlareEffect.frag

@@ -0,0 +1,12 @@
+uniform sampler2D bloomBuffer;
+uniform sampler2D featuresBuffer;
+uniform float intensity;
+
+void mainImage(const vec4 inputColor, const vec2 uv, out vec4 outputColor) {
+  vec3 bloom = texture2D(bloomBuffer, uv).rgb;
+  vec3 features = texture2D(featuresBuffer, uv).rgb;
+  outputColor = vec4(
+    inputColor.rgb + (bloom + features) * intensity,
+    inputColor.a
+  );
+}

package/src/shaders/lensFlareFeatures.frag

@@ -0,0 +1,73 @@
+#include <common>
+
+#define SQRT_2 (0.7071067811865476)
+
+uniform sampler2D inputBuffer;
+
+uniform vec2 texelSize;
+uniform float ghostAmount;
+uniform float haloAmount;
+uniform float chromaticAberration;
+
+in vec2 vUv;
+in vec2 vAspectRatio;
+
+vec3 sampleGhost(const vec2 direction, const vec3 color, const float offset) {
+  vec2 suv = clamp(1.0 - vUv + direction * offset, 0.0, 1.0);
+  vec3 result = texture2D(inputBuffer, suv).rgb * color;
+
+  // Falloff at the perimeter.
+  float d = clamp(length(0.5 - suv) / (0.5 * SQRT_2), 0.0, 1.0);
+  result *= pow(1.0 - d, 3.0);
+  return result;
+}
+
+vec4 sampleGhosts(float amount) {
+  vec3 color = vec3(0.0);
+  vec2 direction = vUv - 0.5;
+  color += sampleGhost(direction, vec3(0.8, 0.8, 1.0), -5.0);
+  color += sampleGhost(direction, vec3(1.0, 0.8, 0.4), -1.5);
+  color += sampleGhost(direction, vec3(0.9, 1.0, 0.8), -0.4);
+  color += sampleGhost(direction, vec3(1.0, 0.8, 0.4), -0.2);
+  color += sampleGhost(direction, vec3(0.9, 0.7, 0.7), -0.1);
+  color += sampleGhost(direction, vec3(0.5, 1.0, 0.4), 0.7);
+  color += sampleGhost(direction, vec3(0.5, 0.5, 0.5), 1.0);
+  color += sampleGhost(direction, vec3(1.0, 1.0, 0.6), 2.5);
+  color += sampleGhost(direction, vec3(0.5, 0.8, 1.0), 10.0);
+  return vec4(color * amount, 1.0);
+}
+
+// Reference: https://john-chapman.github.io/2017/11/05/pseudo-lens-flare.html
+float cubicRingMask(const float x, const float radius, const float thickness) {
+  float v = min(abs(x - radius) / thickness, 1.0);
+  return 1.0 - v * v * (3.0 - 2.0 * v);
+}
+
+vec3 sampleHalo(const float radius) {
+  vec2 direction = normalize((vUv - 0.5) / vAspectRatio) * vAspectRatio;
+  vec3 offset = vec3(texelSize.x * chromaticAberration) * vec3(-1.0, 0.0, 1.0);
+  vec2 suv = fract(1.0 - vUv + direction * radius);
+  vec3 result = vec3(
+    texture2D(inputBuffer, suv + direction * offset.r).r,
+    texture2D(inputBuffer, suv + direction * offset.g).g,
+    texture2D(inputBuffer, suv + direction * offset.b).b
+  );
+
+  // Falloff at the center and perimeter.
+  vec2 wuv = (vUv - vec2(0.5, 0.0)) / vAspectRatio + vec2(0.5, 0.0);
+  float d = saturate(distance(wuv, vec2(0.5)));
+  result *= cubicRingMask(d, 0.45, 0.25);
+  return result;
+}
+
+vec4 sampleHalos(const float amount) {
+  vec3 color = vec3(0.0);
+  color += sampleHalo(0.3);
+  return vec4(color, 1.0) * amount;
+}
+
+void main() {
+  gl_FragColor += sampleGhosts(ghostAmount);
+  gl_FragColor += sampleHalos(haloAmount);
+}
+

package/src/shaders/lensFlareFeatures.vert

@@ -0,0 +1,10 @@
+uniform vec2 texelSize;
+
+out vec2 vUv;
+out vec2 vAspectRatio;
+
+void main() {
+  vUv = position.xy * 0.5 + 0.5;
+  vAspectRatio = vec2(texelSize.x / texelSize.y, 1.0);
+  gl_Position = vec4(position.xy, 1.0, 1.0);
+}

package/src/shaders/normalEffect.frag

@@ -0,0 +1,37 @@
+uniform highp sampler2D normalBuffer;
+
+uniform mat4 projectionMatrix;
+uniform mat4 inverseProjectionMatrix;
+
+vec3 reconstructNormal(const vec2 uv) {
+  float depth = readDepth(uv);
+  depth = reverseLogDepth(depth, cameraNear, cameraFar);
+  vec3 position = screenToView(
+    uv,
+    depth,
+    getViewZ(depth),
+    projectionMatrix,
+    inverseProjectionMatrix
+  );
+  vec3 dx = dFdx(position);
+  vec3 dy = dFdy(position);
+  return normalize(cross(dx, dy));
+}
+
+vec3 readNormal(const vec2 uv) {
+  #ifdef OCT_ENCODED
+  return unpackVec2ToNormal(texture2D(normalBuffer, uv).xy);
+  #else
+  return 2.0 * texture2D(normalBuffer, uv).xyz - 1.0;
+  #endif // OCT_ENCODED
+}
+
+void mainImage(const vec4 inputColor, const vec2 uv, out vec4 outputColor) {
+  #ifdef RECONSTRUCT_FROM_DEPTH
+  vec3 normal = reconstructNormal(uv);
+  #else
+  vec3 normal = readNormal(uv);
+  #endif // RECONSTRUCT_FROM_DEPTH
+
+  outputColor = vec4(normal * 0.5 + 0.5, inputColor.a);
+}