Code créatif, Three.js, étalonnage vidéo et textures holographiques - SMALLTALK #1

Introduction

Matthieu : Salut tout le monde ! Je suis avec Camille. Camille, comment ça va ?

Camille : Écoute, ça va très bien, très content d'être avec toi pour cet épisode.

Matthieu : Plaisir partagé ! On est à la fin de l'été, et comme on échange souvent sur pas mal de choses, on s'est dit que ce serait sympa de parler de l'actualité de l'été en tant que développeurs, mais aussi sur d'autres sujets. Tu as passé un bon été de ton côté ?

Camille : Oui ! Je suis parti en vacances, j'ai appris plein de trucs, on va en parler. Un été plutôt dépaysant et instructif. Et toi ?

Matthieu : Ça va. J'étais en vacances au mois de juin, donc juillet et août ont été plutôt studieux de mon côté. J'ai appris plein de choses, notamment sur la tech. On va faire comme si on ne s'en était jamais parlé !

Présentation du podcast

Camille : Quel est l'objectif du podcast aujourd'hui ? Nous sommes tous les deux fondateurs de Human Coders, qui est un centre de formation pour développeurs. On fait ça depuis 12 ans. On a toujours fait attention à se laisser du temps libre pour explorer d'autres passions, souvent liées au dev, aux maths ou aux sciences. On voulait vous partager tout ça dans cet épisode. C'est très improvisé, n'hésitez pas à nous faire des retours sur ce qui vous intéresse pour qu'on améliore le format.

Matthieu : Un des sujets qui nous intéresse tous les deux en ce moment, ce sont nos side projects autour de l'art et de la création avec du code. On a déjà collaboré sur des projets artistiques par le passé, et là, j'ai vu tes avancées cet été sur de nouveaux projets créatifs. Tu veux nous en parler ?

L'art génératif et l'exploration des outils nodaux

Camille : Carrément ! Je suis tombé dans la sphère de l'art génératif il y a trois ans. Le but est de faire des projets où l'on écrit du code qui tourne dans un navigateur. Ce code reçoit un nombre aléatoire et doit générer une pièce différente en fonction de ce nombre. C'est un seul code qui génère une collection. Tout le jeu est de créer une collection intéressante et cohérente. Ça peut être de l'image statique, de l'animé, de la 3D ou du son.

Au fur et à mesure de mes projets, j'ai eu tendance à les concevoir comme des synthétiseurs modulaires, un peu comme des blocs. J'aime bien réfléchir en me disant : "J'ai une texture de hachures, avec plein de paramètres comme l'orientation, la couleur, la déformation". Ça me fait une petite boîte avec des paramètres en entrée. Ensuite, pour la composition, je crée quelque chose qui définit des zones dans l'espace et je m'amuse à changer la couleur de ma texture en fonction de l'identifiant de la zone.

Cette approche modulaire me permet d'être créatif en deux temps : d'abord coder l'implémentation de la "boîte", puis mettre le code de côté pour "tourner les boutons" et expérimenter, parfois via l'erreur ou l'inattendu. J'ai donc cherché des outils d'art génératif basés sur des nodes (nœuds).

J'ai d'abord regardé Nodes.io et Cables. Ça se code en JavaScript dans le navigateur. On construit du code JS de manière modulaire. Nodes.io est un éditeur assez simple, tandis que Cables propose déjà beaucoup de nodes pré-construits. Mais j'avais un peu de mal à m'intégrer dans ces outils.

Houdini et les défis de la 3D

Camille : L'outil majeur que j'ai exploré cet été, c'est Houdini. C'est pour faire de la 3D de manière nodale. Dans Houdini, tout est nodal et rien n'est destructif. Dès qu'on fait une manipulation, ça crée un node dans l'arbre. On peut tout changer à tout moment : partir d'un cube, faire tout un traitement, puis remplacer le cube par une sphère et tout se recalcule. Ça titillait pas mal mon esprit de développeur.

Cependant, j'ai été confronté à plusieurs problèmes. Déjà, c'est de la 3D. Moi, je fais plutôt de l'art génératif en 2D, donc il fallait que je trouve des astuces pour que ça n'ait pas une tête de 3D. Ça m'obligeait à gérer la lumière, ce dont je n'ai pas l'habitude. Ensuite, c'est une sacrée usine à gaz. L'interface n'est pas très intuitive, ils sont en train de faire des changements et tout n'est pas encore bien intégré. Il y a des centaines de nodes et il y a toujours quinze mille façons de faire la même chose. C'est parfois frustrant quand on vous dit : "Ça marche, mais c'est lent, utilise plutôt tel node". Enfin, le temps de rendu est problématique. Même avec un Mac M2, dès qu'on met de la lumière et des textures un peu complexes, le rendu d'une animation est extrêmement long. Les gens qui font des vidéos sympas ont souvent des fermes de serveurs. Pour de l'art interactif, ce n'était pas idéal.

