使用 OpenGL ES 的（径向）渐变填充

发布于 2024-11-24 07:32:26 字数 345 浏览 2 评论 0原文

我目前正在使用以下代码绘制形状；

GLfloat vertex = // vertex points

glLineWidth(2);

glEnableClientState(GL_VERTEX_ARRAY);
glColor4f(1.0, 0.0, 0.0, 1.0);
glVertexPointer(2, GL_FLOAT, 0, vertex);
glDrawArrays(GL_LINE_STRIP, 0, vertex_size);
glDisableClientState(GL_VERTEX_ARRAY);

我绘制的形状自行闭合，是否可以用（径向）渐变填充该形状？如果是这样，该如何去做呢？

原文

I am currently drawing a shape using the following code;

GLfloat vertex = // vertex points

glLineWidth(2);

glEnableClientState(GL_VERTEX_ARRAY);
glColor4f(1.0, 0.0, 0.0, 1.0);
glVertexPointer(2, GL_FLOAT, 0, vertex);
glDrawArrays(GL_LINE_STRIP, 0, vertex_size);
glDisableClientState(GL_VERTEX_ARRAY);

The shape I draw closes itself, is it possible to fill this shape with a (radial) gradient? If so, how to go about doing this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单挑你×的.吻 2024-12-01 07:32:26

如果您使用 ES 1.x，则无法获得计算的每像素径向渐变，因为颜色是跨面线性插值的。因此，您可以上传径向渐变纹理或构建合适的几何体来提供近径向渐变。

在 ES 2.x 中没有这样的限制，因为您正在为自己定义每个像素发生的情况。一个极其幼稚的径向渐变片段着色器可能是（即兴编码，未彻底检查语法）：

varying mediump vec3 myPosition;
uniform mediump vec3 referencePosition;
uniform lowp vec4 centreColour, outerColour;

[...]

mediump float distanceFromReferencePoint =
                       clamp(distance(myPosition, referencePosition), 0.0, 1.0);

gl_FragColor = mix(centreColour, outerColour, distanceFromReferencePoint);

If you're in ES 1.x then you can't get a computed per-pixel radial gradient because colours are interpolated linearly across faces. So you can either upload a radial gradient texture or build suitable geometry to give a near-radial gradient.

In ES 2.x there's no such restriction because you're defining what happens per-pixel for yourself. An extremely naive radial gradient fragment shader might be (coded extemporaneously, not thoroughly grammar checked):

varying mediump vec3 myPosition;
uniform mediump vec3 referencePosition;
uniform lowp vec4 centreColour, outerColour;

[...]

mediump float distanceFromReferencePoint =
                       clamp(distance(myPosition, referencePosition), 0.0, 1.0);

gl_FragColor = mix(centreColour, outerColour, distanceFromReferencePoint);

回复收藏 0 原文

~没有更多了~