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

Jump to bottom

WebGPURenderer: Tree-shaking 1/2 #29187

Merged
merged 29 commits into from
Aug 27, 2024
Merged

WebGPURenderer: Tree-shaking 1/2 #29187

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
f2b7d0d
tree shaking - WIP
sunag Aug 20, 2024
a4abc95
Merge branch 'dev' into dev-tsl-tree-shaking
sunag Aug 20, 2024
5ff19b7
use TSLBase instead of ShaderNode
sunag Aug 20, 2024
ba666ee
cleanup
sunag Aug 20, 2024
a0e0318
PackingNode: Move to TSL approach
sunag Aug 20, 2024
9effa49
update webgpu_mrt
sunag Aug 20, 2024
9c841be
DiscardNode: Move to TSL approach
sunag Aug 20, 2024
0d44313
HashNode: Move to TSL approach
sunag Aug 20, 2024
41021e4
no references to discard() without chaining
sunag Aug 20, 2024
3b34137
cleanup
sunag Aug 20, 2024
386fbbf
Merge branch 'dev-pack-nodes' into dev-tsl-tree-shaking
sunag Aug 20, 2024
6c194d4
fix import
sunag Aug 20, 2024
344844e
TSL: add `grayscale`
sunag Aug 20, 2024
d1d4a18
Update webgpu_backdrop.html
sunag Aug 20, 2024
4fe6f7f
Merge branch 'dev' into dev-tsl-tree-shaking
sunag Aug 24, 2024
4250708
updates
sunag Aug 24, 2024
d2d8c84
Update misc_controls_fly.html
sunag Aug 24, 2024
b413fd7
update title
sunag Aug 24, 2024
7daac1a
Move `Node.increaseUsage()` -> `NodeBuilder.increaseUsage()`
sunag Aug 24, 2024
09d0024
introduce `registerNodeClass`
sunag Aug 26, 2024
dc3b069
Update NodeLoader.js
sunag Aug 26, 2024
674827d
Separate Nodes class from TSL
sunag Aug 27, 2024
9c07d71
Update TextureBicubic.js
sunag Aug 27, 2024
bdb14a8
Update webgpu_materials.html
sunag Aug 27, 2024
e626486
revision
sunag Aug 27, 2024
8515d7a
webgpu_loader_gltf_dispersion: fix warning
sunag Aug 27, 2024
060850e
webgpu_refraction: update initial angle
sunag Aug 27, 2024
778a534
webgpu_shadowmap_opacity: fix warning
sunag Aug 27, 2024
c45bf64
revision
sunag Aug 27, 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
6 changes: 3 additions & 3 deletions examples/misc_controls_fly.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - fly controls - earth</title>
<title>three.js webgpu - fly controls - earth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
Expand Down Expand Up @@ -40,7 +40,7 @@
<script type="module">

import * as THREE from 'three';
import { pass } from 'three/tsl';
import { pass, film } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';
import { FlyControls } from 'three/addons/controls/FlyControls.js';
Expand Down Expand Up @@ -221,7 +221,7 @@
const scenePass = pass( scene, camera );
const scenePassColor = scenePass.getTextureNode();

postProcessing.outputNode = scenePassColor.film();
postProcessing.outputNode = film( scenePassColor );

}

Expand Down
20 changes: 8 additions & 12 deletions examples/webgpu_backdrop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script type="module">

import * as THREE from 'three';
import { float, vec3, color, viewportSharedTexture, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Expand All @@ -48,7 +48,7 @@

clock = new THREE.Clock();

//lights
// lights

const light = new THREE.SpotLight( 0xffffff, 1 );
light.power = 2000;
Expand All @@ -62,11 +62,7 @@
mixer = new THREE.AnimationMixer( object );

const material = object.children[ 0 ].children[ 0 ].material;

// output material effect ( better using hsv )
// ignore output.sRGBToLinear().linearTosRGB() for now

material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, output.add( .1 ).posterize( 4 ).mul( 2 ) );
material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, posterize( output.add( .1 ), 4 ).mul( 2 ) );

const action = mixer.clipAction( gltf.animations[ 0 ] );
action.play();
Expand Down Expand Up @@ -106,16 +102,16 @@

}

