glsl - 使用 gl_FragCoord 在四边形中创建一个洞

标签 glsl webgl

我正在学习 WebGL,并且想要执行以下操作:

使用片段着色器创建一个带有方孔的 3D 四边形。

看起来我需要根据 gl_FragCoord 适本地设置 gl_FragColor

我也应该:

a) 将 gl_FragCoord 从窗口坐标转换为模型坐标,进行适当的几何检查,并设置颜色。

或者

b) 以某种方式将孔信息从顶点着色器传递到片段着色器。也许使用纹理坐标。这部分我不太清楚。

我对实现上述任一内容感到模糊,因此我希望获得有关其中任一内容的一些编码提示。

我的背景是一位 OpenGL 老手,他没有跟上新的着色语言范例,现在正在努力 catch ......

编辑(2011 年 3 月 27 日):

我已经能够根据 tex 坐标提示成功实现上述内容。我在下面的链接中编写了这个示例:

Quads with holes - example

Quads with holes - example

最佳答案

最简单的方法是使用纹理坐标。只需将 Corrds 作为额外的属性数组提供,然后使用变量传递到片段着色器。着色器应包含类似以下内容:

顶点:

attribute vec3 aPosition;
attribute vec2 aTexCoord;

varying vec2 vTexCoord;

void main(){
     vTexCoord=aTexCoord;
     .......
}

片段:

varying vec2 vTexCoord;

void main(){
     if(vTexCoord.x>{lower x limit} && vTexCoord.x<{upper x limit} && vTexCoord.y>{lower y limit} && vTexCoord.y<{upper y limit}){
discard; //this tell GFX to discard this fragment entirly
}
.....
}

关于glsl - 使用 gl_FragCoord 在四边形中创建一个洞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5418458/

相关文章:

java - 使用 OOP 的多个着色器、对象和 Material

java - GLSL 点光源变换

javascript - requestAnimFrame 无法提供恒定的帧速率,但我的物理引擎需要它

jQuery 选项卡菜单和 WebGL

GLSL 片段着色器获取顶点位置

c++ - 创建原始 OpenGL 纹理数据 (C++)

c++ - OpenGL 着色器加载失败

webgl - 上传统一 block 的正确顺序是什么?

webgl - WebGL 中的最大纹理数?

opengl-es - 在一个着色器 channel 中渲染多个纹理