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 »


Importing Collada into Papervison3D

March 29, 2009

Intro

In PV3D there are two Collada parsers: Collada and DAE. The DAE parser is actually an improved version of Collada parser which includes animation.

When working with Collada files, there are five commonly used scenarios found in PV3D:

  • Single Objects with UVMaps
  • Multiple Objects with UVMaps
  • Single Objects with Multiple Images
  • Interactive Objects (or Vehicles) and Environments
  • Animated Objects

In this post, you learn about Single and Multiple Objects with Simple Images. Click the image below to see a demo:

Moon Orbiting the Earth in 3DSMax

Moon Orbiting the Earth in 3DSMax

Demo

Source

YouTube

Discussion

Single and Multiple Objects with Simple Images are obviously the simplest of all the scenarios in PV3D. In the example above of the moon orbiting the earth, 3DSMax is used to do the modeling. But the procedure presented in this post is similar for other modeling software packages as well.

This is how you do it!

An object is created by a modeling program, such as 3DSMax, and a simple image is placed on that object. In 3DSMax this is done using the material editor. Each material and object is given a name so that it can be controlled by the PV3D program once the Collada file, created by your modeling program, is imported into PV3D.

Once the Collada file is exported from 3DSMax and brought into PV3D, the created objects can be easily manipulated by referring to the object names contained in the exported Collada file. If you forget what you called them during the modeling process, these names can be viewed by opening the Collada file in an editor such as Dreamweaver or Flex and navigating to the geometries library and geometry tags.

<geometry id=”earth-mesh” name=”earth”>
<geometry id=”moon-mesh” name=”moon”>

In this case the names are earth and moon.

Manipulating objects in a Collada file using AS3 is key to creating dynamic game content and use this procedure often. Importing a Collada file into PV3D is an easy 3 step process:

Importing Collada files into PV3D

Step 1: Import the Collada parser
import org.papervision3d.objects.parsers.Collada;

Step 2: Declare collada var and datatype it to Collada
private var collada:Collada;

Step 3: Instantiate the Collada class and fill in the appropriate parameters
collada = new Collada(“MoonEarth.DAE”,null,.1);
In this case, the material parameter of the Collada parser is set to null since the material is imported from the reference inside of the Collada file, found in the images library, as shown below.

<image id=”earth.jpg” name=”earth_jpg”>
<init_from>./assets/earth.jpg</init_from>
</image><image id=”moon.jpg” name=”moon_jpg”>
<init_from>./assets/moon.jpg</init_from>
</image>

Once the images are loaded, the onColladaDone method is executed which sets the planets into place and motion.

collada.addEventListener(FileLoadEvent.COLLADA_MATERIALS_DONE, onColladaDone);

To see the rest of the discussion check out Chapter 5 of the book. To see the complete code click the more button below or download the source

Read the rest of this entry »


Creating Quake 2 (MD2) Models for Papervision3D

March 26, 2009

Intro

OK, after the last post on MD2, if I don’t show you how to create your own MD2 models I haven’t done my job…so let’s do it!

Making your own Quake 2 (MD2) models is a must if you are going to be successful. The process described here will work for both 3DSMax and Maya, but there are similar procedures for other modeling applications. There is both good and bad news here.

The bad news: there are lots of steps

The good news: they are all easy

It’s a four step process.

Four Steps

Four Steps

 Resource Files Download (3DSModels, images, MD2 files, etc…)

Discussion

To make things easy, and completely understandable, we are going to YouTube our way through these four steps:

Step 1: Create Your Model

 

There are extensive tutorials on the book’s blog on creating 3DSMax models and texture. Check them out at

https://professionalpapervision.wordpress.com/3d-modeling/

So we will not repeat all that info, but just create a very simple model to demonstrate the process. Import to the process is to make sure you hit the 7 key to keep those polygons down as you build.

Watch Your Polygons

Watch Your Polygons

Step 2: Texture and Export Your Model

