We are working on texture support in Voxelent scenes and we decided to create a very small test to show this new feature. We used a simple iphone geometric model. We defined the screen region in this model and we mapped an image of an iPhone screen to this region.

Click here to see the demo

We will be writing a new tutorial in the following weeks to explain how the vxlModel and vxlActor classes have been updated and also to describe the new vxlTexture class. The good news is that there are not any drastic changes in the architecture and if you download the latest version of Voxelent you can start creating texture models right away!


The only thing that you need to do at this point, is to define two new elements to your JSON files (texture coordinates and image file). In any JSON file this would look like:

"texture": name_of_image.png

Let's explain these two new elements

Texture coordinates

There is one element in the texcoords array per each vertex element. While vertices are 3 dimensional, texture coordinates are 2 dimensional. Also, texture coordinates will always vary between 0 and 1. Mapping texture coordinates to a geometric model could be a rather difficult task. In this test we performed the texture mapping in blender. Then we used our obj2json.py exporter to create the respective models that were loaded into the demo.

The original blender file, and the respective Voxelent JSON files can be accessed here. As a matter of fact, this is the location from where the test is loading them.

Image file

The texture attribute contains the image from which the texture coordinates will be sampled and mapped to the geometric model. Make sure that your image has dimensions that are power of 2. For instance (1024 x 512). Otherwise it will not be renderable. Also, make sure that your image is located in the same folder as the JSON file that is referencing it.

There will be more details in the tutorial. For now you can take a look at the iPhone test. One of the models that are loaded (part3.json) uses the two elements here described:

  "alias" : "screen_screen_screen_screen.png.001",
  "vertices" : [
  "indices" : [3,0,1,3,1,2],
  "texcoords" : [ 0.0,1.0, 0.0,0.0, 0.999999,0.0, 1.0,0.999999],
  "Ni" : 1.00000,
  "ambient" : [0.00000,0.00000,0.00000],
  "d" : 1.00000,
  "color" : [0.47073,0.47073,0.47073],
  "illum" : 2,
  "texture" : "screen.png",
  "specular" : [0.50000,0.50000,0.50000],
  "Ns" : 96.07843

Demo features

You can spin the phone, change the camera to the front, top, and lateral views and also change the color of the iphone case. Later on we want to show how to replace the screen wallpaper and also use textured cases like rubber, wood an carbon fibre.