Texture Grab-bag in CubicVR.js

‹prev | My Chain | next›

I got my damn sphere working last night. It took quite a while and turned out to be no more than an image that was 200 pixels when it needed to be 256 pixels. I am tempted to move along to other aspects of Gladius and CubicVR.js, but first I would like to take a closer look at some of the material texture properties.

In the "procedural" mesh (it's loaded from a proc() function), I am currently only specifying a color image:

function proc( options ) {
  return {
    textures: {
      color: '/images/rygb_256.png',
    }
  };
}

By virtue of the mesh, that image, with red, yellow, green and blue dots in the corners, wraps a couple of times in each direction, resulting in:



The CubicVR.js sample includes three additional texture attributes: normal, bump, and envsphere. With a different color attribute as well the texture looks something like:

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

And results in a pretty impressive looking image:



A quick inspection of the images reveals that they are 256 pixels:

➜  cubicvr_js git:(master) ✗ identify 2576-* fract_reflections.jpg 
2576-bump.jpg JPEG 256x256 256x256+0+0 8-bit DirectClass 15.1KB 0.000u 0:00.000
2576-diffuse.jpg[1] JPEG 256x256 256x256+0+0 8-bit DirectClass 23.7KB 0.000u 0:00.000
2576-normal.jpg[2] JPEG 256x256 256x256+0+0 8-bit DirectClass 20.1KB 0.000u 0:00.000
fract_reflections.jpg[3] JPEG 256x256 256x256+0+0 8-bit DirectClass 41.4KB 0.000u 0:00.009

So that seems a magic number for CubicVR.js

Anyhow, what do each of these images do?

To find out, I apply them each, in turn, to my RYGB dotted version of the sphere. First up is the "normal" image:



When applied thusly:

    textures: {
      color: '/images/rygb_256.png',
      normal: "/images/cubicvr_js/2576-normal.jpg"
    }

The result is:



Interesting. I am not quite sure how that works. My initial guess would be that the color indicates the direction of the normal at any given spot. For instance, purple indicates the normal is not pointing directly out of the screen, rather it points down at a 45° angle or so. Similarly light bluish-green points out and up at a 45° angle. That is just conjecture. I will need to investigate further.

Next up is the bump texture:



Removing the normal texture and adding the bump texture (bump: "/images/cubicvr_js/2576-bump.jpg"), I find:



It has absolutely no effect at all.

Perhaps if I apply the bump and the normal texture together?



Compare that without the bump:



Interesting. Without the bump the texture looks recessed into the sphere. With the bump, the edges of the texture seem to stand up from the rest of the sphere surface. It is a little hard to be sure because the position of the revolving light source (to the right) is hard to reproduce for a screenshot, but that seems to be what is happening.

Last up is the weirdly named "envsphere" attribute. Not surprisingly, this is related to spheres and how reflections look on round shapes. The image used by CubicVR.js for this is an amorphous cloud:



Adding this to my beach ball, I get what looks like cloudy skies reflected off of the surface:



That was interesting stuff all around. It was a bit tedious applying these things and taking a screen shot, but well worth the effort—I think I have a better understanding of this now. I do think the color aspect of the bump maps warrants a closer look, but that is something for another day.

Day #417