用MeshDepthMaterial绘制一个透明纹理

Threejs - Draw a transparent texture with MeshDepthMaterial

本文关键字：一个 透明 纹理 MeshDepthMaterial 绘制      更新时间：2023-09-26

我想在我制作的像素图上添加景深效果。

为此我需要一个带有深度信息的纹理。所以我使用MeshDepthMaterial在平面上渲染纹理，但我得到的只是一个灰色矩形，它完全忽略了纹理中的alpha数据(只有1或0，中间没有)。

当然我用的是

depthMaterial.transparent = true;
depthMaterial.alphaTest = 0.5;
depthMaterial.needsUpdate = true; //just to be sure

只是为了你的兴趣，这是我的像素和如何渲染:https://i.stack.imgur.com/udCwL.jpg

MeshDepthMaterial根本不读取表面纹理。

相反，你需要重写'depth' ShaderChunk的值，以包括UV和alpha可测试的纹理，或者添加额外的ShaderMaterial来完成自己的工作。根据应用程序的总体需求，一种方法可能比另一种方法更好。如果没有非纹理对象需要投射阴影，前者将是最简单的维护。如果没有，你需要做更多的工作来管理哪个渲染目标得到什么以及如何得到。

相关文章：