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.

Sign up for GitHub

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: Fix receiveShadow and introduce shadowPositionNode #28146

Merged
merged 5 commits into from
Apr 17, 2024
Merged

WebGPURenderer: Fix receiveShadow and introduce shadowPositionNode #28146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40725b1
fix receive shadow and introduce shadowPositionNode
RenaudRohlinger Apr 16, 2024
4149889
fix receive only and example
RenaudRohlinger Apr 16, 2024
b47d990
better fix
RenaudRohlinger Apr 16, 2024
8f56198
update example
RenaudRohlinger Apr 17, 2024
612d782
add color noise to example
RenaudRohlinger Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions examples/jsm/nodes/lighting/AnalyticLightNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ class AnalyticLightNode extends LightingNode {

setupShadow( builder ) {

const { object } = builder;

if ( object.receiveShadow === false ) return;

let shadowNode = this.shadowNode;

if ( shadowNode === null ) {
Expand Down Expand Up @@ -81,7 +85,9 @@ class AnalyticLightNode extends LightingNode {
const bias = reference( 'bias', 'float', shadow );
const normalBias = reference( 'normalBias', 'float', shadow );

let shadowCoord = uniform( shadow.matrix ).mul( positionWorld.add( normalWorld.mul( normalBias ) ) );
const position = object.material.shadowPositionNode || positionWorld;

let shadowCoord = uniform( shadow.matrix ).mul( position.add( normalWorld.mul( normalBias ) ) );
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we create an offset of the normals instead of changing the position? We could use it on other types of surfaces, this seems limiting to me since normalWorld continues with the reference from the previous position.

An update I haven't made yet... I think we should test is that the leftover normals should follow the object's normalMap changes.

shadowCoord = shadowCoord.xyz.div( shadowCoord.w );

const frustumTest = shadowCoord.x.greaterThanEqual( 0 )
Expand Down Expand Up @@ -145,7 +151,7 @@ class AnalyticLightNode extends LightingNode {
textureCompare( depthTexture, shadowCoord.xy.add( vec2( 0, dy1 ) ), shadowCoord.z ),
textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx1, dy1 ) ), shadowCoord.z )
).mul( 1 / 17 );
*/
*/
//

const shadowColor = texture( rtt.texture, shadowCoord );
Expand Down
2 changes: 2 additions & 0 deletions examples/jsm/nodes/materials/NodeMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class NodeMaterial extends ShaderMaterial {

this.depthNode = null;
this.shadowNode = null;
this.shadowPositionNode = null;

this.outputNode = null;

Expand Down Expand Up @@ -551,6 +552,7 @@ class NodeMaterial extends ShaderMaterial {

this.depthNode = source.depthNode;
this.shadowNode = source.shadowNode;
this.shadowPositionNode = source.shadowPositionNode;

this.outputNode = source.outputNode;

Expand Down
2 changes: 1 addition & 1 deletion examples/jsm/renderers/common/ClippingContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ class ClippingContext {

if ( this !== parent && parent.version !== this.parentVersion ) {

this.globalClippingCount = material.isShadowNodeMaterial ? 0 : parent.globalClippingCount;
this.globalClippingCount = material.isShadowNodeMaterial ? 0 : parent.globalClippingCount;
this.localClippingEnabled = parent.localClippingEnabled;
this.planes = Array.from( parent.planes );
this.parentVersion = parent.version;
Expand Down
Binary file modified examples/screenshots/webgpu_shadowmap.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions examples/webgpu_reflection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,8 @@
floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection );

const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
floor.receiveShadow = true;

floor.position.set( 0, 0, 0 );
scene.add( floor );

Expand Down
21 changes: 19 additions & 2 deletions examples/webgpu_shadowmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { vec4, tslFn, color, vertexIndex, MeshPhongNodeMaterial } from 'three/nodes';
import { mx_fractal_noise_vec3, positionWorld, vec4, tslFn, color, vertexIndex, MeshPhongNodeMaterial } from 'three/nodes';
let camera, scene, renderer, clock;
let dirLight, spotLight;
let torusKnot, dirGroup;
Expand Down Expand Up @@ -115,6 +115,7 @@

} )();


materialCustomShadow.shadowNode = tslFn( () => {

discardNode.discard();
Expand All @@ -135,7 +136,6 @@
const pillar1 = new THREE.Mesh( cylinderGeometry, material );
pillar1.position.set( 8, 3.5, 8 );
pillar1.castShadow = true;
pillar1.receiveShadow = true;

const pillar2 = pillar1.clone();
pillar2.position.set( 8, 3.5, - 8 );
Expand All @@ -156,6 +156,23 @@
specular: 0x111111
} );

planeMaterial.shadowPositionNode = tslFn( () => {

const pos = positionWorld.toVar();
pos.xz.addAssign( mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().xz );
return pos;

} )();


planeMaterial.colorNode = tslFn( () => {

const pos = positionWorld.toVar();
pos.xz.addAssign( mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().xz );
return mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().zzz.mul( 0.2 ).add( .5 );

} )();

const ground = new THREE.Mesh( planeGeometry, planeMaterial );
ground.rotation.x = - Math.PI / 2;
ground.scale.multiplyScalar( 3 );
Expand Down