javascript - Threejs - 使用 MeshDepthMaterial 绘制透明纹理

标签 javascript opengl-es three.js transparency depth-buffer

所以我正在尝试对我制作的一些像素艺术产生景深效果。

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

我当然在用

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

为了您的兴趣,这是我的像素图及其渲染方式:http://imgur.com/a/TLQOe

最佳答案

MeshDepthMaterial 根本不读取表面纹理。

相反,您需要覆盖 'depth' ShaderChunk 的值以包含 UV 和可进行 alpha 测试的纹理,或者添加一个额外的 ShaderMaterial 到自己做工作。根据您的应用程序的总体需求,一种方法会比另一种更好。如果没有非纹理对象需要转换阴影,前者将是最简单的维护方式。如果不是,您将需要做更多的工作来管理哪些渲染目标获得什么以及如何获得。

关于javascript - Threejs - 使用 MeshDepthMaterial 绘制透明纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32925423/

相关文章:

javascript - 在 JavaScript 中动态传递表单名称

javascript - dojo 组合框弹出菜单宽度太大

android - 专为 Android ARM5TE 构建的应用程序,但设备支持 ARM5T

javascript - 使用 `fillRect` 绘制 3D 模型太慢?

javascript - Three.js - json 模型在屏幕上显得太大

javascript - 如何使用 $.each 在 JSON 中显示嵌入式数组?

javascript - 无法读取未定义的 : Using material-ui with browserify 的 'component'

iphone - gpus_ReturnGuiltyForHardwareRestart 崩溃

ios - iOS 上的 PlayReady DRM : Can you copy the decrypted video image to your own GL Context?

javascript - Three.js:无法设置最大和最小缩放级别