gl_PositionGLSL arrayGl_fragcolor opacity

WebGL着色器内置变量gl_PointSize - gl_FragCoord - CSDN博客

文章推薦指數： 80 %
投票人數：10人

gl_FragColor, 片元颜色值, vec4. gl_FragCoord, 片元坐标，单位像素, vec2. gl_PointCoord, 点渲染模式对应点像素坐标, vec2 ... WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord 郭隆邦技术博客 于 2019-11-1720:46:14 发布 16225 收藏 35 分类专栏： WebGL 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/u014291990/article/details/103112914 版权 WebGL 专栏收录该内容 40篇文章 20订阅 订阅专栏 WebGL着色器内置变量 WebGL中文教程网 本文是WebGL教程(电子书)的2.7节内容 着色器语言在GPU的着色器单元执行，javascript语言、C语言在CPU上执行，任何一种语言的语法规则，整体设计都和它执行的硬件有一定的关系，GPU和CPU执行程序的硬件单元既有相同点，也有不同点。

这里谈到GPU和CPU不是为了讲解硬件，而是为了提醒大家，学习着色器语言有些语法可以参考javascript、C等执行在CPU上的语言，比如if语句、for语句、浮点数、布尔值，有些语法完全没必要参考javascript、C等执行在CPU上的语言，比如着色器语言中的内置变量gl_PointSize、gl_Position、gl_FragColor等等，声明一些变量使用的关键字attribute、uniform、varying。

学习着色器语言的时候，如果你有兴趣可以深入研究GPU，对于WebGL学习来说，把GPU当成一个黑箱就可以，你只需要学会着色器语言的编程规则即可 普通变量，着色器语言和javascript语言一样需要先声明后使用，所谓内置变量就是不用声明可以直接赋值，主要是为了实现特定的功能。

内置变量含义值数据类型gl_PointSize点渲染模式，方形点区域渲染像素大小floatgl_Position顶点位置坐标vec4gl_FragColor片元颜色值vec4gl_FragCoord片元坐标，单位像素vec2gl_PointCoord点渲染模式对应点像素坐标vec2 gl_PointSize 当WebGL执行绘制函数gl.drawArrays()绘制模式是点模式gl.POINTS的时候，顶点着色器语言main函数中才会用到内置变量gl_PointSize，使用内置变量gl_PointSize主要是用来设置顶点渲染出来的方形点像素大小。

