如何使用OpenGL中的着色器在每个面上制作径向渐变答案

【问题标题】：How to make radial gradient on each face using shader in OpenGL如何使用OpenGL中的着色器在每个面上制作径向渐变
【发布时间】：2014-06-16 13:41:03
【问题描述】：

使用简单的着色器，我找到了一种创建渐变的方法。这是我工作的结果： http://goo.gl/A7pY01（OpenGL ES 2.0 Shader - 2D Radial Gradient in Polygon问题后有一点更新）

很好，但我仍然需要在网格的每个面上显示此渐变图案。或者在广告牌面上，就像它是一种纹理一样。

glsl 函数gl_FragCoord 返回窗口相关坐标。有人可以解释一下如何将其转换为与面部相关的坐标然后绘制我的模式吗？

【问题讨论】：

如何为网格设置纹理坐标？您可以使用gl_TexCoord[n]（其中n 是纹理单元）。
我在这个例子中没有纹理。
您不需要纹理来设置纹理坐标。您仍然可以为每个顶点上的每个纹理单元设置纹理坐标。这使您可以根据需要控制它们并在着色器中使用它们，即使您从未最终对纹理进行采样。
你能把你的答案传播出去，或者举个例子吗？
为了做到这一点，我们需要更多关于如何绘制几何图形的信息。您是否在即时模式下使用遗留代码？ VBO？你在处理什么版本的 OpenGL？

标签： opengl glsl gradient

【解决方案1】：

好的。 stackoverflow的一点冲浪给了我这个话题：OpenGL: How to render perfect rectangular gradient?

这是含义字符串：gl_FragColor = mix(color0, color1, uv.u + uv.v - 2 * uv.u * uv.v);

当然，我们不能将窗口空间坐标转换为“与人脸相关”的东西，但我们可以使用人脸的 UV 坐标。所以，我决定，如果我们有一个方形面，其 uv 坐标对应于全尺寸纹理（如 0,0；0,1；1,0；1,1）；所以结构的中心是0.5,0.5。这可能是我的圆形渐变的中心。

所以我的片段着色器代码是：

vec2 u_c = vec2(0.5,0.5);

float distanceFromLight = length(uv - u_c);

gl_FragColor = mix(vec4(1.,0.5,1.,1.), vec4(0.,0.,0.,1.), distanceFromLight*2.0);

顶点着色器：

gl_Position = _mvProj * vec4(vertex, 1.0);
uv = uv1;

当然，我们需要给出正确的UV坐标，但是点明白了。

这是一个例子： http://goo.gl/A7pY01

【讨论】：