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

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

作为一种解决方法，您可以在three.js的function clampToMaxSize中进行一点小的更改：

变化

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 2

移动设备不支持与桌面浏览器相同的纹理大小。webgl_panorama_equirectangular.html示例中的纹理是4096x2048，这对于移动设备来说很大。减少纹理的大小，但保持它的2次方。

Answer 3

2048x2048是IOS8 safari的最大纹理尺寸，或者对于全景img的2048x1024，使用6x1024x1024纹理的skybox将是一个更好的解决方案。