strandedkitty/three-csm

☀️ Cascaded shadow maps (CSMs) implementation for Three.js

three-csm's Issues

Can this be used with PBR Gltf grounds?

Been trying to get this to work correctly on an imported GLTF mesh with PBR materials but doesn't seem to work as expected out of the box, wondering if it only works with planes like many other threejs shadow plane examples.

Cannot create 2 instances of CSM (issue with CSM.injectInclude)

If we create two instances of CSM, there is an issue with the injectInclude method from CSM's ctor.
Some code parts of the shader are added two times and so, the shader's compilation fails.

Configurable light color

Hey! Awesome plugin, really <3 it. I've noticed that the white color for DirectionalLights is hardcoded right here, so I'd like to suggest to make it configurable from data params we're passing to the constructor for the CSM initialization.

As a workaround I'm currently using this hack:

this.csm = new CSM({ ... });

this.csm.lights.forEach(light =>
  light.color.set(0xffff00)
);

But I don't think that's ideal, what do you think about that?

Post an email address or contact information (or 'do not contact')

Should you happen to be available for work, collaboration, etc, would be cool if there was a way to get in touch with you, or find out if you are or are not available for those kinds of things :)

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false Program Info Log: ERROR: Implementation limit of 16 active fragment shader samplers (e.g., maximum number of supported image units) exceeded, fragment shader uses 25 samplers

Hello! I'm getting this error when rendering a scene that has custom models:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: ERROR: Implementation limit of 16 active fragment shader samplers (e.g., maximum number of supported image units) exceeded, fragment shader uses 25 samplers

If I strip out the custom models down to a single one they start working. Is there any information on how CSM works with GLSL shaders, am I missing an optimization step on my end to make it work? I don't have all the information currently so keen to learn a bit before digging it :)

Shader Error

Trying to use this library but happen to get this error:

ERROR: 0:1552: '[]' : array index out of range
ERROR: 0:1552: '[]' : array index out of range
ERROR: 0:1556: '[]' : array index out of range
ERROR: 0:1556: '[]' : array index out of range

Shader code on them lines:

1539: 
1540: 		#endif
1541: 
1542: 		if(linearDepth >= CSM_cascades[3].x && (linearDepth < CSM_cascades[3].y || 3 == CSM_CASCADES - 1)) RE_Direct( directLight, geometry, material, reflectedLight );
1543: 
1544: 	
1545: 
1546: 		directionalLight = directionalLights[ 4 ];
1547: 		getDirectionalDirectLightIrradiance( directionalLight, geometry, directLight );
1548: 
1549: 		#if defined( USE_SHADOWMAP ) && ( 4 < 5 )
1550: 
1551: 		directionalLightShadow = directionalLightShadows[ 4 ];
1552: 		if(linearDepth >= CSM_cascades[4].x && linearDepth < CSM_cascades[4].y) directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ 4 ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ 4 ] ) : 1.0;
1553: 
1554: 		#endif
1555: 
1556: 		if(linearDepth >= CSM_cascades[4].x && (linearDepth < CSM_cascades[4].y || 4 == CSM_CASCADES - 1)) RE_Direct( directLight, geometry, material, reflectedLight );
1557: 
1558: 	
1559: 
1560: 	#endif
1561: 
1562: #endif

Instantiating like this:

let csm = new CSM({
    fov: 80,
    maxFar: camera.far,
    lightIntensity: 0.2,
    cascades: 4,
    shadowMapSize: 2048,
    camera: camera,
    parent: scene,
});

Any ideas?

Weird overlapping shadows

Hi, im getting some weird shadow behaviors, not sure why.

As I zoom in I start getting overlapping darker shadows. The scene is also very bright.

I tried changing around different parameters but wasn't able to fix it. I also tried replicating it at https://codesandbox.io/s/three-csm-debugging-tg7sqq, but it seems to be working fine there.

Would appreciate any ideas on how to fix this. I can link to my source code if that would help, but its in a large codebase, so it may be difficult to read through.

Side effects in constructor cause problems when used as a custom React Three Fiber component

