compactTangram© 0.7.2 - tan rendering labs

Share on Twitter Share on Facebook

The most important part of the graphic development is the rendering of the individual tan pieces. The main concept is to create some kind of pseudo 3D feel with CoreGraphics technology (the only I know), without that jaggy OpenGL antialias. I had many ideas trough the times, as you can see it it earlier post

The first idea was to pre-render some full-screen shaded noise, then mask it with the tan images. The problem was the moment of the rotation, described in this post.

Next try was to use different UIImageViews with some offset (preserving those beautiful antialiases), to create some kind of 3D feel. The main Image was the border of the tan, it has full size. The secondary image on the top of the previous is the "face" of the tan, with a 2 pixel wide inset, and 0.8 pixel offset. This offset gave the tan some kind of depth. The third image in the back is a shadow layer with some offset as well. Compositing screenshots below (the first on has 5 pixel offsets for "readability").

The only problem was that the simultaneous display of more than one UIImageView made the app laggy, the performance was terrible. Thanks for god. This lag forced me to invent a merely different approach to this problem.

I decided to use pre-rendered (shaded) PNGs, then display them at the proper location/angle. I began to 3D-model the tan piece 0, then rendered the separate composite elements (shadows, diffuse, specular) in different files. Having these layers I could freely composite them to fit the actual needs. Of course I didn't want to use 360 different images to display, so I made 12 images, then blend the rest.

First I developed the compositing method in Photoshop to previsualize the results (I made different composites depending on the distance from top-left, the imaginary light source).

The result seemed correct (more beautiful as I excepted), but I had to test it in many different angles, so I made a star poly to test a bunch of directions.

My suspicions came true, some angles got "burnt", so I applied a slight blur to the shadows.

After compositing done, I made a pre-sript in flash to develop the base algorithms/pre-visualize if even it works at all. The result is really satisfying, attached below (the mouse's horizontal movement rotates the tan). The traced variables shows how the neighbouring specular maps are being blended.

Promising indeed, but the biggest question is that the CGLayer-based implementation how performance demanding will be. Hope it will work.