Skip to content

Commit

Permalink
Remove trailing whitespaces
Browse files Browse the repository at this point in the history
  • Loading branch information
yvan-sraka committed Aug 23, 2017
1 parent 107a4ea commit 2410899
Show file tree
Hide file tree
Showing 378 changed files with 1,171 additions and 1,212 deletions.
2 changes: 1 addition & 1 deletion 00/README-ch.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,4 @@ Fragment shaders(片段着色器)可以让你控制像素在屏幕上的快

* [做一个PDF版的书用于打印](https://thebookofshaders.com/appendix/)

*[github仓库](https://github.com/patriciogonzalezvivo/thebookofshaders)来帮助解决问题和分享代码
*[github仓库](https://github.com/patriciogonzalezvivo/thebookofshaders)来帮助解决问题和分享代码
7 changes: 3 additions & 4 deletions 00/README-de.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>

Die oben abgebildeten Grafiken wurden auf ganz unterschiedliche Weise erstellt. Die linke Abbildung stammt aus den Händen des Malers Van Gogh, der die Farben in stundenlanger Arbeit Schicht für Schicht mit einem Pinsel aufgetragen hat. Die rechte Abbildung wurde dagegen innerhalb von Sekundenbruchteilen mit Hilfe von vier Punktmatrizen erzeugt: eine für Cyan, eine für Magenta, eine für Gelb und eine für Schwarz. Der entscheidende Unterschied: Das zweite Bild wurde nicht seriell erstellt, d.h. Strich für Strich, sondern parallel, alle Punkte zur gleichen Zeit.
Die oben abgebildeten Grafiken wurden auf ganz unterschiedliche Weise erstellt. Die linke Abbildung stammt aus den Händen des Malers Van Gogh, der die Farben in stundenlanger Arbeit Schicht für Schicht mit einem Pinsel aufgetragen hat. Die rechte Abbildung wurde dagegen innerhalb von Sekundenbruchteilen mit Hilfe von vier Punktmatrizen erzeugt: eine für Cyan, eine für Magenta, eine für Gelb und eine für Schwarz. Der entscheidende Unterschied: Das zweite Bild wurde nicht seriell erstellt, d.h. Strich für Strich, sondern parallel, alle Punkte zur gleichen Zeit.

Dieses Buch handelt von einer Computertechnik mit Namen *Fragment Shader*, die die digitale Erzeugung von Bildern revolutioniert und zu neuen Höhen geführt hat. Man kann ihre Erfindung ein wenig vergleichen mit dem Schritt von der manuellen Vervielfältigung einzelner Grafiken und Dokumente hin zur massenhaften Replikation durch Gutenbergs Druckerpresse.
Dieses Buch handelt von einer Computertechnik mit Namen *Fragment Shader*, die die digitale Erzeugung von Bildern revolutioniert und zu neuen Höhen geführt hat. Man kann ihre Erfindung ein wenig vergleichen mit dem Schritt von der manuellen Vervielfältigung einzelner Grafiken und Dokumente hin zur massenhaften Replikation durch Gutenbergs Druckerpresse.

![Gutenbergs Druckerpresse](gutenpress.jpg)

Expand All @@ -18,7 +18,7 @@ Die folgenden Kapitel wollen Dir zeigen, wie unglaublich schnell und leistungsf

Dieses Buch wendet sich an kreative Programmierer, Spieleentwickler und Ingenieure, die bereits über eine gewisse Programmiererfahrung, sowie grundlegende Kenntnisse aus den Bereichen der linearen Algebra und der Trigonometrie verfügen. (Falls Du erst noch Programmieren lernen möchtest, empfehle ich Dir, mit [Processing](https://processing.org/) zu beginnen und anschließend mit diesem Buch fortzufahren.)

Die folgenden Kapitel werden Dir zeigen, wie Du Shader in Deinen Projekten einsetzen kannst, um die Qualität und die Geschwindigkeit bei der Erzeugung von Grafiken zu verbessern. GLSL-Shader (GLSL steht für „OpenGL Shading Language“) lassen sich auf einer Vielzahl von Hardwareplattformen und Betriebssystemen kompilieren und ausführen. Dadurch kannst Du das erlernte Wissen in jeder Umgebung einsetzen, die OpenGL, OpenGL ES oder WebGL unterstützt.
Die folgenden Kapitel werden Dir zeigen, wie Du Shader in Deinen Projekten einsetzen kannst, um die Qualität und die Geschwindigkeit bei der Erzeugung von Grafiken zu verbessern. GLSL-Shader (GLSL steht für „OpenGL Shading Language“) lassen sich auf einer Vielzahl von Hardwareplattformen und Betriebssystemen kompilieren und ausführen. Dadurch kannst Du das erlernte Wissen in jeder Umgebung einsetzen, die OpenGL, OpenGL ES oder WebGL unterstützt.

In anderen Worten, Du kannst Dein Know-how u.a. beim Malen mit [Processing](https://processing.org/), bei Anwendungen für [openFrameworks](http://openframeworks.cc/), interaktiven Installationen mit [Cinder](http://libcinder.org/), Webseiten mit [Three.js](http://threejs.org/) oder bei Spielen für iOS/Android nutzen.

Expand Down Expand Up @@ -47,4 +47,3 @@ Alternativ kannst Du auch:
- [Eine PDF-Datei mit diesem Buch erzeugen, um es auszudrucken](https://thebookofshaders.com/appendix/?lan=de)

- Die [Online-Ablage dieses Buches](https://github.com/patriciogonzalezvivo/thebookofshaders) bei GitHub nutzen, um Fehler zu melden und Programmcode mit anderen Lesern zu teilen.

3 changes: 1 addition & 2 deletions 00/README-fr.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ ce que ce livre n'est pas:
* ce *n'est pas* livre sur l'openGL ou le webGL. OpenGL/webGL dépasse de loin le GLSL ou les shaders. si vous voulez en savoir plus, les liens suivants vous aideront [OpenGL Introduction](https://open.gl/introduction), [the 8th edition of the OpenGL Programming Guide](http://www.amazon.com/OpenGL-Programming-Guide-Official-Learning/dp/0321773039/ref=sr_1_1?s=books&ie=UTF8&qid=1424007417&sr=1-1&keywords=open+gl+programming+guide) (alias "the red book") ou [WebGL: Up and Running](http://www.amazon.com/WebGL-Up-Running-Tony-Parisi/dp/144932357X/ref=sr_1_4?s=books&ie=UTF8&qid=1425147254&sr=1-4&keywords=webgl)

* ce *n'est pas* un livre de maths. Même si le livre contient un certain nombre de notions et d'algorithmes nécessitant des connaissances en algèbre et en trigonométrie, nous ne rentrerons pas dans le détail. Pour toute question relative aux maths, vous pouvez choisir un de ces livres et le garder près de vous : [3rd Edition of Mathematics for 3D Game Programming and computer Graphics](http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869/ref=sr_1_1?ie=UTF8&qid=1424007839&sr=8-1&keywords=mathematics+for+games) ou [2nd Edition of Essential Mathematics for Games and Interactive Applications](http://www.amazon.com/Essential-Mathematics-Games-Interactive-Applications/dp/0123742978/ref=sr_1_1?ie=UTF8&qid=1424007889&sr=8-1&keywords=essentials+mathematics+for+developers).


## bien démarrer

Expand All @@ -57,4 +57,3 @@ Cela étant et selon ce que vous voulez faire de ce livre, vous pouvez :
- [créer un PDF du livre pour l'imprimer](https://thebookofshaders.com/appendix/)

- vous servir du [repo online](https://github.com/patriciogonzalezvivo/thebookofshaders) pour contribuer ou nous aider à débugger.

1 change: 0 additions & 1 deletion 00/README-it.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,3 @@ In alternativa, in base a ciò di cui avete bisogno, è possibile:
- [Fare un PDF del libro da stampare](https://thebookofshaders.com/appendix/)

- Utilizzare la [repository on-line](https://github.com/patriciogonzalezvivo/thebookofshaders) per aiutare a risolvere i problemi e per condividere il codice.

1 change: 0 additions & 1 deletion 00/README-kr.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,3 @@ Fragment shader는 매우 빠른 속도로 스크린에 렌더되는 픽셀들
- [이책의 PDF버젼 만들기](https://thebookofshaders.com/appendix/)

- 또는 [온라인 리포](https://github.com/patriciogonzalezvivo/thebookofshaders) 이슈들을 답하거나, 올려주세요.

3 changes: 1 addition & 2 deletions 00/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>

The images above were made in different ways. The first one was made by Van Gogh's hand applying layer over layer of paint. It took him hours. The second was produced in seconds by the combination of four matrices of pixels: one for cyan, one for magenta, one for yellow and one for black. The key difference is that the second image is produced in a non-serial way (that means not step-by-step, but all at the same time).
The images above were made in different ways. The first one was made by Van Gogh's hand applying layer over layer of paint. It took him hours. The second was produced in seconds by the combination of four matrices of pixels: one for cyan, one for magenta, one for yellow and one for black. The key difference is that the second image is produced in a non-serial way (that means not step-by-step, but all at the same time).

This book is about the revolutionary computational technique, *fragment shaders*, that is taking digitally generated images to the next level. You can think of it as the equivalent of Gutenberg's press for graphics.

Expand Down Expand Up @@ -45,4 +45,3 @@ Alternatively, based on what you have or what you need from this book you can:
- [Make a PDF of the book to print](https://thebookofshaders.com/appendix/)

- Use the [on-line repository](https://github.com/patriciogonzalezvivo/thebookofshaders) to help resolve issues and share code.

10 changes: 5 additions & 5 deletions 00/cmyk-halftone.frag
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ precision mediump float;
#define SST 0.888
#define SSQ 0.288

uniform sampler2D u_tex0;
uniform sampler2D u_tex0;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
Expand Down Expand Up @@ -72,7 +72,7 @@ void main() {
mat2 mm = rotm(R+D2R(75.0));
mat2 my = rotm(R);
mat2 mk = rotm(R+D2R(45.0));

float k = halftone(fc,mk).a;
vec4 c = cmyki2rgb(ss(vec4(
halftone(fc,mc).r,
Expand All @@ -86,6 +86,6 @@ void main() {
st = vec2(st.x,st.y*0.5)*2.0;
gl_FragColor = texture2D(u_tex0,st);
}
}


}
18 changes: 9 additions & 9 deletions 00/halftone.frag
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
precision mediump float;
#endif

uniform sampler2D u_tex0;
uniform sampler2D u_tex0;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

Expand Down Expand Up @@ -30,7 +30,7 @@ void main () {
if (st.x > 0.5) {
// Halftone dot matrix shader
// @author Tomek Augustyn 2010

// Ported from my old PixelBender experiment
// https://github.com/og2t/HiSlope/blob/master/src/hislope/pbk/fx/halftone/Halftone.pbk
float ratio = u_resolution.y / u_resolution.x;
Expand All @@ -39,25 +39,25 @@ void main () {
vec2 srcCoord = vec2(st.x-0.5, st.y*0.5)*2.0;
vec2 rotationCenter = vec2(0.5);
vec2 shift = dstCoord - rotationCenter;

float dotSize = 5.0;
float angle = 45.0;

float rasterPattern = added(shift, sind(angle), cosd(angle), rotationCenter, PI / dotSize * 680.0);
vec4 srcPixel = texture2D(u_tex0, srcCoord);

float avg = 0.2125 * srcPixel.r + 0.7154 * srcPixel.g + 0.0721 * srcPixel.b;
float gray = (rasterPattern * threshold + avg - threshold) / (1.0 - threshold);

// uncomment to see how the raster pattern looks
// uncomment to see how the raster pattern looks
// gray = rasterPattern;

gl_FragColor = vec4(gray, gray, gray, 1.0);
} else {
st = vec2(st.x,st.y*0.5)*2.0;
gl_FragColor = texture2D(u_tex0, st);
}





}
4 changes: 2 additions & 2 deletions 00/index.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?php
<?php

$path = "..";
$subtitle = ": about this book";
Expand Down Expand Up @@ -28,5 +28,5 @@
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
</ul>';

include($path."/footer.php");
include($path."/footer.php");
?>
4 changes: 2 additions & 2 deletions 01/README-ch.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Shaders 也是一系列的指令,但是这些指令会对屏幕上的每个像

![GPU](04.jpeg)

设想一堆小型微处理器排成一个平面的画面,假设每个像素的数据是乒乓球。14400000个乒乓球可以在一秒内阻塞几乎任何管道。但是一面800x600的管道墙,每秒接收30波480000个像素的信息就可以流畅完成。这在更高的分辨率下也是成立的 —— 并行的处理器越多,可以处理的数据流就越大。
设想一堆小型微处理器排成一个平面的画面,假设每个像素的数据是乒乓球。14400000个乒乓球可以在一秒内阻塞几乎任何管道。但是一面800x600的管道墙,每秒接收30波480000个像素的信息就可以流畅完成。这在更高的分辨率下也是成立的 —— 并行的处理器越多,可以处理的数据流就越大。

另一个 GPU 的魔法是特殊数学函数可通过硬件加速。非常复杂的数学操作可以直接被微芯片解决,而无须通过软件。这就表示可以有更快的三角和矩阵运算 —— 和电流一样快。

Expand All @@ -45,4 +45,4 @@ GLSL 代表 openGL Shading Language,openGL 着色语言,这是你在接下

并且 GPU 会让所有并行的微处理器(管道们)一直处在忙碌状态;只要它们一有空闲就会接到新的信息。一个线程不可能知道它前一刻在做什么。它可能是在画操作系统界面上的一个按钮,然后渲染了游戏中的一部分天空,然后显示了一封 email 中的一些文字。每个线程不仅是“盲视”的,而且还是“无记忆”的。同时,它要求编写一个通用的规则,依据像素的不同位置依次输出不同的结果。这种抽象性,和盲视、无记忆的限制使得 shaders 在程序员新手中不是很受欢迎。

但是不要担心!在接下来的章节中,我们会一步一步地,由浅入深地学习着色语言。如果你是在用一个靠谱的浏览器阅读这个教程,你会喜欢边读边玩书中的示例的。好了,不要再浪费时间了,赶快去玩起来吧! 点击 **Next >>** 开启 shader 之旅!
但是不要担心!在接下来的章节中,我们会一步一步地,由浅入深地学习着色语言。如果你是在用一个靠谱的浏览器阅读这个教程,你会喜欢边读边玩书中的示例的。好了,不要再浪费时间了,赶快去玩起来吧! 点击 **Next >>** 开启 shader 之旅!
Loading

0 comments on commit 2410899

Please sign in to comment.