blog-hexo/source/_posts/front-end/Shader.md

title	categories	status	abbrlink
Shader	CS	doing	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。

vec2 bl = step(vec2(0.1), st);