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, 0×000000, 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 »


Hacking Plugin Media and PV3D.org

April 11, 2009

Intro

Seb Lee-Delisle is the technical director at Plug-in media and is famous world wide for his particle effects and his very entertaining presentations. During the Christmas season Seb usually releases a snow particle system to the open source community. You can download Seb’s snow systems and more from his blog at www.sebleedelisle.com.

In this post, you’ll take Seb’s snow-storm particle effect and combine it with another great blog release found on John Lindquist’s site at www.pv3d.org. John also releases tons of great PV3D examples and you should take the time to visit his site as well.

You’ll combine Seb and John’s work to produce a reflecting snowy Christmas scene shown below. This is a great example of hacking two different software apps to produce a superior one.

IT'S A SNOWY CHRISTMAS

IT'S A SNOWY CHRISTMAS

Demo

Download

YouTube

Discussion

If you haven’t guessed it yet, hacking in the open source community is a good thing, and the book emphasizes going beyond the surface of PV3D and making it better (or hacking the heck out of it)!

Making it Snow for Christmas

You’ll want to start by either going to Seb and John’s blogs and downloading the corresponding snow storm and Flint Christmas scene, or by downloading the Merry Christmas code from the book’s chapter code (or link above).

John uses this Christmas scene as an example of Flint particles. The problem is that his snow is just 2D and does not interact with the reflective surface. Seb has 3D snow that will interact with the surface. So you’re going to delete the FLINT particle snow system (you’ll learn about FLINT in a later post) and add Seb’s snow.

Here are the steps:

1. Delete the Flint Particle system from John’s code.
2. And import Seb’s snow storm package into to John’s code and instantiate it using the following code:

snowStorm=new SnowStorm(100, .4,2000);
// Also, make sure that you update the snow in your animation loop (enterFrameHandler) or it willnot show up.
snowStorm.update();

3. John uses planes for Christmas ornaments, you can “snaz” this up a bit by replacing the planes with spheres, and by reducing the segments to 2×2 you make your ornaments look like crystals.

for(var i:int = 0; i < total; i++)
{
var material:ColorMaterial;
if((i & 1) == 0) material = new ColorMaterial(0xaa0000);
else material = new ColorMaterial(0x00aa00);
material.doubleSided = true;
//Add a sphere instead
var sphere:Sphere = new Sphere(material, 10, 2,2);
sphere.x = Math.cos(i) * (radius – i * 3);
sphere.z = Math.sin(i) * (radius – i * 3);
sphere.y = i / total * height;

myHolder.addChild(sphere);

}

4. You now have 3D snow and cool looking ornaments, but the snow is out of wrack and at this point you’ll need to adjust a few parameters to make it look just right. In this case, we want the falling snow to disappear just as it touches the reflective surface . To accomplish this adjust the following parameters

snowStorm=new SnowStorm(100, .4,2000);
myHolder.addChild(snowStorm);
//Pull the snow up so it disappears when it hits the reflective surface
snowStorm.y=1000;

In addition to changing your particle parameters you raise your snow’s y-position so it just touches the reflective surface before being recycled. Next you have to go into the snow class itself and adjust the particle ratio. In the SnowStorm class in the update method make the following change:

if(particles.length/10 < maxFlakes)

This is what I call emotional (or intuitive) programming. You might not know completely how the code works but by changing a few parameters you bring everything into agreement. This can be both dangerous and fun! So make sure you keep back up copies in case you really mess something up.

This causes your particles to be regenerated more rapidly and close the gap that appears due to particle lag. Now matter what you create, you’ll always need to make adjustments. Get used to going down to sub classes and changing parameters.

Flex is a great tool for surfing logically to classes that you need to modify. Just roll over a method and hold down the command key (MAC) or alt key (PC) and when you do the method, class, or property will underscore and when you click on it you will automatically navigate to that method even if it is in another class.

5. Finally you want to change the words from MERRY CHRISTMAS to IT’S A SNOWY CHRISTMAS. You’ll need to play around with the spacing of the words a little to get it right (this is where a little knowledge of trig is helpful).

//IT’S A
var itsaMaterial:Letter3DMaterial = new Letter3DMaterial(0x00cc00);
var itsa:Text3D = new Text3D(“IT’S A”, rockwell, itsaMaterial);
//SNOWY
var snowyMaterial:Letter3DMaterial = new Letter3DMaterial(0xcc0000);
var snowy:Text3D = new Text3D(“SNOWY”, rockwell, snowyMaterial);
//CHRISTMAS
var christmasMaterial:Letter3DMaterial = new Letter3DMaterial(0x00cc00);
var christmas:Text3D = new Text3D(“CHRISTMAS”, rockwell, christmasMaterial);

The final results are shown below in the figure above. To see the entire code download it from the source or click the more button below:

Read the rest of this entry »


Gaming Seminar at NKU (Notes and Links)

March 31, 2009

Intro

Here’s a few notes and links for the Gaming Seminar:

Three Types of Games

  • Simulators
  • Board Games
  • Environment Game

Particle systems are at the heart of games.

Augmented Reality

Seb Delise

