Shader Toy

源码：https://github.com/buglas/shadertoy 知识点 Whitted-Style 环境贴图 1-环境光+Whitted-Style 之前我们说了Whitted-Styl

源码：https://github.com/buglas/shadertoy 接下来我想在渲染模型的时候，通过环境贴图给它一个环境光，所以咱们先说一下贴图。 知识点 长方体贴图 球体贴图 立方体环境光

源码：https://github.com/buglas/shadertoy 1-Whitted-Style 简介 Whitted-Style 是一种光线追踪模型，由Turner Whitted提出，

源码：https://github.com/buglas/shadertoy 为多个物体进行着色的方法有很多，其本质就是要知道光线推进时所碰到的物体是哪个，然后再为当前片元着上相应物体的颜色。 上图的

源码：https://github.com/buglas/shadertoy 之前我们在说分段函数的时候，画过一个二维棋盘，然而当这个二维棋盘放在三维空间中的时候，便会出现极远处的棋盘格采样失真的问题

源码：https://github.com/buglas/shadertoy 1-RayMarching中的投影 1-1-投影的概念 投影就是光源照射不到的地方。 投影可以更好的衬托光明，让生活变得立

源码：https://github.com/buglas/shadertoy 要绘制长方体，依然要从距离场着手。 为了循序渐进，我先说长方形的SDF模型。 1-长方形的SDF模型 已知： 长方形的中心

源码：https://github.com/buglas/shadertoy 在传统的顶点建模中，相机要考虑视图矩阵和投影矩阵。 在RayMarching中，其相机天生就具备了透视相机的部分功能，比如

源码：https://github.com/buglas/shadertoy 在绘制三维的SDF模型前，我们需要先知道RayMarching算法，因为它可以将SDF模型显示出来。 1-RayMarch

源码：https://github.com/buglas/shadertoy 在绘制二维SDF模型之前，我们需要先有一个距离场的概念。 1-距离场 SDF是Signed-distance-field的

源码：https://github.com/buglas/shadertoy 1-分段函数的概念 分段函数我们在高中就学了，其定义是：在不同定义域中的集合间有不同的映射规则。 比如下面的函数： 其函数

1-抗锯齿的概念 1-1-锯齿出现的原因 仔细去看，我们之前所绘制的线条上面有许多锯齿： 这是因为canvas画布是点阵图，着色时，又是非黑即白，所以导致其边缘有凌厉的锯齿(aliasing)。 以三

1-直线 在高中，我们学过斜截式。从中可以知道，直线是一条只有斜率和截距的线，它没有长短和粗细的概念。 当然，我们在绘图时，为了方便观察，会给直线一个宽度。 直线可以通过其点斜式里的斜率和截距来定义，

坐标系可以分成坐标轴和坐标栅格两部分来绘制。 我们可以基于之前说过的投影坐标系绘制绘图。 1-坐标轴 因为投影坐标系的原点就在画布中间，所以我们可以根据坐标距离原点的大小来绘制坐标轴。 1.绘制y轴

前言 Shader Toy 就是着色玩具的意思。 在Shader Toy的官网里，大家可以找到许许多多的炫酷案例。 Shader Toy 存在的意义，除了好玩、好看，还可以成为许多实战、创新项目的算法