textures - webgl:与其他程序/着色器共享纹理

Question

我有两个着色器，它们使用不同的顶点数组和不同的统一值，但它们使用相同的纹理(spritesheet/atlas)。它们是否可以共享相同的纹理(不会导致纹理被发送到 GPU 两次)？

背景: 我的游戏在我的笔记本电脑上出现了一些严重的性能问题，这些问题似乎与 GPU 相关。我当前的实现使用两张 Canvas ，一张用于背景，一张用于前景。然后他们为最终图像进行构图(绘制到第三张 Canvas 上)。我的背景使用 4 个纹理，而我的前景有一个大 Sprite 表。前台和后台都只使用一次绘制调用。

我希望通过将所有内容绘制到一张 Canvas 上并将所有纹理组合到一张 Sprite 表中来提高性能。这绝对有可能不会导致任何改善。我的背景使用噪声来混合纹理，主要问题很可能是着色器的复杂性。

Answer 1

is it possible for them to share the same texture (without causing the texture to be sent to the gpu twice

是的

纹理仅在您调用 gl.texImage2D 或 gl.texSubImage2D 时发送到 GPU。

设置 WebGL 程序的最常见形式是

初始化时

• 创建/编译/链接程序
• 创建/上传缓冲区(顶点数据)
• 创建/上传纹理

渲染时

• 使用程序
• 设置属性
• 设置制服和绑定(bind)纹理
• 画画

对于纹理，“在初始化时间部分”通常意味着调用

gl.createTexture  // to create a teture
gl.bindTexture    // to assign the texture so follow commands will affect it.
gl.texImage2D     // to upload data
gl.texParameteri  // to set filtering
gl.generateMipmap // if you need mips

运行时

gl.activeTexture // to choose a texture unit
gl.bindTexture   // to assign an existing texture to the active texture unit
gl.uniform1i     // to tell the shader which unit to use for a specific sampler

就将纹理合并到纹理图集中而言，是的，这可能会使您的程序运行得更快。这并不是因为您上传的纹理较少，而是因为您可以用更少的绘制调用绘制更多的东西。 See the cube example near the bottom of this article .