It’s actually simpler to put a texture on a model in Blender. So here’s an outline of how it’s done in 3DSMax (make sure you watch the video below as well)

  1. After creating your model in 3DS Max, add the Unwrap UVW modifier
  2. After selecting your model, select Face from the Unwrap UVW modifier
  3. From the parameters menu (of Unwrap UVW modifier) select Edit
  4. From the UVWs menu (pop up) select mapping and select flatten mapping and click OK (presets should be fine)
  5. You should now be able to see the different sections of your house, then click on tools and select Render UVW Template
  6. In the Render UVs popup change the dimension appropriately (for mitmapped textures 256 or below you get hardware acceleration, but you give up resolution – so it’s a trade off – just use resolution when you need it)
  7. Then from the Mode drop down menu choose solid and then click Render UV Template
  8. Your Render Map should pop up, click on the disk icon to save this map to your hardrive for editing in Photoshop, Gimp, or your favorite image editor (defaults should be OK when saving image to hardrive)
  9. After editing your texture map and saving it (in this instance I saved it as a png since that format works well in Flex), from the Edit UVWs popup choose Pick Texture from the UV drop down box and the Material/Map Browser popup will appear.
  10. From the Material/Map Browser select Bitmap and navigate to and select your image. Your image should appear in the Edit UVWs window overlay (as in Blender use this window to edit your image position).
  11. Now place your texture on your house by hitting the m-key, select the first sphere, click the button next to the diffuse label. And your Material/Map Browser will popup, choose bitmap and navigate to and select your image. That image will now appear on your sphere.
  12. Drag the image from the sphere to your house. Click the “Show Standard Map in Viewport” button to see the uv map on your house (or do a quick render to see it).
  13. Click the export button from the file menu and choose the 3D Studio (*.3DS) format , name your file, and click save
  14. Choose Preserve MAX’s Texture Coordinates and Click OK.

Step 3: Prepare Your Model in MilkShape

You can download MilkShape 3D and a MD2 Viewer from

http://chumbalum.swissquake.ch/

The steps for creating a MD2 model for PV3D starting with 3DSMax (or Maya) are as follows:

  1. After creating your model in 3DSMax (or Maya)
  2. Export it as a 3ds file (fdx file)
  3. Import this file into MilkShape by choosing Autodesk 3DS… (or Maya)
  4. Click the model tab, then the joint button and insert a joint by clicking on a vertex of your model
  5. Select all vertices (control a)
  6. Go to the joints tab and click assign
  7. Check to make sure animation is correct (single frame for no animation)
  8. Export as an MD2 file (ignore the no md3.qc warning not loading into quake)
  9. Check it out using the MD2 model viewer found on the MilkShape site or the PV3D viewer provided on the book’s website.

Step 4: Export to PV3D Model Viewer

After exporting to the MD2 format, change the markers XML data to include the pertinent resources, and upload those resources (xml data, MD2, image, and zip file) to your server. In an upcoming chapter, we will show you how to create an Air viewer.

In a previous post on

PV3D Quake 2 (MD2) Model Viewer and Download

we demonstrated a Papervision3D Viewer. You’ll now load that viewer with the model you created previously.

You made it! Lots of steps, but the process is pretty fast. I can get through it in about 30 minutes, but my designers take a couple of hours. Of course, that’s why their designs rock!!!


Intro e4x Class Outline (Building a Data Driven Website)

March 24, 2009

Intro

Here’s the outline to the Intro e4x Class Outline (Building a Data Driven Website) held at NKU.

e4x means you can use dot syntax to grab data, or create (delete) tags and insert (remove) data. The beauty of using dot syntax is that you can refer to tags by their names-isn’t that cool, no more complex XML language.

1. Look at Applications

