Safari iOS 8上的Webgl图像纹理失败

Question

以下示例在所有主流浏览器上都能正常工作，即使在Safari Mac OS上也是如此，但它无法在我的iPad上使用最近的iOS8显示正确的图像。 http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

此外，以下教程在iOS8上运行不正常。

http://blog.thematicmapping.org/2014/01/photo-spheres-with-threejs.html

我们应该如何在webgl iOS中显示全景图像？

Answer 1

移动设备不允许纹理大小与桌面浏览器相同。 webgl_panorama_equirectangular.html示例中的纹理是4096x2048，这对于移动设备来说很重要。 减小纹理的大小，但保持2的力量。

Answer 2

访问iOS上的http://webglreport.com/ ，我们看到“Max Texture Size：4096”。 事实上iOS支持全景图像高达4096 * 2048，但是，我相信在three.js中有一个bug。 在我的测试中，如果全景图像的大小大于4096，它将自动缩放到4096 * 2048并且它将被正确渲染。 但是，如果图像大小正好是4096 * 2048，则不会进行缩放，渲染会出现问题。

作为一种解决方法，您可以在函数clampToMaxSize中对three.js进行一些小改动：

更改

if ( image.width > maxSize || image.height > maxSize ) {

至

if ( image.width >= maxSize || image.height >= maxSize ) {

这意味着我们缩放尺寸为4096 * 2048的图像。 在函数clampToMaxSize中，它最重要的是它

context.drawImage( image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height );

Answer 3

2048x2048是IOS8 safari上的最大纹理尺寸，或者使用具有6x 1024x1024纹理的天空盒的全景img 2048x1024在分辨率和性能方面将是更好的解决方案