addBackdropSphere( viewportSharedTexture().bgr.hue( oscSine().mul( Math.PI ) ) );
addBackdropSphere( hue( viewportSharedTexture().bgr, oscSine().mul( Math.PI ) ) );
addBackdropSphere( viewportSharedTexture().rgb.oneMinus() );
addBackdropSphere( viewportSharedTexture().rgb.saturation( 0 ) );
addBackdropSphere( viewportSharedTexture().rgb.saturation( 10 ), oscSine() );
addBackdropSphere( viewportSharedTexture().rgb.overlay( checker( uv().mul( 10 ) ) ) );
addBackdropSphere( grayscale( viewportSharedTexture().rgb ) );
addBackdropSphere( saturation( viewportSharedTexture().rgb, 10 ), oscSine() );
addBackdropSphere( overlay( viewportSharedTexture().rgb, checker( uv().mul( 10 ) ) ) );
addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 40 ).floor().div( 40 ) ) ) );
addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
addBackdropSphere( vec3( 0, 0, viewportSharedTexture().b ) );

//renderer
// renderer

renderer = new THREE.WebGPURenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
Expand Down
6 changes: 3 additions & 3 deletions examples/webgpu_backdrop_area.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script type="module">

import * as THREE from 'three';
import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, textureBicubic, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

Expand Down Expand Up @@ -79,7 +79,7 @@
const depthDistance = viewportLinearDepth.distance( linearDepth() );

const depthAlphaNode = depthDistance.oneMinus().smoothstep( .90, 2 ).mul( 10 ).saturate();
const depthBlurred = viewportMipTexture().bicubic( depthDistance.smoothstep( 0, .6 ).mul( 40 * 5 ).clamp( 0, 5 ) );
const depthBlurred = textureBicubic( viewportMipTexture(), depthDistance.smoothstep( 0, .6 ).mul( 40 * 5 ).clamp( 0, 5 ) );

const blurredBlur = new THREE.MeshBasicNodeMaterial();
blurredBlur.backdropNode = depthBlurred.add( depthAlphaNode.mix( color( 0x0066ff ), 0 ) );
Expand All @@ -99,7 +99,7 @@
depthMaterial.side = THREE.DoubleSide;

const bicubicMaterial = new THREE.MeshBasicNodeMaterial();
bicubicMaterial.backdropNode = viewportMipTexture().bicubic( 5 ); // @TODO: Move to alpha value [ 0, 1 ]
bicubicMaterial.backdropNode = textureBicubic( viewportMipTexture(), 5 ); // @TODO: Move to alpha value [ 0, 1 ]
bicubicMaterial.backdropAlphaNode = checker( uv().mul( 3 ).mul( modelScale.xy ) );
bicubicMaterial.opacityNode = bicubicMaterial.backdropAlphaNode;
bicubicMaterial.transparent = true;
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_backdrop_water.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script type="module">

