blog-hexo/source/_posts/front-end/Shader.md
2024-01-23 13:09:40 +08:00

39 lines
1.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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);
```