Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Working on a TSL implementation of a 2D and 3D SPH fluid simulations. It works with both WebGPU and WebGL backends, using compute shaders and transform feedback as a fallback. Still battling a bit with the WebGPURenderer to make the spatial grid optimization work. #threejs

onirenaud's profile picture

Renaud

12,710 subscribers

13,811 görüntüleme • 2 yıl önce •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders
0:14

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders

Dan Greenheck

61,698 görüntüleme • 9 ay önce

A painting reborn as data. At Revelium™ Studio with the partnership of Dominik Fojcik, we took Vermeer’s Milkmaid and transformed it into a living 3D point-cloud painting in Three.js with TSL particles. #ThreeJS #WebGPU #AI #TSL #Particles
0:15

A painting reborn as data. At Revelium™ Studio with the partnership of Dominik Fojcik, we took Vermeer’s Milkmaid and transformed it into a living 3D point-cloud painting in Three.js with TSL particles. #ThreeJS #WebGPU #AI #TSL #Particles

Niccolò Miranda

54,804 görüntüleme • 1 yıl önce

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap
0:13

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap

Dan Greenheck

20,928 görüntüleme • 10 ay önce

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool
0:13

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 görüntüleme • 3 yıl önce

The Milkmaid live demo is here! At Revelium™ Studio , with Dominik Fojcik, we re-imagined Vermeer’s Milkmaid through WebGPU, and TSL particles in Three.js turning a timeless painting into living data. #ThreeJS #WebGPU #AI #TSL #Particles
0:17

The Milkmaid live demo is here! At Revelium™ Studio , with Dominik Fojcik, we re-imagined Vermeer’s Milkmaid through WebGPU, and TSL particles in Three.js turning a timeless painting into living data. #ThreeJS #WebGPU #AI #TSL #Particles

Niccolò Miranda

70,486 görüntüleme • 1 yıl önce

Imagine choose a seat on the airplane after seeing this 3D simulation instead of that boring 2D free/occupied view. You can just make a startup using threejs and a good idea nowadays.
0:18

Imagine choose a seat on the airplane after seeing this 3D simulation instead of that boring 2D free/occupied view. You can just make a startup using threejs and a good idea nowadays.

Marco Franzon

19,461 görüntüleme • 3 ay önce

This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl
0:14

This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl

Garrett Johnson

94,265 görüntüleme • 1 yıl önce

The liquid glass carousel is live. Rebuilt it a bit since the last one, cleaner refraction, better dispersion on the edges. Still real-time Three.js, WebGPU and TSL. Still quite unoptimized :) Link below 👇
0:17

The liquid glass carousel is live. Rebuilt it a bit since the last one, cleaner refraction, better dispersion on the edges. Still real-time Three.js, WebGPU and TSL. Still quite unoptimized :) Link below 👇

Shader Development Studio

26,747 görüntüleme • 26 gün önce

Getting a bunch of questions about this! It's a full gpu rendering pipeline with built in shader editor for Rive, which can interleave 2D + 3D. Think WebGPU (minus compute, for now) that runs anywhere, not just the browser. You can implement anything at all. Cell shading. Background blurs. Deformation effects. And yes, even Rive vector components as textures. Shaders are precompiled and ship with your .riv. Minimal runtime size impact. Still WIP.
0:13

Getting a bunch of questions about this! It's a full gpu rendering pipeline with built in shader editor for Rive, which can interleave 2D + 3D. Think WebGPU (minus compute, for now) that runs anywhere, not just the browser. You can implement anything at all. Cell shading. Background blurs. Deformation effects. And yes, even Rive vector components as textures. Shaders are precompiled and ship with your .riv. Minimal runtime size impact. Still WIP.

Guido Rosso

22,346 görüntüleme • 5 ay önce

Kimi K3 built a fully procedural browser-based 3D exploration game using Three.js WebGPU and GPU compute. It procedurally generated the environment, while using a 3D asset generation tool to create the rider and horse models, producing an expansive open world with forests, a log-cabin village, snowy mountains, and dynamic weather. External assets used: animated cowboy and horse models and terrain data.
0:18

Kimi K3 built a fully procedural browser-based 3D exploration game using Three.js WebGPU and GPU compute. It procedurally generated the environment, while using a 3D asset generation tool to create the rider and horse models, producing an expansive open world with forests, a log-cabin village, snowy mountains, and dynamic weather. External assets used: animated cowboy and horse models and terrain data.

Chetaslua

383,538 görüntüleme • 1 ay önce

I took album cover of GNX by Kendrick Lamar and turned it into a 3D particle model in Threejs with TSL Used Grok 4 by xAI to improve the noise that moves particles.
0:16

I took album cover of GNX by Kendrick Lamar and turned it into a 3D particle model in Threejs with TSL Used Grok 4 by xAI to improve the noise that moves particles.

Dominik Fojcik

190,096 görüntüleme • 1 yıl önce

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.
0:13

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.

PixiJS

18,554 görüntüleme • 5 ay önce

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge
0:10

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge

WebGL / WebGPU

12,788 görüntüleme • 7 ay önce

This Video displayed on a Skia Canvas, runs on WebGPU. It can be included in 2d and 3d scenes at 0 cost just like on a the Web.
0:13

This Video displayed on a Skia Canvas, runs on WebGPU. It can be included in 2d and 3d scenes at 0 cost just like on a the Web.

William Candillon

30,346 görüntüleme • 1 yıl önce

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs
0:12

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs

Unseen Studio®

12,116 görüntüleme • 1 yıl önce

A quick Three.js experiment exploring an infinite carousel of liquid glass tiles, rendered in real time with WebGPU and TSL. Each card is a thick refractive slab sitting on a curved grid that never ends. Short explanation of how the glass is rendered in the thread 👇
0:14

A quick Three.js experiment exploring an infinite carousel of liquid glass tiles, rendered in real time with WebGPU and TSL. Each card is a thick refractive slab sitting on a curved grid that never ends. Short explanation of how the glass is rendered in the thread 👇

Shader Development Studio

57,343 görüntüleme • 1 ay önce

For the Godot Shaders Bible, we’re taking a different approach: starting with simple shaders and learning as we go. Topics will include: - Profiling and optimization. - Compute shaders. - Particle systems. - Ray marching. - Maths (quaternions, matrices, etc.) - VFX. Everything will be presented in a linear, step-by-step way, just as always! Subscribe today! 👉 #GODOT #GodotEngine #IndieDevs #indiegame
0:12

For the Godot Shaders Bible, we’re taking a different approach: starting with simple shaders and learning as we go. Topics will include: - Profiling and optimization. - Compute shaders. - Particle systems. - Ray marching. - Maths (quaternions, matrices, etc.) - VFX. Everything will be presented in a linear, step-by-step way, just as always! Subscribe today! 👉 #GODOT #GodotEngine #IndieDevs #indiegame

Shaders Bible Series

22,459 görüntüleme • 1 yıl önce

Still working on “The Last Tender” and perfecting it. Wanted to share a bit of the creative process 🖤
0:15

Still working on “The Last Tender” and perfecting it. Wanted to share a bit of the creative process 🖤

Naomi Rosenblum Art

65,530 görüntüleme • 1 yıl önce

a small clip of me using it for a bit, love the smoothness and the strong feedback "bounce", i'll give it a serious session soon
0:15

a small clip of me using it for a bit, love the smoothness and the strong feedback "bounce", i'll give it a serious session soon

lifeline 🔜 COE2026

33,087 görüntüleme • 5 ay önce