360 Panoramic Picture viewer

[Gerente]

Hello,

 

Im trying to create a viewer for my 360 panoramic pictures viewer like this:

https://theta360.com/spheres/samples/5bdc3b3e-3a15-11e4-bf19-52540092ec69-1

 

I was doing it on Unity3d and it was pretty easy, I just had to create a sphere and then assign (drag and drop) the texture.

 

Now im trying to create the viewer with Babylon but for some reason the texture mapping is different. I don't understand very much about textures and mapping.

 

I'm using this image for testing purposes:

https://upload.wikimedia.org/wikipedia/commons/6/65/SonyCenter_360panorama.jpg

 

This is the code that I have done:

http://www.babylonjs-playground.com/#CFHUL

 

 

 

How can I make the texture match properly to the sphere?.

 

Thanks

[Wingnut]

Hi Gerente, welcome to the forum.... good to have you with us.

I bet... if you added these 4 lines somewhere...

	material.diffuseTexture.wAng = -Math.PI/2;  //  <-  the most important one for your bug.	material.diffuseTexture.level = 1.5;	// material.diffuseTexture.vOffset = -Math.PI/2;  // left-right	// material.diffuseTexture.uOffset = 0; // up-down

Aw heck, I'll treat you to a fresh playground tonight, what the heck...  http://playground.babylonjs.com/#CFHUL#3

Beautiful pano... thanks for sharing it with us!

Main problem was line 19... it needed to be added.  w-angle.  wAng.  (giggle)  It is the rotation of the image around the z axis, which is the same as the w axis.  The other lines are just fun stuff to play-with.  If you use emissiveColor instead of diffuseColor, then you can remove your light from the scene and the sphere/image will produce its own light (if ya want to try that).   Level is like an image brightness knob. 

Also, putting sphere1.rotation.y += .002;  inside your registerBeforeRender loop... might be fun.    Party on!

PS:  Babylon.js also has a super-powerful and fun thing... called layers... and you can do scrolling backgrounds with them...

http://playground.babylonjs.com/#1XQKP1#4  (Yeah, it's not really a panorama, but it still has many uses.  Pardon the image "seam", and folks might want to re-think the goofy image-spin-wired-to-arcRotateCamera.alpha thing in line 78.  Sim-u-sphere, heh)

[Gerente]

Thank you Wingnut!! it works perfect in PC but do you have any idea why it does not work on an Iphone 6 (safari just stand in black screen) and Samsung Note III (chrome shows a white screen)?

 

 

Since the image is being shown from inside the sphere I had to invert the texture. I created this code:

var triangles = sphere1.getVerticesData(BABYLON.VertexBuffer.PositionKind);for(var i=0;i<triangles.length;i+=3){   var temp = triangles[i];   triangles[i] = triangles[i + 2];   triangles[i + 2] = temp;}sphere1.setVerticesData(BABYLON.VertexBuffer.PositionKind,triangles)

Here is the result:

 

http://www.babylonjs-playground.com/#CFHUL#5

 

 

- How to block The wheel to avoid the zoom

//just allow a small zoomcamera.lowerRadiusLimit = 0.1camera.upperRadiusLimit = camera.radius = 2 

- How to make it work on mobiles ??

 

Please help with this.

• Is not a phone issue because it does not work on iOS or android
• is not a browser issue, does not work on safari or chrome mobile (works on chrome for PC)
• is not a security issue of the server that host the images because it works on PC
• it could be the .jpg file?, it should not but I ask anyway,.

Edited July 26, 2015 by Gerente

[Wingnut]

Hi!  (thanks for the likes, homies)

 

Interesting vertices solve for the image flip, but you can do that same thing with...

 

material.diffuseTexture.vAng = Math.PI;  (line 17)

 

http://www.babylonjs-playground.com/#CFHUL#6 

 

I don't know anything about the problems with mobile gear.  I'm strictly a desktop guy.  Others might have ideas... be patient.  Thanks for the detailed status report.  It looks like you've got BJS pretty much figured out.  Cool! 

[gryff]

How to make it work on mobiles ??

 