2. What’s XML
3. Example 1
4. E4X Examples
5. Dot Syntax
6. Example 2
7. Importing XML into Flex
8. Example 3
9. Uploading your application to the Web
10. Example 4
11. Grabbing & Changing XML
12. What’s PHP
Resource Files
A. Chapter 4 & 8
B. Quake 2 Application
C. XML/PHP applications


PV3D Quake 2 (MD2) Model Viewer and Download

March 24, 2009

Intro

Using MD2 in PV3D was seen, at first, as the best of all worlds. MD2 models are low polygon and work well in PV3D. But finding models that work in PV3D, or creating your own, is a specialized process. Maybe even a lost or dying art…though the fact that there are many great websites out there that use MD2, would seem to contradict this statement.

Quake II Model Viewer

Quake II Model Viewer

Demo
Download
YouTube:

Discussion

In the book, and on the book’s website the MD2 models are discussed in detail. The viewer is provided to help you get started with some elementary code that brings MD2 models into PV3D and provides a number of MD2 models that you can download directly from the application.

In addition, check out the upcoming post on building a data driven website which uses this viewer to demonstrate the power of e4x.

Model Anxiety

Finding good MD2 models on the web can be a challenge. It seems to be one of the great frustrations of working with the MD2 format. A number of model packs can be found on the web at places like

http://www.md2.sitters-electronics.nl/index.html ( static models)

http://telias.free.fr/models_md2_menu.html (animated models)

But keep in mind not all of the models found on the web will work in PV3D, and in the long run you’ll need to be able to make your own models and modify them to be successful. An alternative to the MD2 format is the Collada format which will be discussed in great detail in the book and upcoming post. The big advantage of Collada files over MD2 is that they are human readable.

Importing Quake II Models into PV3D

The procedure for putting MD2 models into PV3D is simple and the documented code snippet that enables you to do that is shown below.

private function initMD2():void {

// Instantiate your skin as a BitmapFileMaterial
var myMD2Skin:BitmapFileMaterial = new BitmapFileMaterial(“assets/mySkin.jpg”, true);

// Instantiate an MD2 object (use true for animation, false otherwise)
var myMD2Object:MD2 = new MD2(true);

// Give your object a name so you can control it in the display list
myMD2Object.name = “md2Object1”;

//Load your MD2 model and its skin
myMD2Object.load(‘assets/myModel.md2′, mySkin, framerate, scale);

// Add you MD2 object to the state using addChild
scene.addChild( myMD2Object);
}

The Big Trick to Handling Multiple Models

In the application we are switching from model to model seamlessly. The big trick to handling multiple models in PV3D is to treat your models as a particle system. Each model has its own display object which is loaded into an array and is annihilated or created when needed as shown below:

Code for Loading Models as Particles

for(var j:uint = 0; j < markersCount; j++)
{
var item:MD2 = new MD2();
particles_ary.push(item);
}

Code for Annihilating and Adding Particles (or models)

movieParent.removeChild(particles_ary[prevIndex]); particles_ary[prevIndex].load(myDataGrid.selectedItem.address, myCarSkin, 15, 1);

movieParent.addChild(particles_ary[prevIndex])

Treating applications as a particle system is covered in great detail in Chapter 6 of the book. To see the entire code for the model viewer you can download it or click the button below.

Read the rest of this entry »


Animating Multiple Pixel Bender Lights

March 21, 2009

Intro
Having multiple lights in PV3D is a desired effect. But after going through the lightmap classes, let me say that it’s impossible without an major rewrite. But with Pixel Bender all you do is add another term to your pbk filter…let’s do it!

Animating Pixel Bender Lights

Animating Pixel Bender Lights

Demo

Source

Discussion

It’s an amazingly simple process. Just add another term to your pixel bender light equation as shown below:

Adding Multiple Images to PV3D

Adding Multiple Images to PV3D

The example above only shows two lights, but you can have as many lights as you want just by adding additional light terms:

The pixel bender code looks like this

float2 outcoord = outCoord();
float attn = (brightness1/((distance(outcoord, center1)+radius1)))+(brightness2/((distance(outcoord, center2)+radius2)));

