Bonjour tout le monde !

Dans ce fil de news je vous ai quelques fois parlé d'un projet que j'ai nommé Péguy. Et bien aujourd'hui je lui dédie un article complet pour vous le présenter plus en détail mais aussi pour vous montrer les nouveautés que je lui ai apportées au début de l'hiver.
Ce n'est pas le projet prioritaire (en ce moment c'est TGCM Comics) mais j'avais besoin d'une petite pause pendant les fêtes et coder du dessin vectoriel et de la 3D, ça a un petit quelque chose d'addictif comme jouer aux Lego. x)

Allons-y donc !

Péguy, qu'est-ce que c'est ?

C’est un générateur procédural de motifs, d’effets graphiques et autres éléments de décor pour accélérer la réalisation de mes dessins pour mes BD.
En gros, j'entre quelques paramètres, je clique sur un bouton, et mon programme génère un motif plus ou moins régulier tout seul.
Les premières lignes de code ont été jetées en 2018 et depuis, cet outil n’a de cesse de s’enrichir et de me rendre service pour avancer plus vite sur mes BD. :D

Ce projet est codé avec des langages web et génère des motifs vectoriels au format SVG.

Au début ça se résumait à de petits scripts qu’il fallait modifier directement pour changer les paramètres et lancer individuellement pour chaque effet ou motif généré.

Pas très user friendly, n'est-ce pas ? :’D

Cette première version a servi sur l’épisode 2 de Dragon Cat’s Galaxia 1/2.

Courant 2019 je me suis dit que ce serait plus pratique de regrouper tous ces scripts et de les intégrer à une interface graphique. Depuis, je l’ai enrichi de nouvelles fonctionnalités et j’ai amélioré son ergonomie pour gagner toujours plus de temps.

Voici un petit échantillon de ce que l’on peut produire avec actuellement.

Des effets graphiques typiques des mangas et des motifs de dalles en perspective ou encore plaqué sur un cylindre.
Toutes ces fonctionnalités ont servi sur Tarkhan et Gonakin.

J’envisage de mettre ce projet en ligne, mais pour qu’il soit utilisable par d’autres que moi il faut encore que je règle quelques points d’ergonomie.
Pour le moment, pour récupérer le rendu, il faut encore ouvrir le débugueur du navigateur pour retrouver et copier le noeud HTML qui contient le SVG.
Autant dire que si on ne connait pas la structure HTML par coeur, c’est pas pratique. 8D

Un module 3D !

La nouveauté de 2020, c’est que j’ai commencé à développer un module 3D. L’idée, à terme étant de pouvoir construire mes décors de BD, tout du moins ceux architecturaux, un peu comme un jeu de Lego.

L’interface est vraiment encore en cours de développement, il manque plein de choses, mais en gros ça va se présenter comme ça.

Alors des logiciels de modélisation 3D, ça ne manque pas, du coup, pourquoi j’en fais un ? Qu’est-ce qui va démarquer mon projet de ce qui existe déjà ?

Premièrement, la navigation autour de l’espace 3D de travail. En somme, le mouvement de la caméra.
Ben s’cusez moi, mais dans Blender, Maya, Sketchup et consort, pour pouvoir cadrer selon ses besoins pour obtenir un rendu, c’est juste casse pompes !
Donc j’ai développé un système de navigation de la caméra plus pratique selon qu’on modélise un objet ou qu’on le pose dans un décors. L’idée c’est de s’inspirer des éditeurs de carte dans certains jeux vidéo (comme Age of Empire).

Secondement, je vais proposer une petite innovation. Lorsque vous modélisez un objet dans Blender ou autre, il toujours figé et si vous l’utilisez plusieurs fois dans un environnement, il sera strictement identique, ce qui peut-être gênant pour des éléments naturels comme les arbres par exemple. Donc je vais mettre au point une sorte de petit « langage » qui permettra de rendre un objet paramétrable et d’y incorporer des composantes aléatoires. Ainsi, avec une définition unique pour un objet, on peut obtenir une infinité d’instances différentes, avec des composantes aléatoires pour les éléments naturels et des variables comme le nombre d’étages pour un bâtiment.

J’avais déjà développé un prototype de ce système il y a pas mal d’années en Java. Je vais le récupérer et l’adapter à Javascript.

Et la dernière particularité, ce sera dans les rendus proposés. Comme il s’agit de faire de la BD (surtout en noir et blanc dans mon cas), je suis en train de développer toute une tripoté de shaders pour générer automatiquement un line, des trames et autres hachures automatiquement avec la possibilité d’utiliser des motifs générés dans le module vectoriel existant comme textures ! :D

Les shaders, c'est quoi ?

Bon, vous voyez le principe de la postproduction au cinéma ? (Montage, bruitage, corrections diverses, effets spéciaux... tout le travail de finition après le tournage)
Et bien les shaders, c'est à peu près le même principe. Ce sont des programmes exécutés juste après le calcul de l'objet 3D tel qu'il doit apparaître à l'écran. Ils permettent d'appliquer des correctifs, des déformations, des effets, des filtres... Pour peu qu'on ne soit pas fachés avec les mathématiques, il n'y a de limite que l'imagination ! :D