Augment Example 1

Augment Example 2

Example WebCam Experiment

http://woveninteractive.com/dev/nascar/flartoolkit-nascar.html

Making Games

In Making games there are three important areas:

  • Pedagogy…game play, genre (need a design doc – I don’t know what you are thinking)
  • Graphics and Models
  • Programming

Seb Delise Pong Example

3D Pong Example

Barney Car Modeling


Building the Flintstones Car for Papervision3D

March 31, 2009

Intro

Carlos Ulloa, with his brainchild Papervision3D, released a cool looking sports car a while back and John Lindquist picked it up on his site and released the code. But what was not released was how to create such a car and export it as a controllable Collada file for use in PV3D. So, I built the Flintstones “Barney Rubble Car” below to illustrate the process.

In this post, we will show you how to create a controllable vehicle and more…

Barney Rubble Car in 3DSMax

Barney Rubble Car in 3DSMax

Demo

(Click the screen to activate the car, then control it using your arrow keys-use double arrows left+up to get a continuous left turn…)

Source

YouTube

Discussion

The video above walks you through the creation of the car. So I won’t go through that. We will start with once your Collada file is exported.

After Creating Your Barney Car

Just as you would put a model together, as you create the different parts in 3DSMax, you just place them together. The important part is that you give each one of them a name so you can control them with ActionScript. In this particular example the following naming convention was used:

  • CarBody-your “Barney Log” car body
  • FRWheel-your front right wheel which links to your steerFR (disk brake)
  • FLWheel-your front left wheel
  • steerFR-your front right disc brake which acts as the linkage container for your FRWheel
  • steerFL-your front left disc brake which acts as the linkage container for your FLWheel
  • RRWheel-your rear right wheel
  • RLWheel-your rear left wheel

So after creating and naming all the elements of your “Barney car” in 3DSMax (for example), export your car as a Collada file.
When you look at a Collada file for the first time you might be shocked. It looks somewhat horrific at first. But actually Collada files are very simple. They are organized into libraries. Each library typically contains some important aspect of 3D, such as lights, cameras, geometry, animation, physics, and so on…
In the case of the “Barney car” above, you’re interested in examining the visual_scenes library. Collada files can be opened in Dreamweaver or Flex. When examining the visual_scenes library nodes you’ll find all the elements created by our 3DSMAX.

<node id=”CarBody-node” name=”CarBody” type=”NODE”>
<node id=”RRWheel-node” name=”RRWheel” type=”NODE”>
<node id=”RLWheel-node” name=”RLWheel” type=”NODE”>
<node id=”steerFR-node” name=”steerFR” type=”NODE”>
<node id=”FRWheel-node” name=”FRWheel” type=”NODE”>
<node id=”steerFL-node” name=”steerFL” type=”NODE”>
<node id=”FLWheel-node” name=”FLWheel” type=”NODE”>

When importing the “Barney car” Collada file into PV3D, you’ll use these names to control your car.

Grabbing Names from Collada

Your first task, after importing the Collada file into PV3D, is to grab these names from the Collada file so you can use them in your program.

// Steering disc for front wheels
steerFR = collada.getChildByName( “steerFR”, true );
steerFL = collada.getChildByName( “steerFL”, true );
steerFR.rotationX=steerFL.rotationX=-90;

// Rotation of wheels
wheelFR = collada.getChildByName( “FRWheel”, true );
wheelFL = collada.getChildByName( “FLWheel”, true );
wheelRR = collada.getChildByName( “RRWheel”, true );
wheelRL = collada.getChildByName( “RLWheel”, true );

These names are stored in appropriate variables and used to control your car. You’ll first investigate the steering mechanism.

Creating a Steering Mechanism

Key to creating a steering mechanism is using linking. The steering mechanism is created in 3DSMax by linking the front wheels to their corresponding disc brakes. Since the tires are children of the disc brakes, when the disc brakes are rotated the tires rotate with them. And when the car is moved forward all the tires rotate together in sequence.

Wheel Linkage

Wheel Linkage

Putting this all together in the code below illustrates how the car’s wheels are maneuvered in PV3D. The steering code is surprisingly simple and consists of only two lines of code.

steerFR.rotationY = steer;
steerFL.rotationY = steer;

So as the steering parameter is changed the rotationY for your disc is changed, thus changing the angle of your wheel. Next you’ll learn to make your wheels roll.

Rolling Wheels and Moving Car

As the speed of you car is increased the wheel yaw is also increased making the wheels turn.

var roll :Number = speed*.4;
wheelFR.yaw( roll );
wheelFL.yaw( roll );
wheelRL.yaw( roll );
wheelRR.yaw( roll );

// Turn your car
car.yaw( speed * steer / 500 );
// Move car forward
car.moveLeft( speed )

Finally, the car itself is turned using the yaw command and moved forward (or backwards) using moveLeft, where the parameter in the move method is the distance to move in pixels. Now you might have been expecting moveForward to be used, and in other cases it is. It just depends on your geometry of how your car was created in 3DSMax, and in this case moveLeft actually took you forward.

To see all the car code click below or download the source above.

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.