Home/ Questions/Q 7406847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:37:10+00:00

I am trying to create an interactive background animation using WebGL / Three.js The

  • 0

I am trying to create an interactive background animation using WebGL / Three.js

  • The animation would be generated from a two-color gradient

  • The animation would be controlled by external factors (intensity, speed, etc.)

The result should look something like this: https://www.youtube.com/watch?v=PdrkrCFRHWA

I am not sure how Vista managed to pull the effect and I am interested in possible techniques which would yield similar looking results. I am looking for pointers how to get started

  • Should I use alpha blended generated textures and dancing quads?

  • Should I use pixel shaders?

  • etc.

Any tips welcome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would use three.js and render a bunch of triangle strips and do the gradient effect itself on the fragment shader.

    The effect looks rather simple enough to be wholly calculated inside the fragment shader directly, so a fullscreen quad would also work nicely. Depends really on the type of detail you are aiming for, I’d experiment with both.

    • 0