关于gl_FragCoord的理解
概述
记录一下在使用gl_FragCoord的一些知识点
先上shader来看效果
let shader = {
vs: `
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
}
`,
fs: `
// 屏幕尺寸
uniform vec2 u_resolution;
void main() {
vec2 uv = gl_FragCoord.xy/u_resolution;
gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}
`,
uniform: {
u_resolution: {
value: {
x: renderer.domElement.width,
y: renderer.domElement.height,
}
}
}
}
let geometry = new THREE.BoxBufferGeometry(10, 10, 10);
let material = new THREE.ShaderMaterial({
vertexShader: shader.vs,
fragmentShader: shader.fs,
uniforms: shader.uniform,
transparent: true
})
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
我们创建了一个shader材质和box,最后添加到了场景中,先看下效果
然后我们将box给放大,在来看一下会呈现什么颜色
可以看到,左下角呈现黑色,右下角呈现红色,左上角绿色,右上角黄色,那这个颜色是怎么计算出来的呢,我们可以看到在片元着色器的一句关键的代码:vec2 uv = gl_FragCoord.xy/u_resolution;
gl_FragCoord:表示当前片元着色器处理的候选片元窗口相对坐标信息,是一个 vec4 类型的变量 (x, y, z, 1/w),其中 x, y 是当前片元的窗口坐标。
u_resolution:表示我们的屏幕尺寸;
由此我们可以推算出gl_FragCoord的下x,y分量是一定是小于u_resolution的x,y的,一定是在[0, 1]区间的一个值
这个时候我们又有了个疑问,为什么左下角会是黑色呢?
我们先来看一下gl_FragCoord的坐标系
现在我们来计算一下左下角的颜色值久可以知道为什么是黑色的了
左下角的坐标为(0, 0), 根据gl_FragCoord.xy/u_resolution得出
分别计算得出 x = 0 / 1920 y = 0 / 1080;
最后算出的颜色值为(0.0, 0.0, 0.0, 1.0) 此颜色值即为黑色
以此类推 右下角的为 x= 1920 / 1920; y = 0 / 1080;
最后得出的结果为(1.0, 0.0, 0.0, 1.0) ,此颜色值为红色
和我们的猜想完全正确。
此文结束,边尝试边学习,如有错误的地方请赐教,谢谢~