---
title: "L'Agence Kffein - Expérimentations web et interactives"
description: "Studio créatif numérique à Montréal : stratégie numérique, design UI/UX, développement web sur mesure, automatisation et intelligence artificielle."
url: "https://kffein.com/fr/lab/transition-entre-scenes-webgl"
date_modified: "2026-11-09T10:39:29-05:00"
---

 *English version : [Transitions Between WebGL Scenes](https://kffein.com/en/lab/transition-entre-scenes-webgl)*

# Transition entre scènes WebGL

**Auteur :** WebGL

**Rôle :** 2024

Une bonne transition peut transformer toute l’expérience d’un site. Encore faut-il savoir comment la reproduire.

## Une volonté d'apprendre

Pendant un de nos rendez-vous design, on est tombés sur le site[Composite](https://www.composites.archi/), réalisé par l’agence[Spark](https://sparkk.fr/). Une belle finesse d’exécution, et surtout un effet de transition qui attire l’œil et donne envie de jouer avec. Sa mécanique nous rappelait d’ailleurs ce qu’on avait fait pour notre projet[Mipogg](https://mipogg.com/fr/).

N'ayant pas accès au code, il fallait deviner comment l’effet était construit, sans savoir si c’était faisable avec nos outils. Guillaume ne s’était encore jamais attaqué à ce type de transition.  

On est repartis de notre technique multi-scène : deux scènes WebGL qu’on alterne grâce à un masque. Le shader utilise[une image de feuilles](https://www.composites.archi/_nuxt/displacement-7.CCVSl4xo.jpg) (celle du site Composite) et une variable de progression qui détermine le ratio de visibilité entre la scène A et la scène B. Quelques paramètres ajoutés au masque, comme le contraste et le bruit (noise), raffinent le rendu. Enfin, cette même variable de progression sert à animer les éléments de la scène au scroll.

Voici le résultat dans notre lab WebGL, avec Kontrol, notre outil de params binding.

On maîtrise maintenant cette technique, et elle fait partie de notre boîte à outils pour les transitions sur de prochains projets.