From e3f05307b09d07557f0bb4d1c689660cbe37ab35 Mon Sep 17 00:00:00 2001 From: nicolas barradeau Date: Thu, 5 May 2016 23:00:24 +0200 Subject: [PATCH] fr: chapter 4 + typos in en --- 04/README-fr.md | 220 ++++++++++++++++++++++++++++++++++++++++++++++++ 04/README.md | 6 +- 2 files changed, 223 insertions(+), 3 deletions(-) create mode 100644 04/README-fr.md diff --git a/04/README-fr.md b/04/README-fr.md new file mode 100644 index 0000000..0d49f6f --- /dev/null +++ b/04/README-fr.md @@ -0,0 +1,220 @@ +## 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. +Ces outils fonctionnent de la même manière sur Linux Desktop, MacOS, [RaspberryPi](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. + +```html + +``` +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). + +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). +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 [RaspberryPi](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). + +```bash +glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png +``` + +**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). +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/). +Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslEditor). + +![](glslEditor-01.gif) + +Si vous préférez travailler avec [SublimeText](https://www.sublimetext.com/) vous pouvez installer le [package pour glslViewer](https://packagecontrol.io/packages/glslViewer). +Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/sublime-glslViewer). + +![](glslViewer.gif) + +**Partager**: +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. +Il est également possible d'exporter le shader pour qu'il fonctionne sur [openFrame.io](http://openframe.io/). + +![](glslEditor-00.gif) + +**Organiser**: +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. +il s'appelle [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery), pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslGallery). + +![](glslGallery.gif) + +## 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/), +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. +Vous retrouverez le code source complet sur le [repo GitHub de ce chapitre](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04). + +### 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/). +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. +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 + +
+ + + + + +``` + +### Dans **Processing** + +Initié par [Ben Fry](http://benfry.com/) et [Casey Reas](http://reas.com/) en 2001, [Processing](https://processing.org/) est un framework Java + 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. +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. +Assurez vous de copier les exemples du livre dans ce dossier et de les renommer correctement. + +```cpp +PShader shader; + +void setup() { + size(640, 360, P2D); + noStroke(); + + shader = loadShader("shader.frag"); +} + +void draw() { + shader.set("u_resolution", float(width), float(height)); + shader.set("u_mouse", float(mouseX), float(mouseY)); + shader.set("u_time", millis() / 1000.0); + shader(shader); + rect(0,0,width,height); +} +``` + +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: + +```glsl +#ifdef GL_ES +precision mediump float; +#endif + +#define PROCESSING_COLOR_SHADER + +uniform vec2 u_resolution; +uniform vec3 u_mouse; +uniform float u_time; + +void main() { + vec2 st = gl_FragCoord.st/u_resolution; + gl_FragColor = vec4(st.x,st.y,0.0,1.0); +} +``` + +Pour en savoir plus sur les shaders dans Processing, vous pouvez vous reporter à ce [tutoriel](https://processing.org/tutorials/pshader/). + +### Dans **openFrameworks** + +Chacun a sa zone de confort, pour moi, ça reste [la communité openFrameworks](http://openframeworks.cc/). +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++. +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. + +```cpp +void ofApp::draw(){ + ofShader shader; + shader.load("","shader.frag"); + + shader.begin(); + shader.setUniform1f("u_time", ofGetElapsedTimef()); + shader.setUniform2f("u_resolution", ofGetWidth(), ofGetHeight()); + ofRect(0,0,ofGetWidth(), ofGetHeight()); + shader.end(); +} +``` + +Pour plus d'informations sur les shader OpenFrameworks, vous pouvez vous reporter à cet [excellent tutoriel](http://openframeworks.cc/tutorials/graphics/shaders.html) écrit par [Joshua Noble](http://thefactoryfactory.com/). \ No newline at end of file diff --git a/04/README.md b/04/README.md index 3ffd066..30a51b0 100644 --- a/04/README.md +++ b/04/README.md @@ -8,15 +8,15 @@ As part of the construction of this book and my art practice I made an ecosystem ``` -As you can see, it just need to a ```canvas``` element with ```class="glslCanvas"``` and the url to your shader in the ```data-fragment-url```. Learn more about it [here](https://github.com/patriciogonzalezvivo/glslCanvas). +As you can see, it just needs a ```canvas``` element with ```class="glslCanvas"``` and the url to your shader in the ```data-fragment-url```. Learn more about it [here](https://github.com/patriciogonzalezvivo/glslCanvas). -If you are like me, you will probably want to run shaders directly from the console, in that case you should check out [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). This application allows you to incorporate shaders into your ```bash``` scripts or unix pipelines and use it in a similarly in a similar way that [ImageMagic](http://www.imagemagick.org/script/index.php). Also [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) is a great way to compile shaders on your [RaspberryPi](https://www.raspberrypi.org/), reason why [openFrame.io](http://openframe.io/) use it to display shader artwork. Learn more about this application [here](https://github.com/patriciogonzalezvivo/glslViewer). +If you are like me, you will probably want to run shaders directly from the console, in that case you should check out [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). This application allows you to incorporate shaders into your ```bash``` scripts or unix pipelines and use it in a similar way that [ImageMagick](http://www.imagemagick.org/script/index.php). Also [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) is a great way to compile shaders on your [RaspberryPi](https://www.raspberrypi.org/), reason why [openFrame.io](http://openframe.io/) use it to display shader artwork. Learn more about this application [here](https://github.com/patriciogonzalezvivo/glslViewer). ```bash glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png ``` -**Create**: in order to illuminate the experience of coding shaders I made an online editor call [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). This editor is embebed on the book's life examples, it brings a series of handy widgets to make more tangible the abstract experience of working with glsl code. You can also run it as a standalone web application from [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Learn more about it [here](https://github.com/patriciogonzalezvivo/glslEditor). +**Create**: in order to illuminate the experience of coding shaders I made an online editor called [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). This editor is embebed on the book's life examples, it brings a series of handy widgets to make more tangible the abstract experience of working with glsl code. You can also run it as a standalone web application from [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Learn more about it [here](https://github.com/patriciogonzalezvivo/glslEditor). ![](glslEditor-01.gif)