Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGPURenderer: Add PCFShadowMap support. #28926

Merged
merged 10 commits into from
Jul 23, 2024
Merged

WebGPURenderer: Add PCFShadowMap support. #28926

merged 10 commits into from
Jul 23, 2024

Conversation

Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented Jul 20, 2024

Related issue: -

Description

This PR makes sure PCFShadowMap can be used with WebGPURenderer. It is also the default shadow map type now similar to WebGLRenderer (previously the default type was null).

I have slightly refactored AnalyticLightNode to make the code more consistent to what we had before in shadowmap_pars_fragment.

Copy link

github-actions bot commented Jul 20, 2024

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev Filesize PR Diff
684 kB (169.4 kB) 684 kB (169.4 kB) +0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev Filesize PR Diff
460.9 kB (111.2 kB) 460.9 kB (111.2 kB) +0 B

@@ -113,6 +113,7 @@
directionalLight.position.set( 100, 100, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.set( 2048, 2048 );
directionalLight.shadow.bias = - 0.0001;
Copy link
Collaborator Author

@Mugen87 Mugen87 Jul 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about the root cause yet but lights with WebGPURenderer seems to need a shadow bias more often. I suspect this is related to the shadow compare operation which is different compared to WebGLRenderer. The previous approach used MeshDepthMaterial with RGBA packing, the new approach uses a depth texture attachment.

Changing the depth texture type to THREE.FloatType did not help.

@Mugen87 Mugen87 added this to the r167 milestone Jul 20, 2024
@Mugen87
Copy link
Collaborator Author

Mugen87 commented Jul 21, 2024

Side note: I have observed a few issue with shadow casting lights and WebGPURenderer that we might want to solve with different PRs.

  1. It is currently not possible to dynamically toggle mesh.receiveShadow.
  2. Dynamically changing light.castShadow is not supported. It should be as follows:
    • When castShadow is set to false for an already shadow casting light, the shadow should be completely removed. Right now, the shadow map is just not updated anymore but objects are still affected by the shadow.
    • When a light does not cast shadows but then castShadow is set to true, the shadow map should be rendered like with an initial setup. Right now, the shadow is never rendered.

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Jul 21, 2024

It is currently not possible to dynamically toggle mesh.receiveShadow.

I've tried to fix this via be1bd9f which is inspired by WebGLRenderer. An object uniform is now used to control whether an object should receive shadows or not. But since shadowNode is cached, other objects now have a wrong shader. shadowNode would have to be maintained per object and not per light.

I'll revert the commit for now and save this task for another PR. My hope was it would be an easy fix but it seems more thought is required to get this work.

@sunag
Copy link
Collaborator

sunag commented Jul 23, 2024

At the time I wrote this code I used mix instead of conditional because we hadn't added diagnostic( off, derivative_uniformity );, I still need to know more about possible side effects of this, but automatic stack conditionals like If are not compatible with caching in variables, since it is not possible to record the process flow as we would do in a chain.

There are more items for me to review just describing in case I forget.

@sunag
Copy link
Collaborator

sunag commented Jul 23, 2024

It's possible now we have custom filters per light.

spotLight.shadow.filterNode = tslFn( ( { depthTexture, shadowCoord } ) => {

	return texture( depthTexture, shadowCoord.xy ).compare( shadowCoord.z );

} );

PCF and Basic shadow map
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants