Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
74 commits
Select commit Hold shift + click to select a range
531846b
readme update
cieplypolar Dec 2, 2025
0e7be49
threejs and its types bump to r181
cieplypolar Dec 2, 2025
9d9dcc4
missing cleanup
cieplypolar Dec 2, 2025
bc1dda9
string[] -> string
cieplypolar Dec 2, 2025
bfc5455
Merge branch 'main' into fix/threejs-bump
cieplypolar Dec 2, 2025
e06a1be
working compute particles example
cieplypolar Nov 28, 2025
a0e5cb0
TSL import
cieplypolar Nov 28, 2025
7a524a2
our controls instead of inspector
cieplypolar Nov 28, 2025
295ce34
bumped down threejs, rewrite init in tgpu
cieplypolar Nov 28, 2025
468d812
all compute shaders in tgpu
cieplypolar Nov 28, 2025
f8c63d0
accessor naming convention
cieplypolar Dec 2, 2025
e2dedd7
working three js compute geometry example
cieplypolar Nov 30, 2025
2f5b156
controls + typescript happy
cieplypolar Dec 1, 2025
deb3aee
tiny refactor
cieplypolar Dec 1, 2025
1e78a2c
no ts-ignore
cieplypolar Dec 2, 2025
4a01705
all compute shaders in tgpu
cieplypolar Dec 2, 2025
69193e1
initial commit
cieplypolar Dec 3, 2025
c503acd
Cleanup
iwoplaza Nov 20, 2025
d59e8ba
Tweaks and docs
iwoplaza Dec 4, 2025
a2e96fb
Cleanup
iwoplaza Dec 4, 2025
4e3023e
temporary (not working)
cieplypolar Dec 4, 2025
7fbab34
Update to t3 instead of access
iwoplaza Dec 4, 2025
a3f5f9a
More docs
iwoplaza Dec 5, 2025
82109fc
Update index.ts
iwoplaza Dec 5, 2025
33da2e0
Simpler API
iwoplaza Dec 5, 2025
d66e5e3
Working on shorthands
iwoplaza Dec 5, 2025
ee1ab05
Using shorthands in attractor example
iwoplaza Dec 5, 2025
5a4888d
More refactors
iwoplaza Dec 5, 2025
0886c95
Using shorthands in other examples
iwoplaza Dec 5, 2025
5ff4950
Update sandboxModules.ts
iwoplaza Dec 5, 2025
d066748
some debug
cieplypolar Dec 9, 2025
2c0bd2d
working compute particles example
cieplypolar Nov 28, 2025
fb077da
TSL import
cieplypolar Nov 28, 2025
6e32fcf
our controls instead of inspector
cieplypolar Nov 28, 2025
4b67891
bumped down threejs, rewrite init in tgpu
cieplypolar Nov 28, 2025
0343769
all compute shaders in tgpu
cieplypolar Nov 28, 2025
2882b81
accessor naming convention
cieplypolar Dec 2, 2025
6753bc1
new api alignment
cieplypolar Dec 9, 2025
4eef60e
thumbnail
cieplypolar Dec 10, 2025
127052c
working three js compute geometry example
cieplypolar Nov 30, 2025
1cb6de5
controls + typescript happy
cieplypolar Dec 1, 2025
7b63297
tiny refactor
cieplypolar Dec 1, 2025
6e7f6be
no ts-ignore
cieplypolar Dec 2, 2025
f25d05c
all compute shaders in tgpu
cieplypolar Dec 2, 2025
da802c8
new api alignment
cieplypolar Dec 9, 2025
681d824
thumbnail
cieplypolar Dec 10, 2025
f80c61d
working compute particles example
cieplypolar Nov 28, 2025
3ed31bb
TSL import
cieplypolar Nov 28, 2025
01aefc9
our controls instead of inspector
cieplypolar Nov 28, 2025
04a6d19
bumped down threejs, rewrite init in tgpu
cieplypolar Nov 28, 2025
d33b431
all compute shaders in tgpu
cieplypolar Nov 28, 2025
538d7d6
accessor naming convention
cieplypolar Dec 2, 2025
0685012
new api alignment
cieplypolar Dec 9, 2025
7fb20c9
thumbnail
cieplypolar Dec 10, 2025
4e94772
pnpm lock
cieplypolar Dec 10, 2025
d25bf82
Merge branch 'feat/threejs-compute-particles' into feat/threejs-torso
cieplypolar Dec 10, 2025
8827249
Merge branch 'feat/threejs-torso' into feat/threejs-xmas-tree
cieplypolar Dec 11, 2025
265b271
finally working xmas tree example
cieplypolar Dec 11, 2025
f36966a
more tgpu
cieplypolar Dec 11, 2025
e4ab798
even more tgpu
cieplypolar Dec 11, 2025
c669776
full tgpu + minor fix for tsl textures
cieplypolar Dec 11, 2025
b62d9fe
random falling speed
cieplypolar Dec 11, 2025
86cb851
forgotten typegpu-material after merge
cieplypolar Dec 12, 2025
685a00c
review changes
cieplypolar Dec 18, 2025
a6e0a4f
Merge branch 'feat/tgpu-three' into feat/threejs-compute-particles
cieplypolar Dec 18, 2025
263da97
Merge branch 'feat/threejs-compute-particles' into feat/threejs-torso
cieplypolar Dec 18, 2025
12149df
review changes
cieplypolar Dec 18, 2025
23a2e5d
Merge branch 'feat/threejs-compute-particles' into feat/threejs-torso
cieplypolar Dec 18, 2025
4e7fa5c
review changes + info about model loading
cieplypolar Dec 18, 2025
57fec65
Merge branch 'feat/threejs-torso' into feat/threejs-xmas-tree
cieplypolar Dec 18, 2025
d9ea607
review changes
cieplypolar Dec 18, 2025
5a26b86
🦕
cieplypolar Dec 18, 2025
3b65230
Merge branch 'feat/tgpu-three' into feat/threejs-xmas-tree
cieplypolar Dec 19, 2025
26a736f
nit
cieplypolar Dec 19, 2025
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import * as THREE from 'three/webgpu';
import * as TSL from 'three/tsl';
import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

import * as t3 from '@typegpu/three';
import * as d from 'typegpu/data';
import * as std from 'typegpu/std';

export const dirLight = (() => {
const dirLight = new THREE.DirectionalLight(0xf9ff9b, 9);
dirLight.castShadow = true;
dirLight.position.set(10, 10, 0);
dirLight.castShadow = true;
Object.assign(dirLight.shadow.camera, {
near: 1,
far: 30,
right: 30,
left: -30,
top: 30,
bottom: -30,
});
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.bias = -0.009;
return dirLight;
})();

export const fog = new THREE.Fog(0x0f3c37, 4, 40);

export const hemisphereLight = new THREE.HemisphereLight(
0x0f3c37,
0x080d10,
100,
);

export const floor = (() => {
const floorGeometry = new THREE.PlaneGeometry(100, 100);
floorGeometry.rotateX(-Math.PI / 2);
const floor = new THREE.Mesh(
floorGeometry,
new THREE.MeshStandardMaterial({
color: 0x800000,
roughness: 0.5,
metalness: 0,
transparent: false,
}),
);
floor.position.y = 0;
floor.material.opacityNode = t3.toTSL(() => {
'use gpu';
return std.saturate(
std.length(t3.fromTSL(TSL.positionLocal.xz, d.vec2f).$.mul(0.05)),
) - 1;
});
floor.layers.disableAll();
floor.layers.enable(1);
floor.layers.enable(2);
return floor;
})();

export const xmasTree = (() => {
const count = 8;

const coneMaterial = new THREE.MeshStandardNodeMaterial({
color: 0x004225,
roughness: 0.6,
metalness: 0,
});

const object = new THREE.Group();

for (let i = 0; i < count; i++) {
const radius = 1 + i;

const coneGeometry = new THREE.ConeGeometry(
radius * 0.95,
radius * 1.25,
32,
);

const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.castShadow = true;
cone.position.y = ((count - i) * 1.5) + (count * 0.6);
object.add(cone);
}

const cylinderGeometry = new THREE.CylinderGeometry(1, 1, count, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, coneMaterial);
cylinder.position.y = count / 2;
object.add(cylinder);

object.layers.disableAll();
object.layers.enable(1);
object.layers.enable(2);

return object;
})();

export const teapot = (() => {
const teapot = new THREE.Mesh(
new TeapotGeometry(0.5, 18),
new THREE.MeshBasicNodeMaterial({
color: 0xfcfb9e,
}),
);

teapot.position.y = 18;
teapot.layers.disableAll();
teapot.layers.enable(1);
teapot.layers.enable(2);

return teapot;
})();
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<canvas data-fit-to-container></canvas>
244 changes: 244 additions & 0 deletions apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
/*
* Based on: https://github.com/mrdoob/three.js/blob/master/examples/webgpu_compute_particles_snow.html
*/
import * as THREE from 'three/webgpu';
import * as TSL from 'three/tsl';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

import * as t3 from '@typegpu/three';
import * as d from 'typegpu/data';
import * as std from 'typegpu/std';
import { randf } from '@typegpu/noise';

import * as e from './entities.ts';

const maxParticleCount = 100000;

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const renderer = new THREE.WebGPURenderer({ canvas, antialias: true });
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
renderer.toneMapping = THREE.ACESFilmicToneMapping;

const camera = new THREE.PerspectiveCamera(
60,
canvas.clientWidth / canvas.clientHeight,
0.1,
1000,
);
camera.position.set(20, 2, 20);
camera.lookAt(0, 40, 0);
camera.layers.enable(2);

const collisionCamera = new THREE.OrthographicCamera(
-50,
50,
50,
-50,
0.1,
1000,
);
collisionCamera.position.y = 50;
collisionCamera.lookAt(0, 0, 0);
collisionCamera.layers.enable(1);

const collisionPosRT = new THREE.RenderTarget(2048, 2048, {
type: THREE.FloatType,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
colorSpace: THREE.NoColorSpace,
generateMipmaps: false,
});

const collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
collisionPosMaterial.fog = false;
collisionPosMaterial.toneMapped = false;
collisionPosMaterial.outputNode = TSL.vec4(
TSL.positionWorld.y,
TSL.positionWorld.y,
TSL.positionWorld.y,
1,
);

const positionBuffer = t3.instancedArray(
maxParticleCount,
d.vec3f,
);
const scaleBuffer = t3.instancedArray(maxParticleCount, d.vec3f);
const staticPositionBuffer = t3.instancedArray(maxParticleCount, d.vec3f);
const dataBuffer = t3.instancedArray(maxParticleCount, d.vec4f);

const computeInit = t3.toTSL(() => {
'use gpu';
const instanceIdx = t3.instanceIndex.$;

randf.seed(instanceIdx / maxParticleCount);
const rand = d.vec3f(randf.sample(), randf.sample(), randf.sample());
const randPos = rand.mul(d.vec3f(100, 500, 100))
.add(d.vec3f(-50, 3, -50));

positionBuffer.$[instanceIdx] = d.vec3f(randPos);
scaleBuffer.$[instanceIdx] = d.vec3f(randf.sample() * 0.8 + 0.2);
staticPositionBuffer.$[instanceIdx] = d.vec3f(1000, 10000, 1000);

dataBuffer.$[instanceIdx] = d.vec4f(
randPos.x,
-0.01 * rand.y - 0.02,
randPos.z,
rand.x,
);
}).compute(maxParticleCount).setName('Init Partciles');

const surfaceOffset = 0.2;
const speed = 0.4;
const terrainTextureAccess = t3.fromTSL(
TSL.texture(
collisionPosRT.texture,
positionBuffer.node.element(TSL.instanceIndex).xz.add(50).div(100),
),
d.vec4f,
);

const computeUpdate = t3.toTSL(() => {
'use gpu';
const instanceIdx = t3.instanceIndex.$;
const velocity = dataBuffer.$[instanceIdx].y;
const random = dataBuffer.$[instanceIdx].w;

const terrainHeight = terrainTextureAccess.$.y +
scaleBuffer.$[instanceIdx].x * surfaceOffset;

if (positionBuffer.$[instanceIdx].y > terrainHeight) {
positionBuffer.$[instanceIdx].x = dataBuffer.$[instanceIdx].x +
3 * std.sin(t3.time.$ * (random * random) * speed);
positionBuffer.$[instanceIdx].z = dataBuffer.$[instanceIdx].z +
10 * random * std.cos(t3.time.$ * speed);
positionBuffer.$[instanceIdx].y += velocity;
} else {
staticPositionBuffer.$[instanceIdx] = positionBuffer.$[instanceIdx];
}
}).compute(maxParticleCount).setName('Update Particles');

