diff --git a/examples/screenshots/webgpu_reflection.jpg b/examples/screenshots/webgpu_reflection.jpg index b726eaabb180bd..21df343000d374 100644 Binary files a/examples/screenshots/webgpu_reflection.jpg and b/examples/screenshots/webgpu_reflection.jpg differ diff --git a/examples/webgpu_reflection.html b/examples/webgpu_reflection.html index 074a8203e8fa4a..e948f0d57a5992 100644 --- a/examples/webgpu_reflection.html +++ b/examples/webgpu_reflection.html @@ -10,7 +10,7 @@
three.js webgpu - reflection
- Based on Recursive Tree Cubes + Based on Recursive Tree Cubes by oosmoxiecode
@@ -29,7 +29,7 @@ import * as THREE from 'three'; - import { abs, color, div, float, Fn, instancedBufferAttribute, materialColor, min, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, varyingProperty } from 'three/tsl'; + import { abs, blendOverlay, color, float, Fn, instancedBufferAttribute, materialColor, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, vec3 } from 'three/tsl'; import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; @@ -44,48 +44,55 @@ // below uniforms will be animated via TWEEN.js - const uniformLife = uniform( 0 ); const uniformEffector1 = uniform( - 0.2 ); const uniformEffector2 = uniform( - 0.2 ); init(); - function init() { + async function init() { camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 ); camera.position.set( 4, 2, 4 ); scene = new THREE.Scene(); - scene.fog = new THREE.Fog( 0x0487e2, 7, 25 ); - scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x0487e2 ), color( 0x0066ff ) ); + scene.fog = new THREE.Fog( 0x4195a4, 1, 25 ); + scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x4195a4 ), color( 0x0066ff ) ); camera.lookAt( 0, 1, 0 ); - const sunLight = new THREE.DirectionalLight( 0xFFE499, 3 ); - sunLight.position.set( 7, 3, 7 ); - - const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 3 ); - const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 ); - + const sunLight = new THREE.DirectionalLight( 0xFFE499, 2 ); + sunLight.position.set( 7, 5, 7 ); + sunLight.castShadow = true; + sunLight.shadow.camera.zoom = 1.5; + sunLight.shadow.mapSize.set( 1024, 1024 ); + sunLight.shadow.bias = - 0.0001; scene.add( sunLight ); - scene.add( skyAmbientLight ); - scene.add( waterAmbientLight ); + + const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 ); + backLight.position.set( 7, - 5, 7 ); + scene.add( backLight ); // textures const textureLoader = new THREE.TextureLoader(); - const floorColor = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' ); + const floorColor = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' ); floorColor.wrapS = THREE.RepeatWrapping; floorColor.wrapT = THREE.RepeatWrapping; floorColor.colorSpace = THREE.SRGBColorSpace; - const floorNormal = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' ); + const floorNormal = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' ); floorNormal.wrapS = THREE.RepeatWrapping; floorNormal.wrapT = THREE.RepeatWrapping; + floorNormal.repeat.set( 15, 15 ); + + const boxMap = await textureLoader.loadAsync( 'textures/edge3.jpg' ); + boxMap.colorSpace = THREE.SRGBColorSpace; // tree - const treeMesh = createTreeMesh(); + const treeMesh = createTreeMesh( boxMap ); + treeMesh.castShadow = true; + treeMesh.receiveShadow = true; scene.add( treeMesh ); // floor @@ -100,9 +107,11 @@ const floorMaterial = new THREE.MeshPhongNodeMaterial(); floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection ); + floorMaterial.normalMap = floorNormal; + floorMaterial.normalScale.set( 0.2, - 0.2 ); const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial ); - floor.position.set( 0, 0, 0 ); + floor.receiveShadow = true; scene.add( floor ); // renderer @@ -111,6 +120,9 @@ renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFSoftShadowMap; + renderer.toneMapping = THREE.ACESFilmicToneMapping; document.body.appendChild( renderer.domElement ); stats = new Stats(); @@ -137,18 +149,29 @@ const scenePassColorBlurred = gaussianBlur( scenePassColor ); scenePassColorBlurred.directionNode = scenePassDepth; - const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus(); + const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 ); postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = scenePassColorBlurred.mul( vignette ); + postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette ); - // + // tweens - window.addEventListener( 'resize', onWindowResize ); + new TWEEN.Tween( uniformEffector1 ) + .to( { value: 1.2 }, 3000 ) + .delay( 800 ) + .repeat( Infinity ) + .easing( TWEEN.Easing.Sinusoidal.InOut ) + .start(); + + new TWEEN.Tween( uniformEffector2 ) + .to( { value: 1.2 }, 3000 ) + .repeat( Infinity ) + .easing( TWEEN.Easing.Sinusoidal.InOut ) + .start(); // - startTweens(); + window.addEventListener( 'resize', onWindowResize ); } @@ -173,52 +196,18 @@ } - function startTweens() { - - const lifeTween = new TWEEN.Tween( uniformLife ) - .to( { value: 1 }, 5000 ) - .easing( TWEEN.Easing.Bounce.Out ); - lifeTween.start(); + function random() { - const effectTween = new TWEEN.Tween( uniformEffector1 ) - .to( { value: 1.2 }, 2500 ) - .delay( 3000 ) - .easing( TWEEN.Easing.Sinusoidal.InOut ) - .onComplete( function () { - - secondaryTweens(); - - } ); - effectTween.start(); + return ( Math.random() - 0.5 ) * 2.0; } - function secondaryTweens() { - - uniformEffector1.value = - 0.2; - uniformEffector2.value = - 0.2; - - const effect2Tween = new TWEEN.Tween( uniformEffector2 ) - .to( { value: 1.2 }, 3000 ) - .repeat( Infinity ) - .easing( TWEEN.Easing.Sinusoidal.InOut ); - effect2Tween.start(); - - const effectTween = new TWEEN.Tween( uniformEffector1 ) - .to( { value: 1.2 }, 3000 ) - .delay( 800 ) - .repeat( Infinity ) - .easing( TWEEN.Easing.Sinusoidal.InOut ); - effectTween.start(); - } - function createTreeMesh() { + function createTreeMesh( boxMap ) { - const maxSteps = 6; - const angleLeft = Math.PI / 180 * 30; - const angleRight = Math.PI / 180 * 40; - const lengthMult = 0.88; + const maxSteps = 5; + const lengthMult = 0.8; const positions = []; const normals = []; @@ -234,6 +223,8 @@ function createTreePart( angle, x, y, z, length, count ) { + if ( Math.random() > ( maxSteps / count ) * 0.25 ) return; + if ( count < maxSteps ) { const newLength = length * lengthMult; @@ -246,9 +237,9 @@ if ( size > 25 ) size = 25; if ( size < 10 ) size = 10; - size = size / 10; + size = size / 100; - const subSteps = 60; + const subSteps = 200; // below loop generates the instanced data for a tree part @@ -270,7 +261,7 @@ positions.push( position.x, position.y, position.z ); - const scale = 0.25 * Math.random(); + const scale = Math.random(); // normal @@ -279,7 +270,7 @@ // color - color.setHSL( 0.55 + Math.random() * 0.05, 1.0, 0.7 + Math.random() * 0.3 ); + color.setHSL( ( count / maxSteps ) * 0.5 + Math.random() * 0.05, 0.75, 0.6 + Math.random() * 0.1 ); colors.push( color.r, color.g, color.b ); // to save vertex buffers, we store the size, time and seed in a single attribute @@ -292,8 +283,12 @@ } - createTreePart( angle - angleRight, newX, newY, newZ, newLength, count + 1 ); - createTreePart( angle + angleLeft, newX, newY, newZ, newLength, count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); + createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 ); } @@ -306,7 +301,7 @@ createTreePart( angle, 0, 0, 0, 16, 0 ); const geometry = new THREE.BoxGeometry(); - const material = new THREE.MeshStandardNodeMaterial(); + const material = new THREE.MeshStandardNodeMaterial( { map: boxMap } ); const mesh = new THREE.Mesh( geometry, material ); mesh.scale.setScalar( 0.05 ); mesh.count = instanceCount; @@ -321,13 +316,11 @@ // TSL - const vVisibility = varyingProperty( 'float' ); - const instancePosition = instancedBufferAttribute( attributePosition ); const instanceNormal = instancedBufferAttribute( attributeNormal ); const instanceColor = instancedBufferAttribute( attributeColor ); const instanceData = instancedBufferAttribute( attributeData ); - + material.positionNode = Fn( () => { const instanceSize = instanceData.x; @@ -342,18 +335,13 @@ const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst(); effect = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect ); - // life (controls the visibility and initial scale of the cubes) - - const scale = uniformLife.greaterThan( instanceTime ).select( min( 1, div( uniformLife.sub( instanceTime ), 0 ) ) ).oneMinus(); - vVisibility.assign( uniformLife.greaterThan( instanceTime ).select( 1, 0 ) ); - // accumulate different vertex animations let animated = positionLocal.add( instancePosition ).toVar(); const direction = positionGeometry.normalize().toConst(); animated = animated.add( direction.mul( effect.add( instanceSize ) ) ); - animated = animated.sub( direction.mul( scale ) ); + animated = animated.sub( direction.mul( effect ) ); animated = animated.add( instanceNormal.mul( effect.mul( 1 ) ) ); animated = animated.add( instanceNormal.mul( abs( sin( time.add( instanceSeed.mul( 2 ) ) ).mul( 1.5 ) ) ) ); @@ -363,12 +351,24 @@ material.colorNode = Fn( () => { - vVisibility.equal( 0 ).discard(); - return materialColor.mul( instanceColor ); } )(); + material.emissiveNode = Fn( () => { + + const instanceTime = instanceData.y; + + const dif1 = abs( instanceTime.sub( uniformEffector1 ) ).toConst(); + const effect1 = dif1.lessThanEqual( 0.15 ).select( sub( 0.15, dif1 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), float( 0 ) ); + + const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst(); + const effect2 = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect1 ); + + return vec3( effect1, 0, effect2 ).mul( instanceColor ); + + } )(); + return mesh; }