Quand on entre un vecteur normal dans une variable de couleur ça donne des résultats rigolos.

Oui, oui ! C’est bien avec des math qu’on peut afficher toutes ces choses. :D
Maintenant quand vous entendrez un malin vous dire que les math, c’est froid, c’est à l’opposé de l’art ou incompatible avec l’art... c'est de la biscotte sèche, vous saurez que c'est de l'ignorance. :p
Les math, c’est un outil au même titre que le pinceau, le tout est de savoir s’en servir. :D

En vérité, la science est une représentation de la réalité au même titre qu'une peinture. Elle se veut photoréaliste à l'extrême, mais il n'empêche qu'il s'agit d'une construction humaine servant à décrire la nature.
Elle reste une approximation de la réalité qui nous échappe continuellement et on tente de combler les marges d'erreur au fil des siècles... Comme l'a fait la peinture classique.
Mais au fait ? Il n'y a pas un paquet de grands peintres qui étaient aussi des savants, des mathématiciens ? Si si ! Cherchez bien ! La Renaissance est un bon vivier dans ce genre là. x)

Bref ! La physique est une peinture et les mathématiques sont son pinceau.

Mais en peinture, on ne fait pas que du figuratif, pas que du réalisme, on peut donner libre cours à son inspiration pour styliser notre représentation du monde ou la rendre abstraite.
Et bien comme tout bon pinceau, les mathématiques permettent la même fantaisie ! Il ne faut qu'un peu d'imagination pour ça.

Tenez, par exemple, le bon vieux Spirographe de notre enfance. On en a tous eu un ! Et bien ces jolies motifs tracés au bic ne sont rien d'autre que... des courbes paramétrées qui font souffrir les élèves de math sup/math spé. 8D
Même le fameux triskèle celtique peut se calculer à partir de courbes paramétrées.

Bon, je digresse, je digresse, mais revenons à nos shaders.
Etant donné qu'on peut faire ce qu'on veut avec j'ai donc travaillé sur des effets typiquement manga. En combinant le générateur de motif de point et le générateur de hachures mais en les traçant en blanc, j'ai pu simuler un effet de trame grattée.

Au traditionnel c'est un effet qu'on obtient en grattant la trame avec un cutter ou un outil similaire.

Péguy saura donc calculer cet effet tout seul sur une scène en 3D. :D

J'ai étendu cet effet avec un motif calculé en SVG. Il sera donc possible d'utiliser les motifs créés dans le module vectoriel comme textures pour le module 3D !
Ici il s'agit d'un motif de points répartis selon une spirale de Fibonacci (j'ai utilisé un motif similaire dans Tarkhan pour faire des textures de pierre, très couremment utilisé dans les mangas).

Le bump mapping

Alors c'est là que les choses deviennent vraiment intéressantes. On reste dans les shaders mais on va donner une dimension supplémentaire à notre rendu.
En gros le bump mapping consiste à créer un effet de bas-relief à partir d'une texture de dénivelé. Et ça donne ce genre de résultat.

L'objet défini est toujours un simple cylindre (à 2 rayons). Ce sont les shaders qui appliquent le décalages de pixel et recalcule l'éclairage grâce à la texture de dénivelé qui ressemble à ceci.

Cette texture a aussi été calculée automatiquement en SVG. Ainsi on peu paramétrer dynamiquement le nombre de briques.

Bon, c'est bien joli cette histoire de bas relief, mais là on a un éclairage relativement réaliste, et on voudrait que ça ressemble à un dessin.
Alors en appliquant un seuil pour avoir une zone éclairée en blanc, un second seuil pour avoir des zones d'ombres en noir, en appliquant le motif de trame au reste et en ajoutant les hachures qui simulent la trame grattée, voilà le résultat !

Voilà ! On se croirait dans un manga des années 80 ! :D

J'ai testé ce rendu avec d'autres motifs de trame : les points en spirale de Fibonnacci, des lignes parallèles ou encore des lignes qui épousent la forme de l'objet.

On a fait le tour de ce que sait actuellement faire Péguy.
Je pense que j'ai moyen d'enrichir encore un peu ce rendu avec les shaders mais la prochaine fois que je travaillerai sur ce projet le plus gros du boulot sera de créer ce qu'on appelle des primitives, des objets géométriques basiques.
Après ça je pourrai commencer à les assembler à coup de ligne de code.

Le concept de dessiner en codant est tellement amusant que je commence à envisager d'essayer de faire des illustrations de décors complètes comme ça ou faire les décors de certains projets de BD uniquement comme ça rien que pour la démarche artistique.
Trouver des astuces pour générer des objets organiques, en particulier les végétaux devrait être bien amusant aussi.

Voilà pour aujourd'hui !

La prochaine fois nous parlerons dessin !
En attendant, bon week-end et à bientôt ! :D

Suisei

Answer

Answer