AGAL Plane Deformation 1

by devon_o 01 Jun 2012

Talk

devon_o at 30 May 2012 00:40
hmmm.. compiles with no errors, but shows nothing.. Guess that's why they call it 'wonderfl'...
Hasufel at 30 May 2012 01:06
compiles with no errors locally here - but white rendering.... maybe your code devon?
devon_o at 30 May 2012 01:31
Weird.. If I copy and paste what's here into a local file, it seems to work fine... Perhaps some flash player weirdness.. Guess I'll forsake Wonderfl and just write a blog post tomorrow.. thanks for checking it out...
devon_o at 30 May 2012 01:49
What it looks like when it compiles correctly and works: http://onebyonedesign.com/flash/agal/1/
Hasufel at 30 May 2012 02:22
Very nice, still into deformations :p :o) Copied/pasted as well.... Still doesnt work, while providing my 'version' of com.adobe.utils.AGALMiniAssembler.as - perhaps this is the only changing factor?
rect at 30 May 2012 20:24
orignal AGALMiniAssembler.as is not supported ".rgba" swizzle.
Hasufel at 30 May 2012 22:27
..finally managed to compile it locally thx to rect's suggestion :-) Used https://github.com/Barliesque/EasyAGAL/tree/master/src/com/adobe/utils version of AGALMiniAssembler and compiled. Compiled version with fur 1024 texture: http://ventoline.com/as3/agal1.html
makc3d at 31 May 2012 15:26
you still can patch rgba->xyzw here, no?
devon_o at 31 May 2012 19:57
To be honest, I had no idea there were various versions of the AGALMiniAssembler floating around (don't even remember where I downloaded my local one from). Can anyone point out where to download the version currently supported by Wonderfl so I can rewrite this and make it work? And thank you all for the comments that got to the source of the problem (And to Hasufel for coming up with another example to show I'm not crazy.. :) )
makc3d at 31 May 2012 20:07
wonderfl uses swc compiled from ht tp://www.bytearray.org/?p=2555 (ht tp://wonderfl.net/static/swc/agalminias.zip) official adobe's version with latest fixes is at ht tps://github.com/graphicscore/graphicscorelib/blob/master/src/com/adobe/utils/AGALMiniAssembler.as
devon_o at 31 May 2012 20:09
all right.. just patched to xyzw rather than rgba as makc3d suggested.. getting closer, but still not working as expected.. Thanks to suggestions and help, all.
devon_o at 31 May 2012 20:15
Bam... turns out the loaded image wasn't the original size - just had to draw it into a bitmapdata with a matrix to the texture to 512x512.. Like pulling freaking teeth...
Hasufel at 31 May 2012 21:12
Congrats, works now :-) hehe
makc3d at 31 May 2012 22:35
remove "m" to get original image: http://assets.wonderfl.net/images/related_images/b/b2/b2ef/b2ef871ed9c581dad8a218e46eefea2e305d04af
devon_o at 01 Jun 2012 18:31
that did it.. thanks again...
Hasufel at 01 Jun 2012 20:19
Devon, if you fancy a thumbnail showing up and do justice to your code/rendering, you can switch off the 'auto mode' in the preview in the code edit mode, add a private var sc:BitmapData　=　new BitmapData(465,　465,　false); in your main vars declaration, disable capture in main's instance with Wonderfl.disable_capture(); and then add the bitmap as addChild(new Bitmap(sc)); just after that, then add before context3D.present() a context3D.drawToBitmapData(sc); and take the capture manually - then uncomment those lines : wonderfl can capture only from regular stage. Did it on http://wonderfl.net/c/6a7x - better than a blank thumb ;)
devon_o at 01 Jun 2012 21:21
tricky.. someone needs to start writing Wonderfl tutorials.. :)

Tags

3d agal, animation beautifl demo, demoscene effect oldschool oldskool stage3d,
Embed

/**
 * Copyright devon_o ( http://wonderfl.net/user/devon_o )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/avP0
 */

