Link

首页

Tweet

书单

about me

Command

友情链接

Category

Everyday Stage3D (六) Texture


        贴图的操作是GPU程序的必备功能之一。在stage3D中我们也可以很方便的使用位图数据作为我们程序的纹理贴图。对于纹理的操作本篇这涉及一小部分,更多的内容后面还会继续涉及到。在编写代码之前,我们要先来了解一下UV的概念。

        简单来讲,任何一个知识都不是某些人凭空想像出来的,UV存在即有他存在的理由。当我们对一个模型进行贴图操作的时候,我们希望知道这个贴图每一个像素点对应的顶点位置。为了解决这个问题,我们就产生了UV的概念。由于所有的贴图都是一张矩形图片,而图片并非存在于三维空间中的,也就是说,我们要表达图片中某一个点的位置,可以使用XY来进行表示。但是在实际的程序开发中,我们不希望贴图坐标对应点这类数据与三维顶点的XYZ数据混淆,所以我们使用UV来进行表示。为了方便大家学习,这次的demo我们换了一个稍微复杂一点的,将原来的三角形变为了一个正方形。我们通过下面的图片来说明一个正方形的顶点数据。

        这幅图中有一个正方形,包含四个顶点,坐标值已经标明在图中了。其中蓝色的线将红色的正放心分割为两个三角形,分别为T1和T2,当我们用GPU绘制三角形的时候,GPU是分别绘制T1和T2的,然后将绘制后的结构填充到同一张位图数据中,最后将位图打印到我们FLASH的容器当中。下面我们来看看位图数据。如图2

         图中已经红色的方块表示一张位图,而黑色的线表示笛卡尔坐标轴,XY对应的也是我们的UV,图中的坐标值也是我们的UV值。我们可以看到,在UV中,我们的坐标系和顶点数据的坐标系是不同的。

         OK!如果我们想让图片正确的显示在GPU中,我们要将贴图的UV数据和顶点数据一一对应,并且编写AGAL让GPU理解这些数据的关系以及含义。那么我们来看一下,对于顶点(0,0)来说,它应该对应的UV值为(0,1),具体关系可以参考上面的两幅图。同理,坐标为(1,1)的顶点应该对应UV值为(1,0),以此类推,我们可以得出四个顶点的所有UV值。通过上面的设想,我们设计了新的数据格式,每个顶点有四个值,每个值标识XYUV,代码如下。

//顶点数据
var vb:Vector.<Number> = Vector.<Number>([
    0,0, 0,1,
    1,0, 1,1,
    1,1, 1,0,
    0,1, 0,0
]);

由于现在有两个三角形,那么我们顶点索引数据也相应的变为了如下格式。

//顶点索引
var ib:Vector.<uint> = Vector.<uint>([
    0,3,1,
    1,2,3
]);

        有了这些基础的数据之后,我们来看一下关于纹理的操作。在stage3D中,我们可以使用BitmapData作为纹理的数据源。也就是说,到目前为止,你可以不考虑图片的格式,只要是Flash能支持load进来的图片都可以作为我们的纹理。前提是你的纹理一定要为2的次方,比如1x1,128x128,512x512这样的尺寸。这里为了方便,我们选取了一张128x128的图片,并且使用下面的代码将纹理上载置GPU。

//纹理
tex = this._context3d.createTexture(128,128,Context3DTextureFormat.BGRA,true);
var bit:Bitmap = new pic();
bit.x = 350;
this.addChild( bit );
tex.uploadFromBitmapData( bit.bitmapData, 0 );

        当程序运行后,我们的贴图纹理就已经被上载到GPU当中,下面我们来编写AGAL,首先是顶点操作。

//AGAL
var vp:String = "mov op, va0
" +
"mov v0, va1";
var vagal:AGALMiniAssembler = new AGALMiniAssembler();
vagal.assemble( Context3DProgramType.VERTEX, vp );

        和原来的操作相同,只不过这里的va0中存储的数据为xy,而va1中的数据存储的则是UV坐标值。纹理着色器AGAL如下:

var fp:String = "tex ft0, v0, fs0 <2d,repeat,linear,nomip>
" +
"mov oc,ft0";
var fagal:AGALMiniAssembler = new AGALMiniAssembler();
fagal.assemble( Context3DProgramType.FRAGMENT, fp );

        很多人看到这里就会有些疑问,为什么fs0后面跟着这么一长串乱七八糟的东西。我们来详细解释一下。首先fs0表示我们的纹理,也就是要处理的贴图数据。而v0中则存放着我们的UV坐标。那么tex的作用是什么样子的呢?

         其实非常好理解,因为以前的操作大部分都可以用顶点着色器的方法去理解。我们不关心程序运行的过程,而只关心程序运行时候的某些特定的点。例如,某一个顶点的变换。其实纹理也是一样的,虽然看上去是一个面,但是纹理也是有众多的像素点组成,有了点的概念,这里理解起来也就简单多了。我们知道一个点的颜色值由RGBA组成,这里每运行到一个像素点的时候,我们就可以读取到这个像素点的RBGA颜色值,其实还是对一个点进行操作。那么上面的语句意思是将v0中对应点的数据从fs0中取出。也可以这样理解,我们从v0中知道了一个像素点的位置,并且在fs0中找到了这个像素点,取出他的RGBA颜色值放到ft0中。

         关于tex命令就说明到这里,我们再来看看<2d,repeat,linear,nomip> 这一串代码属于sampler格式。他包含4位有效数据,我们来简单解释一下。