import * as THREE from 'three';
import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
import { color, vec2, pass, linearDepth, normalWorld, gaussianBlur, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Expand Down Expand Up @@ -223,7 +223,7 @@

const waterMask = objectPosition( camera ).y.greaterThan( 0 );

const scenePassColorBlurred = scenePassColor.gaussianBlur();
const scenePassColorBlurred = gaussianBlur( scenePassColor );
scenePassColorBlurred.directionNode = waterMask.select( scenePassDepth, scenePass.getLinearDepthNode().mul( 5 ) );

const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
Expand Down
10 changes: 5 additions & 5 deletions examples/webgpu_compute_particles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<script type="module">

import * as THREE from 'three';
import { Fn, uniform, texture, instanceIndex, float, vec3, storage, If } from 'three/tsl';
import { Fn, uniform, texture, instanceIndex, float, hash, vec3, storage, If } from 'three/tsl';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js';
Expand Down Expand Up @@ -90,9 +90,9 @@
const position = positionBuffer.element( instanceIndex );
const color = colorBuffer.element( instanceIndex );

const randX = instanceIndex.hash();
const randY = instanceIndex.add( 2 ).hash();
const randZ = instanceIndex.add( 3 ).hash();
const randX = hash( instanceIndex );
const randY = hash( instanceIndex.add( 2 ) );
const randZ = hash( instanceIndex.add( 3 ) );

position.x = randX.mul( 100 ).add( - 50 );
position.y = 0; // randY.mul( 10 );
Expand Down Expand Up @@ -192,7 +192,7 @@
const distArea = float( 6 ).sub( dist ).max( 0 );

const power = distArea.mul( .01 );
const relativePower = power.mul( instanceIndex.hash().mul( .5 ).add( .5 ) );
const relativePower = power.mul( hash( instanceIndex ).mul( .5 ).add( .5 ) );

velocity.assign( velocity.add( direction.mul( relativePower ) ) );

Expand Down
12 changes: 6 additions & 6 deletions examples/webgpu_compute_particles_rain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<script type="module">

import * as THREE from 'three';
import { Fn, texture, uv, uint, positionWorld, billboarding, timerLocal, timerDelta, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';
import { Fn, texture, uv, uint, positionWorld, billboarding, timerLocal, hash, timerDelta, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

Expand Down Expand Up @@ -112,9 +112,9 @@
const velocity = velocityBuffer.element( instanceIndex );
const rippleTime = rippleTimeBuffer.element( instanceIndex );

const randX = instanceIndex.hash();
const randY = instanceIndex.add( randUint() ).hash();
const randZ = instanceIndex.add( randUint() ).hash();
const randX = hash( instanceIndex );
const randY = hash( instanceIndex.add( randUint() ) );
const randZ = hash( instanceIndex.add( randUint() ) );

position.x = randX.mul( 100 ).add( - 50 );
position.y = randY.mul( 25 );
Expand Down Expand Up @@ -166,8 +166,8 @@

// next drops will not fall in the same place

position.x = instanceIndex.add( timer ).hash().mul( 100 ).add( - 50 );
position.z = instanceIndex.add( timer.add( randUint() ) ).hash().mul( 100 ).add( - 50 );
position.x = hash( instanceIndex.add( timer ) ).mul( 100 ).add( - 50 );
position.z = hash( instanceIndex.add( timer.add( randUint() ) ) ).mul( 100 ).add( - 50 );

} );

Expand Down
14 changes: 7 additions & 7 deletions examples/webgpu_compute_particles_snow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script type="module">

import * as THREE from 'three';
import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, instanceIndex, storage, If } from 'three/tsl';
import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';

import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

Expand Down Expand Up @@ -111,15 +111,15 @@
const scale = scaleBuffer.element( instanceIndex );
const particleData = dataBuffer.element( instanceIndex );

const randX = instanceIndex.hash();
const randY = instanceIndex.add( randUint() ).hash();
const randZ = instanceIndex.add( randUint() ).hash();
const randX = hash( instanceIndex );
const randY = hash( instanceIndex.add( randUint() ) );
const randZ = hash( instanceIndex.add( randUint() ) );

position.x = randX.mul( 100 ).add( - 50 );
position.y = randY.mul( 500 ).add( 3 );
position.z = randZ.mul( 100 ).add( - 50 );

scale.xyz = instanceIndex.add( Math.random() ).hash().mul( .8 ).add( .2 );
scale.xyz = hash( instanceIndex.add( Math.random() ) ).mul( .8 ).add( .2 );

staticPositionBuffer.element( instanceIndex ).assign( vec3( 1000, 10000, 1000 ) );

Expand Down Expand Up @@ -298,10 +298,10 @@
const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();

const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
const teapotTreePassBlurred = teapotTreePass.gaussianBlur( vec2( 1 ), 3 );
const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 3 );
teapotTreePassBlurred.resolution = new THREE.Vector2( .2, .2 );

const scenePassColorBlurred = scenePassColor.gaussianBlur();
const scenePassColorBlurred = gaussianBlur( scenePassColor );
scenePassColorBlurred.resolution = new THREE.Vector2( .5, .5 );
scenePassColorBlurred.directionNode = vec2( 1 );

Expand Down
6 changes: 3 additions & 3 deletions examples/webgpu_cubemap_adjustments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<script type="module">

import * as THREE from 'three';
import { uniform, mix, pmremTexture, reference, positionLocal, positionWorld, normalWorld, positionWorldDirection, reflectVector } from 'three/tsl';
import { uniform, mix, pmremTexture, reference, positionLocal, hue, saturation, positionWorld, normalWorld, positionWorldDirection, reflectVector } from 'three/tsl';

import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';

Expand Down Expand Up @@ -99,8 +99,8 @@
const proceduralEnv = mix( mixCubeMaps, normalWorld, proceduralNode );

const intensityFilter = proceduralEnv.mul( intensityNode );
const hueFilter = intensityFilter.hue( hueNode );
return hueFilter.saturation( saturationNode );
const hueFilter = hue( intensityFilter, hueNode );
return saturation( hueFilter, saturationNode );

};

