如何画“发光的” OpenGL ES 中的线

发布于 2024-12-09 02:25:52 字数 219 浏览 0 评论 0原文

在此处输入图像描述

能否请您分享一些关于如何绘制纹理线(平滑或具有纹理线)的代码(任何语言)发光效果,蓝线,四个点)由许多点组成,就像使用 OpenGL ES 1.0 的附加图像一样。

我正在尝试使用纹理 16x16 或 1x16 像素对 GL_LINE_STRIP 进行纹理化,但没有成功。

enter image description here

Could you please share some code (any language) on how draw textured line (that would be smooth or have a glowing like effect, blue line, four points) consisting of many points like on attached image using OpenGL ES 1.0.

What I was trying was texturing a GL_LINE_STRIP with texture 16x16 or 1x16 pixels, but without any success.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

玩世 2024-12-16 02:25:52

在 ES 1.0 中,您可以创造性地使用渲染到纹理来实现您想要的效果,但在填充率方面可能会付出高昂的代价。 Gamasutra 有一篇(旧)文章介绍了 Tron 中如何实现发光2.0 游戏 — 您需要特别注意 DirectX 7.0 注释,因为它与 ES 1.0 一样是固定管道。在您的情况下,您可能只想显示高斯图像,而不是将其与原始图像混合,因为您只对发光感兴趣。

我对本文的总结是:

  • 将所有线条渲染为纹理,作为正常的实心细线。将此纹理称为源纹理。
  • 通过获取刚刚渲染的源纹理并将其绘制到另一个纹理(例如,我将其称为水平模糊纹理)五次,对其应用线性水平模糊。在偏移量 x = 0 处绘制一份副本,不透明度为 1.0,再绘制两份副本 — 一份在 x = +1 处,一份在 x = -1 处 — 不透明度为 0.63,最后两份副本 — 一份在 x = +2 处,另一份在 x = +2 处,另一份在 x = +1 处,另一份在 x = -1 处。 x = -2 时,不透明度为 0.17。使用添加剂混合。
  • 通过采用水平模糊纹理并执行基本相同的步骤,但使用 y 偏移而不是 x 偏移,对其应用线性垂直模糊。

这些不透明度数字源自此页面上的 2d 高斯内核。尝试使用它们来影响向线外侧的下降。

请注意此处涉及的额外成本:表面上您添加了十个全屏纹理绘制以及一些帧缓冲区交换。通过使用多重纹理,您可能可以减少绘制次数。着色器方法可能会在一次传递中完成水平和垂直步骤。

In ES 1.0 you can use render-to-texture creatively to achieve the effect that you want, but it's likely to be costly in terms of fill rate. Gamasutra has an (old) article on how glow was achieved in the Tron 2.0 game — you'll want to pay particular attention to the DirectX 7.0 comments since that was, like ES 1.0, a fixed pipeline. In your case you probably want just to display the Gaussian image rather than mixing it with an original since the glow is all you're interested in.

My summary of the article is:

  • render all lines to a texture as normal, solid hairline lines. Call this texture the source texture.
  • apply a linear horizontal blur to that by taking the source texture you just rendered and drawing it, say, five times to another texture, which I'll call the horizontal blur texture. Draw one copy at an offset of x = 0 with opacity 1.0, draw two further copies — one at x = +1 and one at x = -1 — with opacity 0.63 and a final two copies — one at x = +2 and one at x = -2 with an opacity of 0.17. Use additive blending.
  • apply a linear vertical blur to that by taking the horizontal blur texture and doing essentially the same steps but with y offsets instead of x offsets.

Those opacity numbers were derived from the 2d Gaussian kernel on this page. Play around with them to affect the fall off towards the outside of your lines.

Note the extra costs involved here: you're ostensibly adding ten full-screen textured draws plus some framebuffer swapping. You can probably get away with fewer draws by using multitexturing. A shader approach would likely do the horizontal and vertical steps in a single pass.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文