Loading video...

Video Failed to Load

Go Home

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu

18,828 views • 1 month ago •via X (Twitter)

25 Comments

Alvaro アルバロ's profile picture
Alvaro アルバロ1 month ago

@threejs @pmndrs Lets make it available for @tresjs_dev as well, whats needed?

Anderson Mancini's profile picture
Anderson Mancini1 month ago

@threejs @pmndrs @tresjs_dev Sure hehe. I will share the repo soon so you can play with it as well 🤗

Alvaro アルバロ's profile picture
Alvaro アルバロ1 month ago

@threejs @pmndrs @tresjs_dev Sounds good man.

Tomasz Szmajda's profile picture
Tomasz Szmajda1 month ago

@threejs @pmndrs that chromatic dispersion and internal reflection on the shader ball looks insane. are you using TSL (Three Shading Language) node system under the hood for the WebGPU pipeline or raw WGSL shader code?

Anderson Mancini's profile picture
Anderson Mancini1 month ago

@threejs @pmndrs This is TSL. It has a bit of WGSL as well for now, but I'm aiming to fully migrate it to plain TSL soon.

Shashwat's profile picture
Shashwat1 month ago

@threejs @pmndrs webgpu + r3f is becoming an insane combo.

tarun bana's profile picture
tarun bana1 month ago

@threejs @pmndrs Do you ever talk or have like a session where you show how you make these? I'm just curious about the general process of how this happens.

Anderson Mancini's profile picture
Anderson Mancini1 month ago

Hey there! I shared my process on my YouTube channel from time to time. I will be talking more about this in @threejsconf later this year. But it is mostly for fun and to help other developers to evolve faster with their projects. I had a lot of help from great developers when I started, so I just wanted to give back a little of my knowledge if and when I can.

tarun bana's profile picture
tarun bana1 month ago

@threejs @pmndrs @threejsconf Thank you sir.

Mehran NFT's profile picture
Mehran NFT1 month ago

@threejs @pmndrs 🔥👌🏻

mekwek's profile picture
mekwek1 month ago

@threejs @pmndrs 🐐

NICOLETTI ➖'s profile picture
NICOLETTI ➖1 month ago

@threejs @pmndrs O vidro tem inveja desse teu vidro

Anderson Mancini's profile picture
Anderson Mancini1 month ago

@threejs @pmndrs Hahaha. Obrigado querido. Quer betatestar? Vou te mandar o link hehe.

NICOLETTI ➖'s profile picture
NICOLETTI ➖1 month ago

@threejs @pmndrs Mandaaaa! Deixa eu brincar

Otano Studio's profile picture
Otano Studio1 month ago

@threejs @pmndrs nice work, I haven't played with tsl much.

Melison's profile picture
Melison1 month ago

@threejs @pmndrs bravo

Diego Toda de Oliveira's profile picture
Diego Toda de Oliveira1 month ago

@threejs @pmndrs Dude this looks fantastic!

Anderson Mancini's profile picture
Anderson Mancini1 month ago

@threejs @pmndrs Thabk you so much buddy.

googincheng's profile picture
googincheng1 month ago

@threejs @pmndrs so beatuiful, nice work bro

Julian M. Kleber's profile picture
Julian M. Kleber1 month ago

@threejs @pmndrs Also that’s impressive. How did you do that?

Antonio Bonet's profile picture
Antonio Bonet1 month ago

@threejs @pmndrs This is looking nice. How is the perf?

Anderson Mancini's profile picture
Anderson Mancini1 month ago

@threejs @pmndrs So far, super nice. But I had to hack TSL to avoid problems. The montecarlo blur format was heavy by default. You will be able to experiment with it soon.

Antonio Bonet's profile picture
Antonio Bonet1 month ago

@threejs @pmndrs Yh monte Carlo is quite a hefty approximation 😅 I have been out for a couple of weeks for circumstances. I hope to be back soon and tinker with all this.

Elliot Otoijagha's profile picture
Elliot Otoijagha1 month ago

@threejs @pmndrs Making glass with r3f or threejs has been kind of tricky for me I know they are different rendering engines but it will be nice if glass in the web had a similar resemblance to glass in Blender Or am I doing it wrong?

Kit Webster's profile picture
Kit Webster1 month ago

@threejs @pmndrs Hi Anderson, this looks brilliant. I’m developing Prismatica, a visual art and fabrication tool for designing machined acrylic lenses over LED imagery. Would you be open to me adapting your WebGPU Glass Material into its public visualizer, with full credit?

Related Videos