dst = attn* sampleNearest(src, outcoord);
dst.a=1.0;

Wow, only five lines of code to have multiple light sources – get out of here!

Animating Your Sources

Once you’ve set your shader up then animating it is pretty easy. If you aren’t sure how to set up your shader for animation, check out Lee Brimlow’s video on animating shaders. I do it a little differently than Lee, but not by much. Here are the steps for animating the lights:

  1. Increment your oscillation parameter osc++
  2. Calculate sine and cosine based upon your incremented osc
  3. Update your light positions
  4. Apply the update to your image

The fully documented code is shown below:

private function loop(e:Event):void{

//Increment your oscillation parameter
osc++;
//Calculate sine and cosine
var cos:Number=150*Math.cos(osc/10);
var sin:Number=150*Math.sin(osc/10);
//Update your light positions
shader.data.center1.value = [sin+400, cos+180];
shader.data.center2.value = [cos+200, sin+180];
//Apply the update to your image
image.filters = [filter];
//Rotating your image holder
holder.rotationY+=.25;
}

If you are aware of how hard this is to do in PV3D, you’re going wow…tell me more…and we will…

For the entire source code download the source above, or check out the link below:

Read the rest of this entry »


Adding Pixel Bender to Papervision3D

March 20, 2009

Intro

One of the things which I abhor about modeling in Papervision3D is texture baking. And if you’ve been in the business as long as I have you know why…it’s a labor intensive nightmare…and you can’t ever get it right. But with pixel bender you don’t have to bake your textures anymore and you can adjust your parameters dynamically using ActionScript.

Dynamic Shading using Pixel Bender

Dynamic Shading using Pixel Bender

Demo

Source

YouTube http://www.youtube.com/watch?v=i8BnSqf0Z_g

Discussion

Adding Pixel Bender to Papervision3D was a three step process:

  • Creation of a Pixel Bender Filter
  • Creation of a Pixel Bender Bitmap File Material Class
  • Creation of a Pixel Bender Bitmap Material Class
Adding Pixel Bender to PV3D

Adding Pixel Bender to PV3D

Before you start coding. Make sure you’ve switched to the Flash 10 player!!!

Step 1: In the previous post several pixel builder filters were presented.

Pixel Bender Filters and Algorithms

To create a dynamic light baker filter the simple light filter was modified by throwing out all the pow and exponent methods. The big trick is that exponential behavior can be mimicked by using inverse of distance –now that’s a processor saver. The final algorithm use is shown below:

lively3d Light Source for Texture Baking

lively3d Light Source for Texture Baking

The pixel bender algorithm is easily implemented using the code below:

float2 outcoord = outCoord();
float attn = (brightness/((distance(outcoord, center)+radius)));

dst = attn* sampleNearest(src, outcoord);
dst.a=1.0

In addition to the modification mentioned above the alpha component is split off and set to one. This keeps the images from losing its alpha as you reduce brightness.

Step 2: Next you must create a Pixel Bender Bitmap File Material Class. This is simply done by making a copy of PV3D’s BitmapFileMaterial class and renaming it BitmapBendMaterial class and after changing the constructor and class names extend this class by the BitmapPixelMaterial class.

BitmapBendMaterial extends BitmapPixelMaterial

You’ll now create the BitmapPixelMaterial class.

Step 3: Make a copy of the PV3D BitmapMaterial class and name it BitmapPixelMaterial. Add the appropriate import statements and the pbj and image embed methods and create a shader as shown below:

[Embed (source="filters/livelyLight.pbj",
mimeType="application/octet-stream")]
private var ShaderClass:Class;

[Embed (source="assets/images/gainesHouse512.jpg")]
private var myImage:Class;

private var shader:Shader

Next incorporate the code to get your shader and image working together:

shader = new Shader(new ShaderClass());
shader.data.center.value = [400, 306];
shader.data.brightness.value = [150];
shader.data.radius.value = [100];

