Marzipano Player Not Working In Mobile Chrome

[Cameron Billings]

Hi All,

I've been trying to implement the Marzipano VR player into a website to display equirectangular photos. I've had luck getting the player to work in desktop browsers following the documentation/demo (the equirectangular demo primarily). However mobile browsers have been giving me some considerable hardships. Firefox seems to be working, but Chrome continuously displays a blank screen (tried on Chrome v.59, Chrome v.58, Chrome Canary and Chrome Dev). It also seems like it's having an issue in Safari as well. The docs make it seem simple enough to get Marzipano implemented with your web app and up and running which is why I'm having a really hard time diagnosing whether this is an issue with compatibility between the marzipano player and some mobile browsers (Chrome 59 works on the demo which is why I have a hard time believing this) or if it's something that's weird that's going on with my application code. 

Is mobile at all dependent on the shim/request (the 3 that are suggested for older browsers) animation frame dependencies? Or is that only for older browsers?

Things I'v tried are:

• Local Files and Hosted Files
• Shrinking equirect files size (original file width was 5300)
• Made sure this is not a CORS/Cacheing issue
• Manipulating/Playing with my own site's CSS (just trying to make sure that nothing is blocking it/on top of the pano element).
• Made sure the canvas element in chrome web tools has a height and width that are not 0 

And for a little more context I'm using this in an angular 1 app. So calling the code logic to initialize and display a pano in a controller file. 

It seems like someone else is having a similar issue possibly? There's some more info on this github issue: https://github.com/google/marzipano/issues/88 

I've posted a photo there of my implementation of the code. If you have any other questions for me please ask away :) 

Thanks in advance for any assistance! I really appreciate it.

Cam

[Manuel Cabral]

Hi,

You mentioned that the equirect demo is working correctly. Can you try replacing the image in the equirect demo by your image and checking if that works? 

All the best,

Manuel

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.
To post to this group, send email to marz...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/8b67aeb2-f2b6-4dd0-bc18-51f001a539bd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Cameron Billings]

Hi Manuel,

Thanks or the quick reply! I went ahead and tried switching out the photo on the Equirect demo with my own and it works fine on desktops but it's broken on mobile! What do you think could be causing that? Seems like such strange behavior to me! The code I pasted in the console to switch the photo is what I used. Is there something flawed with my logic when it comes to mobile devices? Should I be switching the photo in the Marzipano demo in a different way?

Thanks for all of your help!

Cam

var source = Marzipano.ImageUrlSource.fromString('https://IMAGE_URL/Entry.JPG');

            var geometry = new Marzipano.EquirectGeometry([

                {

                    width: 5376

                }

            ]);

            console.dir(Marzipano);

            var limiter = Marzipano.RectilinearView.limit.traditional(1920, 180 * Math.PI / 180);

            var view = new Marzipano.RectilinearView(null, limiter);

            // Create and display Scene

            var scene = viewer.createScene({source: source, geometry: geometry, view: view, pinFirstLevel: true});

            scene.switchTo();

On Friday, June 9, 2017 at 11:49:01 AM UTC-4, Manuel Cabral wrote:

Hi,

You mentioned that the equirect demo is working correctly. Can you try replacing the image in the equirect demo by your image and checking if that works? 

All the best,

Manuel

On Fri, Jun 9, 2017 at 5:53 AM, Cameron Billings <cameron.b...@gmail.com> wrote:

Hi All,

I've been trying to implement the Marzipano VR player into a website to display equirectangular photos. I've had luck getting the player to work in desktop browsers following the documentation/demo (the equirectangular demo primarily). However mobile browsers have been giving me some considerable hardships. Firefox seems to be working, but Chrome continuously displays a blank screen (tried on Chrome v.59, Chrome v.58, Chrome Canary and Chrome Dev). It also seems like it's having an issue in Safari as well. The docs make it seem simple enough to get Marzipano implemented with your web app and up and running which is why I'm having a really hard time diagnosing whether this is an issue with compatibility between the marzipano player and some mobile browsers (Chrome 59 works on the demo which is why I have a hard time believing this) or if it's something that's weird that's going on with my application code. 

Is mobile at all dependent on the shim/request (the 3 that are suggested for older browsers) animation frame dependencies? Or is that only for older browsers?

Things I'v tried are:

• Local Files and Hosted Files
• Shrinking equirect files size (original file width was 5300)
• Made sure this is not a CORS/Cacheing issue
• Manipulating/Playing with my own site's CSS (just trying to make sure that nothing is blocking it/on top of the pano element).
• Made sure the canvas element in chrome web tools has a height and width that are not 0 

And for a little more context I'm using this in an angular 1 app. So calling the code logic to initialize and display a pano in a controller file. 

It seems like someone else is having a similar issue possibly? There's some more info on this github issue: https://github.com/google/marzipano/issues/88 

I've posted a photo there of my implementation of the code. If you have any other questions for me please ask away :) 

Thanks in advance for any assistance! I really appreciate it.

Cam

--
You received this message because you are subscribed to the Google Groups "marzipano" group.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.

[Cameron Billings]

Sorry, forgot to mention something in my last post and it doesn't seem like I can edit that post so I'm throwing this up in a reply.

I threw up that image URL I'm using into an <img> tag to just test if my mobile device was for some reason blocking the image, but the image loads fine in a standard html img tag. 

Best,

Cam

[Cameron Billings]

As a third and final edit/note, I saved off the equirect image from the Marzipan demo site and loaded it from our CDN into our VR player using marzipano on mobile in Chrome and it worked. 

The only difference between images that I can think of are their size. The size of the image I got from Marzipano is 4000 x 2000 whereas the images we have are 5376 x 2688px. I set the width in my application to be 5376 (for the EquirectGeometry([{width:5376}]) call). We also tried reducing the image size to 2500x1250 with no luck. Could we just not be setting the width right with an improperly sized image? I don't know how important 4000 x 2000 is to Marzipano. Our images at their standard size did play out of a threejs panorama player we built. 

Thanks!

Cameron

[Manuel Cabral]

The image size would be my first guess, but this should only be a problem if the image is too large, so using the 2500x1250 image should be fine.

If I understand correctly, the demo is working with the 4000x2000 image but not with the 2500x1250 one, correct? This is very strange. Is everything else the same (for example, the URL from where the files are being served)?

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/ea3e5519-4b17-4157-8ba1-dac1d762adc7%40googlegroups.com.

[Cameron Billings]

Interesting. Shrunk an image to 4000 x 2000 and threw it up on the Marzipano demo site and our test site and it worked in both locations. The image definitely looks kind of weird/warped on mobile (this is probably just a CSS/styling thing, as it looks fine when portrayed on the Marzipano demo site).

So, seems like a photo size thing... Is there anything that you could think of that would make Marzipano sensitive to specific photo sizes? Is there anything particular about aspect ratios? I'd prefer not to have to resize every image to be a specific size. I don't think it's a size thing regarding browser limitations because I've displayed the photos in the browser before without issue (not using Marzipano)

Thanks for all of your help! I really appreciate it!

Best,

Cameron 

[Tiago Quelhas]

Hi Cameron,

The only limitation is that the image size (width x height) must not exceed the WebGL maximum texture size (which you can check on http://webglreport.com/). Note that this value depends on the device.

Are you able to share a link to the exact code and images you are using? I'd be happy to take a look at it and see if I can reproduce the issue.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/460c8545-65d8-46c8-8893-02a6e8bffd77%40googlegroups.com.

[Cameron Billings]

Hi Tiago,

Thanks for offering to help! I can't provide a link to the exact code, but it's basically a replica of the Equirect demo on the Marzipano site. I'm running it in an angular 1 application. Loading the player into an html tag with the id of `pano` and calling the code found in the index.js file of the equirect demo on marzipano in my angular controller. 

The implementation code is as follows: 

var source = Marzipano.ImageUrlSource.fromString('https://IMAGE_URL/Entry.JPG');

            var geometry = new Marzipano.EquirectGeometry([

                {

                    width: 5376

                }

            ]);

            console.dir(Marzipano);

            var limiter = Marzipano.RectilinearView.limit.traditional(1920, 180 * Math.PI / 180);

            var view = new Marzipano.RectilinearView(null, limiter);

            // Create and display Scene

            var scene = viewer.createScene({source: source, geometry: geometry, view: view, pinFirstLevel: true});

            scene.switchTo();

This is also the code I used to force the Marzipano equirect demo to swap photos to one of our photos (that didn't work in mobile). So even loading one of our photos into the Marzipano demo on mobile showed the same blank white screen. Resizing to 4000 x 2000 is the only way I've gotten the photo to display consistently in a mobile browser environment. 

Link to photo: https://s3.amazonaws.com/publicbucket-test/Photo+0.JPG

Link to photo: https://s3.amazonaws.com/publicbucket-test/Photo+1.JPG

[Cameron Billings]

Hi Tiago,

My apologies for the double reply, but I believe that link you shared provided me with the culprit.

Viewing the link on my mobile device (Android- Google Pixel - Chrome 59) shows me this: 

Is that Max Texture Size of 4096 the cause of the problems? 

I just don't understand because we currently use a JS VR player that utilizes ThreeJS to create a webgl canvas that renders these same images and that doesn't have an issue loading on mobile chrome. 

Best,

Cameron

On Tuesday, June 13, 2017 at 2:37:23 PM UTC-4, Tiago Quelhas wrote:

[Tiago Quelhas]

Yes, if the texture limit is 4096 then it won't be possible to render a 4000x2000 equirect (4000x2000 > 4096). You will have to use a cubemap instead.

Presumably, the other viewer you're using is able to split an equirectangular image into multiple textures, which Marzipano can't do.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/ff6d06e1-54c7-4bc8-bb48-d8fb2315ddc0%40googlegroups.com.

[Cameron Billings]

Thanks for the response and sorry I didn't get back sooner!

That is interesting. The images that are coming in for the Marzipano demos seem like they're 4000 x 2000 though. Would the 4096 be representative of the width? Or maybe I'm reading the image size incorrectly. Do you think the complexities/processing power behind breaking images down into cube maps are better practice/more efficient in the long run? Just curious on your opinion :)

Thanks!

Cameron

[Tiago Quelhas]

The WebGL maximum texture size isn't a width or a height - it's the number of pixels in the texture, width times height.

For large panoramas, cubemaps with multiple zoom levels are more efficient in terms of bandwidth, because there's no need to download the entire equirect just to show a small portion of the panorama (the viewer will only download the cube tiles for that small portion). For small panoramas, it may not matter too much, as long as you're ok with the user waiting for the entire panorama to be downloaded before they can see anything.

Note, however, that this advice is specific to Marzipano and its inability to use partial equirect textures. It's technically possible to implement a panorama viewer without that limitation, but we didn't go down that road, mostly because of compatibility concerns with the Flash and CSS renderers, and the fact that processing tools already exist for cubemaps.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/e066e950-9080-490e-aeaa-9b9fd8e77dff%40googlegroups.com.