Jean-Marc Le Roux Web, RIAs and chocolate spaghettis…

New Minko Tutorial: Vertex Attributes In The Fragment Shader

Passing values from the vertex to the fragment shader is a very common thing. The simplest use case is when you want to sample a texture: this operation can only be done in the fragment shader, but the texture coordinates to sample are accessible in a vertex attributes in the vertex shader. In the end, any non-trivial shader will require to pass values from the vertex shader to the fragment shader.

The picture above is a very simple use case: we define a per-vertex RGB color and use it to draw a triangle. Everything is explained in the "Work with vertex attributes in the fragment shader" tutorial on the Hub.

The actual shader is pretty simple, but I recommend you read the entire tutorial to understand it properly:

public class RGBShader extends ActionScriptShader
{
  private var _color : SValue = null;
 
  override protected function getOutputPosition() : SValue
  {
    var xy : SValue = float2(getVertexAttribute(VertexComponent.XY));
 
    _color = getVertexAttribute(VertexComponent.RGB);
 
    return float4(xy, 0., 1.);
  }
 
  override protected function getOutputColor() : SValue
  {
    return interpolate(_color);
  }
}

Another interesting thing is optimization. As values are linearily interpolated between the vertex shader and the fragment shader, it makes it possible to perform some per-vertex computations and reuse them in the fragment shader. The only requirement is that those values have to be linearily interpolable. In other words: every linearily interpolable values computed in the fragment shader could be computed in the vertex shader instead. It gives a very important performance boost, as the vertex shader is much faster and runs on a much smaller data set: we always have a lot less vertices than we have pixels. I will soon write an article about this very optimization.

Last but not least, this tutorial uses the latest additions in Minko. Among them, an easier way to declare vertices and fill a vertex stream using a VertexIterator. Indeed, you can now use an (inlined) Object to initialize an entire vertex at once. It was done by overloading the flash_proxy::setProperty() method in the VertexIterator dynamic class. You can now chose between 3 different approaches to fill a vertex stream:

var vstream : VertexStream = new VertexStream(null, format);
var vertices : VertexIterator = new VertexIterator(vstream);
 
// the inline version (new!)
vertices[0] = {x: 0.,  y: .5,  r: 1., g: 0., b: 0.};
vertices[1] = {x: -.5, y: -.5, r: 0., g: 1., b: 0.};
vertices[2] = {x: .5,  y: -.5, r: 0., g: 0., b: 1.};
 
// the dynamic version
vertices[0].x = 0.;
vertices[0].y = .5;
vertices[0].r = 1.;
vertices[0].g = 0.;
vertices[0].b = 0.;
 
vertices[1].x = -.5.;
vertices[1].y = -.5;
vertices[1].r = 0.;
vertices[1].g = 1.;
vertices[1].b = 0.;
 
vertices[2].x = .5;
vertices[2].y = -.5;
vertices[2].r = 0.;
vertices[2].g = 0.;
vertices[2].b = 1.;
 
// the fast version
vstream.push(
  0., .5, 1., 0., 0.,
  -.5, -.5, 0., 1., 0.,
  .5, -.5, 0., 0., 1.
);

All those 3 versions do the very same thing, but in a different fashion. You can now use any of those depending on what you are doing.

As always, if you have questions or suggestions, you can post them on Aerys Answers.