var image:Bitmap = new myImage();
image.filters = [new ShaderFilter(shader)];
shader.data.src.input = image.bitmapData

Finally you must change your fill method to a shader fill method with a matrix method

graphics.beginShaderFill(shader,_localMatrix)

That’s it! To check out the wrapper code download the source or click the more button below:

Read the rest of this entry »


Pixel Bender Filters and Algorithms

March 18, 2009

Intro

Lee Brimlow has two really good video tutorials that will help you get over the hump of learning pixel bender – so I won’t repeat those. Check them out below!

Learn Pixel Bender

Putting Filters into Flash 10

But in this post, I’ll give you a ton of pixel bender filter algorithms and programs. Keep in mind pixel bender is extremely easy to use and extremely easy to learn!!!

I once took a filters class, never thought I’d ever use it. I was up at 4 this morning going over my old visual basic notes pulling out the algorithms and throwing them into pixel bender – what a dream!

Pixel Bender

Pixel Bender Point Light Example

Source (tons of filters all the ones shown below and a few more)!

Discussion

If there is only one reason why there needs to be a new version of Papervision3D (PapervisionX) – it’s pixel bender. These shaders operate at the machine level and bring a level of realism to your 3D that has not yet to be realized on the Web.

Here are a few of those algorithms I promised:

Grayscale

Converting an image from color into shades of gray is one of the simplest image processing task. It’s accomplished by averaging the three color channels and setting each channel to that average. In terms of pixel bender code this is

pixel1 shadeVal=(colorChannel.r+colorChannel.g+colorChannel.b) /3.0;
colorChannel.r = colorChannel.g = colorChannel.b = shadeVal;

Next you’ll create the compliment.

Compliment
To create the compliment of an image, subtract each pixel color channel from 255 or in the case of pixel bender 1 since rgb values in pixel bender have a value from 0 to 1 which represents (0 to 255). The pixel bender code is shown below:

colorChannel.r = 1.0 – colorChannel.r;
colorChannel.g = 1.0 – colorChannel.g;
colorChannel.b = 1.0 – colorChannel.b;

Next you’ll create the brightness filter.

Brightness
To add to the brightness of a color you add to each pixel’s component by the percentage increase in brightness times the difference of its compliment. Check out the algorithm below:

colorChannel.r += brightParam*(2.0 – colorChannel.r);
colorChannel.g += brightParam*(2.0 – colorChannel.g);
colorChannel.b += brightParam*(2.0 – colorChannel.b);

Note: A factor of 2 was introduced in the code above instead of 1 (that’s a hack based on visual appeal). Next you’ll create an exposure filter.

Exposure
Exposure is similar to brightness, but you split your color channel into rgb and alpha and apply a pow function to your rgb color channel.

dst.rgb = pow( colorChannel.rgb, float3(1.0 – exposureParam));
dst.a = colorChannel.a;

Next you’ll create color balance.

Color Balance
Color balance is very similar to brightness except that you adjust each color individually.

colorChannel.r += redParam*(1.0 – colorChannel.r);
colorChannel.g += greenParam*(1.0 – colorChannel.g);
colorChannel.b += blueParam*(1.0 – colorChannel.b);

Next you’ll create binary contrast.

Binary Contrast
Contrast measures the difference between two colors. Binary contrast adjusts your color values to only two possible values: black or white. In this case, you just calculate the grey scale and convert it to black or white depending on a shade parameter.

pixel1 shadeVal=(colorChannel.r+colorChannel.g+colorChannel.b)/3.0;
if(shadeVal>shadeParam)
{
colorChannel.r = colorChannel.g = colorChannel.b = 1.0;
}
else{
colorChannel.r = colorChannel.g = colorChannel.b = 0.0;
}

Next you’ll create a simple pixelate filter.

Simple Pixelate
Simple pixelate uses the floor function to widen your color box region. It’s really just a trick, but demonstrates a good use of the floor function.

