Three.JS和WebGL纹理自动调整大小

问题描述 投票:0回答:2

我需要一些帮助才能解决问题:)我使用Three.JS在球体(20000x10000像素)中显示非常高质量的equirectangular图像。质量对我的webapp非常重要,这里没有考虑带宽。我的问题是ThreeJS调整图像大小,因为超出了WebGL MaxTextureSize限制。有没有办法通过这个限制?也许通过将纹理切割成几个部分?这是最好的方法吗?

谢谢你,祝你有个美好的一天!

亚历克斯

javascript three.js webgl 360-panorama
2个回答
0
投票

看看这个:http://glayve.com/relief/verdon.html最好分开,你可以用个人面孔玩更多。

您只需根据24个计划大小设置个人面部的set.position(x,y,z)和set.rotation(x,y,z)。


1
投票

你不能通过这个限制。这是限制背后的整个想法。您可以做的是访问http://webglreport.com/以查看目标设备上的最大功能(在纹理>最大纹理大小下),然后砍掉纹理以适应这些尺寸。

例如,iPhone 6的限制为4096x4096,因此你需要左右平铺5个网格才能达到20480.这完全取决于你设备的显卡限制,所以你如何划分它将因用户而异到下一个。

您可以做的另一件事是使用一个映射到球体上的巨大的等距矩形图像,您可以使用6个较小的图像,并将其映射到立方体或CubeTexture。您可以使用任何立方体贴图转换器工具执行此操作,例如:HDRI to CubeMap converter。这样你就可以加载6张图像,然后让Three.js开始拍摄;如果您的设备可以处理它,它将显示更高的分辨率,但如果它不能,它将根据需要缩小纹理。

© www.soinside.com 2019 - 2024. All rights reserved.