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

TSL: Introduce time #29557

Merged
merged 5 commits into from
Oct 5, 2024
Merged

TSL: Introduce time #29557

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
28b4172
introduce time
sunag Oct 5, 2024
db4a5b2
testing possible relation
sunag Oct 5, 2024
4124818
Merge branch 'dev' into dev-timer
sunag Oct 5, 2024
b00a86e
Update webgpu_backdrop_water.jpg
sunag Oct 5, 2024
6248f6b
Revert "testing possible relation"
sunag Oct 5, 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
14 changes: 7 additions & 7 deletions examples/jsm/objects/WaterMesh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Mesh,
Vector3
} from 'three';
import { Fn, NodeMaterial, add, cameraPosition, div, normalize, positionWorld, sub, timerLocal, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
import { Fn, NodeMaterial, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';

/**
* Work based on :
Expand Down Expand Up @@ -36,14 +36,14 @@ class WaterMesh extends Mesh {

// TSL

const timeNode = timerLocal();

const getNoise = Fn( ( [ uv ] ) => {

const uv0 = add( div( uv, 103 ), vec2( div( timeNode, 17 ), div( timeNode, 29 ) ) ).toVar();
const uv1 = div( uv, 107 ).sub( vec2( div( timeNode, - 19 ), div( timeNode, 31 ) ) ).toVar();
const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( timeNode, 101 ), div( timeNode, 97 ) ) ).toVar();
const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( timeNode, 109 ), div( timeNode, - 113 ) ) ).toVar();
const offset = time;

const uv0 = add( div( uv, 103 ), vec2( div( offset, 17 ), div( offset, 29 ) ) ).toVar();
const uv1 = div( uv, 107 ).sub( vec2( div( offset, - 19 ), div( offset, 31 ) ) ).toVar();
const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( offset, 101 ), div( offset, 97 ) ) ).toVar();
const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( offset, 109 ), div( offset, - 113 ) ) ).toVar();

const sample0 = this.waterNormals.uv( uv0 );
const sample1 = this.waterNormals.uv( uv1 );
Expand Down
2 changes: 1 addition & 1 deletion examples/jsm/transpiler/ShaderToyDecoder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ class ShaderToyDecoder extends GLSLDecoder {

super();

this.addPolyfill( 'iTime', 'float iTime = timerGlobal();' );
this.addPolyfill( 'iTime', 'float iTime = time;' );
this.addPolyfill( 'iResolution', 'vec2 iResolution = screenSize;' );
this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( screenCoordinate.x, screenSize.y - screenCoordinate.y, screenCoordinate.z );' );

Expand Down
Binary file modified examples/screenshots/webgpu_backdrop_water.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.
5 changes: 2 additions & 3 deletions examples/webgpu_animation_retargeting.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 { color, screenUV, hue, timerLocal, reflector, Fn, vec2, length, atan2, float, sin, cos, vec3, sub, mul, pow, dodge, normalWorld } from 'three/tsl';
import { color, screenUV, hue, reflector, time, Fn, vec2, length, atan2, float, sin, cos, vec3, sub, mul, pow, dodge, normalWorld } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';

Expand Down Expand Up @@ -61,7 +61,6 @@

// forked from https://www.shadertoy.com/view/7ly3D1

const time = timerLocal( 1 );
const suv = vec2( suv_immutable );
const uv = vec2( length( suv ), atan2( suv.y, suv.x ) );
const offset = float( float( .1 ).mul( sin( uv.y.mul( 10. ).sub( time.mul( .6 ) ) ) ).mul( cos( uv.y.mul( 48. ).add( time.mul( .3 ) ) ) ).mul( cos( uv.y.mul( 3.7 ).add( time ) ) ) );
Expand All @@ -83,7 +82,7 @@

// background

const coloredVignette = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), timerLocal( .1 ) ), hue( color( 0x02274f ), timerLocal( .5 ) ) );
const coloredVignette = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), time.mul( .1 ) ), hue( color( 0x02274f ), time.mul( .5 ) ) );
const lightSpeedEffect = lightSpeed( normalWorld ).clamp();
const lightSpeedSky = normalWorld.y.remapClamp( -.1, 1 ).mix( 0, lightSpeedEffect );
const composedBackground = dodge( coloredVignette, lightSpeedSky );
Expand Down
4 changes: 2 additions & 2 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, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, screenUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, screenUV, checker, uv, time, oscSine, output } from 'three/tsl';

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

Expand Down Expand Up @@ -62,7 +62,7 @@
mixer = new THREE.AnimationMixer( object );

const material = object.children[ 0 ].children[ 0 ].material;
material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, posterize( output.add( .1 ), 4 ).mul( 2 ) );
material.outputNode = oscSine( time.mul( .1 ) ).mix( output, posterize( output.add( .1 ), 4 ).mul( 2 ) );

const action = mixer.clipAction( gltf.animations[ 0 ] );
action.play();
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, screenUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, screenUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, time } from 'three/tsl';
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Expand Down Expand Up @@ -135,7 +135,7 @@

// water

const timer = timerLocal( .8 );
const timer = time.mul( .8 );
const floorUV = positionWorld.xzy;

const waterLayer0 = mx_worley_noise_float( floorUV.mul( 4 ).add( timer ) );
Expand Down
10 changes: 4 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, hash, timerDelta, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';
import { Fn, texture, uv, uint, positionWorld, billboarding, time, hash, deltaTime, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';

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

Expand Down Expand Up @@ -102,8 +102,6 @@

// compute

const timer = timerLocal();

const randUint = () => uint( Math.random() * 0xFFFFFF );

const computeInit = Fn( () => {
Expand Down Expand Up @@ -139,7 +137,7 @@

position.addAssign( velocity );

rippleTime.x = rippleTime.x.add( timerDelta().mul( 4 ) );
rippleTime.x = rippleTime.x.add( deltaTime.mul( 4 ) );

//

Expand All @@ -166,8 +164,8 @@

// next drops will not fall in the same place

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

} );

Expand Down
8 changes: 3 additions & 5 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, screenUV, positionWorld, positionLocal, timerLocal, vec2, hash, instanceIndex, storage, If } from 'three/tsl';
import { Fn, texture, vec3, pass, color, uint, screenUV, positionWorld, positionLocal, time, vec2, hash, instanceIndex, storage, If } from 'three/tsl';
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
Expand Down Expand Up @@ -102,8 +102,6 @@

// compute

const timer = timerLocal();

const randUint = () => uint( Math.random() * 0xFFFFFF );

const computeInit = Fn( () => {
Expand Down Expand Up @@ -153,8 +151,8 @@

If( position.y.greaterThan( rippleFloorArea ), () => {

position.x = particleData.x.add( timer.mul( random.mul( random ) ).mul( speed ).sin().mul( 3 ) );
position.z = particleData.z.add( timer.mul( random ).mul( speed ).cos().mul( random.mul( 10 ) ) );
position.x = particleData.x.add( time.mul( random.mul( random ) ).mul( speed ).sin().mul( 3 ) );
position.z = particleData.z.add( time.mul( random ).mul( speed ).cos().mul( random.mul( 10 ) ) );

position.y = position.y.add( velocity );

Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_cubemap_mix.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 { mix, oscSine, timerLocal, pmremTexture, float } from 'three/tsl';
import { mix, oscSine, time, pmremTexture, float } from 'three/tsl';

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

Expand Down Expand Up @@ -65,7 +65,7 @@
cube2Texture.generateMipmaps = true;
cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;

scene.environmentNode = mix( pmremTexture( cube2Texture ), pmremTexture( cube1Texture ), oscSine( timerLocal( .1 ) ) );
scene.environmentNode = mix( pmremTexture( cube2Texture ), pmremTexture( cube1Texture ), oscSine( time.mul( .1 ) ) );

scene.backgroundNode = scene.environmentNode.context( {
getTextureLevel: () => float( .5 )
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_instance_mesh.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 { mix, range, normalWorld, oscSine, timerLocal } from 'three/tsl';
import { mix, range, normalWorld, oscSine, time } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';

Expand Down Expand Up @@ -53,7 +53,7 @@
// random colors between instances from 0x000000 to 0xFFFFFF
const randomColors = range( new THREE.Color( 0x000000 ), new THREE.Color( 0xFFFFFF ) );

material.colorNode = mix( normalWorld, randomColors, oscSine( timerLocal( .1 ) ) );
material.colorNode = mix( normalWorld, randomColors, oscSine( time.mul( .1 ) ) );

const loader = new THREE.BufferGeometryLoader();
loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
Expand Down
6 changes: 3 additions & 3 deletions examples/webgpu_instance_points.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, storage, Fn, instanceIndex, sin, timerLocal, float, uniform, attribute, mix, vec3 } from 'three/tsl';
import { color, storage, Fn, instanceIndex, sin, time, float, uniform, attribute, mix, vec3 } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';

Expand Down Expand Up @@ -126,9 +126,9 @@

const { pulseSpeed, minWidth, maxWidth } = effectController;

const time = timerLocal().add( float( instanceIndex ) );
const relativeTime = time.add( float( instanceIndex ) );

const sizeFactor = sin( time.mul( pulseSpeed ) ).add( 1 ).div( 2 );
const sizeFactor = sin( relativeTime.mul( pulseSpeed ) ).add( 1 ).div( 2 );

instanceSizeStorage.element( instanceIndex ).assign( sizeFactor.mul( maxWidth.sub( minWidth ) ).add( minWidth ) );

Expand Down
6 changes: 2 additions & 4 deletions examples/webgpu_instance_sprites.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

import { uniform, timerGlobal, instanceIndex, instancedBufferAttribute } from 'three/tsl';
import { uniform, time, instanceIndex, instancedBufferAttribute } from 'three/tsl';


let camera, scene, renderer, stats, material;
Expand Down Expand Up @@ -69,12 +69,10 @@

// material

const timer = timerGlobal();

material = new THREE.SpriteNodeMaterial( { sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace );
material.positionNode = instancedBufferAttribute( positionAttribute );
material.rotationNode = timer.add( instanceIndex ).sin();
material.rotationNode = time.add( instanceIndex ).sin();
material.scaleNode = uniform( 15 );

// sprites
Expand Down
5 changes: 2 additions & 3 deletions examples/webgpu_materialx_noise.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 { normalWorld, timerLocal, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/tsl';
import { normalWorld, time, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/tsl';

import Stats from 'three/addons/libs/stats.module.js';

Expand Down Expand Up @@ -60,8 +60,7 @@

const geometry = new THREE.SphereGeometry( 8, 64, 32 );

const offsetNode = timerLocal();
const customUV = normalWorld.mul( 10 ).add( offsetNode );
const customUV = normalWorld.mul( 10 ).add( time );

// left top

Expand Down
11 changes: 6 additions & 5 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, rotateUV, positionLocal, timerLocal } from 'three/tsl';
import { range, texture, mix, uv, color, rotateUV, positionLocal, time, uniform } from 'three/tsl';

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

Expand Down Expand Up @@ -55,17 +55,18 @@
const lifeRange = range( .1, 1 );
const offsetRange = range( new THREE.Vector3( - 2, 3, - 2 ), new THREE.Vector3( 2, 5, 2 ) );

const timer = timerLocal( .2, 1/*100000*/ ); // @TODO: need to work with 64-bit precision
const speed = uniform( .2 );
const scaledTime = time.add( 5 ).mul( speed );

const lifeTime = timer.mul( lifeRange ).mod( 1 );
const lifeTime = scaledTime.mul( lifeRange ).mod( 1 );
const scaleRange = range( .3, 2 );
const rotateRange = range( .1, 4 );

const life = lifeTime.div( lifeRange );

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

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

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

Expand Down Expand Up @@ -133,7 +134,7 @@

const gui = new GUI();

gui.add( timer, 'scale', 0, 1, 0.01 ).name( 'speed' );
gui.add( speed, 'value', 0, 1, 0.01 ).name( 'speed' );

}

