Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

verekia's profile picture

Verekia 🔮 ManaBlade.com

8,171 subscribers

12,061 görüntüleme • 1 yıl önce •via X (Twitter)

#threejs#r3f#webgpu
LIVE

Anya Rossi• Live Now

Private livecam show

7 Yorum

Alex profil fotoğrafı
Alex1 yıl önce

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

Verekia 🔮 ManaBlade.com profil fotoğrafı
Verekia 🔮 ManaBlade.com1 yıl önce

Yes, it's an open-source library:

udao profil fotoğrafı
udao1 yıl önce

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

code profil fotoğrafı
code1 yıl önce

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

:3 profil fotoğrafı
:31 yıl önce

How's TSL to work in for this? OwO

Sebastien-console_buche 🪵 profil fotoğrafı
Sebastien-console_buche 🪵1 yıl önce

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

Verekia 🔮 ManaBlade.com profil fotoğrafı
Verekia 🔮 ManaBlade.com1 yıl önce

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.

Benzer Videolar

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

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,873 görüntüleme • 2 ay önce

🧮 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 görüntüleme • 14 gün önce

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

32,124 görüntüleme • 13 gün önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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

68,065 görüntüleme • 7 ay önce

🎨 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 görüntüleme • 3 ay önce

🚀 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,328 görüntüleme • 12 gün önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 3 ay önce

threejs + webGPU is awesome. #AICPW
0:20

threejs + webGPU is awesome. #AICPW

AICPW

15,440 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce