--- title: "Multi-Scene WebGL" description: "Learn how multi-scene WebGL techniques deliver smooth transitions and better performance—built with ThreeJS, shaders, and ScrollTrigger." url: "https://kffein.com/en/multi-scene-webgl-2" date_modified: "2026-09-28T08:57:03-04:00" --- *Version française : [Multi-Scène WebGL](https://kffein.com/fr/multi-scene-webgl)* # Multi-Scene WebGL ## Multi-Scene WebGL During our R&D Fridays sessions, we wanted to work on a method that would let us chain multiple WebGL scenes together within a single experience, similar to what you can see on the Deso or Junni websites. ## ANALYSIS In both examples above, the WebGL scenes flow into one another very naturally as you scroll through the page content. On [*Junni*](https://next.junni.co.jp/), certain elements appear between two scenes—a subtle touch that makes the experience even more satisfying. On [*Deso*](https://www.deso.com/), an angled panel creates the transition between two long WebGL sections, where the camera moves along a predefined path that you travel through by scrolling. With **ThreeJS**, the **WebGLRenderer** class renders a scene inside a ****, based on a camera's point of view. If you want to render multiple scenes, the first instinct would be to work with several canvases. This is possible, but it greatly complicates interactivity between scenes (like an element moving from one scene to another). Using multiple canvases can also make the page heavier and hurt performance, since it involves multiple instances of the WebGLRenderer class. You could also "restrict" the render area you want to display, as in this example: [https://threejs.org/examples/?q=view#webgl\_multiple\_views](https://threejs.org/examples/?q=view%23webgl_multiple_views). But here too, the technique isn't the most efficient: the flexibility for transitions decreases when you have to manage render boundaries for 6 to 10 scenes. ## WEBGLRENDERTARGET TO THE RESCUE ThreeJS allows you to render a scene in the background into a buffer space using [WebGLRenderTarget](https://threejs.org/docs/?q=WebGLRenderTarget#api/en/renderers/WebGLRenderTarget). By combining this technique with [EffectComposer](https://threejs.org/docs/?q=EffectComposer#examples/en/postprocessing/EffectComposer) for post-processing, you can apply effects to an image before displaying it on screen. ## ... Taking this further, it would then be possible to generate a texture from two different scenes and display both scenes at the same time using a post-processing effect. ## HOW TO INTEGRATE MULTI-SCENE To achieve smooth transitions without any breaks between scenes, it's essential to render two scenes at once: the current scene and the next one (or the previous one, depending on the scroll direction). In short, staying one scene ahead! ### HTML The HTML part is optional and, in this case, fairly straightforward. We need to sync HTML content with a WebGL scene. As you scroll through the page, a transition will happen between two scenes. We set up four placeholder sections so that each WebGL scene's visibility is based on the height of the div it's linked to. ## ... [ScrollTrigger](https://greensock.com/scrolltrigger/) gives us access to the various events for each section, in both scroll directions. ### Shader and Post-Processing For post-processing, our effect will be included in a ShaderPass. This type of layer lets us link a custom *shader* to a layer within our instance of the EffectComposer class. To transition from one WebGL scene to another, we use the textures of each scene. In the following example, we used the [mix](https://thebookofshaders.com/glossary/?search=mix) function to display both WebGL scenes based on the value of uProgress. ## ... *Of course, once a scene is no longer active, it no longer needs to be rendered, which helps avoid unnecessary rendering.* From there, it's possible to set up other types of transitions. You just need to make changes in the **fragmentShader** and add other **uniforms** to achieve the effect you want. ## MULTI-SCENE, A TECHNIQUE This multi-scene technique is increasingly used in long WebGL experiences that feature a lot of different HTML content spread across several WebGL scenes. It helps maintain performance on both desktop and mobile by keeping rendering to a minimum. Ultimately, multi-scene brings scenes to life that are as original as they are creative, thanks to *shaders* and post-processing. ### Links [**Threejs**](https://threejs.org/) *(v.147)*: A feature-packed WebGL rendering engine with tons of examples and a large community. [**Book of Shaders**](https://thebookofshaders.com/): The go-to resource for getting familiar with shaders. [**ScrollTrigger**](https://greensock.com/scrolltrigger/): A GSAP plugin that lets you tie animations to scrolling.