needed: fade effect when a new cubemap is loaded

[comsyspro]

Hi,

I'm looking for a solution to have a fadeout / fadein effect after a new cubemap has loaded.

Here is a code snippet which shows the fade effect: https://github.com/aframevr/360-image-gallery-boilerplate/blob/master/components/set-image.js

And here is the project site where you can see the fade effect when pressing the link buttons: https://aframe.io/360-image-gallery-boilerplate/

The same should be done also for cubemap components: Component that listens to an event, fades out an entity, swaps the texture, and fades it back in.

Regards.

[bryik]

I'll take a look this weekend.

[bryik]

I've updated the component so that el.setObject3D() isn't called until after the textures have loaded. This should prevent the object3dset event from being emitted before the cubemap has finished loading.

[bryik]

One way to do a fade:

<a-scene>
  <!-- Sphere smaller than cubemap, large enough to surround user -->
  <a-sphere radius="4000" material="color: black; side: back; transparent: true; opacity: 0">
      <!-- Fade animations -->
      <a-animation id="fadeOut" attribute="material.opacity"
         dur="3000"
         from="0.0"
         to="1.0"
         begin="fadeOut"></a-animation>
      <a-animation id="fadeIn" attribute="material.opacity"
        dur="3000"
        from="1.0"
        to="0.0"
        begin="fadeIn"></a-animation>
  </a-sphere>
  <a-entity id="skybox" cubemap="folder:../assets/Yokohama3/"></a-entity>
</a-scene>

// Fade in when skybox finishes update.
skybox.addEventListener('object3dset', () => fadeIn.emit('fadeIn'));

// When changing backgrounds
function changeBackground () {
  fadeOut.emit('fadeOut');
  fadeOut.addEventListener('animationend', function() {
    skybox.setAttribute('cubemap', 'folder:../assets/GoldenGateBridge2/');
  });
}

Working example.

[comsyspro]

Thanks. So it looks much better.

[bryik]

No prob.

There is probably a more direct and performant way of doing a fade with shader material, but this works for now.

[comsyspro]

That's a good solution, because you can sytle the fade effect and it only starts fading in when the material has updated, and not in between, so it's a smooth blending.