Heya! I've been setting up three-csm to work as a r3f component and I've mostly got it working but unfortunately there is one friction point - the side effects during class construction. This has been a friction point in other three classes, for example OrbitControls (see: mrdoob/three.js#20575 if you're interested).

The solution would be to separate out the side effects from the constructor, adding them into a new function called attach or something similar. If the side effects are desirable for vanilla threejs scenes or ergonomics we could also keep the current behaviour and add the new behaviour under a constructor arg.

mrdoob looks to be keen on separating out side effects from constructors mrdoob/three.js#20575 (comment)

Happy to contribute, let me know what you think.

---

Edit: I have been able to work around this for now by creating a proxy class:

class CSMProxy {
  instance: CSM | undefined;
  args: Params;

  constructor(args: Params) {
    this.args = args;
  }

  set fade(fade: boolean) {
    if (this.instance) {
      this.instance.fade = fade;
    }
  }

  set camera(camera: Camera) {
    if (this.instance) {
      this.instance.camera = camera;
    }
  }

  set lightDirection(vector: Vector3 | Vector3Tuple) {
    if (this.instance) {
      this.instance.lightDirection = Array.isArray(vector)
        ? new Vector3().fromArray(vector).normalize()
        : vector;
    }
  }

  attach() {
    this.instance = new CSM(this.args);
  }

  dispose() {
    if (this.instance) {
      this.instance.dispose();
    }
  }
}

Materials CSM

Hi,
I am have been following the PR to three js and am looking forward to the integration. Congrats!

I might miss a bit of knowledge on three js, but does the setupMaterial function consider duplicate materials?
Furthermore, does the CSM need a function to remove materials? If a material is deleted from the scene, it might stay in the CSM materials array right?

I am asking, since I might need to assign CSM materials to imported assets such as .obj files. These obj files might even change throughout runtime.

Best!

Missing removal line of code in NPM

Hey mate this line of code is missing in NPM https://github.com/StrandedKitty/three-csm/blob/master/src/CSM.js#L383

You might need to re-publish under v2.0.2?

See: https://unpkg.com/browse/[email protected]/build/three-csm.module.js

Thank you!

I think this should really be in three.js examples. Have you tried contacting @mrdoob and telling him about this?

As far as I know cascaded shadow maps haven't been available in three.js for a long time. And unless you know of some other attempts, this might be the only working implementation out there. If you think your implementation is usable (not terribly unoptimised), I think people should know definitely know that this exists.

I'll try to implement it in my project over the weekend. If it'll work, again, thanks a lot!

Is there a process for merging with the three.js version?

I noticed that the version of the CSM code which is distributed with three.js (as an addon) is very out of date and contains at least one "showstopper" bug which has been fixed in this repo long ago.

There are quite a lot of other differences too.

Merging is not entirely trivial so I'm reluctant to do it manually, and I've not seen any automation in this regard.

Last but not least, due to the unfortunate shader injection situation, the shader code in this repo also needs to be updated because the light_fragment_begin shader code has had updates which have not been merged into this repo yet.

Do you have any stance on this? Are there any plans or strategies in play to keep the versions from diverging? Can we improve the situation somehow?

Migrating from v1.0.2 to v2.0.0 bugs the shadows

Hi, i am working on a fork of sketchbook and want to migrate to latest versions of the libraries.

Do you have any idea on what can i do to fix?

Shadow artifacts on flat surfaces

Shadow artifacts appears on surfaces and are hard to compensate for. Appears for all frustrum split modes, but seems to be worst for lograthitmic

What is the cause? And are there any ways to compensate to remove this?

Test in https://threejs.org/examples/webgl_shadowmap_csm.html

getInverse() is deprecated

getInverse() is deprecated, it should be updated to this.copy(matrix).invert().

Displaced and split shadows from certain view angles

@vtHawk
Thanks so much for this project. There is a pretty big issue though that is preventing me from using it.

At certain angles the shadows are offset by a large amount. It happens even when I set the number of cascades to 1.

Interestingly when the viewport is taller the shadow moves in the other direction. Also there seems to be a line where the shadow is cut. Sometimes only part of the shadow is displaced.

Clients will probably not find those exact angles but they will see a short blip as they rotate the model. If it weren't for that this package would be perfect. Really good job. Unfortunately I have no idea how to fix this problem. I'm hoping that you as the creator would have enough context to know why this is happening.

Dispose doesn't remove lights

Looking into the source dispose() doesn't remove the lights, only calling remove() does. Is this intended? According to https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects I would have expected dispose to take care of everything.

When integrating with R3F on clean up dispose is automatically called, but since remove is custom it isn't called.

(bit of unique problem) CSM uses three.module.js where as rest of the code uses three.cjs

Error:

So I was getting this error when i started digging into whats happening:

Problem:

three has an _object3DId attached with each Object3d which increments by one like so.

So when setting up my world i create few Object3Ds using three.cjs and and the id goes up to some value (example: 13)

Now when CSM constructor (which uses three.module.js)

this.createLights()

is called it create 3 DirectionalLights with id's (example: 8,11,14)

After so the id of next light i make outside CSM will be 14 which exactly aligns with the last DirectionalLight (id: 14) which messes up the UniformCache in three.cjs.

Most cases this will not be a problem as what are the chances of 2 id's to coincide is very rare which wont mess up the cache.

Solution:

I dont know yet. If you have an idea do let me know if this is problem of CSM or THREE.js or something in my setup.

setupMaterial() overrides a material's onBeforeCompile function if it already exists

Heya! Currently setup material will overrides the function if it already exists which isn't ideal. The solution would be to compose it, something like:

if (material.onBeforeCompile) {
  const previousOnBeforeCompile = material.onBeforeCompile;
  
  const newOnBeforeCompile = (shader, renderer) => {
    // csm logic
    previousOnBeforeCompile(shader, renderer);
  };

  material.onBeforeCompile = newOnBeforeCompile;
}

For context this is set because I'm using https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/ which sets it and allows you to re-use standard three materials with custom shaders.

TypeScript and React Three Fiber support

Hello! Found your library through the threejs examples, it looks great! Currently I'm trying to integrate it into my point & click game and found some friction points:

• no TypeScript types
• no React Three Fiber support (out of the box)

Would you consider adding support for both? Types would either be the creation of a typedef file or converting to TS, and R3F would be following https://docs.pmnd.rs/react-three-fiber/tutorials/typescript#extending-threeelements. A few libraries come with support such as https://github.com/FarazzShaikh/THREE-CustomShaderMaterial

program not valid with latest three.js

I'm seeing this error trying to use your library on a recent three.js release (r157):

three.module.js:19999 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:1591: 'GeometricContext' : undeclared identifier
ERROR: 0:1591: 'geometry' : syntax error
�

  1586: 	material.alphaT = mix( pow2( material.roughness ), 1.0, pow2( material.anisotropy ) );
  1587: 	material.anisotropyT = tbn[ 0 ] * anisotropyV.x - tbn[ 1 ] * anisotropyV.y;
  1588: 	material.anisotropyB = tbn[ 1 ] * anisotropyV.x + tbn[ 0 ] * anisotropyV.y;
  1589: #endif
  1590: 
> 1591: GeometricContext geometry;
  1592: 
  1593: geometry.position = - vViewPosition;
  1594: geometry.normal = normal;
  1595: geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition );
  1596: 
  1597: #ifdef CLEARCOAT

