Générer des images procédurales dans un pixel shader avec GLSL (dans shadertoy).

Apprenez a utiliser des shaders pour réaliser des "ouvres d'art" mathématiques.

a marqué ce sujet comme résolu.
Auteur du sujet

Tout le monde se secoue ! :D

J’ai commencé (il y a 2 heures) la rédaction d’un tutoriel au doux nom de « Générer des images procédurales dans un pixel shader avec GLSL (dans shadertoy). » et j’ai pour objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limites pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Il s’agit en fait d’un tuto que j’avais commencé dans le courseLab d’OpenClassrooms avant sa fermeture, que j’essaye d’adapter a ce site et que je compte compléter. Vous pourrez consulter la bêta à votre guise à l’adresse suivante :

Merci !

Édité par stduhpf

+1 -0

Cette réponse a aidé l’auteur du sujet

Pour un premier post c’est plutôt efficace haha, une bonne utilisation des balises et tout.

Je te conseillerais peut-être de mettre 2–3 long codes en balise secret surtout dans ta partie "Bonus" du plan de travail.

Нова Проспект (/,>\text{(}/ , \text{>}

+1 -0

Du shader toy !!! Trop bien !!! (Il y a tout le temps des trucs géniaux sur ce site, et c’est vraiment bien pour faire des tests, on l’utilise assez souvent au travail)

J’essaie de le lire quand j’ai un peu de temps (d’ici le milieu de la semaine prochaine je pense).

+1 -0
Auteur du sujet

Merci des retours, ca fait du bien. J’avais deja posté ce tuto sur openclassroom juste avant que le courseLab ferme ses portes, donc j’avais eu aucun retour a l’époque, et j’avais peur que ca fasse pareil ici.

+0 -0

Ne te pose plus ce genre de question voyons ! On t’accueil à bras ouverts bien évidement. Et je pense parler au nom de tous en disant qu’on est content d’avoir un rédacteur de qualité de plus à nos cotés !

Car perso' j’y connais rien aux Pixel Shader, et j’ai retrouvé en lisant ton cours l’âme un peu "SdZ" avec la volonté d’être le plus pédagogue et ludique possible. C’est plaisant ! Bon j’avoue buter là où j’ai mes limites à savoir les appel de librairie et les gros codes bien fat :-°

Нова Проспект (/,>\text{(}/ , \text{>}

+0 -0
Auteur du sujet

Je voudrais surtout des retours sur les points qui sont pas assez clairs, ou trop difficiles a comprendre, j’aimerais que le tuto soit plus facile a comprendre pour un débutant.

+0 -0

Cette réponse a aidé l’auteur du sujet

Salut,

Voici quelques pistes concernant l’introduction et le début du tutoriel.
Je ne suis pas un as de la rédaction, donc prends les conseils qui te semblent raisonnables.
D’ailleurs, j’invite d’autres personnes à venir critiquer ces conseils.

Si en lisant ca vous vous demandez "Mais un shader c’est pas un truc utilisé dans les jeux vidéo pour faire joli?" et bien vous auriez raison. En effet, les shaders a la base sont des programmes exécutes sur le gpu (aka la carte graphique) pendant le processus de rasterisation pour ajouter (entre autres) des effets de lumière en temps réel dans les jeux vidéo.

J’ai l’impression que ce paragraphe est assez difficile à comprendre si l’on n’est pas baigné dans l’univers du jeu vidéo. Et ça pourrait vite décrocher le lecteur qui se découragerait.

En fait on va un peu hacker :pirate: . Si vous con‌naissez les shaders, vous savez que normalement un pixel shader va toujours de paire avec un vertex shader pour definir la surface sur laquelle le pixel shader va agir, mais dans notre cas, le vertex shader est simplifié au maximum.

Je pense que, sauf si tu en décides autrement, que ton tutoriel devrait reprendre depuis zéro. Définir en premier c’est quoi un pixel shader, un vertex shader… Je ne sais pas ce qu’est un vertex shader en lisant cela.

Avant de commencer a lire la suite du tuto, je vous invite a aller sur des sites comme GLSL Sandbox ou Shadertoy, pour voir les possibilités offertes par cette technique…

J’ai tendance à dire non : c’est à toi que revient le « job » de montrer quelques exemples tirés des sites en question, ne serait-ce que pour montrer les plus pertinents. Le mieux, c’est de montrer des exemples « jolis » qui seront réalisés lors du tutoriel. Les liens peuvent être indiqués à titre indicatif dans une section « sources/références ».

et comprendre de quoi il s’agit.

Vais-je comprendre les pixels shader en allant sur ces sites ?
Je pense qu’un meilleur mot serait « voir ».

Pour faire simple,un Pixel shader est un programme qui va s’exécuter sur un pixel d’une image, et qui, à partir des coordonnées du pixel en question, et de quelques variables d’entrée, va retourner un vecteur a quatre dimensions.

Pour simplifier, tu pourrais dire que le programme va retourner 4 nombres représentants la couleur du pixel en question, les couleurs étant encodées en RVBA. Tu peux donc éviter de parler des vecteurs pour le moment.

Pour ceux qui savent, en GLSL, les vecteurs sont quasiment le seul type de variables avec lequel on travaille.

Je pense que tu peux supprimer toutes les phrases du type Pour ceux qui savent. Ceux-là liront en diagonale ton intro et seront vite partis dans d’autres sections avancées. En fait, adresse-toi en priorité aux débutants et à ceux qui ne savent pas.

Je préfère le dire tout de suite, mais la valeur de chaque composante de la couleur doit être entre 0 et 1…

Va droit au but dans tes écrits, dit simplement : « La valeur de chaque composante de la couleur doit être entre 0 et 1… »

Pour resumer, un pixel shader est un programme qui s’execute de la meme maniere pour chaque pixel d’une surface, et qui en détermine la couleur en fonction des coordonées du pixel en question sur la surface.

Si j’ai bien compris, la surface dont tu parles correspond à l’image. Du coup, tu pourrais directement dire « …en fonction des coordonnées du pixel en question sur l’image. »

Concernant l’orthographe, n’oublie pas d’ajouter les accents là où ils sont nécessaires.

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte