Make DepthMaterial look transparent not black

Hello,

I’m working with MeshDepthMaterial and when I load the model with MeshDepthMaterial by default object goes black and I want it to be transparent. Any tips?
Here is the codepen https://codepen.io/abnormalcoder/pen/vYEYPBd

Thanks in advance.

var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true });

Thanks for the reply, but it is still the sameeven after applying logarithmicDepthBuffer. Check the updated codepen https://codepen.io/abnormalcoder/pen/vYEYPBd

any help from anywhere?

I don’t think you have texture coordinates on your object(?)

Also, if you zoom-in a lot, you will see that the object becomes grayer/whiter, meaning the material does work.

I mean it gives some light when you zoom in. But it goes transparent from inside, anyway to make it transparent from outside and opaque from inside

I’m trying aphaTest=1, will that make any difference and the correct solution?

Juts for clarification: @AjayVenkatesh’s suggestion with logarithmicDepthBuffer is unrelated to this topic.

Besides, your codepen is just black on my computer even if I change MeshDepthMaterial with MeshBasicMaterial.

2 Likes

Hey, I see that the scene background was set to black and also for basic material normal map works. This current codepen works https://codepen.io/abnormalcoder/pen/vYEYPBd

You can only define the material as transparent by setting transparent to true and then define a respective opacity value. Updated fiddle: https://jsfiddle.net/54Ltwcj1/.

This setting applies to the whole object, not matter of the fragments final color value. It’s not possible to replace “black” with “transparency” (I assume this it what you want to do). Something like this requires custom shader code.

Okay thanks for looking. I will be more clear.
I want to have transparent depth material and any object behind it should not be visible through the depth material.

I’m afraid this sentence does not make sense to me. The idea if having a transparent object is to see through it, right?

1 Like

Hi!
Seems like you’re looking for .colorWrite: false.

I’m sorry for not being clear. I’m looking for something like Depth Mask effect, which looks like transparent but objects behind it cannot be seen.

@abnormalcoder Something like that? https://jsfiddle.net/prisoner849/pu14aq5h/

I think this is what I’m looking for but this does not work for a 3d model. Any thoughts?

hello. Any help in getting mask effect for 3d models?