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

Question

The following example is working correctly on all major browsers, even on Safari Mac os, but it fails to show the correct image on my iPad with the recent iOS8. http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

Also, the following tutorial is not working as well on the iOS8.

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

How should we show panoramic images in webgl iOS?

Answer 1

The mobile devices do not allow for textures sizes the same that desktop browsers do. The texture in the webgl_panorama_equirectangular.html example is 4096x2048 which is big for the mobile devices. Reduce the size of the texture but keep it power of two.

Answer 2

Visit http://webglreport.com/ on iOS, we see "Max Texture Size: 4096". In fact iOS support panorama image up to 4096*2048, however, I believe there is a bug in three.js. In my test, if panorama image's size is greater than 4096, it will be scaled automatically to 4096*2048 and it will be rendered correctly. However if the image size is exactly 4096*2048, scaling does not happen, rendering has problem.

As a workaround, you can make a small change in function clampToMaxSize of three.js:

Change

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

To

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

It means we scale image of size 4096*2048. In function clampToMaxSize, the most important thing it does is

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

Answer 3

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