Linghün Studio

avec Linghün Studio

  • Année 2021
  • Type Site vitrine
  • Technologies

    • WordPress
    • SVG
    • Lottie
    • Barba.js
    • WebGL
Démonstration de savoir faire, le site de mon partenaire Linghün Studio intègre de nombreuses techniques avancées : transition entre les pages, animations au chargement et au défilement, et effet de décalage de couleur sur certaines images.

Effet décalage des canaux de couleurs

L’effet est réalisé avec un shader : un programme, codé en GLSL, et exécuté par le GPU pour chaque pixel de l’image.

Le décalage du canal rouge est une chose, mais l’image résultante présente aussi des franges d’un bleu-vert qui ne correspond pas du tout à la charte graphique de Linghün Studio.

Pour corriger ça, l’astuce est de convertir la couleur résultante en HSV pour pouvoir faire une détection sur la teinte : si elle est du côté rouge, on laisse, sinon on corrige en adaptant la teinte et la saturation, ce qui permet d’obtenir le doré souhaité.

Mais à partir de là, on obtient tout ce qu’on veut !

Démonstration de décalage de couleur