the book of shader

计算机图形学丛书简要介绍

一本关于 片段着色器 的入门指南，由浅入深的介绍了用Shader的用法。下面是综述每一章的主要知识点及使用面。 本书虽然暂未完全写完，但是前几章的知识点足够初学者入门。

1.开始

Shader

Shader的存在意义，他与并行计算的联系，以及编写Shader为什么相对困难等；下面两张图展现了CPU与GPU运行架构的区别

[图片上传失败...(image-d13e0b-1654833157111)][图片上传失败...(image-780de5-1654833157111)]

Hello World

最简单的Shader程序，介绍片段着色器最简单的框架  

    #ifdef GL_ES
    precision mediump float;
    #endif

    uniform float u_time;

    void main() {
        gl_FragColor = vec4(1.0,0.0,1.0,1.0);
    }

[图片上传失败...(image-ea14a4-1654833157111)]

GLSL语法

GLSL基本语法介绍  

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

[图片上传失败...(image-6a8c17-1654833157111)]

运行平台

介绍了本套丛书在不同的编辑器（Blender、Three.js、Processing等）上面的使用方式；

2.算法创作

函数

介绍了着色器中常用的函数，以及不同的实用工具来编辑曲线，以便后续更加顺手的编写shader代码

[图片上传失败...(image-c59078-1654833157111)]
Grapher：Mac中实用的函数曲线工具
GraphToy：一款在线的GLSL函数可视化工具
Shadershop：想PS一样编辑函数曲线的在线工具

颜色

简单介绍了颜色的混合，比如两种颜色的线性插值等。由此延伸到HSB颜色空间，介绍了其物理意义以及极坐标下的HSB颜色空间。

[图片上传失败...(image-f3e092-1654833157111)]

形状

这里主要介绍通过Shader来绘制不同的物理形状，比如矩形、三角形、圆形等，最后引出距离场，介绍了通过距离场来雕刻更加复杂的图形。

[图片上传失败...(image-804e4f-1654833157111)]

矩阵

矩阵变化在平移、缩放、旋转时的用途，以及如何将其应用在上一章介绍的SDF中。

图案模式

应用前几章的知识设计出更加复杂的不同图案，比如偏移图案、Truchet瓷砖等

[图片上传失败...(image-dbf971-1654833157111)]

3.程序化生成设计

随机数

主要讲解如何从原始的三角函数来构造随机数的生成

[图片上传失败...(image-67ce2-1654833157111)]

噪声

一步一步的描述了从随机数-噪声-梯度优化噪声-perlin噪声-simplex噪声的产生原理及过程

[图片上传失败...(image-6500cf-1654833157111)]

细胞状噪声

介绍了另外一种常用的噪声Worley噪声,并相应的介绍了跟他密切相关的Voronoi算法。

[图片上传失败...(image-81459d-1654833157111)]

分形布朗运动

通过不断衰减振幅、提高频率的噪声叠加来产生分形效果的噪声

[图片上传失败...(image-6cac8d-1654833157111)]

分形

TODO

在线阅读

如果你需要更多图形学相关书籍，可以前往图形学系列丛书