I tested both Wingnut 's and your PG demos - both work on my Samsung Tab A tablet (Android 5 "Lollipop") and on a Samsung S3 phone (Android 4.4.2 "KitKat") using the Chrome browser.

 

Do you know what version of Android you are using on your Samsung Note III?

 

Sorry, I can't help with the Iphone 6 stuff.

 

cheers, gryff

[Gerente]

Wingnut, I was just traslating a code that I had in UNity3d C# to BJS. But your vAng technic looks better

 

Hi Gryff,

Im using  a SAMSUNG NOTE III . Android v5.0, Chrome v43,

Entering into http://get.webgl.org I just noticed that WEBGL does not work in my Samsung Note III and my SAMSUNG TABLE 10.1. 

I have enabled the Webgl and ignore blacklist in the chrome://flags, restarted, etc.. and still not working.

I'm kind of disapointing about WebGL because I was just moving from Unity3d to WebGL because I wanted to have my app compatibility to any device (unity3 requiere a plugin for the webviewer and that plugin for is blocked in Chrome), and it looks like is not what I though.

Safari in my Iphone6 support WebGL but it does not load the texture over the sphere. I just changed the URL of the image from absolute to relative to see if it was a security issue but still not showing it in safari. 

The really weird thing is that I took the demo from the PG: http://www.babylonjs-playground.com/?4  and I did not change anything but the URL of one of the spheres, and it works fine in PC but not in safari!! 

[gryff]

Gerente; given your Android specs I'm not sure why it is not running. I've attached an image below of your panorama scene running on a Samsung S3 phone that I mentioned above. It originally had 4.0.4 (Ice cream sandwich) and did not run webGL - but it was updated a couple of weeks ago (Android and Chrome) and runs BJS stuff nicely.

 

I'm kind of disapointing about WebGL because I was just moving from Unity3d to WebGL because I wanted to have my app compatibility to any device

 

Same reason I moved to BJS just over a year ago. And even though Unity is developing a webGL exporter, I'm not sure of how dedicated they are to perfecting it. But going back again to my VRML days - there always seemed to be browser compatibility issues. Netscape always seemed the most stable and IE the most unstable. As time passes, I think these kinds of webGL issues will disappear - but right now you can end up tearing out all your hair 

 

Sorry, I can not be more help.

 

cheers, gryff

[Gerente]

Thanks for taking your time and post the image.

I tried exporting my app from Unity3d to WebGL and the size of the files are insane ,about 120Mb for the core files. An empty scene of unity3d exported to webgl is about 13Mb. 

I know, you can use gzip, but still need to config the files, the server, and the cliente need to decompress the files, that mean more cpu, etc.. etc...

[Gerente]

I have found the problem:

 

The original Image/Texture was size: 3584x1792  (608kb) and it was NOT loading it in the iphone 6

I resized the image to 50%, size: 1792x896 (514kb) and now it works!.

 

There must be a limit (or bug) of the size of the file ( i Think KB does not matter) that will be loaded as texture.

 

Can anyone confirm what is the max size of image that can be loaded as texture? I would like the big size because it allow me to zoom better.

[GameMonetize]

Hello you can get this information live on the PG by displaying the debug layer:

 

Just scroll the statistics window down:

 

This information is provided by the engine itself:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Debug/babylon.debugLayer.ts#L739

[gryff]

Gerente, you might want to look at dbawel comment at the bottom of this thread about powers of 2 and 8 and textures.

 

How to optimize image textures

 

It might help.

 

cheers, gryff

 

[Gerente]

Hello you can get this information live on the PG by displaying the debug layer:

 

Just scroll the statistics window down:

Capture.JPG

 

This information is provided by the engine itself:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Debug/babylon.debugLayer.ts#L739

 

Iphone6 detail:

Max texture Units:8

Max texture size: 4096

Max anisotropy:16

 

PC detail:

Max texture Units:16

Max texture size: 16384

Max anisotropy:16

 

Now, could you help me to understand each of those items?

Max texture Units??: Is the max textures that you can load in a single object?, max textures in the whole scene? max textures loaded at the same time?

Max texture size??: width x height?, kb?

