Problem Solving 101: A Gladius Case Study

‹prev | My Chain | next›

I am struggling mightily with some low-level things in Gladius. This not Gladius' fault nor do I think it entirely my own. Gladius is a very new project and the folks behind it are wisely not trying to support everything out of the gate. I suspect that I ought to move on to explore more of what Gladius does support, but darn it, I would sorely like to make sure that I understand some of these concepts. Specifically, I would like to map an image onto a sphere (rather than onto the triangles comprising the sphere).

Happily, I can do that by working directly with Gladius' rendering backend, CubicVR.js.

I start by copying CubicbVR.js and the sphere example from CubicVR.js into my project, updating the HTML with my paths. Then I change the projection mapping image to mine:

var sphereMesh = new CubicVR.Mesh({
  primitive: {
    type: "sphere",
    // ...
    material: {
      color: [80/255, 200/255, 120/255],
      specular:[1,1,1],
      shininess: 0.9,
      env_amount: 1.0,
      textures: {
        color: '/images/rygb.png'
      }
    },
    uv: {
    projectionMode: "spherical",
    projectionAxis: "y",
    wrapW: 5,
    wrapH: 2.5
    }
   },
   compile: true
});

With that, I get:



Are you kidding me?! That should be white with primary color dots near the poles. What did I do wrong? To begin to answer that, I swap my textures definition for the one bundled in CubicVR.js:

var sphereMesh = new CubicVR.Mesh({
  primitive: {
    type: "sphere",
    // ...
    material: {
      // ...
      textures: {
        color: "/images/cubicvr_js/2576-diffuse.jpg",
        normal: "/images/cubicvr_js/2576-normal.jpg",
        bump: "/images/cubicvr_js/2576-bump.jpg",
        envsphere: "/images/cubicvr_js/fract_reflections.jpg"
      }
    },
    // ...
    }
   },
   compile: true
});

With that, get:



Damn, that's pretty. I very much look forward to learning what normal, bump, and envsphere textures do, but for now I just hope to figure out what is wrong with my attempt. Perhaps the issue is that I do not have those settings?

      textures: {
        color: "/images/cubicvr_js/2576-diffuse.jpg",
        // normal: "/images/cubicvr_js/2576-normal.jpg",
        // bump: "/images/cubicvr_js/2576-bump.jpg",
        // envsphere: "/images/cubicvr_js/fract_reflections.jpg"
      }

No, without those the sphere is not quite as nice, but it is still much cooler than mine:



So what is the problem with my image? Is it because I am using a PNG instead of a JPEG? Do I need specialized image properties?

➜  gladius-my git:(master) ✗ identify public/images/cubicvr_js/2576-diffuse.jpg
public/images/cubicvr_js/2576-diffuse.jpg JPEG 256x256 256x256+0+0 8-bit DirectClass 23.7KB 0.000u 0:00.000
➜  gladius-my git:(master) ✗ identify public/images/rygb.png 
public/images/rygb.png PNG 200x200 200x200+0+0 8-bit DirectClass 6.09KB 0.000u 0:00.000

So first, I create a 256x256 version of my PNG and...



It works.

So was that my problem back in Gladius? It is easy enough to find out. I set my "procedural" mesh to:

  var mesh =
  {
    points: points,
    faces: faces,
    uv: uv,
    uvmapper: {
      projectionMode: "spherical",
      projectionAxis: "y",
      wrapW: 5,
      wrapH: 2.5
    }
  };

And the "procedural" material to my 256 pixel image:

  return {
    textures: {
      color: '/images/rygb_256.png'
    },
    opacity: 1.0
  };

With that, I get:



There was no change. The image is still projected on each individual face in the sphere that I manually generated last night. Dang it.

I wonder...

I had tried doing "primitive" spherical definitions like that previously in the procedural mesh. I wonder if my lack of success then was the 200 pixel image. Again, it is easy to check. I copy the "primitive" sphere definition directly out of the working CubicVR.js sample and paste it into the procedural mesh:

  mesh = {
    primitive: {
      type: "sphere",
      radius: 1,
      lat: 24,
      lon: 24,
      material: {
        textures: {
          color: '/images/rygb_256.png'
        }
      },
      uv: {
        projectionMode: "spherical",
        projectionAxis: "y",
        wrapW: 5,
        wrapH: 2.5
      }
     },
     compile: true
   };

With that, I get:



Yay! I can finally generate spheres and do simple projection mapping onto them. Breaking a problem down to smaller parts actually works. I should try it more often.


Day #416