From 371c46711ad21b80acde5a4639e14cb8f5f771e2 Mon Sep 17 00:00:00 2001 From: tornote Date: Thu, 31 Dec 2015 23:20:59 +0800 Subject: [PATCH 1/2] add ch chapter 03,04 --- 03/README-ch.md | 61 +++++++++++++++++++ 04/README-ch.md | 156 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+) create mode 100644 03/README-ch.md create mode 100644 04/README-ch.md diff --git a/03/README-ch.md b/03/README-ch.md new file mode 100644 index 0000000..9870e06 --- /dev/null +++ b/03/README-ch.md @@ -0,0 +1,61 @@ +## Uniforms + +现在我们知道了 GPU 如何处理并行线程，每个线程负责给完整图像的一部分配置颜色。尽管每个线程和其他线程之间不能有数据交换，但我们能从 CPU 给每个线程输入数据。因为显卡的架构，所有线程的输入值必须**统一**（uniform），而且必须设为**只读**。也就是说，每条线程接收相同的数据，并且是不可改变的数据。 + +这些输入值叫做 ```uniform``` （统一值），它们的数据类型通常为：```float```, ```vec2```, ```vec3```, ```vec4```, ```mat2```, ```mat3```, ```mat4```, ```sampler2D``` and ```samplerCube```。uniform 值需要数值类型前后一致。且在 shader 的开头，在设定精度之后，就对其进行定义。 + +```glsl +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; // 画布尺寸（宽，高） +uniform vec2 u_mouse; // 鼠标位置（在屏幕上哪个像素） +uniform float u_time; // 时间（加载后的秒数） +``` + +你可以把 uniforms 想象成联通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪，但是在这一系列的例子中我一直有用到：```u_time``` （时间）, ```u_resolution``` （画布尺寸）和 ```u_mouse``` （鼠标位置）。按业界传统应在 uniform 值的名字前加 ```u_``` ，这样一看即知是 uniform。尽管如此你也还会见到各种各样的名字。比如[ShaderToy.com](https://www.shadertoy.com/)就用了如下的名字： + +```glsl +uniform vec3 iResolution; // 视口分辨率（以像素计） +uniform vec4 iMouse; // 鼠标坐标 xy： 当前位置, zw： 点击位置 +uniform float iGlobalTime; // shader 运行时间（以秒计） +``` + +好了说的足够多了，我们来看看实际操作中的 uniform 吧。在下面的代码中我们使用 ```u_time``` 加上一个 sin 函数，来展示图中红色的动态变化。 + +
+ +GLSL 还有更多惊喜。GPU 的硬件加速支持我们使用角度，三角函数和指数函数。这里有一些这些函数的介绍：[```sin()```](../glossary/?search=sin), [```cos()```](../glossary/?search=cos), [```tan()```](../glossary/?search=tan), [```asin()```](../glossary/?search=asin), [```acos()```](../glossary/?search=acos), [```atan()```](../glossary/?search=atan), [```pow()```](../glossary/?search=pow), [```exp()```](../glossary/?search=exp), [```log()```](../glossary/?search=log), [```sqrt()```](../glossary/?search=sqrt), [```abs()```](../glossary/?search=abs), [```sign()```](../glossary/?search=sign), [```floor()```](../glossary/?search=floor), [```ceil()```](../glossary/?search=ceil), [```fract()```](../glossary/?search=fract), [```mod()```](../glossary/?search=mod), [```min()```](../glossary/?search=min), [```max()```](../glossary/?search=max) 和 [```clamp()```](../glossary/?search=clamp)。 + +现在又到你来玩的时候了。 + +* 降低颜色变化的速率，直到肉眼都看不出来。 + +* 加速变化，直到颜色静止不动。 + +* 玩一玩 RGB 三个通道，分别给三个颜色不同的变化速度，看看能不能做出有趣的效果。 + +## gl_FragCoord + +就像 GLSL 有个默认输出值 ```vec4 gl_FragColor``` 一样，它也有一个默认输入值（ ```vec4 gl_FragCoord``` ）。``` gl_FragCoord```存储了活动线程正在处理的**像素**或**屏幕片段**的坐标。有了它我们就知道了屏幕上的哪一个线程正在运转。为什么我们不叫 ``` gl_FragCoord``` uniform （统一值）呢？因为每个像素的坐标都不同，所以我们把它叫做**varying**（变化值）。 + +
+ +上述代码中我们用 ```gl_FragCoord.xy``` 除以 ```u_resolution```，对坐标进行了**规范化**。这样做是为了使所有的值落在 ```0.0``` 到 ```1.0``` 之间，这样就可以轻松把 X 或 Y 的值映射到红色或者绿色通道。 + +在 shader 的领域我们没有太多要 debug 的，更多地是试着给变量赋一些很炫的颜色，试图做出一些效果。有时你会觉得用 GLSL 编程就像是把一搜船放到了瓶子里。它同样地困难、美丽而令人满足。 + +![](08.png) + +现在我们来检验一下我们对上面代码的理解程度。 + +* 你明白 ```(0.0,0.0)``` 坐标在画布上的哪里吗？ + +* 那 ```(1.0,0.0)```, ```(0.0,1.0)```, ```(0.5,0.5)``` 和 ```(1.0,1.0)``` 呢？ + +* 你知道如何用**未**规范化（normalized）的 ```u_mouse``` 吗？你可以用它来移动颜色吗？ + +* 你可以用 ```u_time``` 和 ```u_mouse``` 来改变颜色的图案吗？不妨琢磨一些有趣的途径。 + +经过这些小练习后，你可能会好奇还能用 shader 大法做什么。接下来的章节你会知道如何把你的 shader 和 three.js，Processing，和 openFrameworks 结合起来。 \ No newline at end of file diff --git a/04/README-ch.md b/04/README-ch.md new file mode 100644 index 0000000..567453d --- /dev/null +++ b/04/README-ch.md @@ -0,0 +1,156 @@ +## 运行你的 shader + +现在你可能跃跃欲试，想在你熟悉的平台上小试牛刀了。接下来会有一些比较流行的平台的示例代码，展示如何在这些平台上配置 shader。（在这个 [github 仓库](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) 中有本章的三种平台的示例代码） + +**注释 1**：如果你不想用这些平台来运行 shader，且你想在浏览器外使用 shader，你可以下载[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)。这个 MacOS +树莓派程序直接在终端运行，并且是为本书的例子量身打造的。 + +**注释2**：如果你想用 WebGL 显示 shader，并不关心其他平台，你可以用[glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) 。这个 web 工具本来是为本书设计的，但是太好用了，所以我常常用在其他项目中。 + +### **Three.js** + +为人谦逊而非常有才华的 Ricardo Cabello (也就是 [MrDoob](https://twitter.com/mrdoob) )和许多[贡献者](https://github.com/mrdoob/three.js/graphs/contributors) 一起搭了可能是 WebGL 最知名的平台，[Three.js](http://threejs.org/)。你可以找到无数程序示例，教程，书籍，教你如何用这个 JavaScript 库做出酷炫的 3D 图像。 + +下面是一个你需要的例子，教你用 three.js 玩转 shader。注意 ```id="fragmentShader"```脚本，你要把下面的代码拷到里面。 + +下面是一个 HTML 和 JS 的示例， + +```html + +
+ + + + + +``` + +### **Processing** + +2001年由[Ben Fry](http://benfry.com/) 和 [Casey Reas](http://reas.com/) 创建，[Processing](https://processing.org/)是一个极其简约而强大的环境，非常适合初尝代码的人（至少对于我来是这样）。关于 OpenGL 和视频，[Andres Colubri](https://codeanticode.wordpress.com/)为 Processing 平台做了很重要的更新，使得环境非常友好，玩 GLSL shader 比起以前大大容易了。Processing 会在你的 sketch 的 ```data``` 文件夹搜索名为 ```"shader.frag"``` 的文件。记得把这里的示例代码拷到你的文件夹里然后重命名 shader。 + +```processing +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); +} +``` + +在 2.1 版之前的版本运行 shader，你需要在你的 shader 文件开头添加以下代码： + ```#define PROCESSING_COLOR_SHADER```。所以它应该看起来是这样： +```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); +} +``` + +更多 Processing 的 shader 教程戳 [tutorial](https://processing.org/tutorials/pshader/)。 + +### **openFrameworks** + +每个人都有自己的舒适区，我的则是[openFrameworks community](http://openframeworks.cc/)。这个 C++ 框架打包了 OpenGL 和其他开源 C++ 库。在很多方面它和 Processing 非常像，但是明显和 C++ 编译器打交道一定比较麻烦。和 Processing 很像地，openFrameworks 会在你的 data 文件夹里寻找 shader 文件，所以不要忘记把你的后缀 ```.frag``` 的文件拷进去，加载的时候记得改名。 + +```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(); +} +``` + +关于 shader 在 openFrameworks 的更多信息请参考这篇[excellent tutorial](http://openframeworks.cc/tutorials/graphics/shaders.html)，作者是 [Joshua Noble](http://thefactoryfactory.com/)。 From b3d7c304ac7b2488b8cd8c02eecc426a03bfdcae Mon Sep 17 00:00:00 2001 From: tornote Date: Thu, 31 Dec 2015 23:26:30 +0800 Subject: [PATCH 2/2] fix typo --- 03/README-ch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/03/README-ch.md b/03/README-ch.md index 9870e06..0aee02f 100644 --- a/03/README-ch.md +++ b/03/README-ch.md @@ -14,7 +14,7 @@ uniform vec2 u_mouse; // 鼠标位置（在屏幕上哪个像素） uniform float u_time; // 时间（加载后的秒数） ``` -你可以把 uniforms 想象成联通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪，但是在这一系列的例子中我一直有用到：```u_time``` （时间）, ```u_resolution``` （画布尺寸）和 ```u_mouse``` （鼠标位置）。按业界传统应在 uniform 值的名字前加 ```u_``` ，这样一看即知是 uniform。尽管如此你也还会见到各种各样的名字。比如[ShaderToy.com](https://www.shadertoy.com/)就用了如下的名字： +你可以把 uniforms 想象成连通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪，但是在这一系列的例子中我一直有用到：```u_time``` （时间）, ```u_resolution``` （画布尺寸）和 ```u_mouse``` （鼠标位置）。按业界传统应在 uniform 值的名字前加 ```u_``` ，这样一看即知是 uniform。尽管如此你也还会见到各种各样的名字。比如[ShaderToy.com](https://www.shadertoy.com/)就用了如下的名字： ```glsl uniform vec3 iResolution; // 视口分辨率（以像素计）