Archives/thebookofshaders
2
0
Fork 0
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders synced 2024-11-03 23:15:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #169 from yvan-sraka/fr-04

Browse Source 
Corrects some mistakes in the French translation of Chapter 04
This commit is contained in:
Patricio Gonzalez Vivo 2017-08-26 13:22:36 +00:00 committed by GitHub
commit 410e4fd089
1 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
04/README-fr.md
View File

@ -1,18 +1,19 @@
## exécuter vos shaders ## Exécuter vos shaders
Pour les besoins de ce livre comme pour ma pratique artistique, j'ai créé un écosystème d'outils permettant de créer, d'afficher, de partager et d'organiser mes shaders. Pour les besoins de ce livre comme pour ma pratique artistique, j'ai créé un écosystème d'outils permettant de créer, d'afficher, de partager et d'organiser mes shaders.
Ces outils fonctionnent de la même manière sur Linux Desktop, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) et dans les navigateurs sans avoir besoin d'altérer le code. Ces outils fonctionnent de la même manière sur Linux Desktop, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) et dans les navigateurs sans avoir besoin d'altérer le code.
**Affichage**: tous les exemples de ce livre sont affichés dans la page grâce à [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) qui facilite grandement la fabrication et l'affichage de shaders autonomes. **Affichage** : tous les exemples de ce livre sont affichés dans la page grâce à [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) qui facilite grandement la fabrication et l'affichage de shaders autonomes.
```html ```html
<canvas class="glslCanvas" data-fragment-url=“yourShader.frag" data-textures=“yourInputImage.png” width="500" height="500"></canvas> <canvas class="glslCanvas" data-fragment-url=“yourShader.frag" data-textures=“yourInputImage.png” width="500" height="500"></canvas>
``` ```
Comme vous pouvez le voir, il suffit de créer un élément ```canvas``` auquel on applique la classe ```class="glslCanvas"``` et de lui passer l'url du fragment shader dans ```data-fragment-url```.
Comme vous pouvez le voir, il suffit de créer un élément `canvas` auquel on applique la classe `class="glslCanvas"` et de lui passer l'url du fragment shader dans `data-fragment-url`.
Pour en savoir plus, [vous pouvez lire ceci](https://github.com/patriciogonzalezvivo/glslCanvas). Pour en savoir plus, [vous pouvez lire ceci](https://github.com/patriciogonzalezvivo/glslCanvas).
Si vous êtes comme moi, vous aurez sans doute envie de lancer vos shaders en lignes de commandes, dans ce cas vous devriez regarder [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Si vous êtes comme moi, vous aurez sans doute envie de lancer vos shaders en lignes de commandes, dans ce cas vous devriez jeter un oeil à [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer).
Cette application permet d'incorporer un shader dans un script ```bash``` ou un pipeline Unix et de l'utiliser comme [ImageMagick](http://www.imagemagick.org/script/index.php). Cette application permet d'incorporer un shader dans un script `bash` ou un pipeline Unix et de l'utiliser comme [ImageMagick](http://www.imagemagick.org/script/index.php).
[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) est aussi un bon moyen de compiler vos shaders sur un [Raspberry Pi](https://www.raspberrypi.org/) et c'est la raison pour laquelle [openFrame.io](http://openframe.io/) l'utilise pour afficher les oeuvres. [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) est aussi un bon moyen de compiler vos shaders sur un [Raspberry Pi](https://www.raspberrypi.org/) et c'est la raison pour laquelle [openFrame.io](http://openframe.io/) l'utilise pour afficher les oeuvres.
Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslViewer). Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslViewer).
@ -21,10 +22,9 @@ Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslV
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
``` ```
**Création**: **Création** : pour améliorer l'expérience de programmation des shaders, j'ai créé un éditeur disponible ici : [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor).
Pour améliorer l'expérience de programmation des shaders, j'ai créé un éditeur disponible ici [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor).
L'éditeur est embarqué dans les exemples de ce livre, il met à disposition une série de petits widgets qui rendent l'édition du code GLSL plus tangible et moins abstraite. L'éditeur est embarqué dans les exemples de ce livre, il met à disposition une série de petits widgets qui rendent l'édition du code GLSL plus tangible et moins abstraite.
Vous pouvez également le lancer dans une fenêtre de navigateur à cette adresse [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Vous pouvez également le lancer dans une fenêtre de navigateur à cette adresse [editor.thebookofshaders.com](http://editor.thebookofshaders.com/).
Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslEditor). Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslEditor).
![](glslEditor-01.gif) ![](glslEditor-01.gif)
@ -34,34 +34,32 @@ Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/subli
![](glslViewer.gif) ![](glslViewer.gif)
**Partager**: **Partager** : l'éditeur en ligne ([editor.thebookofshaders.com](http://editor.thebookofshaders.com/)) vous permet de partager vos shaders !
l'éditeur en ligne([editor.thebookofshaders.com/](http://editor.thebookofshaders.com/)) vous permet de partager vos shaders!
La version autonome comme la version en ligne de l'éditeur permettent de sauver votre shader en ligne et d'obtenir une url unique. La version autonome comme la version en ligne de l'éditeur permettent de sauver votre shader en ligne et d'obtenir une url unique.
Il est également possible d'exporter le shader pour qu'il fonctionne sur [openFrame.io](http://openframe.io/). Il est également possible d'exporter le shader pour qu'il fonctionne sur [openFrame.io](http://openframe.io/).
![](glslEditor-00.gif) ![](glslEditor-00.gif)
**Organiser**: **Organiser** : pouvoir partager ses shaders est une bonne chose, en plus de l'export vers [openFrame.io](http://openframe.io/),
Pouvoir partager ses shaders est une bonne chose, en plus de l'export vers [openFrame.io](http://openframe.io/) j'ai fait un outil permettant d'organiser vos shaders dans une galerie et d'intégrer cette galerie dans n'importe quel site.
j'ai fait un outil permettant d'organiser vos shaders dans une galerie et d'intégrer cette galerie dans n'importe quel site. Il s'appelle [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery), pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslGallery).
il s'appelle [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery), pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslGallery).
![](glslGallery.gif) ![](glslGallery.gif)
## Lancer vos shaders depuis votre plateforme favorite ## Lancer vos shaders depuis votre plateforme favorite
Si vous avez déjà programmé à l'aide de frameworks/APIS comme: [Processing](https://processing.org/), [Three.js](http://threejs.org/) ou [OpenFrameworks](http://openframeworks.cc/), Si vous avez déjà programmé à l'aide de frameworks/APIs comme : [Processing](https://processing.org/), [Three.js](http://threejs.org/) ou [OpenFrameworks](http://openframeworks.cc/),
vous êtes sans doute impatients de tester vos shaders dans ces environnements. vous êtes sans doute impatients de tester vos shaders dans ces environnements.
Les exemples suivants montrent comment intégrer les shaders sur ces plateformes en conservant les conventions de nommage que nous utiliserons dans ce livre. Les exemples suivants montrent comment intégrer les shaders sur ces plateformes en conservant les conventions de nommage que nous utiliserons dans ce livre.
Vous retrouverez le code source complet sur le [repo GitHub de ce chapitre](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04). Vous retrouverez le code source complet sur le [dépôt GitHub de ce chapitre](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04).
### Dans **THREE.js** ### Dans **Three.js**
L'humble et brilliant Ricardo Cabello (alias [MrDoob](https://twitter.com/mrdoob)) a développé avec d'autres [contributeurs](https://github.com/mrdoob/three.js/graphs/contributors), l'un des frameworks WebGL les plus utilisés: [Three.js](http://threejs.org/). L'humble et brilliant Ricardo Cabello (alias [MrDoob](https://twitter.com/mrdoob)) a développé avec d'autres [contributeurs](https://github.com/mrdoob/three.js/graphs/contributors), l'un des frameworks WebGL les plus utilisés : [Three.js](http://threejs.org/).
Il existe de nombreuses ressources pour apprendre à se servir de ce framework JavaScript. Il existe de nombreuses ressources pour apprendre à se servir de ce framework JavaScript.
L'exemple ci-dessous, vous donne le code nécessaire pour utiliser un shader dans THREE.js. L'exemple ci-dessous, vous donne le code nécessaire pour utiliser un shader dans Three.js.
Notez bien la balise de script appelée ```id="fragmentShader"```, c'est là qu'il faudra coller le code que vous trouverez dans ce livre. Notez bien la balise de script appelée `id="fragmentShader"`, c'est là qu'il faudra coller le code que vous trouverez dans ce livre.
```html ```html
<body> <body>
@ -153,7 +151,7 @@ Initié par [Ben Fry](http://benfry.com/) et [Casey Reas](http://reas.com/) en 2
extraordinairement simple et très puissant qui vous aidera à faire vos premiers pas dans le code créatif (ça a été mon cas). extraordinairement simple et très puissant qui vous aidera à faire vos premiers pas dans le code créatif (ça a été mon cas).
[Andres Colubri](https://codeanticode.wordpress.com/) a contribué des mises à jour importantes concernant OpenGL et la gestion vidéo dans Processing. [Andres Colubri](https://codeanticode.wordpress.com/) a contribué des mises à jour importantes concernant OpenGL et la gestion vidéo dans Processing.
Ces ajouts simplifient énormément l'intégration des shaders GLSL dans l'environnement de développement. Ces ajouts simplifient énormément l'intégration des shaders GLSL dans l'environnement de développement.
Processing va chercher le shader appelé ```"shader.frag"``` dans le dossier ```data``` du sketch. Processing va chercher le shader appelé `"shader.frag"` dans le dossier `data` du sketch.
Assurez vous de copier les exemples du livre dans ce dossier et de les renommer correctement. Assurez vous de copier les exemples du livre dans ce dossier et de les renommer correctement.
```cpp ```cpp
@ -175,8 +173,8 @@ void draw() {
} }
``` ```
Pour que le shader fonctionne dans les versions antérieures à Processing 2.1, il faut ajouter la ligne suivante: ```#define PROCESSING_COLOR_SHADER``` au début du shader. Pour que le shader fonctionne dans les versions antérieures à Processing 2.1, il faut ajouter la ligne suivante : `#define PROCESSING_COLOR_SHADER` au début du shader.
il devrait ressembler à ça: Il devrait ressembler à cela :
```glsl ```glsl
#ifdef GL_ES #ifdef GL_ES
@ -199,10 +197,10 @@ Pour en savoir plus sur les shaders dans Processing, vous pouvez vous reporter
### Dans **openFrameworks** ### Dans **openFrameworks**
Chacun a sa zone de confort, pour moi, ça reste [la communité openFrameworks](http://openframeworks.cc/). Chacun a sa zone de confort, pour moi, cela reste [la communité openFrameworks](http://openframeworks.cc/).
Ce framework C++ intègre OpenGL et d'autres librairies C++ open source. Ce framework C++ intègre OpenGL et d'autres librairies C++ open source.
C'est très proche de Processing à ceci près que c'est un langage compilé et qu'il vaut donc mieux être habitué aux compilateurs C++. Il est très proche de Processing à ceci près que c'est un langage compilé et qu'il vaut donc mieux être habitué aux compilateurs C++.
Comme Processing, openFrameworks va chercher le fichier du shader dans la dossier data, donc n'oubliez pas de créer un fichier ```.frag```, d'y coller le contenu du shader et de spécifier le nom de ce fichier dans votre programme OF. Comme Processing, openFrameworks va chercher le fichier du shader dans le dossier `data`, donc n'oubliez pas de créer un fichier `.frag`, d'y coller le contenu du shader et de spécifier le nom de ce fichier dans votre programme OF.
```cpp ```cpp
void ofApp::draw(){ void ofApp::draw(){