Expand Down
6 changes: 3 additions & 3 deletions examples/webgpu_portal.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 { pass, color, mx_worley_noise_float, timerLocal, screenUV, vec2, uv, normalWorld, mx_fractal_noise_vec3 } from 'three/tsl';
import { pass, color, mx_worley_noise_float, time, screenUV, vec2, uv, normalWorld, mx_fractal_noise_vec3 } from 'three/tsl';

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

Expand All @@ -47,7 +47,7 @@
sceneMain.backgroundNode = normalWorld.y.mix( color( 0x0066ff ), color( 0xff0066 ) );

scenePortal = new THREE.Scene();
scenePortal.backgroundNode = mx_worley_noise_float( normalWorld.mul( 20 ).add( vec2( 0, timerLocal().oneMinus() ) ) ).mul( color( 0x0066ff ) );
scenePortal.backgroundNode = mx_worley_noise_float( normalWorld.mul( 20 ).add( vec2( 0, time.oneMinus() ) ) ).mul( color( 0x0066ff ) );

//

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

};

const colorNode = mx_fractal_noise_vec3( uv().mul( 20 ).add( timerLocal() ) );
const colorNode = mx_fractal_noise_vec3( uv().mul( 20 ).add( time ) );

const modelMain = createModel();
const modelPortal = createModel( colorNode );
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_postprocessing_dof.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 { cubeTexture, positionWorld, oscSine, timerGlobal, pass, uniform } from 'three/tsl';
import { cubeTexture, positionWorld, oscSine, time, pass, uniform } from 'three/tsl';
import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
Expand Down Expand Up @@ -63,7 +63,7 @@

