Archives/thebookofshaders
2
0
Fork 0
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders synced 2024-11-09 19:10:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

proofread ch07

Browse Source
This commit is contained in:
tornote 2016-04-04 00:04:53 +08:00
parent cf76aa22ab
commit d2caf1cb1d
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
07/README-ch.md
View File

@ -1,21 +1,21 @@
## 图形/形状
##### 图形和形状在这里会是有一些习惯上的区别。第二版在校正吧！！！
## 形状
![Alice Hubbard, Providence, United States, ca. 1892. Photo: Zindman/Freemont.](froebel.jpg)
终于！我们一直学习的技能就等着这一刻！你已经学习过GLSL的大部分基础，类型和函数。你一遍又一遍的联系你的造型方程。是时候把他们整合起来了。你就是为了这个挑战而来的！在这一章里，你会学习到如何以一种并行处理方式来画简单的图形。
终于！我们一直学习的技能就等着这一刻！你已经学习过GLSL的大部分基础，类型和函数。你一遍又一遍的练习你的造型方程。是时候把他们整合起来了。你就是为了这个挑战而来的！在这一章里，你会学习到如何以一种并行处理方式来画简单的图形。
### 长方形
想象我们有张数学课上使用的方格纸，而我们的作业是画一个正方形。纸的大小是10 * 10而正方形应该是8 * 8. 你会怎么做？
想象我们有张数学课上使用的方格纸，而我们的作业是画一个正方形。纸的大小是10 * 10而正方形应该是8 * 8。你会怎么做？
![](grid_paper.jpg)
你是不是会涂满除了第一行第一列和最后一行和最后一列的所有格点？
这和着色器有什么关系？方格纸上的每个小方形格点就是一个线程（一个像素）。每个格点有它的位置，就想棋盘上的坐标一样。在之前的章节我们将x和y映射到rgb通道，并且我们学习了如何将二维边界限制在0和1之间。我们如何用这些来画一个中心点位于示像屏的中心正方形？
这和着色器有什么关系？方格纸上的每个小方形格点就是一个线程（一个像素）。每个格点有它的位置，就想棋盘上的坐标一样。在之前的章节我们将x和y映射到rgb通道，并且我们学习了如何将二维边界限制在0和1之间。我们如何用这些来画一个中心点位于屏幕中心的正方形？
我们从空间角度来判别的if语句伪代码开始。这个原理和我们思考方格纸的策略异曲同工。
我们从空间角度来判别的 if 语句伪代码开始。这个原理和我们思考方格纸的策略异曲同工。
```glsl
if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) )
@ -44,7 +44,7 @@ void main(){
}
```
step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0））并将其与的变成白色（vec3（1.0））。左边和底边的“并行”由逻辑运算符AND完成——当x y都为1.0时返回1.0.这就画了两条黑线，一个在画布的底面另一个在左边。
step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0））并将其与的变成白色（vec3（1.0））。```left``` 乘 ```bottom``` 效果相当于逻辑 AND —— 当 x y 都为 1.0 时乘积才能是 1.0。这样做的效果就是画了两条黑线，一个在画布的底边另一个在左边。
![](rect-01.jpg)
@ -59,11 +59,11 @@ step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0）
<div class="codeAndCanvas" data="rect-making.frag"></div>
取消21~22行的注释来看看如何转置坐标的同时重复使用step（）函数。这样二维向量vec2(0.0,0.0)会被变换到右上角。这就是转置页面和重复过程的数字等价。
取消 21~22 行的注释来看看如何转置坐标的同时重复使用 ```step()``` 函数。这样二维向量 vec2(0.0,0.0) 会被变换到右上角。这就是转置页面和重复过程的数字等价。
![](rect-02.jpg)
注意在18行和22行，所有的边（宽）都被放大了。等价于这样写：
注意在 18 行和 22 行，所有的边（宽）都被放大了。等价于这样写：
```glsl
vec2 bl = step(vec2(0.1),st); // bottom-left
@ -71,19 +71,19 @@ step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0）
color = vec3(bl.x * bl.y * tr.x * tr.y);
```
是不是很有趣？这种都是关于运用step（）函数、逻辑运算和转置坐标的结合。
是不是很有趣？这种都是关于运用 step() 函数、逻辑运算和转置坐标的结合。
再进行下一个环节之前，挑战下下面的练习：
* 改变长方形的比例和大小。
* 用smoothstep（）函数代替step（）函数，试试在相同的代码下会有什么不同。注意通过改变取值，你可以不仅可以得到模糊边界也可以由漂亮的顺滑边界。
* 用 smoothstep() 函数代替 step() 函数，试试在相同的代码下会有什么不同。注意通过改变取值，你可以不仅可以得到模糊边界也可以由漂亮的顺滑边界。
* 应用 floor（）做个另外的案例。
* 应用 floor() 做个另外的案例。
* 挑个你最喜欢的应用做成函数，这样未来你可以调用它。并且让它灵活高效。
* 挑个你最喜欢的做成函数，这样未来你可以调用它。并且让它灵活高效。
* 写一个只画长方形边界的函数。
* 写一个只画长方形四边的函数。
* 想一下如何在一个画板上移动并放置不同的长方形？如果你做出来了，试着像[Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian)一样创作以长方形和色彩的图画。
@ -97,7 +97,7 @@ step（）函数会让没每一个小于0.1的像素变成黑色（vec3（0.0）
![](compass.jpg)
将这个过程翻译给shader意味着纸上的每个方形格点都会隐含着问每个像素（线程）是否在圆的区域以内。我们通过计算像素到中心的距离来实现（这个判断）。
将这个过程翻译给 shader 意味着纸上的每个方形格点都会隐含着问每个像素（线程）是否在圆的区域以内。我们通过计算像素到中心的距离来实现（这个判断）。
![](circle.jpg)
@ -107,9 +107,9 @@ There are several ways to calculate that distance. The easiest one uses the [```
![](hypotenuse.png)
你可以使用[```distance()```](../glossary/?search=distance), [```length()```](../glossary/?search=length) 或 [```sqrt()```](../glossary/?search=sqrt)到计算显示屏的中心的距离。下面的代码包含着三个函数，毫无悬念的他们返回相同的结果。
你可以使用[```distance()```](../glossary/?search=distance), [```length()```](../glossary/?search=length) 或 [```sqrt()```](../glossary/?search=sqrt)到计算屏幕的中心的距离。下面的代码包含着三个函数，毫无悬念的他们返回相同的结果。
* 注释和取消注释某行来试试看用不同方式得到相同的结果。
* 注释和取消某行的注释来试试看用不同方式得到相同的结果。
<div class="codeAndCanvas" data="circle-making.frag"></div>
@ -132,7 +132,7 @@ There are several ways to calculate that distance. The easiest one uses the [```
来小试下牛刀：
* 用[```step()```](../glossary/?search=step)函数把所有大于0.5的像素点变成白色，并把小于的变成黑色（0.0）【原文似乎有问题，等于0.5呢？，这就要看step函数的定义了，哈哈哈】
* 用[```step()```](../glossary/?search=step)函数把所有大于0.5的像素点变成白色，并把小于的变成黑色（0.0）。
* 反转前景色和背景色。
@ -231,8 +231,8 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
* 结合使用 [```min()```](../glossary/?search=min) 和 [```max()```](../glossary/?search=max) 函数混合距离场。
* 选一个几何logo，永距离场来衍生（生成）出一个。（用距离场画个自己感兴趣的logo，白话！）
* 用距离场画个自己感兴趣的logo。
恭喜！崎岖一路，走来不容易啊！休息下让这些概念沉淀一下吧！当然不是用简单地用Processing来画些什么。在shader的世界里，画图形变得有些别扭，而且适应这种新的编程范式（编程思维模式）会有些精疲力竭。
恭喜！你完成了最艰难的部分！休息下让这些概念沉淀一下吧 —— 用Processing 来画简单的形状很容易，但却不到火候。在 shader 的世界里，画形状是很纠结，而且适应这种新的编程范式会有些累人。
既然现在你知道了如何画图形，我十分肯定你脑袋里已经充满了新的点子。在接下来的章节里你会学习到怎么移动，旋转以及缩放图形。这将使你的创作如虎添翼！
既然现在你知道了如何画形状，我十分肯定你脑袋里已经充满了新的点子。在接下来的章节里你会学习到怎么移动，旋转以及缩放图形。这将使你的创作如虎添翼！