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

Question

我有两个着色器使用不同的顶点和不同的统一值,但它们使用相同的纹理(spritesheet/atlas).他们可以共享相同的纹理(不会导致纹理被发送到gpu两次)？

背景:我的游戏在我的笔记本电脑上有一些严重的性能问题,它们似乎与gpu相关.我当前的实现使用两个画布,一个用于我的背景,一个用于我的前景.然后他们为最终图像编写(绘制到第三个画布上).我的背景使用4个纹理,而我的前景有一个大的spritesheet.前景和后台只使用一次绘制调用.

我希望通过将所有纹理绘制到一个画布上并将所有纹理组合成一个spritesheet来提高性能.它绝对可能会导致没有改善.我的背景使用噪声来混合纹理,并且很可能主要问题是着色器的复杂性.

Answer 1

是否有可能共享相同的纹理(不会导致纹理被发送到gpu两次

是

当你调用纹理的只发送给GPU gl.texImage2D或gl.texSubImage2D.

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

在初始时

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

在渲染时间

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

对于纹理,"在初始时间部分"通常意味着调用

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

至于将纹理组合到纹理图集中,是的,这可能会使您的程序运行得更快.这不是因为你上传的纹理较少,因为你可以用较少的绘制调用绘制更多的东西.请参阅本文底部附近的多维数据集示例.