float2 pixelCorner = floor(outCoord()/dimAsFloat);
pixelCorner = dimAsFloat*pixelCorner;
outputPixel = sampleNearest(inputImage, pixelCorner);

Next you’ll create a simple blur filter.

Simple Blur
A Blur filter works by including a bit of surrounding pixel color into the color of your current pixel. This is typically accomplished by using some type of weighting function that drops off over distance, such as a Gaussian distribution. You’ll design a simple blur filter using a linear drop off. The algorithm below adds two pixel colors beyond your center pixel and drops off linearly.

color = color + 0.75*color(blurParam/2) + 0.25*color(blurParam)

The algorithm works well for a blurParam from 0 to 10 but then breaks down. To improve it you need to add more terms…but isn’t that always the case. The pixel bender snippet is shown below:

float2 pos = outCoord();
pixel4 color = sampleNearest(src,pos);

color+=0.75*sampleNearest(src, pos+float2(0.5*blurParam, 0))+0.25*sampleNearest(src, pos+float2(blurParam, 0));

color+=0.75*sampleNearest(src, pos-float2(0.5*blurParam, 0))+0.25*sampleNearest(src, pos-float2(blurParam, 0));

color+=0.75*sampleNearest(src, pos+float2(0, 0.5*blurParam))+0.25*sampleNearest(src, pos+float2(0, blurParam));

color+=0.75*sampleNearest(src, pos-float2(0, 0.5*blurParam))+0.25*sampleNearest(src, pos-float2(0, blurParam));

dst = color/5.0;

Next you’ll create an outline sharpen filter.

Sharpen
The sharpen filter is similar to the blur filter in that you must displace the colors (this was created by Ryan Phelan on Adobe pixel bender exchange). But after displacement you must add and subtract them in such a way that you bring out their outlines.

float4 left = sampleLinear(src, coord – float2(radius, 0.0)) * amount;
float4 right = sampleLinear(src, coord + float2(radius, 0.0)) * amount;
float4 top = sampleLinear(src, coord – float2(0.0, radius)) * amount;
float4 bottom = sampleLinear(src, coord + float2(0.0, radius)) * amount;

dst.rgb += (top.rgb);
dst.rgb -= (bottom.rgb);
dst.rgb += left.rgb;
dst.rgb -= right.rgb;

The filter uses two parameters, radius and amount: radius increases the displacement, and amount increases the color.

Next you’ll create a simple point light.

Point Light

Here’s a very simple light algorithm developed by John Engler of the Adobe pixel bender exchange. The algorithm produces an extremely powerful effect and uses a combination of power and distance calculations. Such a calculation would have been avoided in Flash due to processor constraints, but with pixel bender it’s super fast!

The equation places your light at the center position. That’s because at center position there is a singularity in your equation (coord – center = zero) and everything goes white. The AttnDecay variable determines the spread of your light’s decay across your image. The AttnMult variable just multiplies your light source by a value and the brightness variable exponentiates your entire expression, acting like a brightness term.

Light Attenuation Equation

Light Attenuation Equation

The pixel bender code snippet is given below:

float2 outcoord = outCoord();

float attn = pow(attnMult/pow(distance(outcoord, center), attnDecay), brightness);

dst = attn* sampleNearest(src, outcoord);

Next you’ll create the bloom brightness effect.

Bloom Brightness

Bloom brightness is used in Away3D and was developed by Der Schmale. It filters the bright parts of the image and caps the darker parts at black.

float4 current = sample(src, outCoord());

if (length(current.xyz) < threshold)

{
dst = pixel4(0.0, 0.0, 0.0, 1.0);
}
else {
current.xyz *= exposure;
dst = current;
}

The code uses two parameters, threshold and exposure. And when your distance is less than your threshold your pixel rgb channels are set to zero. If greater than your threshold, your exposure kicks in. You’ll see this again when you add pixel blender to PV3D.

