@navaramap/three-csm 0.0.0

package/src/MaterialStates.ts

@@ -0,0 +1,154 @@
+// Based on the following work:
+// https://github.com/StrandedKitty/three-csm/tree/master/src
+// https://github.com/mrdoob/three.js/tree/r169/examples/jsm/csm
+
+import { type Material, type WebGLProgramParametersWithUniforms } from "three";
+
+import { type CascadedShadowMaps } from "./CascadedShadowMaps";
+import { createFragmentShader } from "./createFragmentShader";
+
+type OnBeforeCompile = Material["onBeforeCompile"];
+
+export type MaterialState = {
+  parameters?: WebGLProgramParametersWithUniforms;
+  originalHandler?: OnBeforeCompile;
+};
+
+export class MaterialStates {
+  private readonly map = new Map<Material, MaterialState>();
+
+  setup<T extends Material>(material: T, csm: CascadedShadowMaps): T {
+    if (this.map.has(material)) {
+      return material;
+    }
+
+    material.userData.defines ??= {};
+    material.userData.defines.CSM = 1;
+    material.userData.defines.CSM_CASCADE_COUNT = csm.cascadeCount;
+    if (csm.fade) {
+      material.userData.defines.CSM_FADE = 1;
+    }
+
+    const stateRef: MaterialState = {};
+    this.map.set(material, stateRef);
+
+    const handleBeforeCompile: OnBeforeCompile = (parameters) => {
+      stateRef.parameters = parameters;
+
+      const cascades = csm.cascades;
+      const near = csm.mainCamera.near;
+      const far = Math.min(csm.mainCamera.far, csm.far);
+      const uniforms = parameters.uniforms;
+      uniforms.csmCascades = { value: cascades };
+      uniforms.csmNear = { value: near };
+      uniforms.csmFar = { value: far };
+
+      parameters.fragmentShader = createFragmentShader(
+        parameters.fragmentShader,
+      );
+    };
+
+    const originalHandler = material.onBeforeCompile.bind(material);
+    const originalCustomProgramCacheKey =
+      material.customProgramCacheKey.bind(material);
+    if (Object.prototype.hasOwnProperty.call(material, "hasOwnProperty")) {
+      stateRef.originalHandler = originalHandler;
+    }
+    material.customProgramCacheKey = () =>
+      originalHandler.toString() + originalCustomProgramCacheKey();
+    material.onBeforeCompile = (...args) => {
+      const [shader] = args;
+      shader.defines ??= {};
+      Object.assign(shader.defines, material.userData.defines);
+      originalHandler.apply(material, args);
+      handleBeforeCompile(...args);
+    };
+
+    const handleDispose = (): void => {
+      // Just discard it from our state map without rolling it back.
+      this.map.delete(material);
+      material.removeEventListener("dispose", handleDispose);
+    };
+    material.addEventListener("dispose", handleDispose);
+
+    return material;
+  }
+
+  update(csm: CascadedShadowMaps): void {
+    const cascadeCount = csm.cascadeCount;
+    const fade = csm.fade;
+    const cascades = csm.cascades;
+    const near = csm.mainCamera.near;
+    const far = Math.min(csm.mainCamera.far, csm.far);
+
+    for (const [material, state] of this.map.entries()) {
+      const defines = material.userData.defines;
+      if (defines != null) {
+        let needsUpdate = false;
+        if ((defines.CSM_FADE != null) !== fade) {
+          if (fade) {
+            defines.CSM_FADE = 1;
+          } else {
+            delete defines.CSM_FADE;
+          }
+          needsUpdate = true;
+        }
+        if (defines.CSM_CASCADE_COUNT !== cascadeCount) {
+          defines.CSM_CASCADE_COUNT = cascadeCount;
+          needsUpdate = true;
+        }
+        if (needsUpdate) {
+          material.needsUpdate = true;
+        }
+      }
+
+      const uniforms = state.parameters?.uniforms;
+      if (uniforms != null) {
+        uniforms.csmCascades.value = cascades;
+        uniforms.csmNear.value = near;
+        uniforms.csmFar.value = far;
+      }
+    }
+  }
+
+  rollback<T extends Material>(material: T): T {
+    const state = this.map.get(material);
+    return state != null ? this.rollbackToState(material, state) : material;
+  }
+
+  private rollbackToState<T extends Material>(
+    material: T,
+    { parameters, originalHandler }: MaterialState,
+  ): T {
+    if (parameters != null) {
+      // TODO: Do we really need to delete uniforms when materials are going to
+      // be updated anyways?
+      delete parameters.uniforms.csmCascades;
+      delete parameters.uniforms.csmNear;
+      delete parameters.uniforms.csmFar;
+    }
+    if (originalHandler != null) {
+      material.onBeforeCompile = originalHandler;
+    } else {
+      // @ts-expect-error Restore the prototype function by deleting the handler
+      // we've assigned above.
+      delete material.onBeforeCompile;
+    }
+    if (material.userData.defines != null) {
+      delete material.userData.defines.CSM;
+      delete material.userData.defines.CSM_CASCADE_COUNT;
+      delete material.userData.defines.CSM_FADE;
+    }
+    material.needsUpdate = true;
+
+    this.map.delete(material);
+    return material;
+  }
+
+  dispose(): void {
+    for (const [material, state] of this.map) {
+      this.rollbackToState(material, state);
+    }
+    this.map.clear();
+  }
+}

