Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

⚡️WebGPU Glass Material Update See it live: This new #threjs material provides extra depth by adding recursive transmission support, allowing glass objects to see and refract other glass and transparent surfaces, also bringing chromatic aberration and full #webgpu / TSL compatibility. More about it in the comments 😊

17,431 görüntüleme • 2 ay önce •via X (Twitter)

23 Yorum

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

Here are some still shots This new #threejs glass material was only possible thanks to the incredible work of @0xca0a , @N8Programs , and many other contributors at @pmndrs who brought Mesh Transmission Material to life. My work focuses on adapting it to TSL (Threejs Shading Language), so it becomes fully compatible with WebGPU. You can check the credits section to learn more about the process. This will likely become part of the upcoming React Three Fiber v10 and the new Drei WebGPU-compatible release. I’m still refining the source code, and I’ll make it available soon. A vanilla three.js version will follow right after. Stay tuned 🤗

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

In case you reached this far, this is what it looks like in production when paired with caustics 😍. All rendered in real time.

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

This is a comparison between WebGPU Glass Material and Default Mesh Physical Material. Because it can see through the glass, it adds more depth to every glass object.

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

More stills

jamesckane profil fotoğrafı
jamesckane2 ay önce

If only we could combine demos @Andersonmancini! This is exactly the look I want for the gel sim I would create an entire game around carving up jello if we could do this in real-time 😅

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

Man, I think we can hehe. That would be amazing 🤩. I'm swamped with work at this moment, but I would love to work together and build this with you later this year ☺️

jamesckane profil fotoğrafı
jamesckane2 ay önce

Haven't been able to raymarch the particle-based sim efficiently enough each frame to render anything that looks like a solid yet Some story could make the bead visual make sense ("it's a Dip-n-Dots-like synthetic hyperfuel", etc.) ... but if we can make jello, let's make jello!

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

This is my eternal reference 😍

Asher Zhu profil fotoğrafı
Asher Zhu1 ay önce

@jamesckane Interesting.. Your gelatinous cube is on my reference board too🟩

Anderson Mancini profil fotoğrafı
Anderson Mancini1 ay önce

@jamesckane HOW? Hahaha. Man, your results are the best I've ever seen in a game concept. I can't wait to play it, hehe. It is a huge honor to know that you have seen my work, buddy. Congratulations on your fantastic work.

Dezea ® Studio profil fotoğrafı
Dezea ® Studio2 ay önce

This is what we've been waiting for! 🚀

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

Thanks hehe. This will change game for glass materials completely ☺️

Chris Lane Jones profil fotoğrafı
Chris Lane Jones2 ay önce

Amazing Anderson! First one looks like a toy you would get in the 90s or something.

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

Thank you very much, Chris! How is the performance for you? Especially the Shader Ball example? Thanks 🙏🏻☺️

Zekai Lin profil fotoğrafı
Zekai Lin2 ay önce

Recursive transmission is one of those details that completely changes the feel of a scene. Really nice work.

AI Mastery Guide profil fotoğrafı
AI Mastery Guide2 ay önce

Recursive transmission on glass refracting other glass is such a small detail that adds a lot.

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

Thanks buddy. Yes. It is the type of thing that nobody cares, until you try to make a company's fragrances website with a bunch of glass elements hehe.

AI Mastery Guide profil fotoğrafı
AI Mastery Guide2 ay önce

Ha, exactly the kind of detail that only matters until it's missing.

GIGAZER profil fotoğrafı
GIGAZER2 ay önce

Amazing!

Adam Leis profil fotoğrafı
Adam Leis1 ay önce

This is great 🙂 I love that gelatinous cubes made it into both Onward and Dungeons & Dragons: Honor Among Thieves. All of these demos are just sublime. 🤌

Anderson Mancini profil fotoğrafı
Anderson Mancini1 ay önce

Thank you very much Adam

Gene profil fotoğrafı
Gene2 ay önce

Really nice! How do we customize the contents?

Anderson Mancini profil fotoğrafı
Anderson Mancini2 ay önce

This is a material. You can apply to whatever object you want ☺️

Benzer Videolar

Let’s see what happened to all these materials after I dipped them into the magical glass-forming liquid. As you can see, the entire surface of the liquid has completely solidified. But I was still able to push the side of the container in, which means that underneath, it is still liquid. So this is not one solid block of glass. Let’s look at them one by one. First, I’m taking out the pencil. Well, no glass layer formed on this one. What you can see on it is simply the dried upper crust of the liquid. To be honest, I expected this, because this isn’t really bare wood—it’s more like wood with a plastic coating. Next is the geopolymer. The result is exactly the same. This one surprised me, because this was actually the material I was most confident would develop a deposit. But apparently not. Next comes the granite. And by now, it’s pretty easy to see that the result is the same again: nothing deposited on it. The next object is the spoon. I had absolutely no expectations for this one, and absolutely nothing is exactly what happened. There’s only the dried upper crust stuck to it, and the rest will probably just run off. But what about the egg?! A few days ago, it looked as though the egg was going to be the champion, with a massive layer of glass apparently forming on it. Well, I have some bad news: not at all. And why? I have absolutely no idea. And finally, just quickly at the end… The piece of limestone suffered exactly the same fate, and so did the peach. So, in reality, the experiment was a spectacular failure. None of these objects developed a glass layer. And in my opinion, this is exactly why it’s not worth publishing the recipe yet. Because, as you can clearly see, this time it simply didn’t work—even though, in theory, I did exactly the same thing as before. So, I wish myself happy experimenting. Once again, I’ve been given a new puzzle that I have to solve. … Meanwhile, in the container right next to it, this happened. And the recipe is exactly the same! Wow! 🤯

Marcell Fóti 🪨

21,749 görüntüleme • 1 ay önce

🧑‍🏫 How to make a glass/refraction shader: 🍷 Refraction will ultimately have the effect that whatever is behind your mesh should appear distorted by the surface of the mesh itself. We're not going for external caustics projection, just modelling glass-like, distorting "transparency". 🌆 In Unity, you can sample the *global* _CameraOpaqueTexture (make sure it's enabled in your URP asset settings), which is what your scene looks like rendered without any transparent objects. In Shader Graph, you can simply use the Scene Colour node. 🔢 The UVs required for this texture are the normalized screen coordinates, so if we offset/warp/distort these coordinates and sample the texture, we ultimately produce a distorted image. We can offset the UVs by some normal map, as well as a refraction vector based on the direction from the camera -> the vertex/fragment (flip viewDir, which is otherwise vertex/fragment -> camera) and normals of the object. 📸 Input the (reversed) world space view direction and normal into HLSL refract. **Convert the refraction direction vector to tangent space before adding it to the screen UV.** Use the result to sample _CameraOpaqueTexture. refract(-worldViewDirection, worldNormal, eta); eta -> refraction ratio (from_IOR / to_IOR), > for air, 1.0 / indexOfRefraction (IOR). IOR of water = 1.33, glass = 1.54... 💡 You can also do naive "looks about right" hacks: fresnel -> normal from grayscale, which can be used for distortion. Or distort it any other way (without even specifically using refract at all), really... 🧠 Thus, even if your object is rendered as a transparent type (and vanilla Unity URP will require that it is), it is fully 'opaque' (max alpha), but it renders on its surface what is behind it, using the screen UV. If you distort those UVs by the camera view and normals of the surface it will be rendered on, it then appears like refractive glass on that surface. > Transparent render queue, but alpha = 1.0.

Mirza Beig

125,253 görüntüleme • 1 yıl önce