CODEWITHSUNDEEP
javascriptios8three.jswebgl
Mohammad Abu Halavi
Mohammad Abu Halavi

Reputation: 31

Webgl image texture failure on Safari iOS 8

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?

Upvotes: 0

Views: 2588

Answers (3)

chriswen
chriswen

Reputation: 21

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 );

Upvotes: 2

Mad Jakob Google Cardboard Eur
Mad Jakob Google Cardboard Eur

Reputation: 1

2048x2048 is max texture size on IOS8 safari or for panoramic img's 2048x1024 using a skybox with 6x 1024x1024 textures would be a better solution in terms of resolution and performance

Upvotes: -1

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 1

Related Questions