Transparency changes at certain camera angles

Questions
,
1

Hi,

I’m currently adding transparency to some MeshPhongMaterials and everything works unless I go in certain angles, the color slightly changes. See video for a detailed example.

Any ideas on how to fix this?
My current material properties are:

  color: ...
  specular: 0x111111,
  shininess: 100,
  opacity: 0.75,
  transparent: true,
1 Like
2

Try to add depthWrite: false to your material.

3

Hi there !

I don’t know if this will help you, but i think it is a problem of render order.
webgl cant sort transparent objects

I had a slightly different problem, but maybe this is also a solution for your problem.
https://discourse.threejs.org/t/weird-distance-reflection-draw-on-transparent-glass/34458

// traverse object - change the number or use var - set all to ONE group
o.renderOrder = 5;

// Not sure if this works
renderOrder: 5;

Try with renderOrder to see if something change

! EDIT ! Found this in the docs

.renderOrder : Number

This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder. Default value is 0 .

theModel.traverse(o => {
    if (o.isMesh) {
      o.renderOrder = 5; 
    }
  });
4

It looks like a sorting problem. Are those gum meshes are separate? How much control you have over the mesh? I’d try to combine all parts of the gum meshes into a single piece. Render order could cause another issue here since it is not always true that the top(ceiling) part of the gum is behind the surface part.

5

related: https://discourse.threejs.org/t/order-independent-transparency/2810