Merge pull request #45 from tornoteli/translation-ch

proofread chapter05-ch
pull/46/head
Patricio Gonzalez Vivo 9 years ago
commit cc74e4cdf7

@ -1,33 +1,33 @@
# 算法绘画
## 造型函数
这一章应该叫做 Mr. Miyagi 的栅栏课。之前我们给规范化的 x,y 坐标和红、绿通道建立了映射map。本质上说我们是建造了这样一个函数输入一个二维向量xy)然后返回一个四维向量rgba。但在我们跨维度转换数据之前我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面你的 shader 功夫就越厉害。
这一章应该叫做宫城先生的粉刷课(来自电影龙威小子的经典桥段)。之前我们把规范化后的 x,y 坐标映射map到了红色和绿色通道。本质上说我们是建造了这样一个函数输入一个二维向量xy)然后返回一个四维向量rgba。但在我们跨维度转换数据之前我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面你的 shader 功夫就越厉害。
![The Karate Kid (1984)](mr_miyagi.jpg)
接下来的代码构造就是我们的「栅栏」。在它之中我们把规范化的 x 坐标(```st.x```可视化。有两种途径:一种是用亮度(度量从黑色到白色的渐变过程),另一种是在顶绘制一条绿色的线(在这种情况下 x 被直接赋值给 y。不用过分在意绘制函数我们马上会更加详细地解释它。
接下来的代码结构就是我们的基本功。在它之中我们对规范化的 x 坐标(```st.x```)进行可视化。有两种途径:一种是用亮度(度量从黑色到白色的渐变过程),另一种是在顶绘制一条绿色的线(在这种情况下 x 被直接赋值给 y。不用过分在意绘制函数我们马上会更加详细地解释它。
<div class="codeAndCanvas" data="linear.frag"></div>
**简注** ```vec3``` 类型构造器“明白”你想要把颜色的三个通道赋值到一个值里,就像 ```vec4``` 明白你想要构建一个四维向量,三维向量加上第四个值(比如颜色的三个值加上透明度)。请参照上面示例的第 20 到 26 行。
这些代码就是你的栅栏;遵守和理解它非常重要。你将会一遍又一遍地回到 0.0 到 1.0 这个区间。你将会掌握融合与构建这些代码的艺术。
这些代码就是你的基本功;遵守和理解它非常重要。你将会一遍又一遍地回到 0.0 到 1.0 这个区间。你将会掌握融合与构建这些代码的艺术。
这些 x 与 y或亮度之间一对一的关系称作**线性插值**linear interpolation。现在起我们可以用一些数学函数来改造这些代码行。比如说我们可以把 x 升到 5 来做一个曲线。
这些 x 与 y或亮度之间一对一的关系称作**线性插值**linear interpolation(译者注:插值是离散函数逼近的重要方法,利用它可通过函数在有限个点处的取值状况,估算出函数在其他点处的近似值。因为对机器运算来说,屏幕像素注定是离散的而不是连续的,计算机图形学常用插值来填充图像变换时像素之间的空隙。)现在起我们可以用一些数学函数来改造这些代码行。比如说我们可以把 x 升到 5 来做一个曲线。
<div class="codeAndCanvas" data="expo.frag"></div>
很有趣,对吧?试试看把第 19 行的指数改为不同的值比如20.02.01.00.00.2 或 0.02。理解值和指数之间的关系非常重要。这些数学函数可以让你灵动地控制你的代码,就像是给数据做针灸一样。
[```pow()```](../glossary/?search=pow) 是 GLSL 的一个原生/内建函数GLSL 有很多原生函数。大多数原生函数都是硬件加速的,也就是说如果你正确使用这些函数,你的代码就会跑得更快。
[```pow()```](../glossary/?search=pow) 求x的y次幂是 GLSL 的一个原生函数GLSL 有很多原生函数。大多数原生函数都是硬件加速的,也就是说如果你正确使用这些函数,你的代码就会跑得更快。
换掉第 19 行的幂函数,试试看[```exp()```](../glossary/?search=exp)[```log()```](../glossary/?search=log) 和 [```sqrt()```](../glossary/?search=sqrt)。当你用 Pi 来玩的时候有些方程会变得更有趣。在第 5 行我定义了一个宏,使得每当程序调用 ```PI``` 的时候就用 ```3.14159265359``` 来替换它。
换掉第 19 行的幂函数,试试看[```exp()```](../glossary/?search=exp)以自然常数e为底的指数函数[```log()```](../glossary/?search=log)(对数函数) 和 [```sqrt()```](../glossary/?search=sqrt)(平方根函数)。当你用 Pi 来玩的时候有些方程会变得更有趣。在第 5 行我定义了一个宏,使得每当程序调用 ```PI``` 的时候就用 ```3.14159265359``` 来替换它。
### Step 和 Smoothstep
GLSL 还有一些独特的原生插值函数可以被硬件加速。
[```step()```](../glossary/?search=step) 插值接收两个参数。第一个是极限或阀值,第二个是我们想要检测或传递的值。对任何小于阀值的值,返回 ```0.0```,大于阀值,则返回 ```1.0```。
[```step()```](../glossary/?search=step) 插值函数需要输入两个参数。第一个是极限或阀值,第二个是我们想要检测或通过的值。对任何小于阀值的值,返回 ```0.0```,大于阀值,则返回 ```1.0```。
试试看改变下述代码中第 20 行的值。
@ -45,7 +45,7 @@ GLSL 还有一些独特的原生插值函数可以被硬件加速。
### 正弦和余弦函数
当你想用数学来制造动效形态或混合数值sin 和 cos 就是你的最佳伙伴。
当你想用数学来制造动效,形态或混合数值sin 和 cos 就是你的最佳伙伴。
这两个基础的三角函数是构造圆的极佳工具,就像张小泉的剪刀一样称手。很重要的一点是你需要知道它们是如何运转的,还有如何把它们结合起来。简单来说,当我们给出一个角度(这里采用弧度制),它就会返回半径为一的圆上一个点的 x 坐标([cos](../glossary/?search=cos))和 y 坐标([sin](../glossary/?search=sin))。正因为 sin 和 cos 返回的是规范化的值(即值域在 -1 和 1 之间),且如此流畅,这就使得它成为一个极其强大的工具。

@ -45,7 +45,7 @@ In these lines we are doing something similar to what we did in the previous cha
这和之前章节我们做的事情很像。我们把单精度浮点 ```x``` 再分割成它的整数部分 ```i``` 和小数部分 ```f``` 。我们用 [```floor()```](.../glossary/?search=floor) 获取 ```i```,用 [```fract()```](.../glossary/?search=fract) 获取 ```f```。然后我们 ```rand()``` x 的整数部分,即根据这个整数生成一个随机值。
在这之后有两个被 comment 掉的语句。第一句的作用是线性插值。
在这之后有两个被注释掉的语句。第一句的作用是线性插值。
After that you see two commented lines. The first one interpolates each random value linearly.
@ -58,7 +58,7 @@ Go ahead and uncomment this line to see how this looks. We use the [```fract()``
At this point in the book, we've learned that we can do better than a linear interpolation, right?
Now try uncommenting the following line, which uses a [```smoothstep()```](.../glossary/?search=smoothstep) interpolation instead of a linear one.
试试取消这句的注释(即去掉 ```//``` ),看一下会变成什么样子。注意我们储存在 `f` 中的 [```fract()```](.../glossary/?search=fract) 值混合([```mix()```](.../glossary/?search=mix)了两个随机值。
试试取消这句的注释(即去掉 ```//``` ),看一下会变成什么样子。注意我们储存在 `f` 中的 [```fract()```](.../glossary/?search=fract) 值混合([```mix()```](.../glossary/?search=mix))了两个随机值。
到本书的这个部分,我们知道我们可以比比线性插值做得更好,不是吗?现在试试取消第二句的注释。第二句用 [```smoothstep()```](.../glossary/?search=smoothstep)进行插值。

Loading…
Cancel
Save