Conclusion

In the next post, you’ll learn how to add Pixel Bender to PV3D!



Flex 4 (Gumbo) Fire Video on the Supper Club

March 13, 2009

Intro

Our group just finished the first part of the Beverly Hills Supper Club project. I realize that this is a sensitive area and lives were lost. The completed site will be a memorial to those loved ones that were lost in this tragic fire.

Here I demonstrated playing the Supper Club fire video on the Blender building skin. To see the demo just click the image below (drag the building with the mouse to rotate it and click the play video button to get the video to play):

Supper Club Video on a Blender Model

Supper Club Video on a Blender Model

Demo

Code (Only MXML File – Video too large for Google Code)

UTube

Discussion

It’s pretty easy. Just follow the posts below which explain everything in detail:

1. Learn about netStream and netConnection

Adding Video to a Papervision3D Curved Plan

2. Learn about using video in CS4

Putting Video on a CS4 (Flash 10) Primitive

3. Learn how to build a CS4 shaded model using drawTriangles

CS4 Flat Shaded Tie Fighter with drawTriangles

4. Learn about Light in Papervision3D

Adding Brightness to PV3D Light Source

5. Learn how to model in Blender

3D Modeling

6. Learn how to export your Blender models to Papervision3D and CS4

New Blender XML Exporter/PV3D XML Primitive

The big trick to this is to create a simple parameter that allows you to switch between the shaded model and video within the triangle creation loop.

playMyVideo = false or true;

Run Shade Code if false

….

Run Video Code if true

}else{

var vertices2:Vector.<Number>=new Vector.<Number>();
vertices2.push(dispVec[facesVec[curFace][0]].x, dispVec[facesVec[curFace][0]].y);
vertices2.push(dispVec[facesVec[curFace][1]].x, dispVec[facesVec[curFace][1]].y);
vertices2.push(dispVec[facesVec[curFace][2]].x, dispVec[facesVec[curFace][2]].y);

//Draw Video into Bitmap
bitmapData.draw( this.myVideo);
this.myVideo.attachNetStream ( this.myStream );

spObjImage.graphics.beginBitmapFill(bitmapData,null, false, false);
spObjImage.graphics.drawTriangles(vertices2);
spObjImage.graphics.drawTriangles(vertices2)

}

Another trick is handling rotations correctly. To do this you need to use subtraction of your previous position from you present position (since you are appending rotation in this example). So if you are rotating forward the difference is positive and if backwards the difference is negative.

private function boardMove(e:MouseEvent):void {

var locX:Number=prevX;
var locY:Number=prevY;
if(doRotate){
prevX=spBoard.mouseX;
prevY=spBoard.mouseY;
rotateObj(prevY-locY,-(prevX-locX),0);
e.updateAfterEvent();

}

Once you “get this in your head” you’ll undertstand “append” rotation in CS4 – otherwise it’s uncontrollably wild.

Now there’s on more “Super trick”. This application was originally created for an Adobe Air and was run on the desktop. So when you put it on the web the video will not work since it uses

spObjImage.graphics.drawTriangles(vertices2)

looks like a terrible sandbox issue, but wait a second didn’t we get video on a prim in the previous post on Putting Video on a CS4 (Flash 10) Primitive…

Yes we did???

But this time we don’t have indices and uv data … shouldn’t we just give up or get some expert to tell us what to do…nah, just replace indices and uv data with null and it works…please don’t ask me why. Remember, I said this was a trick.

spObjImage.graphics.drawTriangles(vertices2, null, null,TriangleCulling.NEGATIVE);

And Tada, video on the Supper Club.

Remarks

The full project will allow site visitors to leave messages in supper club rooms…building a flexpress flat-file data base to handle these messages is part of the TEI project… The advantage of the flat-file data base is that you can drop the program onto any server – hassle free and it works – no fancy install!

To see the entire code click the more button below:

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.