Skip to content
知识库

Books of Shader

shader（着色器）是运行于 GPU 上的程序，是允许程序员在图形渲染管线中某个阶段，插入自己运行的程序

  1. 顶点着色器，确定当前图形的顶点，法线，纹理坐标等等，其核心就是坐标转换，并将转换后的坐标传递给下一个阶段
  2. 片元着色器，根据顶点着色器坐标，光栅化后得到片元，即得到了该图形需要在屏幕上绘制哪些地方，片元着色器就是处理这些片元，其核心就是计算这些片元的颜色

特点

  1. 并行，可在 GPU 管线中并行
  2. 无状态，无记忆，着色器在运行时，不知道上一次运行的状态，也不会存储某个运行状态

数据结构

精度

  1. 顶点着色器默认为 highp
  2. 偏远着色器默认无精度，必须在顶部声明，否则会报错，一般情况下 mediump 足够
// 标识数值精度，即标识的有效位数不同，精度越高，效果越好，同时计算性能消耗越高
precision lowp float; // 8位-10位
precision mediump float; // 半精度 16位
precision highp float; // 单精度 32位

题目

随机

根据一个因子，将其混乱程度放大，即因子相同，那么得到的随机值是一样的，例如可以以时间戳为因子

fract(timestamp)

噪声

在随机算法基础上，进行噪声算法。噪声就是有规律的随机。可以绘制自然的但是又具有结构化特性的随机特性，绘制程序化风景，例如山脉，湍流，云彩

// Perlin 噪声算法
float i = floor(x);  // 整数（i 代表 integer）
float f = fract(x);  // 小数（f 代表 fraction）


y = rand(i); // rand() 在之前的章节提过
// y = mix(rand(i), rand(i + 1.0), f);
// y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f)); y 就是随机噪声


// 二维随机，多个点插值
// 如果进行三角形插值，则取三个点，计算y，再加权平均
// 如果进行正方形插值，则取四个点，计算y，再加权平均




// 三维随机
// 正方体和三角体

网格噪声

根据特征点，将区域划分开，有点类似于细胞的不规则结构

原理：可以利用当前点和目标特征点的距离，距离越近，说明处于某个特征点的区域内

优化：当我们的特征集存在很多的时候，单纯的去遍历每个特征点性能消耗极高，则可采取优化，将空间拆分为网格，将每个网格视为一个特征点，只计算到自身网格和到 8 个邻居网格的距离

分形布朗运动

分形布朗运动：循环中，叠加噪声，并以一定的倍数，连续升高频率，同时以一定的比率降低振幅，最终获取更好的细节

马赛克

将一块区域的颜色设置为一致