江南百景图技术点一:MultiTexture实现

创建8个图集
image

每个图集分别取一张图放入场景

运行效果

用Spector.js调试

没什么特别难的地方,看看Demo应该差不多都懂了。麻烦的地方可能是实际在项目中灵活应用。

MultiTexture.zip (1.6 MB)

41赞

我也写了一部分,主要是整理了官方的动态合图,看了你的代码,结合一下就完美了

占位,点赞。

原来官方用的动态图集,我没仔细看这块内容。

等我改好发上来

1赞

你的帖子已经被社区标记并被临时隐藏。

这优美的玩意儿,2.4.x 能用吗?

我这是在3.3.0版本下做的。原理是差不多的。

OK 多谢

请问能否出一个支持2.4.x版本的,目前2d还是这个版本用的多,对shader不了解,目前自己还没有能力自己去改

1赞

等我把自动和批和MultiTexture结合实现了再考虑2.4.x的。没空搞。。。 :rofl:

大佬牛逼,就出方案了

大佬牛批,mark一波

取决于shader

图片大小有限制吗,就是2048X2048X8里面可以合成一个dc?

是的。。。

学习一波,感谢分享~

个人建议不要滥用这个技术,同时active的texture越多占用的显存带宽是很恐怖的,特别是在手机上,搞得好还好,搞不好你一个drawcall都能卡出翔。。。

4赞

我理解不管是否使用MultiTexture shader,纹理数量是一样的,所以显存占用没有变化。
带宽占用和纹理采样次数相关,和active的纹理数量无关。

不过对于这种实现我也有点疑问,虽然在运行效率上DC降了,但是shader的写法是用8个if挨个判断,shader编译后会有两种结果:
一种是编译器优化去掉了分支,即实际上所有分支都走一遍最后合并,相当于一次片元着色器采样8次,而且是采样不同纹理,cache miss问题也会加重,这种是很消耗带宽的。
另一种是产生branching,众所周知shader里产生branching会慢。

2赞

:+1: 是的,对于gl1除了if else应该没有什么办法,必定最高8倍带宽了。gl2应该可以texIds[uniform],不太确定没有试过。
(补充,对于gl1编译的结果我也不太清楚,if else也有可能是branching)