1

I tried to create my own GLSL script by extending shaders in ShaderLib (e.g. ShaderLib.basic), but unfortunately bumped into some transparency problems:

In the picture below, it looks normal by using MeshBasicMaterial directly.

var material = new THREE.MeshBasicMaterial( params ); // color and opacity are set in params

but when I used ShaderMaterial, "some" furnitures inside are invisible from outside of window (that's a weird part ...),

var myShader = THREE.ShaderLib.basic;
var uniforms = THREE.UniformsUtils.clone( myShader.uniforms ); // color and opacity are set in uniforms
var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: myShader.vertexShader,
    fragmentShader: myShader.fragmentShader,
    transparent: true
});

by MeshBasicMaterial and by ShaderMaterial

but can still see from inside. (comparison between inside and outside by ShaderMaterial)

(The materials are used in MultiMaterial with BufferGeometry.)

Thank you.

Jason Yang
  • 43
  • 4
  • I think the problem is that your glass pane is rendered before the inside, so when the inside isn't rendered because your glass pane is closer to the camera in the depth buffer (and the depth buffer doesn't supports alpha). I'm not sure but you can try adding your glass pane to your scene AFTER adding all the inside objects. – nasso Apr 04 '16 at 15:42
  • Thanks you, but now all of objects are in one mesh object (with BufferGeometry), so if I want to make add them to mesh separately, should I separate them in multiple mesh? or can you advise me any other methods? – Jason Yang Apr 04 '16 at 17:18
  • @Chao-ChungYang (1) Are you certain the problem does not appear with `MulitMaterial/Basic`, too? Do all the object materials inside the building have `transparent = false`? (2) I expect the renderer is trying to sort multiple objects having the same `position`. Can you re-post with a simple live example using r.75? – WestLangley Apr 04 '16 at 17:57
  • Solved! Thanks @WestLangley! The problem is I should not set "transparent = true" for non-trasnparent material even it's "opacity = 1". Can you please explain the reason? Btw, should I answer the question below by myself and close the thread? – Jason Yang Apr 05 '16 at 00:51
  • The `transparent` flag affects the render order. You will have problems in your use case if you try to render an interior object after the building window is rendered... Without a simple example, your use case is not likely to be informative to others, so I would close or delete this post. If you don't want to do that, then you can provide an answer and accept it. – WestLangley Apr 05 '16 at 01:21

0 Answers0