Max anisotropy: no even idea what it is

 

 

 

Gerente, you might want to look at dbawel comment at the bottom of this thread about powers of 2 and 8 and textures.

 

How to optimize image textures

 

It might help.

 

cheers, gryff

 

 

 

if the power of 2 refer to the size (width x height) then my JPG are ok. I think is more related with the limitations of the video card of the device (max texture size)

[gryff]

if the power of 2 refer to the size (width x height) then my JPG are ok.

 

Gerente, your images are multiples of 2 - not powers of 2.

 

Powers of 2 image sizes would have sides that are 32, 64, 128, 256, 512, 1024, 2048, 4096,  8192, 16384 pixels. Note that 4096 - is the max for your Iphone6 and 16384 is max for PC.

 

cheers, gryff

[Gerente]

Gerente, your images are multiples of 2 - not powers of 2.

 

Powers of 2 image sizes would have sides that are 32, 64, 128, 256, 512, 1024, 2048, 4096,  8192, 16384 pixels. Note that 4096 - is the max for your Iphone6 and 16384 is max for PC.

 

cheers, gryff

You are right, they are not power of 2, but dbawel is saying that the optimal size of an image to be parsed by babylon is a square shape.

In my case I can't because a panoramic image need to be rectangular. 2:1 ratio (w:h)

 

If the "Max texture size" of my iphone is 4096, then it should support images up to 4096x4096 ???... 

But the image with size 3584x1792  does not work and the image with 1792x896 works.

What I'm Missing?, my math are not working

[gryff]

Couple of things Gerente:

 

1. Your original texture (3584x1792px) can easily be resized to 4096x2048px and 2048x1024px. These both have sides that are a power of 2. You should try them.

 

2. You use a line of code like this to load the texture

var texture = new BABYLON.Texture(url, scene);

then try this with both of the above:

var texture = new BABYLON.Texture(url, scene, true);

It should prevent mipmaps being created.which you don't really need for your panoramas.

 

See details here

 

cheers, gryff

 

 

[iiceman]

I want to build a panorama viewer, too. This here seems like a good start, but the texture always get deformed at the poles of the sphere, how could I avoid that?

[GameMonetize]

You have to use spherical texture:

http://www.reindelsoftware.com/Documents/Mapping/images/gl_map.jpg

 

or create a cube texture like all the demo we have with skysphere:

http://www.babylonjs-playground.com/?13

[iiceman]

Sooo..the only way is to modify the texture?

 

Is there an easy way to create a spherical texture out of a normal photo?

[Wingnut]

Hi Ice... good to hear from you, as always, and congrats on the recent cool projects you've done.

 

I think this link talks about that, a bit. 

 

Sometimes I make myself laugh.  It's probably senility.  

 

So, what, then?  We build a really nice 3D worlds builder (BJS), and then everyone wants to do 2D fish-eye panoramas?  Well that's just goofy.

 

Anyway... here is the skydome shape used in the world famous Assassin's Creed - Pirates game... linked-from the BabylonJS main website.  I stole that puppy (the skydome shape).  They used that shape for SOME reason... something magical.  SOMETHING must map-onto that... nicely.  Not sure what.    Maybe someone could try some things.  Maybe not.   Maybe this is not on-topic.      Pretty!  (...big stack of decadence)

[iiceman]

First of all: stop stealing puppies! That so mean!

 

Second: That link..yeah..very funny   just kidding.. was funny... at least a bit But didn't really find an "easy" way to transform images.

 

Third: Well, my boss asked me to think of a good way to present those 360 degrees panorama images. So I searched and I found this: 

 

http://www.emanueleferonato.com/2014/12/10/html5-webgl-360-degrees-panorama-viewer-with-three-js/

 

So, naturally, my first thought is: Babylon can probably do that better, cooler, with less code and fast, and a bit more awesome and with kittens and stuff.

 

After checking things out a bit more I figured out that the three js version uses spherical textures, too. So the little Babylon playground already does everything... better... just the kittens are missing, but I'll handle that.

 

Long story short, I hope to use Babylon a bit more at tasks that I get at work. I'll let you guys know when the first real thing goes online