stage3D 搭建2d图形引擎 （八） 动态纹理

回顾之前，我们已经实现了颜色填充的四边形，以及具有纹理贴图的四边形。如果仅仅只是这些，那实在是太无聊了，通过这些我们能够实现的东西无非就是一堆可以动的图片，当然对于某些需求这已经足够，但我们并不因此而止步。另一方面，GPU硬件的能力也远不止如此，这些单调的贴图四边形远远没有发挥为其提供的巨大资源。

接下来我们该研究怎样让GPU尽量地发挥它们应有的价值了。但是为了给GPU施加指令，就需要编写shader program，于是你会发现有一个冲突，我们之前的很多显示对象是共享shader program的，但是为了实现更丰富的表现效果，应该让每个对象的shader program独立开来。所以，很明显，我们不能在原有的shader program上动手脚了。

但是如何才能实现shader program的分离呢？不要着急，慢慢来看：

 

如果你理解了图形引擎的基本原理，你应该很快能看懂这幅图。它描述的是多次绘制，一次呈现的渲染过程，这也是我目前已经实现的。现在的问题是，一旦我们将像素绘制到缓冲区中，我们就（几乎）没有办法来改变它，换句话说我们可以对像素进行操作的阶段只能在绘制执行之前。如果有一种方法，能够让我对绘制出来的像素，即在缓冲区中的像素进行更多的操作，那么结果将会更加的丰富。

为了实现这种功能，stage3D为我们提供了一个接口：

1 Context3D::setRenderToTexture(texture:flash.display3D.textures:TextureBase, enableDepthAndStencil:Boolean = false, antiAlias:int = 0, surfaceSelector:int = 0):void

通过该接口可以指定一个纹理对象，并将之后（通过调用Context3D::drawTriangles()）绘制的内容绘制到相应的纹理之上。有了这个接口，我们就可以将像素绘制到纹理，纹理在手，天下我有，接下来我们只需要对纹理进行fragment program并绘制到缓冲区，当然你也可以不让它马上进入缓冲区，而是重复上一过程，继续绘制到另一个纹理，然后再进行fragment program，直到你得到了想要的效果。事实上，如下图：

我们可以不断地重复上述的过程，或者通过不同的子过程进行组合，从而创造出丰富的效果的同时，不失程序设计的灵活性。

 下面，我们将这一过程进行实现。首先我们建立一个叫做Pass的类：

　　

package psw2d.pass
{
    import com.adobe.utils.AGALMiniAssembler;
    
    import flash.display3D.Context3D;
    import flash.display3D.Context3DProgramType;
    import flash.display3D.Context3DTextureFormat;
    import flash.display3D.IndexBuffer3D;
    import flash.display3D.Program3D;
    import flash.display3D.textures.Texture;
    import flash.utils.ByteArray;

    public class Pass
    {
        protected static const agal:AGALMiniAssembler = new AGALMiniAssembler();
        protected var _shaderVertex:String;
        protected var _shaderFragment:String;
        protected var _program:Program3D;
        protected var _context:Context3D;
        protected var _isRenderToTexture:Boolean;
        protected var _texture:Texture;
        
        public function Pass(context:Context3D, isRenderToTexture:Boolean, width:Number=1, height:Number=1)
        {
            _context = context;
            _isRenderToTexture = isRenderToTexture;
            if(_isRenderToTexture) _texture = _context.createTexture(width, height, Context3DTextureFormat.BGRA, true);
        }
        
        public function assemble():void
        {
            var vertexShader:ByteArray = agal.assemble(Context3DProgramType.VERTEX, _shaderVertex);
            var fragmentShader:ByteArray = agal.assemble(Context3DProgramType.FRAGMENT, _shaderFragment);
            _program = _context.createProgram();
            _program.upload(vertexShader, fragmentShader);
        }
        
        public function render(iBuffer:IndexBuffer3D) : void {
            if(!_isRenderToTexture) _context.setRenderToBackBuffer();
            else    _context.setRenderToTexture(_texture, false, 1);
            
            _context.clear(0, 0, 0, 1);
            _context.setProgram(_program);
            _context.drawTriangles(iBuffer);
        }
        
        public function getTexture() : Texture {    return _texture;    }
    }
}

 

一个Pass对象对应着上图中的一次渲染，因而他们有自己独立的shader program，包括vertex shader 和 fragment shader，根据初始化的参isRenderToTexture来决定是绘制到纹理对象还是缓冲区。一般来说，只有最后一个Pass对象需要将数据绘制到缓冲区，而在它之前的则都需要绘制到纹理对象。这是一个抽象基类，我们需要在它的基础之上构建具有实际意义的Pass类，为此我们需要编写shader program，下面给出两个具体的Pass类：

 正弦波：

package psw2d.pass
{
    import flash.display3D.Context3D;
    
    public class PassSinWave extends Pass
    {
        public function PassSinWave(context:Context3D, isRenderToTexture:Boolean, width:Number=1, height:Number=1)
        {
            super(context, isRenderToTexture, width, height);
            
            _shaderVertex = "m44 op,va0,vc0\n" +
                "mov v0,va1";
            
            _shaderFragment="tex ft0,v0,fs1<2d,clamp,linear>\n" +
                "sub ft0.x,v0.x,fc0.w\n" +
                "mul ft0.x,ft0.x,ft0.x\n"+
                "sub ft0.y,v0.y,fc0.w\n"+
                "mul ft0.y,ft0.y,ft0.y\n"+
                "add ft0.z,ft0.x,ft0.y\n"+
                "sqt ft0.z,ft0.z\n"+
                "mul ft0.z,ft0.z,fc0.x\n"+
                "sub ft0.z,ft0.z,fc0.z\n"+
                "sin ft0.z,ft0.z\n"+
                "mul ft0.z,ft0.z,fc0.y\n"+
                "add ft0,v0,ft0.zzz\n"+
                "tex oc,ft0,fs0<2d,clamp,linear>\n";
        }
    }
}

 

灰度：

package psw2d.pass
{
    import flash.display3D.Context3D;
    
    public class PassGrayscale extends Pass
    {
        public function PassGrayscale(context:Context3D, isRenderToTexture:Boolean, width:Number=1, height:Number=1)
        {
            super(context, isRenderToTexture, width, height);
            
            _shaderVertex = "" +
                "m44 op, va0,vc0\n" +
                "mov v0, va1\n";
            
            _shaderFragment = "" +
                "tex ft0, v0, fs0 <2d,linear,clamp>\n" +
                "add ft1.x, ft0.x, ft0.y\n" +
                "add ft1.x, ft1.x, ft0.z\n" +
                "div ft1.x, ft1.x, fc1.w\n" +
                "mov ft0.xyz, ft1.xxx\n" +
                "mov oc ft0\n";        
        }
    }
}

 

以下是具体效果：

 

 本文中所用到的案例取自：http://wonderfl.net/c/zQ6L#code_forked，有修改。

源码