diff --git a/examples/jsm/helpers/LightProbeHelperGPU.js b/examples/jsm/helpers/LightProbeHelperGPU.js index 6d6d45b431b71a..e24f7e92a75808 100644 --- a/examples/jsm/helpers/LightProbeHelperGPU.js +++ b/examples/jsm/helpers/LightProbeHelperGPU.js @@ -2,7 +2,7 @@ import { Mesh, NodeMaterial, SphereGeometry -} from 'three'; +} from 'three/webgpu'; import { float, Fn, getShIrradianceAt, normalWorld, uniformArray, uniform, vec4 } from 'three/tsl'; /** diff --git a/examples/jsm/helpers/TextureHelperGPU.js b/examples/jsm/helpers/TextureHelperGPU.js index fba2b965a80866..ae69252af7383a 100644 --- a/examples/jsm/helpers/TextureHelperGPU.js +++ b/examples/jsm/helpers/TextureHelperGPU.js @@ -6,7 +6,7 @@ import { PlaneGeometry, DoubleSide, Vector3, -} from 'three'; +} from 'three/webgpu'; import { texture as textureNode, cubeTexture, texture3D, float, vec4, attribute } from 'three/tsl'; import { mergeGeometries } from '../utils/BufferGeometryUtils.js'; diff --git a/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js b/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js index 8de20cf35a3eda..2f75a6319c6fc9 100644 --- a/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js +++ b/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js @@ -1,4 +1,4 @@ -import { Color } from 'three'; +import { Color } from 'three/webgpu'; import { attribute, cameraProjectionMatrix, dot, float, Fn, modelViewMatrix, modelViewProjection, NodeMaterial, normalize, positionGeometry, sign, uniform, varyingProperty, vec2, vec4 } from 'three/tsl'; /** diff --git a/examples/jsm/utils/ShadowMapViewerGPU.js b/examples/jsm/utils/ShadowMapViewerGPU.js index 368f0abc0c3610..4169d13e3bcd73 100644 --- a/examples/jsm/utils/ShadowMapViewerGPU.js +++ b/examples/jsm/utils/ShadowMapViewerGPU.js @@ -9,7 +9,7 @@ import { Scene, DepthTexture, Vector2 -} from 'three'; +} from 'three/webgpu'; import { uv, uniform, textureLoad } from 'three/tsl'; /** diff --git a/examples/jsm/utils/WebGPUTextureUtils.js b/examples/jsm/utils/WebGPUTextureUtils.js index 1286fe6c478fa1..20787f2c3c68ea 100644 --- a/examples/jsm/utils/WebGPUTextureUtils.js +++ b/examples/jsm/utils/WebGPUTextureUtils.js @@ -3,7 +3,7 @@ import { NodeMaterial, WebGPURenderer, CanvasTexture -} from 'three'; +} from 'three/webgpu'; import { texture, uv } from 'three/tsl'; /** diff --git a/examples/screenshots/webgl_lights_rectarealight.jpg b/examples/screenshots/webgl_lights_rectarealight.jpg index dd8fd15a328826..856bdaac309896 100644 Binary files a/examples/screenshots/webgl_lights_rectarealight.jpg and b/examples/screenshots/webgl_lights_rectarealight.jpg differ diff --git a/examples/screenshots/webgpu_lights_rectarealight.jpg b/examples/screenshots/webgpu_lights_rectarealight.jpg index f8d8c8c0c20045..2eb772eee14944 100644 Binary files a/examples/screenshots/webgpu_lights_rectarealight.jpg and b/examples/screenshots/webgpu_lights_rectarealight.jpg differ diff --git a/examples/screenshots/webgpu_volume_lighting_rectarea.jpg b/examples/screenshots/webgpu_volume_lighting_rectarea.jpg index a4e9f3aa36892c..8b4f1df333ed0b 100644 Binary files a/examples/screenshots/webgpu_volume_lighting_rectarea.jpg and b/examples/screenshots/webgpu_volume_lighting_rectarea.jpg differ diff --git a/examples/webgl_lights_rectarealight.html b/examples/webgl_lights_rectarealight.html index c66d889a141ae6..374d86cb22586d 100644 --- a/examples/webgl_lights_rectarealight.html +++ b/examples/webgl_lights_rectarealight.html @@ -33,12 +33,15 @@ import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js'; let renderer, scene, camera; - let stats, meshKnot; + let rectLight1, rectLight2, rectLight3; + let timer, stats; init(); function init() { + timer = new THREE.Timer(); + renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); @@ -52,16 +55,16 @@ RectAreaLightUniformsLib.init(); - const rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 ); - rectLight1.position.set( - 5, 5, 5 ); + rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 ); + rectLight1.position.set( - 5, 6, 5 ); scene.add( rectLight1 ); - const rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 ); - rectLight2.position.set( 0, 5, 5 ); + rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 ); + rectLight2.position.set( 0, 6, 5 ); scene.add( rectLight2 ); - const rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 ); - rectLight3.position.set( 5, 5, 5 ); + rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 ); + rectLight3.position.set( 5, 6, 5 ); scene.add( rectLight3 ); scene.add( new RectAreaLightHelper( rectLight1 ) ); @@ -69,14 +72,15 @@ scene.add( new RectAreaLightHelper( rectLight3 ) ); const geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 ); - const matStdFloor = new THREE.MeshStandardMaterial( { color: 0xbcbcbc, roughness: 0.1, metalness: 0 } ); + const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x444444 } ); + matStdFloor.roughnessMap = createCheckerTexture( 400 ); const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor ); scene.add( mshStdFloor ); const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 ); const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } ); - meshKnot = new THREE.Mesh( geoKnot, matKnot ); - meshKnot.position.set( 0, 5, 0 ); + const meshKnot = new THREE.Mesh( geoKnot, matKnot ); + meshKnot.position.set( 0, 5.5, 0 ); scene.add( meshKnot ); const controls = new OrbitControls( camera, renderer.domElement ); @@ -92,6 +96,29 @@ } + function createCheckerTexture( repeat = 1 ) { + + const canvas = document.createElement( 'canvas' ); + canvas.width = 2; + canvas.height = 2; + + const ctx = canvas.getContext( '2d' ); + ctx.fillStyle = '#000'; + ctx.fillRect( 0, 0, 2, 2 ); + ctx.fillStyle = '#fff'; + ctx.fillRect( 0, 0, 1, 1 ); + ctx.fillRect( 1, 1, 1, 1 ); + + const texture = new THREE.CanvasTexture( canvas ); + texture.repeat.set( repeat, repeat ); + texture.magFilter = THREE.NearestFilter; + texture.wrapS = THREE.RepeatWrapping; + texture.wrapT = THREE.RepeatWrapping; + + return texture; + + } + function onWindowResize() { renderer.setSize( window.innerWidth, window.innerHeight ); @@ -100,9 +127,15 @@ } - function animation( time ) { + function animation() { + + timer.update(); + + const delta = timer.getDelta(); - meshKnot.rotation.y = time / 1000; + rectLight1.rotation.y += - delta; + rectLight2.rotation.y += delta * .5; + rectLight3.rotation.y += delta; renderer.render( scene, camera ); diff --git a/examples/webgpu_lights_rectarealight.html b/examples/webgpu_lights_rectarealight.html index 1b08084bbba01d..aee4e64d54fd8a 100644 --- a/examples/webgpu_lights_rectarealight.html +++ b/examples/webgpu_lights_rectarealight.html @@ -41,8 +41,11 @@ import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'; import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js'; + import { checker, uv } from 'three/tsl'; + let renderer, scene, camera; - let meshKnot; + let rectLight1, rectLight2, rectLight3; + let timer; init(); @@ -50,6 +53,8 @@ THREE.RectAreaLightNode.setLTC( RectAreaLightTexturesLib.init() ); + timer = new THREE.Timer(); + renderer = new THREE.WebGPURenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); @@ -62,16 +67,16 @@ scene = new THREE.Scene(); - const rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 ); - rectLight1.position.set( - 5, 5, 5 ); + rectLight1 = new THREE.RectAreaLight( 0xff0000, 5, 4, 10 ); + rectLight1.position.set( - 5, 6, 5 ); scene.add( rectLight1 ); - const rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 ); - rectLight2.position.set( 0, 5, 5 ); + rectLight2 = new THREE.RectAreaLight( 0x00ff00, 5, 4, 10 ); + rectLight2.position.set( 0, 6, 5 ); scene.add( rectLight2 ); - const rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 ); - rectLight3.position.set( 5, 5, 5 ); + rectLight3 = new THREE.RectAreaLight( 0x0000ff, 5, 4, 10 ); + rectLight3.position.set( 5, 6, 5 ); scene.add( rectLight3 ); scene.add( new RectAreaLightHelper( rectLight1 ) ); @@ -79,14 +84,15 @@ scene.add( new RectAreaLightHelper( rectLight3 ) ); const geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 ); - const matStdFloor = new THREE.MeshStandardMaterial( { color: 0xbcbcbc, roughness: 0.1, metalness: 0 } ); + const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x444444 } ); + matStdFloor.roughnessNode = checker( uv().mul( 400 ) ); const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor ); scene.add( mshStdFloor ); const geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 200, 16 ); const matKnot = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0, metalness: 0 } ); - meshKnot = new THREE.Mesh( geoKnot, matKnot ); - meshKnot.position.set( 0, 5, 0 ); + const meshKnot = new THREE.Mesh( geoKnot, matKnot ); + meshKnot.position.set( 0, 5.5, 0 ); scene.add( meshKnot ); const controls = new OrbitControls( camera, renderer.domElement ); @@ -107,9 +113,15 @@ } - function animation( time ) { + function animation() { + + timer.update(); + + const delta = timer.getDelta(); - meshKnot.rotation.y = time / 1000; + rectLight1.rotation.y += - delta; + rectLight2.rotation.y += delta * .5; + rectLight3.rotation.y += delta; renderer.render( scene, camera ); diff --git a/examples/webgpu_volume_lighting_rectarea.html b/examples/webgpu_volume_lighting_rectarea.html index c681498ecb7d38..185623db3e333b 100644 --- a/examples/webgpu_volume_lighting_rectarea.html +++ b/examples/webgpu_volume_lighting_rectarea.html @@ -33,7 +33,7 @@