第一位   表示维度,可使用的标签为2d或者Cube。由于我们的demo中不涉及3D效果,所以我们这里写入2d

第二位      表示环绕,可使用标签有clamp(固定不变)和repeat(自动重复)。

第三位      表示滤镜,可使用标签有nearest(临近镜面)和linear (线性)。

第四位      表示mipmap,可使用标签有disable,nearest和linear

        这四个标签代表了你贴图纹理的一些属性,通过修改这四个标签的内容,你可以从最终显示效果看到不一样的画面。

         下面我们继续完善我们的代码,数据都上载完成后,我们编写代码,主要是set操作,以便指定我们GPU绘制的内容,代码如下:

this._context3d.setTextureAt( 0, this.tex );
this._context3d.setProgram( pm );
this._context3d.setVertexBufferAt(0,this.vbs,0, Context3DVertexBufferFormat.FLOAT_2 );
this._context3d.setVertexBufferAt(1,this.vbs,2, Context3DVertexBufferFormat.FLOAT_2);

        这部分代码在前面几篇中都有涉及,再次不做过多的讲解。最后运行看一下我们的效果。

全部demo代码在下面:

package
{
    import com.adobe.utils.AGALMiniAssembler;
    
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.display.Stage3D;
    import flash.display3D.Context3D;
    import flash.display3D.Context3DProgramType;
    import flash.display3D.Context3DTextureFormat;
    import flash.display3D.Context3DVertexBufferFormat;
    import flash.display3D.IndexBuffer3D;
    import flash.display3D.Program3D;
    import flash.display3D.VertexBuffer3D;
    import flash.display3D.textures.Texture;
    import flash.events.Event;
    
    [SWF(frameRate="60")]
    public class stage3ddemo2 extends Sprite
    {
        [Embed(source="pic.png")]
        private var pic:Class;
        
        private var _stage3d:Stage3D;
        private var _context3d:Context3D;
        
        public function stage3ddemo2()
        {
            trace( stage.stage3Ds.length );
            
            this._stage3d = stage.stage3Ds[0];
            this._stage3d.addEventListener(Event.CONTEXT3D_CREATE,created);
            this._stage3d.requestContext3D();
            
        }
        
        private function created(evt:Event):void
        {
            trace( this._stage3d.context3D.driverInfo );
            
            this._context3d = this._stage3d.context3D;
            this._context3d.enableErrorChecking = true;
            this._context3d.configureBackBuffer( 300,300,16,true );
            
            init();
        }
        
        private function init():void
        {
            //顶点数据
            var vb:Vector.<Number> = Vector.<Number>([
                0,0, 0,1,
                1,0, 1,1,
                1,1, 1,0,
                0,1, 0,0
            ]);
            
            vbs = this._context3d.createVertexBuffer( vb.length/4, 4 );
            vbs.uploadFromVector( vb,0, vb.length/4 );
            
            //顶点索引
            var ib:Vector.<uint> = Vector.<uint>([
                0,3,1,
                1,2,3
            ]);
            
            ibs = this._context3d.createIndexBuffer( ib.length );
            ibs.uploadFromVector( ib, 0, ib.length );
            
            //纹理
            tex = this._context3d.createTexture( 128,128, Context3DTextureFormat.BGRA,true);
            var bit:Bitmap = new pic();
            bit.x = 350;
            this.addChild( bit );
            tex.uploadFromBitmapData( bit.bitmapData, 0 );
            
            //AGAL
            var vp:String = "mov op, va0
" +
                "mov v0, va1";
            
            var vagal:AGALMiniAssembler = new AGALMiniAssembler();
            vagal.assemble( Context3DProgramType.VERTEX, vp );
            
            var fp:String = "tex ft0, v0, fs0 <2d,repeat,linear,nomip>
" +
                "mov oc,ft0";
            
            var fagal:AGALMiniAssembler = new AGALMiniAssembler();
            fagal.assemble( Context3DProgramType.FRAGMENT, fp );
            
            //shader
            pm = this._context3d.createProgram();
            pm.upload( vagal.agalcode, fagal.agalcode );
            
            this._context3d.setTextureAt( 0, this.tex );
            this._context3d.setProgram( pm );
            this._context3d.setVertexBufferAt(0,this.vbs,0, Context3DVertexBufferFormat.FLOAT_2 );
            this._context3d.setVertexBufferAt(1,this.vbs,2, Context3DVertexBufferFormat.FLOAT_2);
            
            this.addEventListener(Event.ENTER_FRAME, update);
            
        }
        private var pm:Program3D;
        private var vbs:VertexBuffer3D;
        private var ibs:IndexBuffer3D;
        private var tex:Texture;
        
        //循环渲染
        private function update(evt:Event):void
        {
            this._context3d.clear();
            this._context3d.drawTriangles( this.ibs );
            this._context3d.present();
        }
    }
}