voidmain(){ //给内置变量gl_PointSize赋值像素大小，注意值是浮点数 gl_PointSize=20.0; } //绘制函数绘制模式：点gl.POINTS gl.drawArrays(gl.POINTS,0,点数量); gl_Position gl_Position内置变量主要和顶点相关，出现的位置是顶点着色器语言的main函数中。

gl_Position内置变量表示最终传入片元着色器片元化要使用的顶点位置坐标。

如果只有一个顶点，直接在给顶点着色器中设置内置变量gl_Position赋值就可以，内置变量gl_Position的值是四维向量vec4(x,y,z,1.0),前三个参数表示顶点的xyz坐标值，第四个参数是浮点数1.0。

voidmain(){ //顶点位置，位于坐标原点 gl_Position=vec4(0.0,0.0,0.0,1.0); } 如果你想完全理解内置变量gl_Position，必须建立逐顶点的概念，如果javascript语言中出现一个变量赋值，你可以理解为仅仅执行一次，但是对于着色器中不能直接这么理解，如果有多个顶点，你可以理解为每个顶点都要执行一遍顶点着色器主函数main中的程序。

多个顶点的时候，内置变量gl_Position对应的值是attribute关键字声明的顶点位置坐标变量apos，顶点位置坐标变量apos变量对应了javascript代码中多个顶点位置数据。

//attribute声明vec4类型变量apos attributevec4apos; voidmain(){ //顶点坐标apos赋值给内置变量gl_Position //逐顶点处理数据 gl_Position=apos; } 逐顶点处理的案例：WebGL的每一个顶点位置坐标都会通过平移矩阵m4进行矩阵变换，相当于批量操作所有的顶点数据，进行了平移，只是平移的计算通过矩阵乘法运算完成的而已。

所谓的逐顶点，在这里体现的就是每一个顶点都会执行main函数中的矩阵变换。

你可以参照生活的流水线去理解，比如多个同样的设备从我这里经过，我会分别对他们进行同样的操作，比如安装一个零件。

//attribute声明vec4类型变量apos attributevec4apos; voidmain(){ //创建平移矩阵(沿x轴平移-0.4) //100-0.4 //0100 //0010 //0001 mat4m4=mat4(1,0,0,0,0,1,0,0,0,0,1,0,-0.4,0,0,1); //平移矩阵m4左乘顶点坐标(vec4类型数据可以理解为线性代数中的nx1矩阵，即列向量) //逐顶点进行矩阵变换 gl_Position=m4*apos; } gl_Position的顶点数据传递 attribute声明的顶点变量数据如何通过javascript的WebGLAPI批量传递所有顶点数据。

gl_FragColor gl_FragColor内置变量主要用来设置片元像素的颜色，出现的位置是片元着色器语言的main函数中。

内置变量gl_Position的值是四维向量vec4(r,g,b,a),前三个参数表示片元像素颜色值RGB，第四个参数是片元像素透明度A，1.0表示不透明,0.0表示完全透明。

//片元颜色设置为红色 gl_FragColor=vec4(1.0,0.0,0.0,1.0); 理解内置变量gl_Position需要建立逐顶点的概念，对于内置变量gl_FragColor而言，需要建立逐片元的概念。

顶点经过片元着色器片元化以后，得到一个个片元，或者说像素点，然后通过内置变量gl_FragColor给每一个片元设置颜色值，所有片元可以使用同一个颜色值，也可能不是同一个颜色值，可以通过特定算法计算或者纹理像素采样。

根据位置设置渐变色 voidmain(){ //片元沿着x方向渐变 gl_FragColor=vec4(gl_FragCoord.x/500.0*1.0,1.0,0.0,1.0); } 纹理采样 //接收插值后的纹理坐标 varyingvec2v_TexCoord; //纹理图片像素数据 uniformsampler2Du_Sampler; voidmain(){ //采集纹素，逐片元赋值像素值 gl_FragColor=texture2D(u_Sampler,v_TexCoord); } 片元坐标gl_FragCoord 内置变量gl_FragCoord表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标，坐标原点是canvas画布的左上角，x轴水平向右，y竖直向下，gl_FragCoord坐标的单位是像素，gl_FragCoord的值是vec2(x,y),通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。

下面代码是把canvas画布上不同区域片元设置为不同颜色。

voidmain(){ //根据片元的x坐标，来设置片元的像素值 if(gl_FragCoord.x<300.0){ //canvas画布上[0,300)之间片元像素值设置 gl_FragColor=vec4(1.0,0.0,0.0,1.0); }elseif(gl_FragCoord.x<=400.0){ //canvas画布上(300,400]之间片元像素值设置 gl_FragColor=vec4(0.0,1.0,0.0,1.0); }else{ //canvas画布上(400,500]之间片元像素值设置 gl_FragColor=vec4(0.0,0.0,1.0,1.0); } //所有片元设置为红色 //gl_FragColor=vec4(1.0,0.0,0.0,1.0); } 片元的颜色随着坐标变化(设置一个渐变色效果) voidmain(){ //片元沿着x方向渐变 gl_FragColor=vec4(gl_FragCoord.x/500.0*1.0,1.0,0.0,1.0); } 渲染点片元坐标gl_PointCoord 如果你想了解内置变量gl_PointCoord表示的坐标含义，就需要了解WebGL绘制函数gl.drawArrays()的绘制模式参数gl.POINTS。

绘制函数gl.drawArrays()绘制模式参数设置为点渲染模式gl.POINTS，WebGL会把顶点渲染为一个方形区域，在顶点着色器代码中可以通过内置变量gl_PointSize设置顶点渲染的方向区域像素大小。

一个顶点渲染为一个方形区域，每个方形区域可以以方向区域的左上角建立一个直角坐标系，然后使用内置变量gl_PointCoord描述每个方形区域中像素或者说片元的坐标，比如方形区域的左上角坐标是(0.0,0.0),每个方形区域几何中心坐标是(0.5,0.5)，右下角坐标是(1.0,1.0)。

注意内置变量gl_PointCoord和gl_FragCoord表示的像素坐标含义不同,查看下图表示。

//点绘制模式渲染10个顶点 gl.drawArrays(gl.POINTS,0,10); 顶点着色器中通过内置变量gl_PointSize设置点渲染的方形区域像素尺寸。

voidmain(){ //点渲染的方形区域像素大小 gl_PointSize=20.0; ... } gl_PointCoord应用案例 gl.POINTS绘制模式点默认渲染效果是方形区域，通过下面片元着色器代码设置可以把默认渲染效果更改为圆形区域。

precisionlowpfloat;//所有float类型数据的精度是lowp voidmain(){ //计算方形区域每个片元距离方形几何中心的距离 //gl.POINTS模式点渲染的方形区域,方形中心是0.5,0.5,左上角是坐标原点,右下角是1.0,1.0， floatr=distance(gl_PointCoord,vec2(0.5,0.5)); //根据距离设置片元 if(r<0.5){ //方形区域片元距离几何中心半径小于0.5，像素颜色设置红色 gl_FragColor=vec4(1.0,0.0,0.0,1.0); }else{ //方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉： discard; } } 通过gl_PointCoord返回的是片元纵横坐标vec2(x,y),自然通过xy分量gl_PointCoord.x、gl_PointCoord.y方式可以分别访问片元坐标的横坐标、纵坐标， 郭隆邦技术博客 关注 关注 10 点赞 踩 5 评论 35 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 openGL之API学习（三）gl_FragColor hankern的专栏 03-02 6943 vec4输出的颜色用于随后的像素操作 控制输出的颜色，也可以这样设置（在片段着色器中通过out的方式）： #version330 //接受vs传来的插值后的颜色值 invec4Color; outvec4FragColor; voidmain() { //颜色值作为片段着色器fs的输出 FragColor=Color; } ... OpenGL学习笔记（七）GLSL中的gl_Position 皮皮#2500 02-16 9909 OpenGL学习笔记（七）GLSL中的gl_Position 在编写顶点着色器的时候，遇到了一个变量gl_Position如下： #version330core layout(location=0)invec3aPos;//位置变量的属性位置值为0 outvec4vertexColor;//为片段着色器指定一个颜色输出 voidmain() { gl_Po... 评论 5 您还未登录，请先 登录 后发表或查看评论 openGL着色器的参数传递 HGGshiwo的博客 04-03 186 前言 有人评价着色器的出现好像对openGL来说是一大退步。

因为之前openGL绘制图形只需要对各个绘制的属性进行赋值（openGL叫做管线，其实按照我的理解就是属性），比如属性FragColor决定了绘制的点的位置，属性glPostion决定了绘制点的颜色。

但是着色器出现，随之而来的是VBO,VAO的出现。

这允许绘图者自己定义需要哪些属性，以及如何传递它们。

里面代码看似复杂繁多，其实需要更改的只是几个简单的内容：VBO，VAO，EBO等。

其他的代码是固定的。

VBO 是一个一维数组，里面按照顺序摆放点 OpenGL绘制方式详解 先锋小牛 12-29 4590 简述 OpenGL绘制方式 OpenGL可以支持很多不同的图元类型，最基础的为点，线，或三角形。

线和三角形可以组合成条带，循环体或者扇面三角形。

点，线，或三角形也是大部分图象硬件设备支持的基础图元类型。

  点 点可以通过单一的顶点来表示，点实际上不存在面积，在OpenGL中它通过屏幕上的一个矩形区域来模拟，在渲染点源的时候，OpenGL会通过光栅化规则类判断点的位置。

以点位中心绘制一个 探究gl_Position.w qq_21476953的博客 04-22 283 探究gl_Position.w 结论:w是顶点距离相机的距离。

0、环境搭建 geometry: constsize=10 vargeometry=newTHREE.BoxBufferGeometry(size,size,size); varmaterial=newTHREE.ShaderMaterial({ uniforms:{ camPos:{type:"f",value:this.stage.camera.position.z} }, v Opengl函数glPointSize() u010029439的博客 07-20 6660 https://baike.baidu.com/item/glPointSize/9516768?fr=aladdin 个人理解：opengl中的点不同于像素，它的意思是我们在屏幕上绘制的直径可设置的点。

当我们把参数设置很大时，会发现这个点变成一个大大的方块。

（： glPointSize 编辑讨论 本词条缺少概述图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！... 关于gl_FragCoord的理解 qq_39503511的博客 01-30 844 关于gl_FragCoord的理解概述 概述 记录一下在使用gl_FragCoord的一些知识点 先上shader来看效果 letshader={ vs:` voidmain(){ gl_Position=projectionMatrix*viewMatrix*modelMatrix*vec4(position,1.0); } `, fs:` //屏幕尺寸 uniformvec2 WebGL—gl_Positiongl_FragCoordgl_PointCoord区别 weixin_43787178的博客 05-06 359 gl_Position，gl_FragCoord，gl_PointCoord分别描述渲染管线中的顶点，片元，点域图元（点精灵/PointSprite）光栅化后的片元在各自坐标系中的大小；可以借助上图区分记忆。

区别： gl_Position： 1.gl_Position描述的是顶点在世界坐标系中的坐标； 2.是绝对大小； gl_FragCoord： 1.gl_FragCoord描述的是片元在以Canvas画布窗口坐标系统中的坐标； 2.是绝对大小； 3.单位为像素； gl_PointCoord： 1.gl. 【我的OpenGL学习进阶之旅】介绍一下图元的类型：三角形、直线和点精灵 字节卷动 12-05 556 一、图元 图元是可以用OpenGLES中的glDrawArrays、glDrawElements、glDrawRangeElements、glDrawArraysInstanced和glDrawElementsInstanced命令绘制的几何形状对象。

图元由一组表示顶点位置的顶点描述。

其他如颜色、纹理坐标和几何法线等信息也作为通用属性与每个顶点关联。

OpenGLES可以绘制如下图元： 三角形 直线 点精灵 1.1三角形 三角形代表着描述由3D应用程序渲染的几何形状对象时最常用的方法。

Open openGL之API学习（一）gl_Position 热门推荐 hankern的专栏 03-02 1万+ 默认是归一化的裁剪空间坐标（xyz各个维度的范围为-1到1） 仅能在顶点着色器中使用，既是输入也是输出 gl_Position赋值范围就是float的取值范围(32位)，只不过只有[-1,1]区间的片元被绘制 它是vec4类型的，不能重声明为dvec4等类型 ... QML进阶(七)-OpenGL渲染着色器效果实现 最新发布 yang1fei2的博客 05-04 357 通过QML的ShaderEffect和ShaderEffectSource元素，我们可以运用OpenGL的能力实现各种各样的渲染效果。

着色器的渲染算法是通过OpengGL的渲染语言实现的。

这意味着，我们需要实现QML代码和着色器代码的混合编程，在程序执行的时候对应的着色器程序会被发送到GPU上编译运行。

QML的着色器程序允许用户与OpenGL进行实时交互，动态修改。

OpenGL着色器 OpenGL的着色器主要分为两种:顶点着色器(vertexshader)和片源着色器(FragmentShader) Three之three.js（webgl）着色器材质的一些内置变量的简单说明(gl_PointSize/gl_Position/gl_PointCoord/gl_FragCoord...) 仙魁XAN 04-09 184 three.js着色器的内置变量，分别是 gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变） gl_Position：控制顶点选完的位置 gl_FragColor：片元的RGB颜色值 gl_FragCoord：片元的坐标，同样是以像素为单位 gl_PointCoord：在点渲染模式中，对应方形像素坐标 他们或者单个出现在着色器中，或者组团出现在着色器中，是着色器的灵魂 ... 我的webgl学习之路（8）设置各点的颜色 七岁 09-09 1623 方法与上面一样，唯一的区别就是颜色设置； 颜色的设置必须在片元着色器中，gl_FragColor里 我们attribute只能在顶点着色器中使用；那么怎么办； Varying用于两个着色器之间通信； 如图： 如下： <scriptid="vs"type="x-shader/x-vertex">   attributevec4a_Position;   ... Shader中的颜色计算 weixin_33692284的博客 09-20 736 下面介绍Shader中gl_FragColor的计算与转换： 一、颜色计算 1.加 这里要讲讲三原色和三基色：三原色一般指的是红、绿、蓝三种，简称RGB，这是加色系。

就是光源只含有特定的波段，本身就是色光，将不同颜色的光加在一起形成新的颜色。

典型的例子是显示屏，关系如下： 显然，shader中的颜色属于加色系。

当我们把颜色相加时，会形成新的颜色，并且颜色会往白色靠拢。

颜色的混合规律... glPointSize()未起作用glDrawElements x2017x的博客 04-24 1300 glPointSize(GLfloatsize); glDrawElements(GL_POINTS,...)画点默认点的半径为一个像素，因此去查询得知使用这个函数可以设置画出的点的大小，size为点的半径（以像素为单位），试了好久未生效。

Google后得出结论：OpenGLES2.0版本后glPointSize()改为了在顶点着色器上设置gl_PointSize。

outgl_P... gl_FragCoord的含义 fatcat123的博客 01-06 7121 gl_FragCoord表示当前片元着色器处理的候选片元窗口相对坐标信息，是一个vec4类型的变量(x,y,z,1/w)，其中x,y是当前片元的窗口坐标，OpenGL默认以窗口左下角为原点，在着色器中通过布局限定符可以重新设定原点，比如窗口左上角为原点origin_upper_left，窗口大小由glViewport()函数指定。

x,y默认是像素中心而非整... WebGL空间变换以及gl_FragCoord的运用 NCQuan 12-16 211 WebGL空间变换 局部坐标系——》世界坐标系——》相机坐标系——》剪裁坐标系——》规范化设备坐标系——》屏幕坐标系 模型变换：world.xyzw=modelMatrix*position.xyzw; 视图变换:：eye.xyzw=viewMaterix*world.xyzw; 投影变换：clip.xyzw=projectMatrix*eye.xyzw; 透视除法(w归1化)：ndc.xyzw=clip.xyzw/clip.w; 视口变换：screen.xy=(nd shader编程-着色器中颜色基础（WebGL-Shader开发基础06） 点燃火柴的博客 11-23 599 shader编程-着色器中颜色基础1.屏幕颜色2.颜色根据屏幕坐标变化3.形状颜色处理4.借助A通道处理形状颜色 1.屏幕颜色 在之前的文章中我们用一个三维向量表示颜色 vec3line_color=vec3(1.0,1.0,0.0); vec3color=vec3(0.6); 用三维向量表示颜色因为正好它的三个分量可以代表RGBA格式的颜色中的Red（红色）Green（绿色）Blue（蓝色）分量， 我们在最后通常会有一句 gl_FragColor=vec4(color,1.0 卜若的代码笔记-webgl系列-第二十一章：glsl的应用(一)>实现透明效果 qq_37080133的博客 09-22 322 1在网页中，我们可能会有这种需求：比如我想让一张图里面指定的某张图片的某些颜色给透明掉： 比如：我希望这张图 白色部分不可见：如以下效果： 那么，我们就可以通过webgl来实现： glsl的基础部分请看前面的系列内如，现在我们单独把shader拎出来讲： 首先，要使用透明，那么必然要开启混合： glContext.enable(glContext.... “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页 郭隆邦技术博客 CSDN认证博客专家 CSDN认证企业博客 码龄8年 暂无认证 141 原创 2万+ 周排名 73万+ 总排名 48万+ 访问 等级 6431 积分 595 粉丝 179 获赞 120 评论 829 收藏 私信 关注 热门文章 WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord 16195 Three.js删除模型对象(.remove()和·dispose()方法) 13637 Three.js视频教程 12295 Three.js自发光贴图.emissiveMap 10456 产品三维模型在线预览 9667 分类专栏 Three.js 122篇 WebGL 40篇 视频教程 1篇 Threejs中文文档 31篇 最新评论 WebGL教程(电子书) 摇摇七喜呀: 同问现在有源代码了么，出不来啊 Threejs纹理对象Texture阵列、偏移、旋转(纹理动画) 骑着骆驼去看海: 管道里面白色的线条是贴图吗？ Three.js解析外部模型的帧动画 star117968524: model.json在哪里？ HTML5地球Web3D可视化(WebGLThree.js) 蔡徐鲲: THREE.Face3 在最新的threejs中没有了吗 WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord loveRoselove: gl_FragCoord默认以左下角为坐标原点，可以通过设置或者通过y转变成左上角原点，然后gl_FragCoord是4维向量xyzw分量，gl_PointCoord是2维向量，有xy分量。

您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 HTML5地球Web3D可视化(WebGLThree.js) Three.js平面Plane Three.js三角形Triangle 2021年1篇 2019年183篇 2018年13篇 目录 目录 分类专栏 Three.js 122篇 WebGL 40篇 视频教程 1篇 Threejs中文文档 31篇 目录 打赏作者 郭隆邦技术博客 你的鼓励将是我创作的最大动力 ¥2 ¥4 ¥6 ¥10 ¥20 输入1-500的整数 余额支付 (余额：--) 扫码支付 扫码支付：¥2 获取中 扫码支付 您的余额不足，请更换扫码支付或充值 打赏作者 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

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

余额充值

請為這篇文章評分？

延伸文章資訊