关于gl_FragCoord的理解 - CSDN博客

记录一下在使用gl_FragCoord的一些知识点先上shader来看效果 ... void main() { vec2 uv = gl_FragCoord.xy/u_resolution; gl_FragColor = vec4(uv.x, ... 关于gl_FragCoord的理解 我想当喝水人 于 2021-01-3013:52:07 发布 843 收藏 2 分类专栏： Three 文章标签： shader three.js 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_39503511/article/details/113427666 版权 Three 专栏收录该内容 39篇文章 64订阅 订阅专栏 关于gl_FragCoord的理解 概述 概述 记录一下在使用gl_FragCoord的一些知识点先上shader来看效果 letshader={ vs:` voidmain(){ gl_Position=projectionMatrix*viewMatrix*modelMatrix*vec4(position,1.0); } `, fs:` //屏幕尺寸 uniformvec2u_resolution; voidmain(){ vec2uv=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, } } } } letgeometry=newTHREE.BoxBufferGeometry(10,10,10); letmaterial=newTHREE.ShaderMaterial({ vertexShader:shader.vs, fragmentShader:shader.fs, uniforms:shader.uniform, transparent:true }) letmesh=newTHREE.Mesh(geometry,material); scene.add(mesh); 我们创建了一个shader材质和box，最后添加到了场景中，先看下效果 然后我们将box给放大，在来看一下会呈现什么颜色可以看到，左下角呈现黑色，右下角呈现红色，左上角绿色，右上角黄色，那这个颜色是怎么计算出来的呢，我们可以看到在片元着色器的一句关键的代码：vec2uv=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/1920y=0/1080;最后算出的颜色值为(0.0,0.0,0.0,1.0)此颜色值即为黑色以此类推右下角的为x=1920/1920;y=0/1080;最后得出的结果为(1.0,0.0,0.0,1.0)，此颜色值为红色和我们的猜想完全正确。

此文结束，边尝试边学习，如有错误的地方请赐教，谢谢~ 关注博主即可阅读全文 我想当喝水人 关注 关注 1 点赞 踩 0 评论 2 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 OpenGL-Shader 07-09 共六章 1.基础章节,从Shader1.0版本到新的4.5版本,介绍每一个版本中特性的用法; 2.TesslattionShader应用/基础案例分析 3.GemotryShader应用/基础案例分析 4.ComputeShader应用/基础案例分析 5.通过大量案例讲解分析/结合新特性，介绍用法 6.性能调优，如果借助shader加速应用,让你的程序支撑百万级别的场景对象轻松应对 gl_FragCoord的含义 fatcat123的博客 01-06 7121 gl_FragCoord表示当前片元着色器处理的候选片元窗口相对坐标信息，是一个vec4类型的变量(x,y,z,1/w)，其中x,y是当前片元的窗口坐标，OpenGL默认以窗口左下角为原点，在着色器中通过布局限定符可以重新设定原点，比如窗口左上角为原点origin_upper_left，窗口大小由glViewport()函数指定。

x,y默认是像素中心而非整... 参与评论 您还未登录，请先 登录 后发表或查看评论 Java中的frontcolor_opengl–顶点和片段着色器之间的gl_Color和gl_FrontColor之间的关系是什么... weixin_29657209的博客 02-25 117 我有传递顶点和片段着色器。

顶点着色器voidmain(void){gl_TexCoord[0]=gl_MultiTexCoord0;gl_Position=gl_ModelViewProjectionMatrix*gl_Vertex;}片段着色器voidmain(void){gl_FragColor=gl_Color;}那些产生空的渲染(黑色不是像GlClearBuffer那样... WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord u014291990的博客 11-17 1万+ WebGL着色器内置变量 本文是WebGL教程(电子书)的2.7节内容 着色器语言在GPU的着色器单元执行，javascript语言、C语言在CPU上执行，任何一种语言的语法规则，整体设计都和它执行的硬件有一定的关系，GPU和CPU执行程序的硬件单元既有相同点，也有不同点。

这里谈到GPU和CPU不是为了讲解硬件，而是为了提醒大家，学习着色器语言有些语法可以参考javascript、C等执行在CPU... 关于GLSL的gl_FragCoord、gl_FragDepth以及深度计算 翻肚鱼儿的博客 08-10 1379 gl_FragCoord和gl_FragDepth分别是片元着色器的输入和输出变量。

gl_FragCoord是个vec4，四个分量分别对应x,y,z和1/w。

其中，x和y是当前片元的窗口相对坐标，不过它们不是整数，小数部分恒为0.5。

x-0.5和y-0.5分别位于[0,windowWidth-1]和[0,windowHeight-1]内。

windowWidth和windowHeight都以像素为单位，亦即用glViewPort指定的宽高。

w即为乘过了投影矩阵之后点坐标的w，用于p 学习ShaderToy第一天：glsl语言内置函数gl_FragCoord 热门推荐 jinghouxiang的专栏 02-26 1万+ 运行环境：Android opengles版本：2.0 3D引擎库：Rajawali3D ShaderToy上用的shader语言为glsl，效果是用webgl跑的，而webgl封装了opengles， 所以ShaderToy上的例子同样使用于Android端。

ShaderToy基本上都是用fragmentshader对栅格化后的像素进行处 openGL之API学习（三）gl_FragColor hankern的专栏 03-02 6943 vec4输出的颜色用于随后的像素操作 控制输出的颜色，也可以这样设置（在片段着色器中通过out的方式）： #version330 //接受vs传来的插值后的颜色值 invec4Color; outvec4FragColor; voidmain() { //颜色值作为片段着色器fs的输出 FragColor=Color; } ... 理解glsl语言的gl_FragCoord与u_resolution 最新发布 popstarqq的博客 12-28 343 1概念 （1）u_resolution是画布尺寸，即代表画布宽高 （2）gl_FragCoord：是一个vec4类型的变量(x,y,z,1/w)，其中x,y是当前片元的窗口坐标。

直译就是片元坐标 2结合例子理解 如下效果和代码 #ifdefGL_ES precisionmediumpfloat; #endif //u_resolution（画布尺寸） uniformvec2u_resolution; voidmain(){ vec2st=gl_F 有关GLSL中的gl_FragCoord 开发游戏，辉煌全中国 04-15 7086 在研究阴影映射的时候，我发现了一个很有意思的变量，它可以代替我们自己使用的varying变量，给我们带来方便。

但是我们也需要了解它是如何计算的。

Shadertoy_入门基础 qq_35312463的博客 07-03 286 https://www.shadertoy.com/ 一、基本变量 uniformvec3iResolution; //窗口分辨率，单位像素 uniformfloatiTime; //程序运行的时间，单位秒 uniformfloatiTimeDelta; //渲染时间，单位秒 uniformintiFrame; //帧率 uniformfloatiChannelTime[4]; ThreeJS着色器打造震撼海洋动画 liu_lin_sp的博客 01-25 5396 高颜值的网页往往能够吸引更多的用户，随着用户审美的提高，普通的图片拼凑的网站已经很难引起用户的兴趣，将一些动画用在网页中往往更能吸引眼球。

下面介绍如何使用WebGL渲染器实现震撼的动画效果。

1.选择着色器 shadertoy是一个着色器分享交流的网站，网站有很多附带源码的着色器，我们可以选择自己喜欢的着色器，实现酷炫的动画背景。

我以一款大海效果的着色器作为示例，源码如下： /* *"Se... gl_FragCoord 啦啦啦啦 03-11 888 gl_FragCoord表示当前片元着色器处理的候选片元窗口相对坐标信息，是一个vec4类型的变量(x,y,z,1/w)，其中x,y是当前片元的窗口坐标，OpenGL默认以窗口左下角为原点，在着色器中通过布局限定符可以重新设定原点，比如窗口左上角为原点origin_upper_left，窗口大小由glViewport()函数指定。

x,y默认是像素中心而非整... shaderToy一段代码的的理解 Sprinkble的博客 02-01 393 经常会在shaderToy里面看到这样的代码 1 vec2p=(2.0*fragCoord.xyiResolution.xy)/min(iResolution.y,iResolution.x); 它其实等价于下面这段代码: 2 vec2uv=fragCoord.xy/iResolution.xy 2.1 uv=2.0*uv-1.0; if(iResolution.x&g... shader着色器变量gl_FragCoord的含义 aoxuestudy的专栏 06-24 154 前言 当我们编写shader着色器程序的时候，经常看到shader内置变量，gl_Position，gl_FragCoord，感觉一头雾水。

详解 1.gl_Position: #version330core layout(location=0)invec3aPos;//位置变量的属性位置值为0 outvec4vertexColor;//为片段着色器指定一个颜色输出 voidmain() { gl_Position=vec4(aPos... WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程 点燃火柴的博客 03-16 200 在JavaScript程序通过uniform变量向片元着色器传值1.demo效果2.片元着色器的内置变量gl_FragCoord3.demo代码 1.demo效果 如上图，这个demo实现一个紫色渐变效果的三角形，通过使用内置变量FragCoord模拟内插过程实现的 2.片元着色器的内置变量gl_FragCoord 类型和变量 描述 vec4gl_FragCoord 该内置变量的第一参数表示片元在canvas坐标系中的横坐标，第二参数表示片元在canvas坐标系中的纵坐标 使用 gl_FragCoord的xyzw llimite的专栏 02-13 2724 gl_FragCoord.xy代表屏幕的坐標，以分辨率800*600為例窗口，左下角(0,0)Windows(0,600)。

則gl_FragCoord.xy為vec2(0.5，0.5)； 右上角(1,1)windows(800,0)，則gl_FragCoord.xy為vec2(799.5,599.5)。

gl_FragCoord.z為非線性範圍[0,1]。

是從[znear,zfar]映射 “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页 我想当喝水人 CSDN认证博客专家 CSDN认证企业博客 码龄5年 暂无认证 50 原创 5789 周排名 4万+ 总排名 10万+ 访问 等级 887 积分 4914 粉丝 127 获赞 84 评论 431 收藏 私信 关注 热门文章 Three特效-道路流光特效 7150 高德地图3D轨迹回放+视野跟随功能 6365 Three.js项目智慧城市(一) 4615 Three.js后期处理-物体边界线条高亮处理-OutlinePass 4323 Three.js后期处理-高亮虚幻效果-UnrealBloomPass-相机分层渲染 4158 分类专栏 Three 39篇 高德地图 3篇 Echarts 3篇 VR 1篇 web高级开发技巧 3篇 unity3D 2篇 最新评论 vue+高德地图信息窗体如何实现点击事件 88岁自学前端: 请问这是在PC端吗？同样的方法好像移动端onclick不生效 Three.js项目智慧城市(二) qq_40793303: 推荐个免费下载的模型网站 unity3D中导出webgl并使用js进行交互 一个努力的人。

: 博主,能发一下源文件吗? Three.js后期处理-高亮虚幻效果-UnrealBloomPass-相机分层渲染 m0_61395817: 跟着做的无效果 Three.js后期处理-物体边界线条高亮处理-OutlinePass weixin_44326121: el.offsetWidth,el.offsetHeight这个el是啥啊? 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 oculus设备VR漫游 AR室内导航-Three.js AR人脸识别Three.js+tensorflow.js（一） 2021年35篇 2020年15篇 目录 目录 分类专栏 Three 39篇 高德地图 3篇 Echarts 3篇 VR 1篇 web高级开发技巧 3篇 unity3D 2篇 目录 打赏作者 我想当喝水人 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值