Adding Shaders and Pixel Bender to Away3dlite

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 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

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

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();

}

Humvee in Away3DLite (and PV3D) wheels and steering

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 in Away3DLite

Code

To see the code click the link below: