molehill介绍翻译

to output clipspace

6.\ // copy stream 1 (vertex color) to fragment shader 7.);

And as you can imagine, va1 (vertex attributes 1) for the color was defined through setVertexBufferAt, to expose our pixel colors (float 3) in the shaders: 1.context3D.setVertexBufferAt( 1, Context3DVertexBufferFormat.FLOAT_3 );

Our vertices position and colors are defined into our VertexBuffer3D object : 1.// create a vertex buffer

2.// format is (x,y,z,r,g,b) = 3 vertices, 6 dwords per vertex 3.vertexbuffer.uploadFromVector ( Vector.([ 4.-1,-1,0, 255/255,0,0, // red 5.0,1,0, 193/255,216/255,47/255, // green 6.1,-1,0, 0,164/255,228/255 // blue 7.]),0, 3 ); // start at offset 0, count 3

We have our vertex shader defined, now we need to define and upload our fragment shader (Context3DProgramType.FRAGMENT), the idea is to retrieve each vertex color passed (copied from va1 to v0) and output this color through the oc opcode:

1.var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler(); 2.fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, 3.\ // output color 4.);

As you can imagine, a fragment shader should always output a color. Then, we need to upload all this to the Context3D object:

1.// upload the AGAL bytecode

2.program = context3D.createProgram(); 3.program.upload(

fragmentShaderAssembler.agalcode );

If we compile and run those shaders, we would get the following result:

vertexShaderAssembler.agalcode,

vertexbuffer, 3,

Now, let’s say we need to invert the colors of each pixel, it would be really easy. As this operation is performed on the pixels color only, we would just modify our fragment shader and use the sub opcode to subtract the color, as following:

1.var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler(); 2.fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, 3.\ + // subtract the color ( 1 - color) 4.\ // output color 5.);

Here, we invert the color of each pixel by subtracting each pixel color from 1 (white). The white pixel we subtract from is stored in a fragment constant (fc1) that we passed by using the setProgramConstantsFromVector API:

1.context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 1, Vector.( [ 1, 1, 1, 1 ] ) );

The final pixel color is then stored in a fragment temporary register (ft0) and passed as the final output color.

By using this modified fragment shader, we end up with the following result:

As another exercice, let's process a sepia-tone filter.

To achieve this, we need to first convert to gray scale then to sepia. We would use the following fragment shader for this:

1.var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler(); 2.fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, 3.\ + // convert to grayscale 4.\ + // convert to sepia 5.\ // output color 6.);

As usual, we would have defined our constants using the setPrograConstantsFromVector API: 1.// grayscale

2.context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 1, Vector.( [ 0.3, 0.59, 0.11, 1 ] ) ); 3.// sepia

4.context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 2, Vector.( [ 1.2, 1.0, 0.8, 1 ] ) );

By using such a fragment shader, we would end up with the following result:

As you can imagine, this gives you a lot of power and will allow you to go way further in terms of shading and handle things like lightning through vertex or fragment shading, fog, or even animation through vertex skinning and even more.

Ok, so last one, let's now apply a texture to our triangle from a BitmapData, to do this, we would need to pass uv values from our vertex shader to our fragment shader and then use those values to apply our texture that we sampled in our fragment shader.

To pass the uv values, we would need to modify our vertex shader this way : 1.vertexShaderAssembler = new AGALMiniAssembler();

2.vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,

3.\ + // 4x4 matrix transform from stream 0 to output clipspace

4.\ // copy texcoord from stream 1 to fragment program 5.);

Our uv coordinates are now copied from va1 to v0, ready to be passed to the fragment shader. Notice that we do not pass any vertex color anymore to the fragment shader, just the uv coordinates. As expected, we defined our uv values for each vertex (float2) through va1 with setVertexBufferAt : 1.context3D.setVertexBufferAt( 1,

_vertexBuffer, 2,