package
{
    import com.adobe.utils.AGALMiniAssembler;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    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.textures.Texture;
    import flash.display3D.VertexBuffer3D;
    import flash.events.Event;
    import flash.geom.Matrix3D;
    import flash.net.URLRequest;
    import flash.system.LoaderContext;
    import flash.geom.Matrix;
    /*
      
      ORIGINAL GLSL
      
        ec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
        vec2 uv;

        float an = time*.25;

        float x = p.x*cos(an)-p.y*sin(an);
        float y = p.x*sin(an)+p.y*cos(an);
     
        uv.x = .25*x/abs(y);
        uv.y = .20*time + .25/abs(y);

        gl_FragColor = vec4(texture2D(tex0,uv).xyz * y*y, 1.0);
     */
    
    
    [SWF(width="465", height="465", frameRate="60", backgroundColor="#000000")]
    public class Main extends Sprite
    {

        private var mContext3d:Context3D;
        private var mVertBuffer:VertexBuffer3D;
        private var mIndexBuffer:IndexBuffer3D; 
        private var mProgram:Program3D;
        private var mTexture:Texture;
        private var mTextureData:BitmapData;
        
        private var mMatrix:Matrix3D = new Matrix3D();
        
        
        public function Main()
        {    
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);    
        }
        
        private function init(event:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            
            
            initStage();
            loadImage();
            
            addEventListener(Event.ENTER_FRAME, onTick);
            
            //addChild(new Stats());
        }
        
        private function loadImage():void {
            var l:Loader = new Loader();
            l.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad);
            l.load(new URLRequest("http://assets.wonderfl.net/images/related_images/b/b2/b2ef/b2ef871ed9c581dad8a218e46eefea2e305d04af"), new LoaderContext(true));
        }
        
        private function onImageLoad(event:Event = null):void
        {
            event.currentTarget.removeEventListener(Event.COMPLETE, onImageLoad);
            var l:Loader = event.currentTarget.loader;
            mTextureData = (l.content as Bitmap).bitmapData;

            stage.stage3Ds[0].addEventListener( Event.CONTEXT3D_CREATE, initStage3d );
            stage.stage3Ds[0].requestContext3D();
            
        }
        
        private function initStage():void
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
        }
        
        private function initStage3d(event:Event):void
        {
            mContext3d = stage.stage3Ds[0].context3D;        
            mContext3d.enableErrorChecking = false;
            
            mContext3d.configureBackBuffer(stage.stageWidth, stage.stageHeight, 4, true);
            
            var vertices:Vector.<Number> = Vector.<Number>([
                -1.0, -1.0,  0,   0, 0, 
                -1.0,  1.0,  0,   0, 1,
                 1.0,  1.0,  0,   1, 1,
                 1.0, -1.0,  0,   1, 0  ]);
            
            mVertBuffer = mContext3d.createVertexBuffer(4, 5);
            mVertBuffer.uploadFromVector(vertices, 0, 4);
            mIndexBuffer = mContext3d.createIndexBuffer(6);            
            mIndexBuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6);
            
            mTexture = mContext3d.createTexture(mTextureData.width, mTextureData.height, Context3DTextureFormat.BGRA, true);
            mTexture.uploadFromBitmapData(mTextureData);

            mContext3d.setVertexBufferAt(0, mVertBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
            mContext3d.setVertexBufferAt(1, mVertBuffer, 3, Context3DVertexBufferFormat.FLOAT_2);
            
            generateMicroProg();
            
            mContext3d.setTextureAt(0, mTexture);
            mContext3d.setProgram(mProgram);
        }
        
        private function generateMicroProg():void
        {
            var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();
            vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,
                "m44 op, va0, vc0\n" + // pos to clipspace
                "mov v0, va1" // copy uv
            );
            var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler();
            fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,
                "mov ft0, v0                                    \n" + 
                "div ft1, ft0.xy, fc3.xy                        \n" +
                "mul ft2, fc6.x, ft1                            \n" +
                "sub ft3, ft2, fc5.x                            \n" +
                "mul ft1, ft3.y, fc9.x                            \n" +
                "mul ft2, ft3.x, fc8.x                            \n" +
                "sub ft4, ft2, ft1                                \n" +
                "mul ft1, ft3.x, fc9.x                            \n" +
                "mul ft2, ft3.y, fc8.x                            \n" +
                "add ft5, ft1, ft2                                \n" +
                "mov ft6, fc5                                    \n" +
                "abs ft1, ft5                                    \n" +
                "mul ft2, fc7.x, ft4                            \n" +
                "div ft6.x, ft2, ft1                            \n" +
                "abs ft1, ft5                                    \n" +
                "div ft2, fc7.x, ft1                            \n" +
                "add ft6.y, fc4.x, ft2                            \n" +
                "tex ft0, ft6, fs0<2d, repeat, linear, nomip>    \n" +
                "mul ft1, ft5, ft5                                \n" +
                "mul ft1, ft0.xyz, ft1                            \n" +
                "mov ft2.x, ft1                                    \n" +
                "mov ft2.y, ft1                                    \n" +
                "mov ft2.z, ft1                                    \n" +
                "mov ft2.w, fc5.x                                \n" +
                "mov oc, ft2                                      " 
            );
            
            mProgram = mContext3d.createProgram();
            mProgram.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);
        }
        

        
        private var mTime:Number = 0.0;
        private function onTick(event:Event):void
        {
            if ( !mContext3d ) 
                return;
            
            mContext3d.clear ( 0, 0, 0, 1 );
            mContext3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, mMatrix, true);

            // resolution
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 3, Vector.<Number>( [ 1, 1, 1, 1 ]) );
            
            // .20 * time
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 4, Vector.<Number>([ .20 * mTime, 1 , 1, 1  ]) );
            
            // 1
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 5, Vector.<Number>([ 1, 1, 1, 1 ]) );
            
            // 2
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 6, Vector.<Number>([ 2, 1, 1, 1 ]) );
            
            // .25
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 7, Vector.<Number>([ .250, 1, 1, 1 ]) );
            
            // cos (.25 * time)
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 8, Vector.<Number>( [ Math.cos(.25 * mTime), 1, 1, 1 ]) );
            
            // sin (.25 * time)
            mContext3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 9, Vector.<Number>( [ Math.sin(.25 * mTime), 1, 1, 1 ]) );
            
            mContext3d.drawTriangles(mIndexBuffer);
            mContext3d.present();
            
            mTime += .025;
        }
    }
}