Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu

verekia's profile picture

Verekia 🔮 ManaBlade.com

8,171 subscribers

12,061 Aufrufe • vor 1 Jahr •via X (Twitter)

#threejs#r3f#webgpu
LIVE

Anya Rossi• Live Now

Private livecam show

7 Kommentare

Profilbild von Alex
Alexvor 1 Jahr

TSL FX ? You picked my interest, open source ? Will look into it if available, anyway Congrats !

Profilbild von Verekia 🔮 ManaBlade.com
Verekia 🔮 ManaBlade.comvor 1 Jahr

Yes, it's an open-source library:

Profilbild von udao
udaovor 1 Jahr

UDAO, the next big Web3 Use Case: LinkedIn x Coursera on Blockchain

Profilbild von code
codevor 1 Jahr

I just made similar grass that allows for customized coverage. Might make public soon.

Profilbild von :3
:3vor 1 Jahr

How's TSL to work in for this? OwO

Profilbild von Sebastien-console_buche 🪵
Sebastien-console_buche 🪵vor 1 Jahr

Nice dude I havent tried TSL yet, how good is it ?

Profilbild von Verekia 🔮 ManaBlade.com
Verekia 🔮 ManaBlade.comvor 1 Jahr

It's heavy for arithmetic operations, like val.add(3).mul(2), but being able to write type-safe shaders in TS that work on both WebGPU and WebGL make it well worth it.

Ähnliche Videos

ascii fluid. in threejs / tsl / webgpu
0:48

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,873 Aufrufe • vor 2 Monaten

🧮 Physics that never leaves the graphics card. Kevin Levron's (Kevin Levron) Three.js WebGPU demo runs the whole simulation in a compute pass, written in TSL, then draws thousands of bodies as one instanced mesh. 🔗 #WebGPU #ThreeJS #TSL #ComputeShaders #CreativeCoding
0:54

🧮 Physics that never leaves the graphics card. Kevin Levron's (Kevin Levron) Three.js WebGPU demo runs the whole simulation in a compute pass, written in TSL, then draws thousands of bodies as one instanced mesh. 🔗 #WebGPU #ThreeJS #TSL #ComputeShaders #CreativeCoding

WebGL / WebGPU

13,157 Aufrufe • vor 12 Tagen

Quick exploration. Moving images along paths. Made with #threejs #tsl #webgpu.
0:21

Quick exploration. Moving images along paths. Made with #threejs #tsl #webgpu.

Seyi

31,989 Aufrufe • vor 12 Tagen

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders
0:51

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders

Dan Greenheck

37,109 Aufrufe • vor 4 Monaten

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu
0:25

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

Verekia | ManaBlade.com

14,688 Aufrufe • vor 4 Monaten

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :
0:36

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :

Kevin Levron

19,378 Aufrufe • vor 1 Jahr

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.
0:30

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.

Three.js

48,528 Aufrufe • vor 1 Jahr

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders
1:46

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

35,464 Aufrufe • vor 6 Monaten

My new #threejs project is live😍. Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and weighs 4MB. #creativecoding #webgpu #tsl
2:47

My new #threejs project is live😍. Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and weighs 4MB. #creativecoding #webgpu #tsl

Anderson Mancini

67,985 Aufrufe • vor 7 Monaten

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer
1:09

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

WebGL / WebGPU

10,296 Aufrufe • vor 3 Monaten

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f
0:43

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

22,290 Aufrufe • vor 10 Tagen

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️
0:35

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️

Alex

84,323 Aufrufe • vor 5 Monaten

threejs + webGPU is awesome. #AICPW
0:20

threejs + webGPU is awesome. #AICPW

AICPW

15,440 Aufrufe • vor 1 Jahr

My old #Threejs #Zelda project now runs on #WebGPU thanks to #TSL !⛵️🙌 Give it a try! 👉 (Safari will fallback to the old project)
0:53

My old #Threejs #Zelda project now runs on #WebGPU thanks to #TSL !⛵️🙌 Give it a try! 👉 (Safari will fallback to the old project)

Robin Payot

323,797 Aufrufe • vor 2 Monaten

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs
0:24

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs

Renaud

13,713 Aufrufe • vor 2 Jahren

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f
1:02

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,472 Aufrufe • vor 1 Jahr

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders
0:51

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

Dan Greenheck

28,002 Aufrufe • vor 6 Monaten

ASTRODITHER. LIVE. NOW. ✨ An audio reactive Astro / Three.js webGPU experiment with TSL, custom fluid sim, selective bloom, postprocessing, dithering, time warp and much more i don't even remember. Enjoy it, with audio clearly. 🔊 ↓↓
0:34

ASTRODITHER. LIVE. NOW. ✨ An audio reactive Astro / Three.js webGPU experiment with TSL, custom fluid sim, selective bloom, postprocessing, dithering, time warp and much more i don't even remember. Enjoy it, with audio clearly. 🔊 ↓↓

Robert Borghesi

23,828 Aufrufe • vor 8 Monaten

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.
0:35

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.

Three.js

25,516 Aufrufe • vor 1 Jahr

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :
0:28

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :

Kevin Levron

24,329 Aufrufe • vor 1 Jahr