39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
title: Shader
|
|||
|
|
categories:
|
|||
|
|
- CS
|
|||
|
|
status: doing
|
|||
|
|
abbrlink: 64664
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 坐标系
|
|||
|
|
|
|||
|
|
## 常规屏幕坐标系
|
|||
|
|
|
|||
|
|
范围：从 (0,0) 开始到 (屏幕宽度-1, 屏幕高度-1)。对于4k显示器来说，就是有3840x2160个像素
|
|||
|
|
|
|||
|
|
- 原点位置：左上角。
|
|||
|
|
- X轴方向：水平向右增加。
|
|||
|
|
- Y轴方向：垂直向下增加。
|
|||
|
|
|
|||
|
|
## 归一化
|
|||
|
|
|
|||
|
|
将屏幕归一化，保证图形效果在不同尺寸和分辨率的屏幕上保持一致，`gl_FragCoord`是当前像素的位置，举个例子，理解这个渲染过程：
|
|||
|
|
|
|||
|
|
- `gl_FragCoord`：这就像是你正在查看其中一张小照片，并且知道它在大照片中的确切位置。`gl_FragCoord.xy` 给出的是当前这张小照片（或者说屏幕上的一个像素）在整个大照片（即屏幕）中的位置坐标。
|
|||
|
|
|
|||
|
|
- `iResolution.xy`：这是告诉你大照片的总大小，也就是屏幕的分辨率。对于 4K 显示器，这个值是 3840x2160。
|
|||
|
|
|
|||
|
|
- `gl_FragCoord/iResolution.xy`：现在，如果你想知道这张小照片（像素）在大照片（屏幕）中的相对位置，你可以将小照片的位置`gl_FragCoord.xy` 除以大照片的总大小`iResolution.xy`。这样做的结果是，无论大照片有多大，你都能得到一个介于 0 到 1 之间的比例值，表示这张小照片在大照片中的相对位置。
|
|||
|
|
|
|||
|
|
## step 阶跃函数
|
|||
|
|
|
|||
|
|
对每个分量独立计算的，每个分量的比较结果独立决定
|
|||
|
|
|
|||
|
|
- 如果 st.x >= 0.1，则 bl.x 为 1.0；如果 st.x < 0.1，则 bl.x 为 0.0。
|
|||
|
|
- 如果 st.y >= 0.1，则 bl.y 为 1.0；如果 st.y < 0.1，则 bl.y 为 0.0。
|
|||
|
|
|
|||
|
|
```glsl
|
|||
|
|
vec2 bl = step(vec2(0.1), st);
|
|||
|
|
```
|