JoeyHuangzx的专栏

Patterns 图案前面章节TheBookofShader开始Shaping functions（造型函数）Color（颜色）Shapes（形状）Patterns(图案)因为着色器按一个个像素执行，那么无论你重复一个图形多少次，计算的数量仍然是个常数。本章中我们将综合我们目前所学的并应用在画布上。和前几章一样，我们的策略依然基于乘以空间坐标（0到1之间），这样我们的画的在0到1之间的图形就会重复地形成网格。网格-小试身手"网格提供一种基于人的直觉发明事物的框架，并且可以颠覆。自然

2D Matrices(二维矩阵)前面章节TheBookofShader开始Shaping functions（造型函数）Color（颜色）Shapes（形状）平移之前的章节我们学习了如何制作一些图形 - 而如何移动它们的技巧则是借助移动它们自身的参考坐标系。我们只需要给 st 变量加上一个包含每个片段的位置的向量。这样就移动了整个坐标系。还是画着比较更容易解释，如上图所示：取消下面代码中的注释（ color = vec3(st.x,st.y,0.0);），看下坐标空间是如何平移的

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

Color（颜色）前面章节TheBookOfShader开始造型函数我们目前为止还未涉及到GLSL的向量类型。在我们深入向量之前，学习更多关于变量和色彩主题是一个了解向量类型的好方法。若你熟悉面向对象的编程范式（或者说编程思维模式），你一定注意到我们以一种类C的 struct的方式访问向量数据的内部分量。vec3 red = vec3(1.0,0.0,0.0);red.x = 1.0;red.y = 0.0;red.z = 0.0;以x,y,z定义颜色是不是有些奇怪？正因如此，我

Shaping functions（造型函数）书本原链接：造型函数这一章应该叫做宫城先生的粉刷课（来自电影龙威小子的经典桥段）。之前我们把规范化后的 x,y 坐标映射（map）到了红色和绿色通道。本质上说我们是建造了这样一个函数：输入一个二维向量（x，y)，然后返回一个四维向量（r，g，b，a）。但在我们跨维度转换数据之前，我们先从更加…更加简单的开始。我们来建一个只有一维变量的函数。你花越多的时间和精力在这上面，你的 shader 功夫就越厉害。接下来的代码结构就是我们的基本功。在它之中我们对规范

前言说来惭愧，半年前开始接触cocso creator shader的时候，看了官方教程，看了大神写的例子，搞懂了一些语法概念。可是当时看一遍有种似懂非懂的感觉，那种感觉就是听过很多道理，任然过不好一生。在cocos论坛里有大神也分享过自己的shader教程例子，那些什么内外发光，高新模糊什么的滤镜效果，当时看的时候感觉懂了，可是一到自己想写点自己的东西，就完成无从下手。就这样，后面过了一段时间后，学习shader这件事，慢慢的就沉下去了，完成没动力去学了。过了几个月，因为某些原因，心血来潮了，又想重