Webgl

Autre

Video Game Blurs (and how the best one works)

Cet article explore les techniques de flou en temps réel utilisées dans les jeux vidéo et les interfaces utilisateur modernes. Il décrit comment appliquer des effets de flou, comme le Bloom, en utilisant des shaders sur le GPU via WebGL. Les auteurs expliquent les algorithmes de flou, leur performance et les compromis techniques nécessaires pour équilibrer la théorie mathématique avec la réalité technologique. Il s'agit d'une approche hautement technique mais accessible, illustrée par des visualisations interactives et des exemples pratiques.

Dev front

Nicolas Mattia – Interactive WebGL Tutorial: Recreating an iOS Animation with GLSL

Cet article explique comment reproduire une animation d'iOS en utilisant WebGL et les shaders GLSL. Il aborde des concepts fondamentaux en programmation graphique, notamment l'écriture de shaders de fragments, l'utilisation de la symétrie pour améliorer les performances des shaders, et la composition avec la transparence. L'animation se compose de milliers de petits points qui s'étendent lorsqu'ils sont touchés, ce qui permet d'apprendre le rendu basé sur GPU à un niveau bas. Les techniques sont présentées pour dessiner des points, créer des motifs radiaux et gérer des éléments semi-transparents en optimisant l'utilisation des ressources.

Dev front

A flowing WebGL gradient, deconstructed

Cet article explique comment créer un effet de gradient fluide en utilisant WebGL. Il aborde la rédaction de shaders, l'interpolation, le mappage de couleurs et le bruit de gradient. L'auteur guide étape par étape, sans nécessiter de connaissances préalables, pour construire un modèle mental et reproduire l'effet à partir de zéro, avec des explications visuelles et interactives. Des fonctions de mélange de couleurs et d'oscillation sont également présentées pour ajouter du mouvement au gradient, en soulignant l'importance de l'utilisation du GPU pour le rendu efficace grâce à la parallélisation.

Dev front

AAA - Analytical Anti-Aliasing

Cet article explore les différentes techniques d'anti-aliasing, notamment le Super Sampling Anti-Aliasing (SSAA) et introduit une approche analytique pour résoudre le problème des artefacts de pixelisation dans le rendu graphique. L'auteur partage des implémentations pratiques et des secrets d'optimisation dans le contexte de la programmation graphique.