Wednesday, June 13, 2012

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",
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