图像处理贴图 Graphic cards (GPUs) have special memory types for images. Usually on CPUs images are stored as arrays of bytes but GPUs store images as sampler2D which is more like a table (or matrix) of floa

分形的例子https://www.shadertoy.com/view/lsX3W4 https://www.shadertoy.com/view/Mss3Wf https://www.shadertoy.com/view/4df3Rn https://www.shadertoy.com/view/Mss3R8 https://www.shadertoy.com/view/4dfGRn https

分形布朗运动（Fractal Brownian Motion）噪声对不同的人来说有不同的意义。音乐家把它当成一种令人不安的声响，通信工程师把它当作干扰信号，天体物理学家把它看作宇宙微波背景辐射。这些概念吸引着我们去探索处处可见的随机性的物理原因。但是，让我们从更基础，也更简单的开始：波和波的属性。波就是某些属性随着时间波动变化。声波是气压的波动，电磁波是电场和磁场的波动。波的两个重要特征是振幅（

网格噪声（Cellular Noise）1996 年，在原始的 Perlin Noise 发布六年后，Perlin 的 Simplex Noise 发布五年前，Steven Worley 写了一篇名为“A Cellular Texture Basis Function”的论文。在这篇论文里，他描述了一种现在被广泛使用的程序化纹理技术。 要理解它背后的原理，我们需要从迭代开始思考。你可能已经知道迭

Noise 噪声稍事休息，我们来转换一下思路。我们已经玩过了看起来像电视白噪音的 random 函数，尽管脑子里还在嗡嗡地转着 shader，但是已经眼花缭乱了。是时候出去走走了。 我们感知得到浮动在皮肤上的空气，晒在脸上的阳光。世界如此生动而丰富。颜色，质地，声音。当我们走在路上，不免会注意到路面、石头、树木和云朵的表面的样子。 这些纹理的不可预测性可以叫做“random”(随机

类型voidboolintfloatbvec2bvec3bvec4ivec2ivec3ivec4mat2mat3mat44x4浮点矩阵 声明 1234567mat4 aMat4 = mat4(1.0, 0.0, 0.0, 0.0, // 1. column 0.0, 1.0, 0.0, 0.0, // 2. column 0.

生成设计在经历了众多的重复与秩序之后，笔者自然而然地开始着手创造一些混沌。 随机 随机性是熵的最大表现。我们如何在看似可预测而且严苛的代码环境中生成随机性呢？ 让我们从分析下面的函数着手: 上面的例子中，我们提取了sin函数其波形的分数部分。值域为-1.0 到 1.0 之间的sin() 函数被取了小数点后的部分(这里实际是指模1))，返回0.0 到 1.0 间的正值。我们可以

Patterns 图案因为着色器按一个个像素执行，那么无论你重复一个图形多少次，计算的数量仍然是个常数。 本章中我们将综合我们目前所学的并应用在画布上。和前几章一样，我们的策略依然基于乘以空间坐标（0到1之间），这样我们的画的在0到1之间的图形就会重复地形成网格。 “网格提供一种基于人的直觉发明事物的框架，并且可以颠覆。自然的混沌肌理提供一种对比和秩序的迹象。从早期罗马浴场里的陶瓷图案到几何

2D Matrices 二维矩阵 平移之前的章节我们学习了如何制作一些图形 - 而如何移动它们的技巧则是借助移动它们自身的参考坐标系。我们只需要给 st 变量加上一个包含每个片段的位置的向量。这样就移动了整个坐标系。 还是画着比较更容易解释，如上图所示： 取消下面代码中第35行的注释，看下坐标空间是如何平移的。 现在尝试下下面的练习： 结合 u_

形状 终于！我们一直学习的技能就等着这一刻！你已经学习过GLSL的大部分基础，类型和函数。你一遍又一遍的练习你的造型方程。是时候把他们整合起来了。你就是为了这个挑战而来的！在这一章里，你会学习到如何以一种并行处理方式来画简单的图形。 长方形想象我们有张数学课上使用的方格纸，而我们的作业是画一个正方形。纸的大小是10 x 10而正方形应该是8 x 8。你会怎么做？ 你是不是会涂满除了第一行第一列和