const sphereGeometry = new THREE.SphereGeometry(surfaceOffset, 5, 5);
function particles(isStatic: boolean = false) {
const posBuffer = isStatic ? staticPositionBuffer : positionBuffer;
const layer = isStatic ? 1 : 2;

const material = new THREE.MeshStandardNodeMaterial({
color: 0xeeeeee,
roughness: 0.9,
metalness: 0,
});

material.positionNode = t3.toTSL(() => {
'use gpu';
return t3.fromTSL(TSL.positionLocal, d.vec3f).$
.mul(scaleBuffer.$[t3.instanceIndex.$])
.add(posBuffer.$[t3.instanceIndex.$]);
});

const rainParticles = new THREE.Mesh(sphereGeometry, material);
rainParticles.count = maxParticleCount;
rainParticles.castShadow = true;
rainParticles.layers.disableAll();
rainParticles.layers.enable(layer);

return rainParticles;
}

const scene = new THREE.Scene();
scene.fog = e.fog;
scene.add(e.dirLight);
scene.add(e.hemisphereLight);

const dynamicParticles = particles();
const staticParticles = particles(true);
scene.add(dynamicParticles);
scene.add(staticParticles);

scene.add(e.floor);
scene.add(e.xmasTree);
scene.add(e.teapot);

scene.backgroundNode = t3.toTSL(() => {
'use gpu';
const ratio = std.saturate(
std.distance(t3.fromTSL(TSL.screenUV, d.vec2f).$, d.vec2f(0.5)) / 0.5,
);
// 0.25 multiplier is empirical
return std.mix(
d.vec4f(d.vec3f(0.059, 0.255, 0.251).mul(0.25), 1),
d.vec4f(d.vec3f(0.024, 0.039, 0.051).mul(0.25), 1),
ratio,
);
});

const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 10, 0);
controls.minDistance = 20;
controls.maxDistance = 35;
controls.maxPolarAngle = Math.PI / 1.7;
controls.autoRotate = true;
controls.autoRotateSpeed = -0.7;
controls.update();

const scenePass = TSL.pass(scene, camera);
const scenePassColor = scenePass.getTextureNode();
const vignette = t3.toTSL(() => {
'use gpu';
return 1 - std.saturate(
std.distance(t3.fromTSL(TSL.screenUV, d.vec2f).$, d.vec2f(0.5)) * 1.35,
);
});

const teapotPass = TSL.pass(e.teapot, camera).getTextureNode();
const teapotPassBlurred = gaussianBlur(teapotPass, TSL.vec2(1), 6);
teapotPassBlurred.resolutionScale = 0.2;

const scenePassColorBlurred = gaussianBlur(scenePassColor);
scenePassColorBlurred.resolutionScale = 0.5;
scenePassColorBlurred.directionNode = TSL.vec2(1);

const totalPass = scenePass
.add(scenePassColorBlurred.mul(0.1))
.mul(vignette)
.add(teapotPass.mul(10).add(teapotPassBlurred));

const postProcessing = new THREE.PostProcessing(renderer);
postProcessing.outputNode = totalPass;

const resizeObserver = new ResizeObserver(() => {
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
});
resizeObserver.observe(canvas);

function animate() {
controls.update();

scene.overrideMaterial = collisionPosMaterial;
renderer.setRenderTarget(collisionPosRT);
renderer.render(scene, collisionCamera);
renderer.compute(computeUpdate);

scene.overrideMaterial = null;
renderer.setRenderTarget(null);

postProcessing.render();
}

await renderer.init();
renderer.compute(computeInit);
renderer.setAnimationLoop(animate);

// #region Example controls and cleanup

export function onCleanup() {
renderer.dispose();
resizeObserver.unobserve(canvas);
}

// #endregion
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"title": "Three.js - compute / particles / snow",
"category": "threejs",
"tags": ["experimental"]
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 5 additions & 2 deletions packages/typegpu-three/src/typegpu-node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,11 @@ export class TSLAccessor<T extends d.AnyWgslData, TNode extends THREE.Node> {
this.node = node;
this.#dataType = dataType;

// @ts-expect-error: The properties exist on the node
if (!node.isStorageBufferNode && !node.isUniformNode) {
// node.isTextureNode - temporary workaround for textures
if (
// @ts-expect-error: The properties exist on the node
(!node.isStorageBufferNode && !node.isUniformNode) || node.isTextureNode
) {
this.var = tgpu.privateVar(dataType);
}
}
Expand Down