Expand Down
10 changes: 5 additions & 5 deletions examples/webgpu_materials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script type="module">

import * as THREE from 'three';
import { Fn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
import { Fn, wgslFn, positionLocal, scriptable, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';

import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

Expand Down Expand Up @@ -241,7 +241,7 @@
global.set( 'THREE', THREE );
global.set( 'TSL', THREE );

const asyncNode = js( `
const asyncNode = scriptable( js( `

layout = {
outputType: 'node'
Expand Down Expand Up @@ -273,9 +273,9 @@

}

` ).scriptable();
` ) );

const scriptableNode = js( `
const scriptableNode = scriptable( js( `

layout = {
outputType: 'node',
Expand Down Expand Up @@ -325,7 +325,7 @@

output = { helloWorld };

` ).scriptable();
` ) );

scriptableNode.setParameter( 'source', texture( uvTexture ).xyz );
scriptableNode.setParameter( 'contrast', asyncNode );
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_mrt_mask.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<script type="module">

import * as THREE from 'three';
import { color, viewportUV, mrt, output, pass, vec4 } from 'three/tsl';
import { color, viewportUV, mrt, output, gaussianBlur, pass, vec4 } from 'three/tsl';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Expand Down Expand Up @@ -130,7 +130,7 @@

postProcessing = new THREE.PostProcessing( renderer );
postProcessing.outputColorTransform = false;
postProcessing.outputNode = colorPass.add( maskPass.gaussianBlur( 1, 10 ).mul( .3 ) ).renderOutput();
postProcessing.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 10 ).mul( .3 ) ).renderOutput();

// controls

Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_parallax_uv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<script type="module">

import * as THREE from 'three';
import { texture, parallaxUV, uv } from 'three/tsl';
import { texture, parallaxUV, overlay, uv } from 'three/tsl';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

Expand Down Expand Up @@ -89,7 +89,7 @@
const parallaxUVOffset = parallaxUV( uv(), offsetUV );
const parallaxResult = texture( bottomTexture, parallaxUVOffset );

const iceNode = texture( topTexture ).overlay( parallaxResult );
const iceNode = overlay( texture( topTexture ), parallaxResult );

// material

Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_particles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<script type="module">

import * as THREE from 'three';
import { range, texture, mix, uv, color, positionLocal, timerLocal } from 'three/tsl';
import { range, texture, mix, uv, color, rotateUV, positionLocal, timerLocal } from 'three/tsl';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

Expand Down Expand Up @@ -65,7 +65,7 @@

const fakeLightEffect = positionLocal.y.oneMinus().max( 0.2 );

const textureNode = texture( map, uv().rotateUV( timer.mul( rotateRange ) ) );
const textureNode = texture( map, rotateUV( uv(), timer.mul( rotateRange ) ) );

const opacityNode = textureNode.a.mul( life.oneMinus() );

Expand Down
6 changes: 3 additions & 3 deletions examples/webgpu_postprocessing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<script type="module">

import * as THREE from 'three';
import { pass } from 'three/tsl';
import { pass, dotScreen, rgbShift } from 'three/tsl';

let camera, renderer, postProcessing;
let object;
Expand Down Expand Up @@ -73,10 +73,10 @@
const scenePass = pass( scene, camera );
const scenePassColor = scenePass.getTextureNode();

const dotScreenPass = scenePassColor.dotScreen();
const dotScreenPass = dotScreen( scenePassColor );
dotScreenPass.scale.value = 0.3;

const rgbShiftPass = dotScreenPass.rgbShift();
const rgbShiftPass = rgbShift( dotScreenPass );
rgbShiftPass.amount.value = 0.001;

postProcessing.outputNode = rgbShiftPass;
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_postprocessing_3dlut.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<script type="module">

import * as THREE from 'three';
import { pass, texture3D, uniform, renderOutput } from 'three/tsl';
import { pass, texture3D, uniform, lut3D, renderOutput } from 'three/tsl';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Expand Down Expand Up @@ -145,7 +145,7 @@
const outputPass = renderOutput( scenePass );

const lut = lutMap[ params.lut ];
lutPass = outputPass.lut3D( texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );
lutPass = lut3D( outputPass, texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );

postProcessing.outputNode = lutPass;

Expand Down
Loading
Loading