mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-09 19:10:24 +00:00
Merge pull request #214 from yvan-sraka/fr-11
Corrects some mistakes in the French translation of Chapter 11
This commit is contained in:
commit
45730b6f63
@ -3,10 +3,10 @@
|
||||
|
||||
## Bruit
|
||||
|
||||
Il est temps de faire une pause!
|
||||
Il est temps de faire une pause !
|
||||
Nous avons joué avec des fonctions aléatoires qui ressemblaient au bruit blanc d'une télévision.
|
||||
On a encore la tête qui tourne en pensant aux shaders et nos yeux sont fatigués.
|
||||
Il est grand temps de sortir faire un tour!
|
||||
Il est grand temps de sortir faire un tour !
|
||||
|
||||
Nous sentons l'air sur notre peau, le soleil dans les yeux, le monde est tellement vibrant et coloré.
|
||||
Les couleurs, les textures, les sons. Pendant notre balade, nous ne pouvons nous empêcher de remarquer la surface de la route, les rochers, les arbres et les nuages.
|
||||
@ -20,7 +20,7 @@ Les couleurs, les textures, les sons. Pendant notre balade, nous ne pouvons nous
|
||||
![](texture-06.jpg)
|
||||
|
||||
Le côté imprévisible des variations de ces textures pourrait s'apparenter à de l'aléatoire mais elles semblent loin des fonctions aléatoires que nous avons vues juste avant.
|
||||
Le monde est tellement complexe, comment pouvons nous programmer un shader pour nous rapprocher de cette immense variété?
|
||||
Le monde est tellement complexe, comment pouvons nous programmer un shader pour nous rapprocher de cette immense variété ?
|
||||
|
||||
Cette question fut posée à [Ken Perlin](https://mrl.nyu.edu/~perlin/) en 1980 quand il fut missionné pour trouver un moyen de générer des textures plus réalistes pour le film "Tron".
|
||||
Le résultat de ses recherches fut un élégant algorithme de *bruit* qui fut récompensé par un Oscar (rien que ça).
|
||||
@ -42,7 +42,7 @@ Nous récupérons les parties entières (```i```) et fractionnelles (```f```) de
|
||||
Nous utilisons [```floor()```](.../glossary/?search=floor) pour obtenir ```i``` et [```fract()```](.../glossary/?search=fract) pour obtenir ```f```.
|
||||
Ensuite nous appelons ```rand()``` sur la partie entière de ```x```, ce qui renvoie une valeur unique par entier.
|
||||
|
||||
Après quoi, vous voyez deux lignes commentées, la première fait une interpolation linéaire entre les deux valeurs ```rand( i )``` et ```rand( i+1 )```
|
||||
Après quoi, vous voyez deux lignes commentées, la première fait une interpolation linéaire entre les deux valeurs ```rand(i)``` et ```rand(i+1)```
|
||||
|
||||
```glsl
|
||||
y = mix(rand(i), rand(i + 1.0), f);
|
||||
@ -71,9 +71,9 @@ L'algorithme de Perlin a été implémenté dans tous les langages et en plusieu
|
||||
|
||||
![Robert Hodgin - Written Images (2010)](robert_hodgin.jpg)
|
||||
|
||||
A votre tour:
|
||||
A votre tour :
|
||||
|
||||
* créez votre propre fonction ```float noise(float x)```.
|
||||
* Créez votre propre fonction ```float noise(float x)```.
|
||||
* Utilisez la pour animer une forme sur la scène, la faire pivoter ou la redimensionner.
|
||||
* Faites *danser* plusieurs formes avec cette fonction de *bruit*.
|
||||
* Construisez des formes organiques avec une fonction de bruit.
|
||||
@ -83,14 +83,14 @@ A votre tour:
|
||||
|
||||
![](02.png)
|
||||
|
||||
A prséent que nous savons faire un bruit sur une dimension, passons à la 2D.
|
||||
A présent que nous savons faire un bruit sur une dimension, passons à la 2D.
|
||||
En 2D, au lieu d'interpoler entre deux points sur une ligne, (```floor(x)``` et ```floor(x)+1.0```),
|
||||
nous allons interpoler entre les quatre coins d'un carré du plan: ```floor(st)```, ```floor(st)+vec2(1.,0.)```, ```floor(st)+vec2(0.,1.)``` et ```floor(st)+vec2(1.,1.)```.
|
||||
|
||||
![](01.png)
|
||||
|
||||
De la même façon que si nous voulons un bruit en 3D, nous devrons créer une interpolation entre les huit coins d'un cube.
|
||||
Cette technique se base sur l'interpolation de valeurs c'est pourquoi on l'appelle **bruit de valeurs** (**value noise**).
|
||||
Cette technique se base sur l'interpolation de valeurs c'est pourquoi on l'appelle **bruit de valeurs** (*value noise*).
|
||||
|
||||
![](04.jpg)
|
||||
|
||||
@ -98,7 +98,7 @@ Comme dans l'exemple à une dimension, nous n'utiliserons pas une interpolation
|
||||
|
||||
![](05.jpg)
|
||||
|
||||
Regardez la fonction de bruit suivante:
|
||||
Regardez la fonction de bruit suivante :
|
||||
|
||||
<div class="codeAndCanvas" data="2d-noise.frag"></div>
|
||||
|
||||
@ -108,13 +108,13 @@ Nous récupérons les valeurs entières et fractionnelles de la cellule.
|
||||
La valeur entière nous permet de créer les valeurs aléatoires des quatre coins du carré (lines 23-26).
|
||||
Enfin, ligne 35, nous interpolons entre les quatre valeurs aléatoires des coins en utilisant la valeur fractionnelle du fragment dans la cellule.
|
||||
|
||||
A votre tour, essayez les choses suivantes:
|
||||
A votre tour, essayez les choses suivantes :
|
||||
|
||||
* Changez le multiplicateur ligne 45, essayez de l'animer.
|
||||
* A quel niveau de zoom le bruit commence-t'il à ressembler à de l'aléatoire?
|
||||
* à quel niveau de zoom le bruit devient-il imperceptible?
|
||||
* A quel niveau de zoom le bruit commence-t'il à ressembler à de l'aléatoire ?
|
||||
* A quel niveau de zoom le bruit devient-il imperceptible ?
|
||||
* Essayez de brancher la souris pour ajuster le niveau de zoom.
|
||||
* Que se passe-t'il si on utilise le dégradé du bruit comme un champ de distances? essayez de trouver un usage intéressant.
|
||||
* Que se passe-t'il si on utilise le dégradé du bruit comme un champ de distances ? Essayez de trouver un usage intéressant.
|
||||
* Maintenant que vous contrôlez un peu mieux l'ordre et le chaos, essayez d'utiliser tout ce que vous savez pour créer une composition de rectangles, de couleurs et bruit ressemblant à une peinture de [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko).
|
||||
|
||||
![Mark Rothko - Three (1950)](rothko.jpg)
|
||||
@ -122,12 +122,12 @@ A votre tour, essayez les choses suivantes:
|
||||
## Utilisation du bruit dans le design génératif
|
||||
|
||||
Les algorithmes de bruit ont été inventés pour apporter une touche plus naturelle aux textures digitales.
|
||||
Les implémentations 1D et 2D que nous avons vues jusqu'à présent étaient des interpolations entre *valeurs* aléatoires, d'où leur nom de *bruit de valeurs* (**Value Noise**),
|
||||
Les implémentations 1D et 2D que nous avons vues jusqu'à présent étaient des interpolations entre *valeurs* aléatoires, d'où leur nom de **bruit de valeurs** (*value noise*),
|
||||
mais il existe d'autres manières de créer un bruit...
|
||||
|
||||
[ ![Inigo Quilez - Value Noise](value-noise.png) ](../edit.php#11/2d-vnoise.frag)
|
||||
|
||||
Comme vous l'avez découvert dans les exercices précédents, les *bruits de valeurs* (*value noise*) paraissent souvent *crénelés*.
|
||||
Comme vous l'avez découvert dans les exercices précédents, les **bruits de valeurs** (*value noise*) paraissent souvent *crénelés*.
|
||||
Pour atténuer le crénelage, [Ken Perlin](https://mrl.nyu.edu/~perlin/) développe en 1985 une autre implémentation de son algorithme appelée **Bruit de Gradient**.
|
||||
Ken a trouvé comment interpoler des *dégradés* plutôt que des valeurs.
|
||||
Ces dégradés sont le résultat d'une fonction aléatoire 2D qui renvoie une direction (représentée par un ```vec2```) au lieu de renvoyer une valeur de type ```float``` (un chiffre).
|
||||
@ -140,7 +140,7 @@ Prenez un moment pour comparer ces deux exemples par [Inigo Quilez](http://www.i
|
||||
Comme un peintre qui comprend comment marchent les pigments, plus vous en saurez sur les différentes implémentations de bruit, mieux vous saurez vous en servir.
|
||||
Par exemple, si on utilise un bruit 2D pour faire pivoter un espace sur lequel on rend des lignes droites, on obtiendra le motif suivant qui ressemble à du bois.
|
||||
|
||||
Cliquez sur les exemples pour voir à quoi ressemble le code:
|
||||
Cliquez sur les exemples pour voir à quoi ressemble le code :
|
||||
|
||||
[ ![Wood texture](wood-long.png) ](../edit.php#11/wood.frag)
|
||||
|
||||
@ -162,12 +162,12 @@ Une troisième approche consiste consiste à moduler une forme. Cela fait égale
|
||||
|
||||
<a href="../edit.php#11/circleWave-noise.frag"><canvas id="custom" class="canvas" data-fragment-url="circleWave-noise.frag" width="300px" height="300"></canvas></a>
|
||||
|
||||
Entraînement:
|
||||
Entraînement :
|
||||
|
||||
* Quel autre motif génératif pouvez vous faire avec du bruit? marbre? magma? eau? trouvez des images de textures qui vous intéressent et implémentez les avec du bruit.
|
||||
* Quel autre motif génératif pouvez vous faire avec du bruit ? Marbre ? Magma ? Eau ? Trouvez des images de textures qui vous intéressent et implémentez les avec du bruit.
|
||||
* Modulez une forme avec du bruit.
|
||||
* Peut-on utiliser du bruit pour donner du mouvement? Retournez au [chapitre des transformations](../08/?lan=fr). Utilisez l'exemple des translations qui déplace la croix et appliquez lui de l'*aléatoire* et du *bruit*.
|
||||
* Créeez un Pollock génératif.
|
||||
* Peut-on utiliser du bruit pour donner du mouvement ? Retournez au [chapitre des transformations](../08/?lan=fr). Utilisez l'exemple des translations qui déplace la croix et appliquez lui de l'*aléatoire* et du *bruit*.
|
||||
* Créez un Pollock génératif.
|
||||
|
||||
![Jackson Pollock - Number 14 gray (1948)](pollock.jpg)
|
||||
|
||||
@ -182,7 +182,7 @@ Au Siggraph 2001, il présenta le *bruit simplexe* qui lui permit d'apporter les
|
||||
* Un bruit bien défini, avec des dégradés continus et pouvant se calculer à moindre frais.
|
||||
* Un algorithme facile à implémenter matériellement.
|
||||
|
||||
Je sais ce que vous pensez... "mais qui est cet homme?!" Oui, son travail est fantastique! mais concrètement, comment a-t'il amélioré l'algorithme?
|
||||
Je sais ce que vous pensez... "Mais qui est cet homme ?!" Oui, son travail est fantastique ! Mais concrètement, comment a-t'il amélioré l'algorithme ?
|
||||
Bien, nous avons vu comment, pour 2 dimensions, il interpolait entre les valeurs de 4 points (les quatre coins d'un carré).
|
||||
Donc on peut imaginer que pour [trois (voir implémentation ici)](../edit.php#11/3d-noise.frag) et quatre dimensions, nous aurons besoin de 8 et 16 valeurs pour faire nos interpolations.
|
||||
En d'autres mots, pour N dimensions, il nous faudra 2 puissance N (2^N) valeurs à interpoler.
|
||||
@ -193,7 +193,7 @@ Il commença donc à remplacer la grille carrée (dont nous venons de nous servi
|
||||
|
||||
La forme [simplexe](https://fr.wikipedia.org/wiki/Simplexe) pour N dimensions est une forme à N + 1 points.
|
||||
Donc pour calculer un bruit à l'aide d'un simplexe 2D, il faut 3 points, pour un bruit simplexe 3D, il en faut 4, et pour un bruit 4D, il en faut 5.
|
||||
en regard des 4 coins du carré, des 8 points du cube et des 16 de l'hypercube, le bénéfice est considérable!
|
||||
en regard des 4 coins du carré, des 8 points du cube et des 16 de l'hypercube, le bénéfice est considérable !
|
||||
|
||||
En deux dimensions, l'interpolation se comporte comme dans un bruit *normal*, en interpolant les valeurs des coins d'un cellule.
|
||||
A la différence qu'ici, en utilisant une trame de simplexes, nous devons uniquement interpoler entre 3 valeurs.
|
||||
@ -205,8 +205,8 @@ Encore une trouvaille brillante, la trame de simplexes s'obtient en subdivisant
|
||||
|
||||
![](simplex-grid-02.png)
|
||||
|
||||
Puis, comme [Stefan Gustavson l'explique dans sa publication'](http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf):
|
||||
_"...by looking at the integer parts of the transformed coordinates (x,y) for the point we want to evaluate,
|
||||
Puis, comme [Stefan Gustavson l'explique dans sa publication](http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf) :
|
||||
_"... by looking at the integer parts of the transformed coordinates (x,y) for the point we want to evaluate,
|
||||
we can quickly determine which cell of two simplices that contains the point. By also comparing the magnitudes of x and y,
|
||||
we can determine whether the point is in the upper or the lower simplex, and traverse the correct three corner points."_
|
||||
|
||||
@ -228,34 +228,34 @@ y = x*x*(3.0-2.0*x);
|
||||
"></div>
|
||||
|
||||
Remarquez comme le début et la fin de la courbe changent vers 0 et 1. Vous pouvez [en lire plus sur le site de Ken Perlin](http://mrl.nyu.edu/~perlin/paper445.pdf).
|
||||
Ces améliorations ont conduit à cette *oeuvre d'art* algorithmique qu'est le *bruit simplexe*
|
||||
Ces améliorations ont conduit à cette *oeuvre d'art* algorithmique qu'est le *bruit simplexe*.
|
||||
|
||||
Ci-dessous vous trouverez une implémentation de cet algorithm par Ian McEwan (décrite dans [cette publication](http://webstaff.itn.liu.se/~stegu/jgt2012/article.pdf))
|
||||
qui sera peut-être un peu difficile d'accès mais qui vous permettra de réaliser qu'au fond c'est moins compliqué qu'il n'y paraît.
|
||||
|
||||
[ ![Ian McEwan of Ashima Arts - Simplex Noise](simplex-noise.png) ](../edit.php#11/2d-snoise-clear.frag)
|
||||
|
||||
Bon... assez parlé technique, il est temps d'utiliser cette ressource de façon créative:
|
||||
Bon... assez parlé technique, il est temps d'utiliser cette ressource de façon créative :
|
||||
|
||||
* Observez chaque implémentation du bruit, imaginez que ce sont des matériaux bruts, comme un bloc de marbre pour un sculpteur.
|
||||
Que pouvez-vous dire de l'impression que chacun "dégage"? plissez les yeux pour vous aider, comme quand vous regardez les nuages.
|
||||
Que voyez vous? qu'est ce que ça vous rappelle? quelles utilisations potentielles voyez vous pour chaque type de bruit? eassyez de concrétiser ces idées.
|
||||
Que pouvez-vous dire de l'impression que chacun "dégage" ? Plissez les yeux pour vous aider, comme quand vous regardez les nuages.
|
||||
Que voyez vous ? Qu'est ce que ça vous rappelle ? Quelles utilisations potentielles voyez vous pour chaque type de bruit ? Essayez de concrétiser ces idées.
|
||||
|
||||
* Créez un shader qui donne l'illusion d'un flux ; une lava-lamp, des goutes d'encre, de l'eau, etc.
|
||||
* Créez un shader qui donne l'illusion d'un flux ; une lava-lamp, des goutes d'encre, de l'eau, etc...
|
||||
|
||||
<a href="../edit.php#11/lava-lamp.frag"><canvas id="custom" class="canvas" data-fragment-url="lava-lamp.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
* Utilisez le bruit simplexe pour texturer un de vos exercices précédents.
|
||||
* Utilisez le bruit simplexe pour texturer un de vos exercices précédents :
|
||||
|
||||
<a href="../edit.php#11/iching-03.frag"><canvas id="custom" class="canvas" data-fragment-url="iching-03.frag" width="520px" height="520px"></canvas></a>
|
||||
|
||||
Dans ce chapitre, nous avons appris à contrôler le chaos et ce n'était pas chose aisée! Devenir maître du Bruit demande temps et énergie.
|
||||
Dans ce chapitre, nous avons appris à contrôler le chaos et ce n'était pas chose aisée ! Devenir **Maître du Bruit** demande temps et énergie.
|
||||
|
||||
Dans les chapitre suivants, nous verrons d'autres techniques pour perfectionner vos talents et obtenir le maximum de vos fonctions de bruit pour enrihir vos shaders.
|
||||
Dans les chapitre suivants, nous verrons d'autres techniques pour perfectionner vos talents et obtenir le maximum de vos fonctions de bruit pour enrichir vos shaders.
|
||||
D'ici là, prenez le temps de contempler la nature et les motifs qu'elle vous offre.
|
||||
La capacité d'observation est au moins aussi importante (sinon plus) que la capacité de recérer ces motifs.
|
||||
La capacité d'observation est au moins aussi importante (sinon plus) que la capacité de recréer ces motifs.
|
||||
|
||||
Sortez et profitez du reste de votre journée!
|
||||
Sortez et profitez du reste de votre journée !
|
||||
|
||||
<p style="text-align:center; font-style: italic;">"Parler à l'arbre, s'en faire un ami." Bob Ross
|
||||
</p>
|
||||
|
Loading…
Reference in New Issue
Block a user