AlphaBetas

What is AlphaBetas?

AlphaBetas is a new modular typeface designed by Ben Stevens. Each letter in the AlphaBetas alphabet can be constructed from a toolkit of 20 unique shapes in various arrangements. This 3-D browser is simply a playful and interactive way of showing how the AlphaBetas* alphabet is assembled.

* AlphaBetas is a Registered Design in the U.K. no. 4009181.

How does this 3-D browser work?

The AlphaBetas 3-D Browser uses Adobe Flash Player and Papervision3D to display the alphabet in a three-dimensional environment within your web browser. If you have a pair of blue/amber 3-D glasses available (like those used for 3D week on Channel 4 during November 2009), you can see the graphics with added depth similar to what you would experience at a 3-D cinema. This effect is more visible on larger screens in a darkened room to reduce reflections.

Tips for using 3-D glasses with Papervision3D

If you are already familiar with developing Papervision3D in Flash/Flex, 'Binocular vision' can be simulated fairly easily if you want to bring your PV3D project to life with 3-D glasses.

1. Set up your PV3D scene using two cameras and two viewports (one camera/viewport for each eye):

viewport_left = new BitmapViewport3D(1024,640,true,true);
viewport_right = new BitmapViewport3D(1024,640,true,true);
camera_left = new Camera3D();
camera_right = new Camera3D();

2. Set each viewports' BlendMode to SCREEN, and make the stage colour as dark as possible.

viewport_left.blendMode = BlendMode.SCREEN;
viewport_right.blendMode = BlendMode.SCREEN;

3. It's essential to set up your cameras to be sitting side-by-side and remain a fixed distance apart at all times - this represents the distance between your eyes. Both cameras should always look at exactly the same point in your scene. The focal point can change during the animation if you like, but this can be disorienting for the viewer and is not recommended.

camera_left.target = DisplayObject3D.ZERO //looking at the centre of the scene
camera_left.x = -parallax // play around with the parallax value for best results; I've used a value of 20
camera_left.z = -500
camera_right.target = DisplayObject3D.ZERO //also looking at the centre of the scene
camera_right.x = parallax
camera_right.z = -500

4. When it comes to rendering your scene, render the viewport/camera for the left eye then the right eye.

renderer.renderScene(scene, camera_left, viewport_left);
renderer.renderScene(scene, camera_right, viewport_right);

5. Now you need to apply a colorTransform to each viewport so the left viewport is tinted yellow and the right viewport is tinted blue.

var _ct_left:ColorTransform = new ColorTransform(1,1,0); // yellow tint
var _ct_right:ColorTransform = new ColorTransform(0,0,1); //blue tint
viewport_left.bitmapData.colorTransform(viewport_left.bitmapData.rect,_ct_left);
viewport_right.bitmapData.colorTransform(viewport_right.bitmapData.rect,_ct_right);

Note: I haven't tested this yet, but it should also be possible to use red/green 3-D glasses instead of amber/blue by simply tinting the left viewport red and right viewport green (cyan?) by amending the 'multiplier' values above.

You should now see that objects far away or very close to the camera will have a very apparent separation of yellow and blue colours, and objects near the focal point in your scene will have less separation. Looking through your 3-D specs, your eyes will combine these separate images and your brain should perceive these slight visual differences as depth cues.

Let me know how you get on!

@BenStevens