Any idea what I can do to fix this? Should I just use the version of this that ships with three.js?

THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

The current npm version of three-csm (1.1.1) doesn't seem to work with the current version of three (0.135.0).

It was spitting out errors about the shader:

THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

After switching my import from three-csm to use the official examples, three/examples/jsm/csm/CSM.js, it started working!

I suspect this repo lags behind three?

Anyway, i'm mostly just posting this in case someone else gets stuck :)

Awesome shadows btw :D

React no shadows seen on this project, why ?

Hi with help of drcmda

The following code produce no errors but not shadows are seen. Why ?

https://codesandbox.io/s/basic-example-react-csm-three-utfjwl?file=/src/App.js

`breaks - 1` should be `breaks.length - 1`?

https://github.com/vHawk/three-csm/blob/3f1ec07ef0248c774cbeaa9134f595c6c906aa34/src/Frustum.js#L113

Should this be breaks.length - 1? It looks like breaks is meant to be an array here.

Can't understand cascade bounds, shouldn't it be Fit to Cascade?

Hello!
Thanks for implementing CSM, it's very useful! I may be wrong, but it seems that the cascade boundaries are wrong (or CSMHelper is drawing them incorrectly?), from CSM.ts and CSMFrustum.ts the cascade boundaries are Fit to Cascade, but CSMHelper is drawing them as Fit to Scene.

CSMFrustum.ts split function (Fit to Cascade):
`

public split( breaks: number[], target: CSMFrustum[] ) {

	while ( breaks.length > target.length ) {

		target.push( new CSMFrustum() );

	}

	target.length = breaks.length;

	for ( let i = 0; i < breaks.length; i ++ ) {

		const cascade = target[ i ];

		if ( i === 0 ) {

			for ( let j = 0; j < 4; j ++ ) {

				cascade.vertices.near[ j ].copy( this.vertices.near[ j ] );

			}

		} else {

			for ( let j = 0; j < 4; j ++ ) {

				cascade.vertices.near[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i - 1 ] );

			}

		}

		if ( i === breaks.length - 1 ) {

			for ( let j = 0; j < 4; j ++ ) {

				cascade.vertices.far[ j ].copy( this.vertices.far[ j ] );

			}

		} else {

			for ( let j = 0; j < 4; j ++ ) {

				cascade.vertices.far[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i ] );

			}

		}

	}

}

`