绘制 2d Uint8ClampedArray RGBA - 使用 WebGL 的数据答案

【问题标题】：Drawing 2d Uint8ClampedArray RGBA - data with WebGL绘制 2d Uint8ClampedArray RGBA - 使用 WebGL 的数据
【发布时间】：2015-04-20 16:06:06
【问题描述】：

我正在尝试将我的 HTML5 2d 平台游戏更改为使用 WebGL 渲染。

链接到我的游戏：http://yle.fi/galaxi/mazq/2014/katko_dev/（还没有 WebGL 实现）

它目前通过单个“context.putImageData(imgData, 0, 0)”调用渲染到画布元素，但在 firefox 上速度很慢，并且在其他浏览器上也成为大分辨率的瓶颈。

我已成功将我的 Uint8ClampedArray RGBA 用作“全屏”平面的纹理，但通过调用...更新此纹理数据...

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture_data);

...至少对于 Firefox 来说，50fps 似乎太慢了。

-有没有更好的方法来更新纹理？

-是否有其他方法可以显示 2d Uint8ClampedArray RGBA - 使用 WebGL 的数据？

-是否有可能以某种方式直接覆盖颜色缓冲区？

【问题讨论】：

你的游戏看起来很不错，但对我来说它以 10 fps 的速度运行。从快速的 cpu 配置文件中，无需查看您的代码，我假设您的瓶颈不是 gpu，而是主要是 cpu，因为您几乎 100% 的 cpu 使用率，主要是在光线跟踪（~30%）和“程序”（本机代码) (~50%)
谢谢。它在移动设备、旧台式机和 IE 上运行不佳。我最近在 Firefox 上失去了很多性能。我没有注意到这一点，因为我最近只使用了 Chrome。我正在尝试切换到 WebGL，以便能够使用 GPU 进行光线追踪。

标签： javascript webgl

【解决方案1】：

-有没有更好的方法来更新纹理？

据我所知没有，除了重写引擎以使用真正的 WebGL 调用来绘制而不是直接操作字节。抱歉，我知道这不是你想听到的。

-是否有其他方法可以显示 2d Uint8ClampedArray RGBA - 使用 WebGL 的数据？

你需要它是 RGBA 吗？例如，如果它是基于 8 位索引调色板的呢？那么您将只上传 1/4 的数据。 See this answer for how to do indexed paletteed graphics in WebGL。注意：不能保证这会更快。尽管您将上传较少的数据，但驱动程序可能会根据 GPU 将该数据扩展为 RGBA。

-是否有可能以某种方式直接覆盖颜色缓冲区？

没有

【讨论】：