Adding cube maps

[Manish Kumar]

Hi, 

    I am relatively new to web development, I work on 3D interactive applications using game engines. Now that our client asked for a 360 viewer on his website, we have chosen to use Marzipano Tool, as it was straight forward. However, there is some skew in the 360 image. I came across a demo where we could use cube maps instead. 

My question is " How can I load the cube map, so that the skew is eliminated?" 

[Carlos Eduardo G. Carvalho (Cartola)]

Hi Manish,

I am not sure if I understood your point, maybe because of my English skills. My doubts are in what you mean by "skew" and "cube map".

If by "skew" you mean some distortion, usually this is caused by original image and not the viewer itself.

The marzipano tool expects equirectangular images to be uploaded, but it processes it to generate multi resolution cube tiles images, which are in a format also know as "cube faces". I'm not sure if you called it "cube map".

That said, if the equirectangular image is ok, the conversion doesn't introduce any distortion at all and maybe your equirectangular image is not correct. Some 3D applications are ready to generate those equirectangular projections, like Blender (which is free), but I am not familiar with others to say that this is a common and error free feature on all of them. Once I've generated camera views from a 3D scene and stitched them on Hugin (360° stitching opensource software) and generated perfect equirectangular images.

Anyway, you really can also generate the multiresolution cube tiles yourself, just need to make sure marzipano will understand it. First you need the cube faces, then need to split them in tiles, according to how marzipano will read it. I am not aware of how marzipano understand it, but you can try to copy what it has done with one equirectangular image. It is easy to find ready made equirectangular images on the internet, you can load it in marzipano tool and download the virtual tour to analyse the images and the specification to read it. Usually the specification on the HTML/JS code defines the tile sizes and the resolution level. You can also try to start without multiresolution, doing only simple cube faces with the best resolution.

Taking a look at the code now, it looks like the index.js is prepared to find images in a specific directory structure:

  // Create scenes.
  var scenes = data.scenes.map(function(data) {
    var urlPrefix = "tiles";
    var source = Marzipano.ImageUrlSource.fromString(
      urlPrefix + "/" + data.id + "/{z}/{f}/{y}/{x}.jpg",
      { cubeMapPreviewUrl: urlPrefix + "/" + data.id + "/preview.jpg" });
    var geometry = new Marzipano.CubeGeometry(data.levels);

the z/f/y/x.jpg will turn into "0-sala/1/b/0/0.jpg" as an example. Where you see 'b' there are the directories b, d, f, l, r and u, that stands for the back, down, front, left, right and upper view of a cube face image format. The '0-sala' directory in the example is inside the low level 'tiles' directory, which is probably represented by the 'data.id' in the code.

At the data.js file the code specifies the tile and image sizes, like shown below:

  "scenes": [
    {
      "id": "0-sala",
      "name": "Sala",
      "levels": [
        {
          "tileSize": 256,
          "size": 256,
          "fallbackOnly": true
        },
        {
          "tileSize": 512,
          "size": 512
        },
        {
          "tileSize": 512,
          "size": 1024
        },
        {
          "tileSize": 512,
          "size": 2048
        }
      ],

That variable format looks pretty much like json format, which is also equal to python variable format for lists and dictionaries. There the '0-sala' scene is defined with 4 resolution levels. To use a cube face without tiles (which I suggested as a first step) you probably should change that scene to have only one level and the tileSize would be equal to the size, and both equal to the cube face size.

Bests,

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/e6472a73-edc9-4f39-9f01-a55391be106dn%40googlegroups.com.

[Manish Kumar]

Thank you for the detailed explanation, that helped me understand whats happening behind the scenes.. And by skew, I meant the stretch of image on the edges of the screen.