Matthieu : C'est intéressant de voir l'envers du décor. Avec Houdini, on se prive aussi de la partie interactive, puisque ça génère une vidéo ou une image au lieu d'une application web avec laquelle on peut interagir. Tu avais aussi testé TouchDesigner, non ?

TouchDesigner et le retour au code avec Three.js

Camille : Oui, c'est un logiciel dans la même veine, mais plutôt fait pour des expériences live à la base. C'est totalement nodal. Je m'en servais comme d'un moyen de m'abstraire de la lourdeur du JavaScript pour instancier des shaders (GLSL). C'est pratique pour faire du prototypage rapide, intégrer une caméra ou tester une compo sur iPad.

Mais comme pour Houdini, il faut une excellente connaissance des nodes pour savoir comment les chaîner. Et puis, je fais de l'art génératif dans une niche où l'on apprécie les œuvres faites 100% avec du code. En utilisant un outil comme TouchDesigner, on sort un peu de cette sphère. Certains modules facilitent tellement le travail (comme la gestion des particules) que ce n'est plus la même performance que de les coder soi-même.

Finalement, je suis revenu à Three.js. J'avais déjà suivi des tutos, notamment ceux de Bruno Simon (Three.js Journey), mais je n'avais pas accroché au début car je restais focalisé sur l'aspect 3D pure. Cet été, en comprenant mieux comment m'en servir pour faire du rendu qui a un look 2D, j'ai adoré. Surtout la partie sur le GPGPU (General-Purpose computing on Graphics Processing Units) avec les particules.

Je m'amuse à manipuler des dizaines de milliers de particules sur un plan. J'obtiens des performances que je n'aurais jamais en JavaScript pur. Avant, avec P5.js, afficher 1 000 particules par frame, c'était déjà lourd. Là, j'en ai 10 000 avec des calculs complexes, des traitements de couleurs et du post-processing, et ça tourne super bien. C'est un peu galère à mettre en place car le module GPGPU est un add-on de Three.js pas très bien documenté, mais une fois qu'on a compris, c'est génial.

Matthieu : Pour compléter, la problématique du GPGPU est de pouvoir faire du traitement sur la carte graphique qui ne soit pas uniquement graphique. Normalement, la carte graphique retourne une matrice de pixels. Toi, tu veux qu'elle retourne des résultats de calculs pour les réutiliser. On utilise une sorte de "hack" : on stocke par exemple la position des particules dans les canaux RGB d'une texture. Au lieu de stocker une couleur, le rouge devient la position X, le vert la position Y, etc.

L'actualité de Matthieu : De l'art génératif au monde physique

Matthieu : De mon côté, après avoir fini un projet dans le style aquarelle, j'ai voulu explorer la dimension matérielle. Comment mes créations peuvent-elles être utilisées physiquement par ceux qui les achètent ? Je suis très sensible à l'aspect physique des œuvres : la matière, la texture réelle, le relief. On peut faire des choses superbes avec du code qui ont une dimension matérielle.

Je m'intéresse beaucoup à l'impression de textures, notamment holographiques. Ce ne sont pas des imprimantes holographiques hors de prix, mais une technique que l'on peut faire à la maison.

Camille : Comment on fait ça sur du papier ?

Matthieu : J'utilise des textures holographiques déjà existantes que j'applique sur une surface. La technique consiste à imprimer mon projet avec une imprimante classique pour les parties non holographiques, puis j'imprime les parties que je veux voir en holographique avec une imprimante laser et de l'encre noire. Cette encre laser a la propriété de devenir collante avec la chaleur.

Ensuite, je passe la feuille dans une sorte de plastifieuse (une doreuse) avec un film holographique par-dessus. La pression et la chaleur font que le film ne colle que sur l'encre noire. On retire délicatement le film, et on a un résultat extrêmement précis. On peut faire la même chose avec de la dorure, des textures mates ou brillantes.