const textureCube = new THREE.CubeTextureLoader().load( urls );
const cubeTextureNode = cubeTexture( textureCube );
const oscPos = oscSine( positionWorld.div( 1000 /* scene distance */ ).add( timerGlobal( .2 /* speed */ ) ) );
const oscPos = oscSine( positionWorld.div( 1000 /* scene distance */ ).add( time.mul( .2 ) ) );

const geometry = new THREE.SphereGeometry( 60, 20, 10 );
const material = new THREE.MeshBasicNodeMaterial();
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_sandbox.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 { timerLocal, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute } from 'three/tsl';
import { time, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute } from 'three/tsl';

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

Expand Down Expand Up @@ -75,7 +75,7 @@
const materialBox = new THREE.MeshBasicNodeMaterial();

// birection speed
const timerScaleNode = timerLocal().mul( vec2( - 0.5, 0.1 ) );
const timerScaleNode = time.mul( vec2( - 0.5, 0.1 ) );
const animateUV = uv().add( timerScaleNode );

const textureNode = texture( uvTexture, animateUV );
Expand Down
2 changes: 1 addition & 1 deletion examples/webgpu_shadertoy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@
const geometry = new THREE.PlaneGeometry( 2, 2 );

const material = new THREE.MeshBasicNodeMaterial();
material.colorNode = TSL.oscSine( TSL.timerLocal( .3 ) ).mix( shaderToy1Node, shaderToy2Node );
material.colorNode = TSL.oscSine( TSL.time.mul( .3 ) ).mix( shaderToy1Node, shaderToy2Node );

const quad = new THREE.Mesh( geometry, material );
scene.add( quad );
Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_skinning_instancing.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 { pass, mix, range, color, oscSine, timerLocal } from 'three/tsl';
import { pass, mix, range, color, oscSine, time } from 'three/tsl';
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Expand Down Expand Up @@ -83,7 +83,7 @@

if ( child.isMesh ) {

const oscNode = oscSine( timerLocal( .1 ) );
const oscNode = oscSine( time.mul( .1 ) );

// random colors between instances from 0x000000 to 0xFFFFFF
const randomColors = range( new THREE.Color( 0x000000 ), new THREE.Color( 0xFFFFFF ) );
Expand Down
Loading