Make DepthMaterial look transparent not black

Questions
1

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.

2 
var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true });
1 Like
3

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

4

any help from anywhere?

5

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.

6

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

7

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

8

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
9

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

10

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.

1 Like
11

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.

12

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

1 Like
13

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

14

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.

15

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

16

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

17

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

18

Can anyone look at this please.

19

Sorry, but it’s still not clear what you are looking for. Saying “looks like transparent but objects behind it cannot be seen.” is really hard to understand. I don’t want to mean but this sentence does actually not make sense. If an object is transparent, well, then you can see objects behind it. This see-through effect and the respective blending define a transparent visual effect.

2 Likes
20

Hey, I’m sorry again if I’m not clear.

I’ll try my best to be clear this time. I will update with a image.

depthmask
depthmask717×507 6.42 KB

There is a cube with transform controls before the red cube and it is transparent but it masks the red cube.
I achieved this but adding colorWrite:false. But, unable to achieve this when used on models. Is there any way or any alternative to get that effect on gltf, obj or fbx models?