WebGL：与其他程序/着色器共享纹理

Question

我有两个着色器，它们使用不同的顶点数组和不同的统一值，但它们使用相同的纹理（精灵表/图集）。它们能否共享相同的纹理（而不会导致纹理被发送两次到GPU）？

背景： 我的游戏在我的笔记本电脑上存在严重的性能问题，似乎与GPU有关。我的当前实现使用两个画布，一个用于我的背景，一个用于我的前景。然后将它们组合成最终图像（绘制到第三个画布上）。我的背景使用4个纹理，而我的前景具有一个大的精灵表。前景和背景仅使用一个绘制调用。

我希望通过将所有内容绘制到一个画布上，并将所有纹理组合成一个精灵表来提高性能。这可能不会产生任何改进。我的背景使用噪声来混合纹理，主要问题可能是着色器的复杂性。

- marcgfx

Answer 1

他们是否可以共享相同的纹理（而不会导致纹理被发送到GPU两次）？

是的。

只有在调用gl.texImage2D或gl.texSubImage2D时，纹理才会被发送到GPU。

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

在Init时间：

- 创建/编译/链接程序 - 创建/上传缓冲区（顶点数据） - 创建/上传纹理

在Render Time：

- 使用程序 - 设置属性 - 设置统一变量和绑定纹理 - 绘制

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

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

就将纹理合并成纹理图集而言，这样做可能会使您的程序运行更快。不是因为您上传了较少的纹理，而是因为您可以用更少的绘制调用来绘制更多的物体。请参见本文底部的立方体示例。

- gman

---

谢谢gman，我成功让它工作了！你的解释非常好，让我对很多事情更加清晰明了。 - marcgfx