Skip to main content

shader 语言

  • main 函数
  • 最终的像素颜色取决于预设的全局变量 gl_FragColor。
  • vec4 四分量浮点向量 vec4(1.0,0.0,1.0,1.0), 四个变元分别响应红，绿，蓝和透明度通道
  • vec3 三分量浮点向量
  • vec2 二分量浮点向量

uniform (统一值)

它们的数据类型通常为：float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D and samplerCube。

uniform 值需要数值类型前后一致。且在 shader 的开头，在设定精度之后，就对其进行定义。

uniform vec2 u_resolution; // 画布尺寸（宽，高）
uniform vec2 u_mouse;      // 鼠标位置（在屏幕上哪个像素）
uniform float u_time;     // 时间（加载后的秒数）

gl_FragCoord

就像 GLSL 有个默认输出值 vec4 gl_FragColor 一样，它也有一个默认输入值（ vec4 gl_FragCoord ）。

gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标。有了它我们就知道了屏幕上的哪一个线程正在运转。

为什么我们不叫 gl_FragCoord uniform （统一值）呢？因为每个像素的坐标都不同，所以我们把它叫做 varying（变化值）。

算法绘画

造型函数​

  • pow() - 求x的y次幂
  • exp() - 以自然常数e为底的指数函数
  • log() - 对数函数
  • sqrt() - 平方根函数
  • abs() - 绝对值
  • ceil() - 向正无穷取整
  • floor() - 向负无穷取整
  • fract() - 只选取小数部分
  • clamp(x,0.0,1.0) 把 x 的值限制在 0.0 到 1.0

Step 和 Smoothstep

  • step() - 插值函数需要输入两个参数。第一个是极限或阀值，第二个是我们想要检测或通过的值。对任何小于阀值的值，返回 0.0，大于阀值，则返回 1.0。

    • smoothstep() - 当给定一个范围的上下限和一个数值，这个函数会在已有的范围内给出插值。前两个参数规定转换的开始和结束点，第三个是给出一个值用来插值。

颜色

在GLSL中，有个十分有用的函数：mix()

  • mix() 函数：以百分比混合两个值。
  • 百分比的取值范围:0~1

Patterns 图案

fract() 函数: 返回小数点后的数。