Skip to content

Commit ed0e71f

Browse files
querieloquerielo
authored
Examples: Add WebGPU Contact Shadows (#32262)
1 parent 47e7eb7 commit ed0e71f

File tree

4 files changed

+263
-1
lines changed

4 files changed

+263
-1
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,7 @@
439439
"webgpu_rtt",
440440
"webgpu_sandbox",
441441
"webgpu_shadertoy",
442+
"webgpu_shadow_contact",
442443
"webgpu_shadowmap",
443444
"webgpu_shadowmap_array",
444445
"webgpu_shadowmap_csm",

‎examples/screenshots/webgpu_shadow_contact.jpg‎

26.6 KB
Loading

‎examples/tags.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,5 +164,6 @@
164164
"webgpu_tsl_compute_attractors_particles": [ "gpgpu" ],
165165
"webgpu_ocean": [ "water" ],
166166
"webgpu_video_frame": [ "webcodecs" ],
167-
"webgpu_shadowmap_array": [ "tile" ]
167+
"webgpu_shadowmap_array": [ "tile" ],
168+
"webgpu_shadow_contact": [ "shadow", "soft", "tsl" ]
168169
}

‎examples/webgpu_shadow_contact.html‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgpu - contact shadows</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="example.css">
8+
</head>
9+
<body>
10+
<div id="info" class="invert">
11+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
12+
13+
<div class="title-wrapper">
14+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Contact Shadows</span>
15+
</div>
16+
17+
<small>Contact shadows using Gaussian blur for smooth rendering.</small>
18+
</div>
19+
20+
<div id="container"></div>
21+
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"three": "../build/three.webgpu.js",
26+
"three/webgpu": "../build/three.webgpu.js",
27+
"three/tsl": "../build/three.tsl.js",
28+
"three/addons/": "./jsm/"
29+
}
30+
}
31+
</script>
32+
33+
<script type="module">
34+
35+
import * as THREE from 'three/webgpu';
36+
import { vec3, uniform, texture, depth, float } from 'three/tsl';
37+
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
38+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
39+
import { Inspector } from 'three/addons/inspector/Inspector.js';
40+
41+
let camera, scene, renderer;
42+
let shadowCamera, shadowGroup;
43+
let renderTarget;
44+
let plane, fillPlane, cameraHelper;
45+
let depthMaterial, shadowPlaneMaterial, fillPlaneMaterial;
46+
47+
const meshes = [];
48+
49+
const PLANE_WIDTH = 2.5;
50+
const PLANE_HEIGHT = 2.5;
51+
const CAMERA_HEIGHT = 0.3;
52+
53+
const state = {
54+
shadow: { blur: 3.5, darkness: 1.0, opacity: 1.0 },
55+
plane: { color: '#ffffff', opacity: 1.0 },
56+
showWireframe: false
57+
};
58+
59+
60+
const uBlur = uniform( state.shadow.blur );
61+
const uDarkness = uniform( state.shadow.darkness );
62+
const uShadowOpacity = uniform( state.shadow.opacity );
63+
const uPlaneOpacity = uniform( state.plane.opacity );
64+
const uPlaneColor = uniform( new THREE.Color( state.plane.color ) );
65+
const uPlaneY = uniform( - 0.3 );
66+
67+
init();
68+
69+
function init() {
70+
71+
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
72+
camera.position.set( 0.5, 1, 2 );
73+
74+
scene = new THREE.Scene();
75+
scene.background = new THREE.Color( 0xffffff );
76+
77+
window.addEventListener( 'resize', onWindowResize );
78+
79+
const geometries = [
80+
new THREE.BoxGeometry( 0.4, 0.4, 0.4 ),
81+
new THREE.IcosahedronGeometry( 0.3 ),
82+
new THREE.TorusKnotGeometry( 0.4, 0.05, 256, 24, 1, 3 )
83+
];
84+
85+
const material = new THREE.MeshNormalMaterial();
86+
87+
for ( let i = 0, l = geometries.length; i < l; i ++ ) {
88+
89+
const angle = ( i / l ) * Math.PI * 2;
90+
const mesh = new THREE.Mesh( geometries[ i ], material );
91+
mesh.position.y = 0.1;
92+
mesh.position.x = Math.cos( angle ) / 2.0;
93+
mesh.position.z = Math.sin( angle ) / 2.0;
94+
scene.add( mesh );
95+
meshes.push( mesh );
96+
97+
}
98+
99+
shadowGroup = new THREE.Group();
100+
shadowGroup.position.y = uPlaneY.value;
101+
scene.add( shadowGroup );
102+
103+
renderTarget = new THREE.RenderTarget( 512, 512, { depthBuffer: true } );
104+
renderTarget.texture.generateMipmaps = false;
105+
106+
const planeGeometry = new THREE.PlaneGeometry( PLANE_WIDTH, PLANE_HEIGHT ).rotateX( Math.PI / 2 );
107+
108+
depthMaterial = new THREE.NodeMaterial();
109+
110+
const alphaDepth = float( 1 ).sub( depth ).mul( uDarkness );
111+
112+
depthMaterial.colorNode = vec3( 0 );
113+
depthMaterial.opacityNode = alphaDepth;
114+
depthMaterial.depthTest = false;
115+
depthMaterial.depthWrite = false;
116+
117+
shadowPlaneMaterial = new THREE.NodeMaterial();
118+
shadowPlaneMaterial.transparent = true;
119+
shadowPlaneMaterial.depthWrite = false;
120+
121+
if ( ! renderTarget.texture.image ) renderTarget.texture.image = { width: 512, height: 512 };
122+
123+
const blurredShadow = gaussianBlur( texture( renderTarget.texture ), uBlur, 4, { premultipliedAlpha: false } );
124+
shadowPlaneMaterial.colorNode = vec3( 0 );
125+
shadowPlaneMaterial.opacityNode = blurredShadow.a.mul( uShadowOpacity );
126+
127+
plane = new THREE.Mesh( planeGeometry, shadowPlaneMaterial );
128+
plane.renderOrder = 1;
129+
plane.scale.y = - 1;
130+
plane.scale.z = - 1;
131+
shadowGroup.add( plane );
132+
133+
fillPlaneMaterial = new THREE.NodeMaterial();
134+
fillPlaneMaterial.transparent = true;
135+
fillPlaneMaterial.depthWrite = false;
136+
fillPlaneMaterial.colorNode = uPlaneColor;
137+
fillPlaneMaterial.opacityNode = uPlaneOpacity;
138+
fillPlane = new THREE.Mesh( planeGeometry, fillPlaneMaterial );
139+
fillPlane.rotateX( Math.PI );
140+
shadowGroup.add( fillPlane );
141+
142+
shadowCamera = new THREE.OrthographicCamera( - PLANE_WIDTH / 2, PLANE_WIDTH / 2, PLANE_HEIGHT / 2, - PLANE_HEIGHT / 2, 0, CAMERA_HEIGHT );
143+
shadowCamera.rotation.x = Math.PI / 2;
144+
shadowGroup.add( shadowCamera );
145+
146+
cameraHelper = new THREE.CameraHelper( shadowCamera );
147+
148+
renderer = new THREE.WebGPURenderer( { antialias: true } );
149+
renderer.setPixelRatio( window.devicePixelRatio );
150+
renderer.setSize( window.innerWidth, window.innerHeight );
151+
renderer.setAnimationLoop( animate );
152+
document.body.appendChild( renderer.domElement );
153+
154+
renderer.inspector = new Inspector();
155+
156+
const params = {
157+
shadowBlur: state.shadow.blur,
158+
shadowDarkness: state.shadow.darkness,
159+
shadowOpacity: state.shadow.opacity,
160+
planeColor: state.plane.color,
161+
planeOpacity: state.plane.opacity,
162+
showWireframe: state.showWireframe
163+
};
164+
165+
const gui = renderer.inspector.createParameters( 'Settings' );
166+
167+
gui.add( params, 'shadowBlur', 0, 15, 0.1 ).onChange( () => {
168+
169+
state.shadow.blur = params.shadowBlur;
170+
uBlur.value = state.shadow.blur;
171+
172+
} );
173+
174+
gui.add( params, 'shadowDarkness', 0.1, 5, 0.1 ).onChange( () => {
175+
176+
state.shadow.darkness = params.shadowDarkness;
177+
uDarkness.value = state.shadow.darkness;
178+
179+
} );
180+
181+
gui.add( params, 'shadowOpacity', 0, 1, 0.01 ).onChange( () => {
182+
183+
state.shadow.opacity = params.shadowOpacity;
184+
uShadowOpacity.value = state.shadow.opacity;
185+
186+
} );
187+
188+
gui.addColor( params, 'planeColor' ).onChange( () => {
189+
190+
state.plane.color = params.planeColor;
191+
uPlaneColor.value.set( state.plane.color );
192+
193+
} );
194+
195+
gui.add( params, 'planeOpacity', 0, 1, 0.01 ).onChange( () => {
196+
197+
state.plane.opacity = params.planeOpacity;
198+
uPlaneOpacity.value = state.plane.opacity;
199+
200+
} );
201+
202+
gui.add( params, 'showWireframe' ).onChange( () => {
203+
204+
if ( params.showWireframe ) scene.add( cameraHelper );
205+
else scene.remove( cameraHelper );
206+
207+
} );
208+
209+
new OrbitControls( camera, renderer.domElement );
210+
211+
}
212+
213+
function onWindowResize() {
214+
215+
camera.aspect = window.innerWidth / window.innerHeight;
216+
camera.updateProjectionMatrix();
217+
renderer.setSize( window.innerWidth, window.innerHeight );
218+
219+
}
220+
221+
function animate() {
222+
223+
meshes.forEach( m => {
224+
225+
m.rotation.x += 0.01;
226+
m.rotation.y += 0.02;
227+
228+
} );
229+
230+
231+
const initialBackground = scene.background;
232+
scene.background = null;
233+
234+
const prevOverride = scene.overrideMaterial;
235+
const prevHelperVisible = cameraHelper.visible;
236+
cameraHelper.visible = false;
237+
scene.overrideMaterial = depthMaterial;
238+
const initialAutoClear = renderer.autoClear;
239+
renderer.autoClear = true;
240+
const initialClearAlpha = renderer.getClearAlpha ? renderer.getClearAlpha() : undefined;
241+
if ( initialClearAlpha !== undefined ) renderer.setClearAlpha( 0 );
242+
243+
renderer.setRenderTarget( renderTarget );
244+
renderer.clear();
245+
renderer.render( scene, shadowCamera );
246+
247+
scene.overrideMaterial = prevOverride;
248+
renderer.setRenderTarget( null );
249+
renderer.autoClear = initialAutoClear;
250+
if ( initialClearAlpha !== undefined ) renderer.setClearAlpha( initialClearAlpha );
251+
scene.background = initialBackground;
252+
cameraHelper.visible = prevHelperVisible;
253+
254+
renderer.render( scene, camera );
255+
256+
}
257+
258+
</script>
259+
</body>
260+
</html>

0 commit comments

Comments
 (0)