正在加载视频...

视频加载失败

⚡️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 次观看 • 2 个月前 •via X (Twitter)

23 条评论

Anderson Mancini 的头像
Anderson Mancini2 个月前

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 的头像
Anderson Mancini2 个月前

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 的头像
Anderson Mancini2 个月前

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 的头像
Anderson Mancini2 个月前

More stills

jamesckane 的头像
jamesckane2 个月前

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 的头像
Anderson Mancini2 个月前

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 的头像
jamesckane2 个月前

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 的头像
Anderson Mancini2 个月前

This is my eternal reference 😍

Asher Zhu 的头像
Asher Zhu1 个月前

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

Anderson Mancini 的头像
Anderson Mancini1 个月前

@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 的头像
Dezea ® Studio2 个月前

This is what we've been waiting for! 🚀

Anderson Mancini 的头像
Anderson Mancini2 个月前

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

Chris Lane Jones 的头像
Chris Lane Jones2 个月前

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

Anderson Mancini 的头像
Anderson Mancini2 个月前

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

Zekai Lin 的头像
Zekai Lin2 个月前

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

AI Mastery Guide 的头像
AI Mastery Guide2 个月前

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

Anderson Mancini 的头像
Anderson Mancini2 个月前

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 的头像
AI Mastery Guide2 个月前

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

GIGAZER 的头像
GIGAZER2 个月前

Amazing!

Adam Leis 的头像
Adam Leis1 个月前

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 的头像
Anderson Mancini1 个月前

Thank you very much Adam

Gene 的头像
Gene2 个月前

Really nice! How do we customize the contents?

Anderson Mancini 的头像
Anderson Mancini2 个月前

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

相关视频

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 次观看 • 1 个月前

🧑‍🏫 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 次观看 • 1 年前