@ -1,33 +1,33 @@
# 算法绘画
## 造型函数
这一章应该叫做 Mr. Miyagi 的栅栏课。之前我们给规范化的 x,y 坐标和红、绿通道建立了映射( map) 。本质上说我们是建造了这样一个函数: 输入一个二维向量( x, y), 然后返回一个四维向量( r, g, b, a) 。但在我们跨维度转换数据之前, 我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面, 你的 shader 功夫就越厉害。
这一章应该叫做宫城先生的粉刷课(来自电影龙威小子的经典桥段)。之前我们把规范化后的 x,y 坐标映射( map) 到了红色和绿色通道 。本质上说我们是建造了这样一个函数: 输入一个二维向量( x, y), 然后返回一个四维向量( r, g, b, a) 。但在我们跨维度转换数据之前, 我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面, 你的 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.0, 2.0, 1.0, 0.0, 0.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 之间),且如此流畅,这就使得它成为一个极其强大的工具。