strandedkitty / three-csm Goto Github PK
View Code? Open in Web Editor NEW☀️ Cascaded shadow maps (CSMs) implementation for Three.js
License: MIT License
☀️ Cascaded shadow maps (CSMs) implementation for Three.js
License: MIT License
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.
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.
Hey! Awesome plugin, really <3 it. I've noticed that the white color for DirectionalLight
s 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?
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 :)
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 :)
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?
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.
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();
}
}
}
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!
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
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!
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?
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 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, it should be updated to this.copy(matrix).invert()
.
@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.
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.
So I was getting this error when i started digging into whats happening:
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.
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.
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.
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:
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
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?
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
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
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.
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 ] );
}
}
}
}
`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.