Navigation


RSS : Articles / Comments


PV3D Shader Materials, A Deeper Explanation

10:47 AM, Posted by Jim Foley, 7 Comments

I have all of the Shader Materials posted with examples and code for each but they do require a bit of explaining to fully understand them. After all, executing a Shader w/ ShadedMaterial does seem like a hell of a lot of code to do something that is pretty simple to a 3D Designer.

In the example I have posted here, the code is fully commented with explanations for what each snippet does. Aside from that, I figured a diagram would be the best way to show how it works and to really simplify the process.


Click here to view Example & Diagram
Example: Click Here
Flex Source: Click Here
Flash Source: Click Here
Code:
package {
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.Event;
import org.papervision3d.cameras.CameraType;

//The following imports are required for Shaders
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.shaders.GouraudShader;
import org.papervision3d.materials.shaders.ShadedMaterial;

import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

[SWF(widht="530", height="300", framerate="31", backgroundColor="0x00")]
public class GouraudShaderExample extends Sprite
{
private var flowchart:FlowChart;
//MovieClip imported and instantiated from the Flash library
private var pattern:PatternMC = new PatternMC();
//MovieMaterial that will hold 'pattern'
private var mMat:MovieMaterial;
//The GouraudShader is basically a shading layer that is placed over the MovieMaterial
private var gShader:GouraudShader;
//The Shaded Material joins the MovieMaterial and the GouraudShader together.
private var gMaterial:ShadedMaterial;
//A light will be needed for the GouraudShader. The light is used to determine the source of light, duh.
private var light:PointLight3D;
//Finally, the object that we will apply our ShadedMaterial to.
private var sphere:Sphere;
private var view:BasicView;

public function GouraudShaderExample()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
flowchart = new FlowChart();
flowchart.x = 130; flowchart.y = 150;
addChild(flowchart);
view = new BasicView(300, 300, false, true, CameraType.FREE);
light = new PointLight3D(); //The light is created.
//The MovieMaterial that the 'pattern' MovieClip is applied to.
mMat = new MovieMaterial(pattern, false, false, true);
//The GouraudShader, the light is attached to it.
gShader = new GouraudShader(light, 0xFFFFFF, 0x111111, 30);
//The ShadedMaterial then combines the MovieMaterial and the ShadedMaterial.
gMaterial = new ShadedMaterial(mMat, gShader);
//Finally we apply the ShadedMaterial to the sphere.
sphere = new Sphere(gMaterial, 250, 18, 18);
view.scene.addChild(light);
view.scene.addChild(sphere);
addChild(view); view.x = 245;
addEventListener(Event.ENTER_FRAME, onRenderViewport);
}

private function onRenderViewport(e:Event):void
{
view.singleRender();
sphere.yaw(2);
light.x = (mouseX - 250) * 5; //setting the x / y position of the light gives us dynamic lighting.
light.y = -((mouseY - 150) * 5);
}

}
}

7 Comments

Björn @ March 5, 2009 4:31 AM

Great example and tutorials!
Question: why is resolution always low when I use papervision?
Is it the engine or can I adjust the result somehow?

Jim Foley @ March 5, 2009 8:31 AM

Resolution is kinda funky when you're dealing with realtime 3D objects. The resolution is based on the size of the texture map you're using. So if you have a 100x100 pixel image applied to your 3D object the 'resolution' or image quality of the object will suck. If you use a 500x500 image it will be better. But, be careful, the higher resolution image you use, the larger the file and the more processor intensive it is.

Andrew @ March 24, 2009 5:49 AM

Jim,

I did a test on image sizes and found out that whether I was using a 600k or 16M texture file, the fps remained the same. I do have a question for you though. Does Papervision support shaders on BitmapFilematerials, yet? If not, do you know if its in the works?

Jim Foley @ March 30, 2009 10:44 AM

Not sure if PV3D supports shaders on BitmapFileMaterials. Although, i'm certain that you could create a MovieAsset that loads in an image, then use that MovieAsset as a MovieMaterial that is tied into a shader. Make sense?

Omar Fouad @ May 24, 2009 3:16 PM

What if I want to apply a shader to a MovieMaterial that I apply on a Plane? Like a circle for example?

Roovin @ August 11, 2009 4:28 AM

yeah PV3d does support shading on BitmapFileMaterial..

in your BitmapFileMaterial.as ...

change:

super.drawTriangle(tri, graphics, enderSessionData);

to:

super.drawTriangle(tri, graphics, renderSessionData, altBitmap, altUV);

then create your filematerial, create your shader, join them with a shadedmaterial... add it to your materialslist and then apply that materialslist when you load your collada with a DAE parser

Wojciech @ February 25, 2010 2:06 PM

hymn.. link is broken :(