理解glsl语言的gl_FragCoord与u_resolution

最新推荐文章于 2024-06-18 13:54:21 发布

杨大大28

最新推荐文章于 2024-06-18 13:54:21 发布

阅读量3.2k

点赞数 6

分类专栏： javascript 前端三维文章标签： webgl glsl shader 着色器

本文链接：https://blog.csdn.net/popstarqq/article/details/122093355

版权

前端同时被 3 个专栏收录

94 篇文章 16 订阅

订阅专栏

javascript

55 篇文章 4 订阅

订阅专栏

三维

14 篇文章 1 订阅

订阅专栏

这篇博客介绍了OpenGL中的两个关键概念：u_resolution代表画布尺寸，而gl_FragCoord提供了当前片元的窗口坐标。通过示例代码解释了如何将gl_FragCoord的坐标归一化到0.0-1.0之间，并展示了不同角落的坐标对应的颜色值，帮助读者深入理解这两个概念在图形渲染中的应用。

摘要由CSDN通过智能技术生成

1 概念

（1）u_resolution 是画布尺寸，即代表画布宽高

（2）gl_FragCoord：是一个 vec4 类型的变量 (x, y, z, 1/w)，其中 x, y 是当前片元的窗口坐标。直译就是片元坐标

2 结合例子理解

如下效果和代码

#ifdef GL_ES
precision mediump float;
#endif
// u_resolution （画布尺寸）
uniform vec2 u_resolution;
void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,st.y,0.0,1.0);
	
}

如上画布宽高:（950,600）即u_resolution的宽高值是(950,600)；

那么gl_FragCoord的取值范围就是 x在(0,950),y在(0,600)

所以vec2 st = gl_FragCoord.xy/u_resolution; st的x和y值都在0.0-1.0之间；

gl_FragCoord.xy/u_resolution在四个角的值为

左下角(0,0)处：x=0/950 y=0/600 st为(0.0,0.0)；颜色值为（0.0,0.0,0.0,1.0）黑色

左上角(0,600)处：x=0/950 y600/600 st为(0.0,1.0)；颜色值为（0.0,1.0,0.0,1.0）绿色

右上角(950,600)处：x=950/950 y=600/600 st为(1.0,1.0) ；颜色值为（1.0,1.0,0.0,1.0）黄色

右下角(950,0)处：x=950/950 y=0/600 st为(1.0,0.0)；颜色值为（1.0,0.0,0.0,1.0）红色