Opacity + transparent + animation = BIG problem

Questions
, ,
1

Hi,

I got a problem to render an animation from a object transparent (glass), The issue is when I try to make an animation from 0 to 1, in the first times all is great, but when the value of opacty turns to 1 all my object is bad.

This is the way to load my entity on the scene

<a-entity
                  id="mezcla"
                  gltf-model="/assets/fbx_oldfashioned000/scene.gltf"
                  position="0 0 0"
                  scale="4 4 4"
                  vanish-opacity-target
                  animation='property: vanish-opacity-target.opacity;
                            from: 0; to: 1; dur: 5000;loop: false;
                            dir: alternate; startEvents: fadeIn'
                  visible="true">
                </a-entity>

and the custom source for animation is:

AFRAME.registerComponent('vanish-opacity-target', {
  multiple: true,
  schema: {opacity: {default: 1}},
  init: function () {

   this.el.addEventListener('fadeOut', this.update.bind(this));
   this.el.addEventListener('fadeIn', this.update.bind(this));
  },
  update: function () {
    var mesh = this.el.getObject3D('mesh');
    var data = this.data;
    if (!mesh) { return; }
    mesh.traverse(function (node) {
      if (node.isMesh) {
        var material = node.material

        node.material.opacity = data.opacity;

        if (node.isMesh) {
          node.material.depthWrite = !node.material.transparent;
        }
        node.material.needsUpdate = true;
      }else{
        if(data.opacity == 0){
          node.visible = false
          node.opacity = 0
        }else{
          node.visible = true
        
        }

      }
    });
  },

});

Finally this is the result:

first image, from simple loader a-frame (all is OK)

withGTLFLoader.PNG
withGTLFLoader.PNG1242Ă—2688 472 KB

An the second image, after animation: opacity 0 to 1 value (Bad result)

withAnimation.PNG
withAnimation.PNG1242Ă—2688 444 KB

Any suggestions?

Thanks in advanced.

model3d => oldfashioned.zip (3.3 MB)

2

Unfortunately, alpha blending (material.transparent = true) introduces a lot of complexity to the rendering process, and makes results very sensitive to rendering order. Even when .opacity=1, you may still get significantly different results than an opaque object where material.transparent = false. There are no “perfect” fixes that will work in all cases, but there are some workarounds you could try:

  1. Try using .depthWrite = true on your transparent materials. It’s not usually what you’d want on transparent materials, but it might be reasonable here since you’re transitioning the materials to be opaque.
  2. Try setting .transparent=false once the object’s opacity has been increased to 1. This might create a rendering stutter as the material recompiles, but if the appearance is acceptable, there are ways to get rid of that stutter afterward.
  3. Try enabling renderer="sortObjects: true" on your <a-scene/> element.
  4. Consider filing a feature request on three.js to support something like “alpha hash” or “alpha dither” modes, which are easier to use for this sort of animation.
3 Likes
3

This news are very sad. I was tried all your tips, but even doesn´t work.

Even these aditional steps I was tried:

  1. Setting custom value on object3d.renderOrder
  2. Custom animations with environment maps
  3. Move the inner 3d objects from 0,0,0 to 0, 0.1,0.1.

And nothing works