Camille : C'est super intéressant car ce sont des techniques qu'on ne voit pas souvent en art génératif. On voit souvent du pen plotting (un traceur avec un stylo), mais ça ne permet pas de faire des aplats facilement. Ta technique permet d'avoir des rendus très fins et des aplats complexes.

Matthieu : Exactement. Et on peut combiner les techniques. J'utilise aussi un pen plot pour faire des tracés filaires à la dorure, ou pour découper du papier. J'explore la création de couches successives de papier découpé pour avoir des œuvres en relief, en jouant sur les ombres. On mélange l'impression classique, la dorure, l'holographique et la découpe.

La passion pour le montage vidéo et DaVinci Resolve

Matthieu : Pour partager ces créations qui jouent avec la lumière, une simple photo ne suffit pas. On ne saisit pas toute la partie intéressante de l'œuvre, surtout quand il y a du relief ou des reflets holographiques. Je me suis donc mis à la vidéo, et je me suis découvert une passion pour l'étalonnage et le post-processing.

Je me suis formé sur DaVinci Resolve. C'est un outil extrêmement puissant, utilisé au cinéma, qui permet de faire du montage, de l'étalonnage, des effets spéciaux et du mixage audio. J'y ai retrouvé le plaisir que j'ai quand je code. Même si ce n'est pas du code pur, il y a une dimension créative et technique très forte. On y retrouve d'ailleurs des systèmes de nodes pour l'étalonnage et les effets spéciaux (Fusion). On peut même y faire du Python !

Camille : J'ai utilisé DaVinci Resolve un tout petit peu sur iPad pour des montages simples, et je trouve ce logiciel fascinant. Il réussit à masquer sa complexité incroyable derrière une interface plutôt simple et belle. Ce n'est pas comme Houdini ou Ableton qui ont l'air complexes dès l'ouverture.

Matthieu : Oui, DaVinci Resolve est un concurrent de Premiere Pro et Final Cut. À l'origine, la société Blackmagic Design se concentrait sur l'étalonnage. C'est l'outil de référence pour créer une ambiance particulière dans les films et séries. Aujourd'hui, c'est accessible même aux créateurs du dimanche. Il y a une section "Cut" très simplifiée et des sections beaucoup plus professionnelles.

C'est tout un univers : l'étalonnage, la balance des blancs, la réduction du bruit, le tracking de sujets qui bougent pour leur appliquer un effet... Et il y a aussi la partie tournage : comment éclairer du papier sans écraser la texture ou créer trop de reflets. C'est passionnant.

L'exploration des ombres et des gobos

Matthieu : En ce moment, je joue pas mal avec les ombres. J'utilise une lentille devant une source de lumière pour concentrer le faisceau, créant ainsi un projecteur. On peut y insérer des gobos. Ce sont des petites plaques qui servent de masques (avec des parties pleines et des parties vides) pour projeter une forme.

Mon idée est d'utiliser mon traceur de découpe pour créer des gobos personnalisés à partir de code GLSL. Je génère un motif complexe par le code, je le découpe, et je projette l'ombre correspondante. C'est encore une façon de lier le code, le monde physique et la lumière.

Conclusion et projets à venir

Camille : C'est super de voir ton évolution vers la vidéo comme média de création à part entière. De mon côté, je continue d'explorer le concept d'émergence : comment des règles très simples (comme dans le Jeu de la Vie ou les automates cellulaires) peuvent faire émerger des motifs extrêmement complexes. Avec Three.js et le GPGPU, je peux générer des structures fractales ou des déplacements de particules très fluides.

Matthieu : On a abordé pas mal de sujets ! Pour finir, on peut peut-être parler de nos ambitions pour ce podcast.

Camille : On a testé un format qu'on appelle "Le Répondeur". On pose une question sur LinkedIn et X, les gens nous envoient des messages vocaux et on diffuse les plus sympas dans l'épisode. Ça apporte une belle diversité d'opinions. On veut aussi lancer un format FAQ pour approfondir des sujets techniques ou répondre à vos questions.

On expérimente, donc n'hésitez pas à nous proposer des sujets qui vous intéressent, que ce soit sur la tech, le recrutement, la formation ou nos side projects.

Matthieu : On espère que ce format "Smalltalk" vous a plu. On essaiera d'en refaire régulièrement pour donner nos actus de développeurs et de dirigeants de Human Coders.

Camille : Merci de nous avoir écoutés ! On se retrouve bientôt pour un prochain épisode sur Human Coders Podcast.

Matthieu : À bientôt ! Ciao !