> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/webgl/awesome-threejs-playground/docs/glsl/glsl-thebookofshaders.md).

# The book of shaders 记录

## 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()` 函数: 返回小数点后的数。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/awesome/webgl/awesome-threejs-playground/docs/glsl/glsl-thebookofshaders.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.