Cube Mapping

The terminology used in this article is most likely a subject to change

Cubemaps

As it was shown in the previous example (please see it first in case you've skipped it), CubiOS operating system provides the way of knowing module number and screen indices that belong to a particular face of a cube.

This allows us to make the next step and move forward from putting of a picture on just one face to rendering of a panoramic cubemap on all faces at once. This would be a good excercise that helps to understand a little better how WOWCube topology works, and the result looks cool too.

But what is a cubemap?

In computer graphics, cube mapping is a method of environment mapping that uses the six faces of a cube as the map shape. The environment is projected onto the sides of a cube and stored as six square textures, or unfolded into six regions of a single texture. The cubemap is generated by first rendering the scene six times from a viewpoint, with the views defined by a 90 degree view frustum representing each cube face

So in other words, a cubemap is just an image that holds six squares form the faces of an imaginary cube that surrounds an object; each face represents the view along the directions of the world axes (up, down, left, right, forward and back). It sometimes may be also refered as a cube net image.

Traditionally, face images included in cubemap are laid out in the shape of a cross, either horizontal or vertical. But the actual location of particular cube faces on that cross may vary - ther is no common standard for this, thus the same cubemap may look different while used in different rendering engines.

WOWCube topology API defines face positions the following way:

Face indexes are defined by TOPOLOGY_orientation values (see previous example).

Each face contains four uniquely indexed screens.

So, in order to actually render the cubemap on WOWCube, we should split the source image into 24 fragments 240x240 pixels each. And then simply put them on right screens!

The example

First of all, let's declare an array to store all images so that we could access them by index, and load them. The array should have 24 elements.

1new images[TOPOLOGY_FACES_MAX * TOPOLOGY_POSITIONS_MAX];
2 

The ON_Init callback will be the following:

1public ON_Init(id, size, const pkt[]) 
2{
3    ...
4    //Load images that form a cubemap
5    images[0] = GFX_getAssetId("front1.png");
6    images[1] = GFX_getAssetId("front2.png");
7    images[2] = GFX_getAssetId("front3.png");
8    images[3] = GFX_getAssetId("front4.png");
9 
10    images[4] = GFX_getAssetId("up4.png");
11    images[5] = GFX_getAssetId("up1.png");
12    images[6] = GFX_getAssetId("up2.png");
13    images[7] = GFX_getAssetId("up3.png");
14 
15    images[8] = GFX_getAssetId("left2.png");
16    images[9] = GFX_getAssetId("left3.png");
17    images[10] = GFX_getAssetId("left4.png");
18    images[11] = GFX_getAssetId("left1.png");
19 
20    images[12] = GFX_getAssetId("back4.png");
21    images[13] = GFX_getAssetId("back1.png");
22    images[14] = GFX_getAssetId("back2.png");
23    images[15] = GFX_getAssetId("back3.png");
24 
25    images[16] = GFX_getAssetId("right3.png");
26    images[17] = GFX_getAssetId("right4.png");
27    images[18] = GFX_getAssetId("right1.png");
28    images[19] = GFX_getAssetId("right2.png");
29 
30    images[20] = GFX_getAssetId("down3.png");
31    images[21] = GFX_getAssetId("down4.png");
32    images[22] = GFX_getAssetId("down1.png");
33    images[23] = GFX_getAssetId("down2.png");
34 
35    ...
36}
37 

The rendering part of the example is rather simple as well. All we need to do is to figure out a couple of basic things to render required image on the screen:

• iterate through the screens of a facelet

• find the place of a facelet

• draw an image with right rotation angle to make it be aligned properly

  public ON_Render() { new facelet[TOPOLOGY_FACELET] = [0, 0]; new place[TOPOLOGY_PLACE]; facelet.module = SELF_ID;

  Cube Mapping

  PAWN

  1  //Iterate through all three displays to render the image  
  2  for (facelet.screen = 0; facelet.screen < SCREENS_MAX; facelet.screen++) 
  3  {
  4      GFX_setRenderTarget(facelet.screen);
  5 
  6      place = TOPOLOGY_getPlace(facelet);
  7      //draw image at the center of a screen
  8      GFX_drawImage([120, 120], 0xFF, 0, (360 + offsets[place.face] - place.position * 90) % 360, MIRROR_BLANK, images[place.face * TOPOLOGY_POSITIONS_MAX + place.position]);
  9 
  10      GFX_render();
  11  }
  12 

  Wrapped for easier reading. Turn wrap off to inspect exact line lengths.

  WrappedExplain with AIAI

  }

As a result, we will have our cubemap image mapped to all faces of the cube.