package/src/createFragmentShader.ts

@@ -0,0 +1,92 @@
+import { ShaderChunk } from "three";
+
+import cascadedFadedLights from "./shaders/cascadedFadedLights.glsl?raw";
+import cascadedLights from "./shaders/cascadedLights.glsl?raw";
+import cascadedLightsWithoutShadows from "./shaders/cascadedLightsWithoutShadows.glsl?raw";
+import defaultLights from "./shaders/defaultLights.glsl?raw";
+import nonShadowCastingLights from "./shaders/nonShadowCastingLights.glsl?raw";
+
+const uniforms = /* glsl */ `
+  #include <lights_pars_begin>
+
+  #ifdef CSM
+    uniform vec2 csmCascades[CSM_CASCADE_COUNT];
+    uniform float csmNear;
+    uniform float csmFar;
+  #endif // CSM
+`;
+
+function body(shader: string): string {
+  return shader.replace(/^\s*void\s+\w+\s*\(\s*\)\s*/m, "");
+}
+
+const directionalLights = /*#__PURE__*/ (() => /* glsl */ `
+  #if NUM_DIR_LIGHTS > 0 && defined(RE_Direct)
+    DirectionalLight directionalLight;
+    #if defined(USE_SHADOWMAP) && NUM_DIR_LIGHT_SHADOWS > 0
+      DirectionalLightShadow directionalLightShadow;
+    #endif
+
+    #ifdef CSM
+      #ifdef USE_SHADOWMAP
+        #ifdef CSM_FADE
+          ${body(cascadedFadedLights)}
+        #else
+          ${body(cascadedLights)}
+        #endif // CSM_FADE
+      #elif NUM_DIR_LIGHT_SHADOWS > 0
+        ${body(cascadedLightsWithoutShadows)}
+      #endif // USE_SHADOWMAP
+
+      #if NUM_DIR_LIGHTS > NUM_DIR_LIGHT_SHADOWS
+        ${body(nonShadowCastingLights)}
+      #endif
+    #else
+      ${body(defaultLights)}
+    #endif // CSM
+  #endif // NUM_DIR_LIGHTS > 0 && defined(RE_Direct)
+`)();
+
+type ReplaceRangeParams = {
+  source: string;
+  startLine: string;
+  endLine: string;
+  replacement: string;
+};
+
+function findAndReplace({
+  source,
+  startLine,
+  endLine,
+  replacement,
+}: ReplaceRangeParams): string {
+  const startText = `\n${startLine}\n`;
+  const startIndex = source.indexOf(startText);
+  if (startIndex < 0) {
+    return source;
+  }
+  const endText = `\n${endLine}\n`;
+  const endIndex = source.indexOf(endText, startIndex + startText.length);
+  if (endIndex < 0) {
+    return source;
+  }
+  return (
+    source.slice(0, startIndex + 1) +
+    replacement +
+    source.slice(endIndex + endText.length - 1)
+  );
+}
+
+export function createFragmentShader(fragmentShader: string): string {
+  return fragmentShader
+    .replace("#include <lights_pars_begin>", uniforms)
+    .replace(
+      "#include <lights_fragment_begin>",
+      findAndReplace({
+        source: ShaderChunk.lights_fragment_begin,
+        startLine: "#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct )",
+        endLine: "#endif",
+        replacement: directionalLights,
+      }),
+    );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./CascadedDirectionalLights";
+export * from "./CascadedShadowMaps";
+export * from "./CSMHelper";
+export * from "./splitFrustum";
+export { createFragmentShader as overrideFragmentShaderForCSM } from "./createFragmentShader";

package/src/shaders/cascadedFadedLights.glsl

@@ -0,0 +1,102 @@
+// Based on the following work:
+// https://github.com/StrandedKitty/three-csm/tree/master/src
+// https://github.com/mrdoob/three.js/tree/r169/examples/jsm/csm
+
+void cascadedFadedLights() {
+  directionalLight = directionalLights[0];
+  getDirectionalLightInfo(directionalLight, directLight);
+
+  float clipDepth = vViewPosition.z / (csmFar - csmNear);
+  bool lastCascade;
+  vec2 cascade;
+  float cascadeCenter;
+  float closestEdge;
+  float margin;
+  float shadow = 1.0;
+  float nextShadow = 1.0;
+
+  #pragma unroll_loop_start
+  for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
+    #if UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+    #if UNROLLED_LOOP_INDEX < CSM_CASCADE_COUNT
+
+    lastCascade = UNROLLED_LOOP_INDEX == CSM_CASCADE_COUNT - 1;
+    cascade = csmCascades[i];
+    cascadeCenter = (cascade.x + cascade.y) * 0.5;
+    closestEdge = clipDepth < cascadeCenter ? cascade.x : cascade.y;
+    margin = 0.25 * pow(closestEdge, 2.0);
+    cascade += margin * vec2(-0.5, 0.5);
+
+    if (clipDepth >= cascade.x && (clipDepth < cascade.y || lastCascade)) {
+      directionalLightShadow = directionalLightShadows[i];
+      float prevShadow = nextShadow;
+      nextShadow =
+        directLight.visible && receiveShadow
+          ? getShadow(
+            directionalShadowMap[i],
+            directionalLightShadow.shadowMapSize,
+            directionalLightShadow.shadowIntensity,
+            directionalLightShadow.shadowBias,
+            directionalLightShadow.shadowRadius,
+            vDirectionalShadowCoord[i]
+          )
+          : 1.0;
+
+      shadow = mix(
+        prevShadow,
+        nextShadow,
+        saturate(min(clipDepth - cascade.x, cascade.y - clipDepth) / margin)
+      );
+    }
+    #endif // UNROLLED_LOOP_INDEX < CSM_CASCADE_COUNT
+    #endif // UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+  }
+  #pragma unroll_loop_end
+
+  // No loop here: all cascaded lights are in fact one light only.
+  directLight.color *= shadow;
+  RE_Direct(
+    directLight,
+    geometryPosition,
+    geometryNormal,
+    geometryViewDir,
+    geometryClearcoatNormal,
+    material,
+    reflectedLight
+  );
+
+  // The rest of directional lights.
+  #pragma unroll_loop_start
+  for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
+    #if UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+    #if UNROLLED_LOOP_INDEX >= CSM_CASCADE_COUNT
+    directionalLight = directionalLights[i];
+    getDirectionalLightInfo(directionalLight, directLight);
+
+    directionalLightShadow = directionalLightShadows[i];
+    directLight.color *=
+      directLight.visible && receiveShadow
+        ? getShadow(
+          directionalShadowMap[i],
+          directionalLightShadow.shadowMapSize,
+          directionalLightShadow.shadowIntensity,
+          directionalLightShadow.shadowBias,
+          directionalLightShadow.shadowRadius,
+          vDirectionalShadowCoord[i]
+        )
+        : 1.0;
+
+    RE_Direct(
+      directLight,
+      geometryPosition,
+      geometryNormal,
+      geometryViewDir,
+      geometryClearcoatNormal,
+      material,
+      reflectedLight
+    );
+    #endif // UNROLLED_LOOP_INDEX >= CSM_CASCADE_COUNT
+    #endif // UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+  }
+  #pragma unroll_loop_end
+}

package/src/shaders/cascadedLights.glsl

@@ -0,0 +1,81 @@
+// Based on the following work:
+// https://github.com/StrandedKitty/three-csm/tree/master/src
+// https://github.com/mrdoob/three.js/tree/r169/examples/jsm/csm
+
+void cascadedLights() {
+  directionalLight = directionalLights[0];
+  getDirectionalLightInfo(directionalLight, directLight);
+
+  float clipDepth = vViewPosition.z / (csmFar - csmNear);
+  vec2 cascade;
+
+  #pragma unroll_loop_start
+  for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
+    #if UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+    #if UNROLLED_LOOP_INDEX < CSM_CASCADE_COUNT
+    cascade = csmCascades[i];
+    directionalLightShadow = directionalLightShadows[i];
+    if (clipDepth >= cascade.x && clipDepth < cascade.y) {
+      directLight.color *=
+        directLight.visible && receiveShadow
+          ? getShadow(
+            directionalShadowMap[i],
+            directionalLightShadow.shadowMapSize,
+            directionalLightShadow.shadowIntensity,
+            directionalLightShadow.shadowBias,
+            directionalLightShadow.shadowRadius,
+            vDirectionalShadowCoord[i]
+          )
+          : 1.0;
+    }
+    #endif // UNROLLED_LOOP_INDEX < CSM_CASCADE_COUNT
+    #endif // UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+  }
+  #pragma unroll_loop_end
+
+  // No loop here: all cascaded lights are in fact one light only.
+  RE_Direct(
+    directLight,
+    geometryPosition,
+    geometryNormal,
+    geometryViewDir,
+    geometryClearcoatNormal,
+    material,
+    reflectedLight
+  );
+
+  // The rest of directional lights.
+  #pragma unroll_loop_start
+  for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
+    #if UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+    #if UNROLLED_LOOP_INDEX >= CSM_CASCADE_COUNT
+    directionalLight = directionalLights[i];
+    getDirectionalLightInfo(directionalLight, directLight);
+
+    directionalLightShadow = directionalLightShadows[i];
+    directLight.color *=
+      directLight.visible && receiveShadow
+        ? getShadow(
+          directionalShadowMap[i],
+          directionalLightShadow.shadowMapSize,
+          directionalLightShadow.shadowIntensity,
+          directionalLightShadow.shadowBias,
+          directionalLightShadow.shadowRadius,
+          vDirectionalShadowCoord[i]
+        )
+        : 1.0;
+
+    RE_Direct(
+      directLight,
+      geometryPosition,
+      geometryNormal,
+      geometryViewDir,
+      geometryClearcoatNormal,
+      material,
+      reflectedLight
+    );
+    #endif // UNROLLED_LOOP_INDEX >= CSM_CASCADE_COUNT
+    #endif // UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+  }
+  #pragma unroll_loop_end
+}

package/src/shaders/cascadedLightsWithoutShadows.glsl

@@ -0,0 +1,35 @@
+// Based on the following work:
+// https://github.com/StrandedKitty/three-csm/tree/master/src
+// https://github.com/mrdoob/three.js/tree/r169/examples/jsm/csm
+
+void cascadedLightsWithoutShadows() {
+  // No loop here: all cascaded lights are in fact one light only.
+  getDirectionalLightInfo(directionalLights[0], directLight);
+  RE_Direct(
+    directLight,
+    geometryPosition,
+    geometryNormal,
+    geometryViewDir,
+    geometryClearcoatNormal,
+    material,
+    reflectedLight
+  );
+
+  // The rest of directional lights.
+  #pragma unroll_loop_start
+  for (int i = CSM_CASCADE_COUNT; i < NUM_DIR_LIGHTS; i++) {
+    directionalLight = directionalLights[i];
+    getDirectionalLightInfo(directionalLight, directLight);
+
+    RE_Direct(
+      directLight,
+      geometryPosition,
+      geometryNormal,
+      geometryViewDir,
+      geometryClearcoatNormal,
+      material,
+      reflectedLight
+    );
+  }
+  #pragma unroll_loop_end
+}

package/src/shaders/defaultLights.glsl

@@ -0,0 +1,36 @@
+// Default shader.
+// See: https://github.com/mrdoob/three.js/blob/r169/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js#L136
+
+void defaultLights() {
+  #pragma unroll_loop_start
+  for (int i = 0; i < NUM_DIR_LIGHTS; i++) {
+    directionalLight = directionalLights[i];
+    getDirectionalLightInfo(directionalLight, directLight);
+
+    #if defined(USE_SHADOWMAP) && UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS
+    directionalLightShadow = directionalLightShadows[i];
+    directLight.color *=
+      directLight.visible && receiveShadow
+        ? getShadow(
+          directionalShadowMap[i],
+          directionalLightShadow.shadowMapSize,
+          directionalLightShadow.shadowIntensity,
+          directionalLightShadow.shadowBias,
+          directionalLightShadow.shadowRadius,
+          vDirectionalShadowCoord[i]
+        )
+        : 1.0;
+    #endif
+
+    RE_Direct(
+      directLight,
+      geometryPosition,
+      geometryNormal,
+      geometryViewDir,
+      geometryClearcoatNormal,
+      material,
+      reflectedLight
+    );
+  }
+  #pragma unroll_loop_end
+}

package/src/shaders/nonShadowCastingLights.glsl

@@ -0,0 +1,18 @@
+void nonShadowCastingLights() {
+  #pragma unroll_loop_start
+  for (int i = NUM_DIR_LIGHT_SHADOWS; i < NUM_DIR_LIGHTS; i++) {
+    directionalLight = directionalLights[i];
+    getDirectionalLightInfo(directionalLight, directLight);
+
+    RE_Direct(
+      directLight,
+      geometryPosition,
+      geometryNormal,
+      geometryViewDir,
+      geometryClearcoatNormal,
+      material,
+      reflectedLight
+    );
+  }
+  #pragma unroll_loop_end
+}

package/src/splitFrustum.ts

@@ -0,0 +1,59 @@
+import { lerp } from "three/src/math/MathUtils.js";
+
+export type FrustumSplitFunction = (
+  length: number,
+  near: number,
+  far: number,
+  lambda?: number,
+  result?: number[],
+) => number[];
+
+export type FrustumSplitFunctions = {
+  uniform: FrustumSplitFunction;
+  logarithmic: FrustumSplitFunction;
+  practical: FrustumSplitFunction;
+};
+
+export type FrustumSplitMode = keyof FrustumSplitFunctions;
+
+// See: https://developer.nvidia.com/gpugems/gpugems3/part-ii-light-and-shadows/chapter-10-parallel-split-shadow-maps-programmable-gpus
+const modes: FrustumSplitFunctions = {
+  uniform: (count, near, far, _, result = []) => {
+    for (let i = 0; i < count; ++i) {
+      result[i] = (near + ((far - near) * (i + 1)) / count) / far;
+    }
+    result.length = count;
+    return result;
+  },
+
+  logarithmic: (count, near, far, _, result = []) => {
+    for (let i = 0; i < count; ++i) {
+      result[i] = (near * (far / near) ** ((i + 1) / count)) / far;
+    }
+    result.length = count;
+    return result;
+  },
+
+  practical: (count, near, far, lambda = 0.5, result = []) => {
+    for (let i = 0; i < count; ++i) {
+      const uniform = (near + ((far - near) * (i + 1)) / count) / far;
+      const logarithmic = (near * (far / near) ** ((i + 1) / count)) / far;
+      result[i] = lerp(uniform, logarithmic, lambda);
+    }
+    result.length = count;
+    return result;
+  },
+};
+
+export const frustumSplitFunctions = modes;
+
+export function splitFrustum(
+  mode: FrustumSplitMode,
+  count: number,
+  near: number,
+  far: number,
+  lambda?: number,
+  result: number[] = [],
+): number[] {
+  return modes[mode](count, near, far, lambda, result);
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />