Adding Shaders and Pixel Bender to Away3dlite

June 3, 2010

Adding Shaders

Once you’ve experienced the speed of Away3dlite you next want to bump up its appearance. The best way to do that is by using Pixel Bender shaders….and with Pixel Bender the sky is the limit! In this post, you get the code that let’s you do that, and you learn to add shaders and Pixel Bender to Away3dlite. The same approach is applicable to PV3D.

Here’s the demo

Shaders in Away3dlite

Shaders in C

Check out the video!

Download the Code

http://code.google.com/p/lv3d/downloads/detail?name=Bettershader.zip

Read Some Discussion

The key to getting this to work was to first get all the shaders over into Away3dLite, then instantiating the ExLight example in Flash Builder and using switch case to create the different materials for your model.

Here’s what the switch case code looks like. It is really simple…everything else is in the video and the download…cheers!

override protected function onInit():void

{

var md2:MD2 = new MD2();

var light:Light = new Light();

var _texture:Bitmap = new Texture as Bitmap;

var _bitmap:BitmapData = new BitmapData(_texture.width, _texture.height, false);

_bitmap.draw(_texture);

var _normalMap:Bitmap = new Normal as Bitmap;

switch(mySwitchNum)

{

case 0: //Normal Shader

var rLight:DirectionalLight3D = new DirectionalLight3D();

rLight.direction = new Vector3D(1, 0, 0);

rLight.color = 0xFF0000;

rLight.ambient = 0.1;

scene.addLight(rLight);

var gLight:DirectionalLight3D = new DirectionalLight3D();

gLight.direction = new Vector3D(0, 1, 0);

gLight.color = 0x00FF00;

gLight.ambient = 0.1;

scene.addLight(gLight);

var bLight:DirectionalLight3D = new DirectionalLight3D();

bLight.direction = new Vector3D(0, 0, 1);

bLight.color = 0x0000FF;

bLight.ambient = 0.1;

scene.addLight(bLight);

var material:BitmapMaterial = new Dot3BitmapMaterial(_bitmap, _normalMap.bitmapData);

material.smooth = true;

md2.material = material;

md2.centerMeshes = true;

break;

case 1: //Plane Material

/*var filter1:BevelFilter = new BevelFilter(10, 45, 0xFFFFFF, 0.5, 0x000000, 0.5, 10, 10, 50);

var filter2:GlowFilter = new GlowFilter(0xFFFFFF, 1, 50, 50);

var filter3:GlowFilter = new GlowFilter(0xFF0000, 1, 50, 50);

*/

var planeMaterial:BitmapMaterial = new BitmapMaterial(_bitmap);

md2.material = planeMaterial;

md2.centerMeshes = true;

break;

case 2: //Flat Shader

var myFlatShader:FlatShader = new FlatShader(light);

md2.material = myFlatShader;

md2.centerMeshes = true;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

break;

case 3: //Phong Color Shader

var myPhongColorShader:PhongColorMaterial = new PhongColorMaterial(light, 0x00ff00);

md2.material = myPhongColorShader;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

md2.centerMeshes = true;

break;

case 4: //Phong Shader

var myPhongShader:PhongMaterial = new PhongMaterial(light, _bitmap);

md2.material = myPhongShader;

md2.centerMeshes = true;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

break;

case 5: //PBJ Filter

var mat:PBBitmapShader = new PBBitmapShader(light, _bitmap, _normalMap.bitmapData);

md2.material = mat;

md2.centerMeshes = true;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

break;

case 6: //Shader

var mat2:PBTransparentShader = new PBTransparentShader(light, _bitmap, _normalMap.bitmapData);

md2.material = mat2;

md2.centerMeshes = true;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

break;

case 7: //Shader

var myShader:VertexShaderMaterial = new VertexShaderMaterial(light, _bitmap);

md2.material = myShader;

md2.centerMeshes = true;

light.x=light.y =400;

light.z = -400;

scene.addChild(light);

break;

default:

trace(“Out of range”);

break;

}

var loader:Loader3D = new Loader3D();

loader.loadGeometry(“assets/torsov2.MD2″, md2);

loader.addEventListener(Loader3DEvent.LOAD_SUCCESS, onSuccess);

scene.addChild(loader);

camera.z = -200;

}


3D Color Code Calculator in Away3DLite

May 28, 2010

Color Code Calculator

I did this example to demonstrate how to interactively change the materials of a Collada file in Away3DLite. I build the model in Cinema4D and assigned bands and added colors to those bands. I looked up their names in the out putted Collada file and then assigned materials as requested form the Flash Builder ComboBox using change event methods.

Demo

Color Code Calculator

Color Code Calculator

Video

http://www.youtube.com/watch?v=Wgm14JHXyf8

Source

http://code.google.com/p/lv3d/downloads/detail?name=colorCode.zip

Code Discussion

Here’s example code for the first ComboBox

private function changeEvt1(e:Event):void

{

myOne = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID18″).material = myMatArray[myOne];

calcMyOhms();

}

Code for Calculator Ohms as discussed on the video.

private function calcMyOhms():void {

myOhms = (myOne*10 + myTwo)*Math.pow(10, multiplier[myThree]);

if (myOhms >= 1000000) {

myOhms /= 1000000;

myOutput.text = “Resistance = “ + String(myOhms) + ” MOhms, “ + tolerance[myFour];

} else {

if (myOhms >= 1000) {

myOhms /= 1000;

myOutput.text = “Resistance = “ + String(myOhms) + ” KOhms, “ + tolerance[myFour];

} else {

myOutput.text = “Resistance = “ + String(myOhms) + ” Ohms, “ + tolerance[myFour];

}}}

A similar 2D example was done on the web by Danny Goodman at

http://www.dannyg.com/examples/res2/resistor.htm

Enjoy!

private function changeEvt1(e:Event):void {

myOne = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID18″).material = myMatArray[myOne];

calcMyOhms();

}

private function changeEvt2(e:Event):void {

myTwo = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID8″).material = myMatArray[myTwo];

calcMyOhms();

}

private function changeEvt3(e:Event):void {

myThree = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID23″).material = myMatArray[myThree];

calcMyOhms();

}

private function changeEvt4(e:Event):void {

myFour = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID13″).material = myPerArray[myFour];

calcMyOhms();

}


Creating a Shuriken in Cinema4D (four videos)

May 18, 2010

Creating a Shuriken

In this four part series you learn how to create a Shuriken (throwing star) in Cinema4D.

1. Shuriken in Cinema4D – Photoshop

2. Shuriken in Cinema4D – Array Modifier

3. Shuriken in Cinema4D – Booleans

4. Shuriken in Cinema4D – Applying Textures

Download Model

http://code.google.com/p/lv3d/downloads/detail?name=throwingStar.zip


Humvee in Away3DLite (and PV3D) wheels and steering

May 18, 2010

Intro

In chapter 5 of my book, I discuss how to make a car’s wheels move forwards and backwards and steer. It is actually pretty easy to do in PV3D. But in Away3DLite it is not so obvious. So in the video below I discuss the difference and show you how to get wheel movement and steering working for both PV3D and Awa3DLite.

Video

Driving a Humvee in Away3dLite

Try It Out

Driving a Humvee

Driving a Humvee in Away3DLite

Code

To see the code click the link below:

Read the rest of this entry »


Using Booleans in Cinema4D

May 14, 2010

Intro

In the following two videos I show you how to use Booleans to build a small machine part and add textures to achieve a degree of realism.

Videos

Using Booleans in Cinema4D Part1

Using Booleans in Cinema4D Part2


Creating a 3D Room in Flash Catalyst (in 6 lines)

January 23, 2010

Building a 3D Room

Creating a 3D room could never be easier than in Flash Catalyst…and with only writing six lines of code. Now of course it takes more than 6 lines of code to create a 3D room…about 80 using Flash Catalyst. But 74 of them are auto-generated for you. It’s all click and drag and once you bring it into Flash Builder…you just need to add 6 lines of your own to make everything operational.

Check out the demo below:

3D Room Demo (Click the Image)

http://www.professionalpapervision.com/demos/my3droom/

3D Room Demo

Source: http://lv3d.googlecode.com/files/My3DRoomResources.zip

Note: My son James Lively created the images if you use them please give him credit.

Videos:

Video 1: Building a 3D Room in Flash Catalyst (1 of 3)

Video 2: Building a 3D Room in Flash Catalyst (2 of 3)

Video 3: Building a 3D Room in Flash Catalyst (3 of 3)

What’s Important Here!!!

(1) It was all created with only 80 lines of code (74 auto-generated)
(2) It uses very little system resources…your computer doesn’t run hot or slow down
(3) The images are easily replaceable…so create as many rooms as you want
(4) Development time is decrease by a factor of 10
(5) You are not limited by Viewport size or anti-aliasing concerns
(6) It’s just great fun!

Click the link below to see the code.

Read the rest of this entry »


Putting 3D Google Maps on the Web (using Flash 10)

April 18, 2009

Intro

To this point, I’ve been putting Google Maps into Air applications due to the Flash Sandbox issue encountered in PV3D (discussed in a previous post). But in CS4, guess what, it’s not an issue. They go right on the web as you can see from the demo below:

Google Map in 3D on the Web

Google Map in 3D on the Web

Demo

Source

Discussion

Now here is how you do it, and it’s so simple you will not believe it. Use the code below to put your map into a movie where it’s free to move freely in 3D.

movie.addChild(map);

Placing a Google Map on a CS4 Plane is easier in Flex 4 (Gumbo) than it is in PV3D. All you do is throw your map into a movie clip using the code below, and then center it to get your map pivot right. The code snippet below sets your map in a movie clip, centers its pivot, sets map controls, places your movie in a Flex canvas, and centers your movie on the stage.

//Place your map in a movie so you can position its pivot
movie.addChild(map);

//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;

//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());

//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);

//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

The map also has two additional Flex components; a button, which stops it from spinning and a slider, which adjusts its speed and direction of rotation.

This is the great power of CS4 over PV3D. You can now bring native Flex components into your 3D environment in conjunction with your 3D objects. Bringing Flex components into PV3D is a difficult task and requires the use of the draw BitmapData feature. But with CS4 it occurs natively, and those components can be manipulated in 3D as well.

Hey that’s it, how crazy can that be! And all the controls and buttons are fully functional and in the right place.

Note: You could have just rotated the map directly, but you put it in a movie to control positioning and its pivot point.

The rest of the code is shown in the link below and discussed in greater detail in Chapter 7 of the book.

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.