最近新出的LayaAir大肆宣传所谓的“裸跑性能媲美APP”。对这种没常识的宣传,我本来是没兴趣回应的。

但是看到这篇文章《技术突破:HTML5裸跑性能已可媲美APP》,LayaAir给出的数据对比,裸跑的LayaAir居然快过了Unity和Cocos2d-x。对此数据,我是深表怀疑的。我以前的文章也写过,利用了WebGL的加速特性的h5,在渲染性能上只略低于使用了OpenGL的APP,但是还不至于会比APP快,这不科学啊。

实践是检验真理的唯一标准。那就比一比LayaAir与Mirage的渲染性能好了。

测试采用LayaAir官方提供的性能测试 -- 虫子

作为对比,把LayaAir的代码用Mirage实现。因为两者的API相似度很高,移植还是蛮快的,只用了二十分钟不到。

测试机器为小米2s。

测试结果如下:

Mirage的虫子在Mirage平台上运行,渲染同样5000只虫子,帧率是59.3(接近满帧)。

LayaAir的虫子在qq浏览器(启用了webgl)上渲染5000只虫子的帧率是36。

测试截图如下(上面是Mirage,下面是LayaAir)。有密集恐惧症的可以不看。

测试结果是啪啪的打脸啊。Mirage的渲染性能是LayaAir的1.6倍。

当然,这并不是说APP的渲染效率是WebGL的1.6倍。只是LayaAir的渲染尚需优化而已。但是,所谓的“裸跑性能已可媲美APP”的说法可以休矣。

附上用于测试的Mirage源码。有兴趣的同学可以到Mirage官网下载Mirage开发环境,编译运行。

package scenes
{
    import core.display.DisplayObjectContainer;
    import core.display.Image;
    import core.display.Stage;
    import core.display.Texture;
    import core.display.TextureData;
    import core.events.Event;
   
    import flash.geom.Rectangle;
   
    public class MaggotScene extends Scene
    {
        private var texturePath:String="res/tinyMaggot.png";
       
        private var padding:int=100;
        private var maggotAmount:int=5000;
       
        private var tick:Number=0;  
        private var maggots:Array=[];
        private var wrapBounds:Rectangle;
        private var maggotTexture:Texture;
       
        public function MaggotScene()
        {
            Constants.showFps=true;
            Constants.showBg=false;
           
            wrapBounds=new Rectangle(-padding,-padding,Stage.getStage().stageWidth+padding*2,Stage.getStage().stageHeight+padding*2);
           
            maggotTexture=new Texture(TextureData.createWithFile(texturePath));
           
            initMaggots();
           
            addEventListener(Event.ENTER_FRAME,onEnter);
        }
       
        private function initMaggots():void
        {
            var maggotContainer:DisplayObjectContainer=new DisplayObjectContainer();
            addChildAt(maggotContainer,0);
           
            for (var i:int=0;i<maggotAmount;i++) {
                var maggot:Maggot=newMaggot();
                maggotContainer.addChild(maggot.img);
                maggots.push(maggot);
            }
        }
       
        private function newMaggot():Maggot
        {
            var maggot:Maggot=new Maggot();
            var img:Image=new Image(maggotTexture);
            maggot.img=img;
           
            img.pivotX=16.5
            img.pivotY=35;
           
            var rndScale:Number=0.8+Math.random()*0.3;
            img.scaleX=rndScale;
            img.scaleY=rndScale;
            img.rotation=0.1;
            img.x=Math.random()*Stage.getStage().stageWidth;
            img.y=Math.random()*Stage.getStage().stageHeight;
           
            maggot.direction=Math.random()*Math.PI;
            maggot.turningSpeed=Math.random()-0.8;
            maggot.speed=(2+Math.random()*2)*0.2;
            maggot.offset=Math.random()*100;
           
            return maggot;
        }
       
        private function onEnter(e:Event):void
        {
            animate();
        }
       
        private function animate():void
        {
            var maggot:Maggot;
            var wb:Rectangle=wrapBounds;
            var angleUnit:Number=180/Math.PI;
            var dir:Number;
            var x:Number;
            var y:Number;
            for (var i:int=0;i<maggotAmount;i++) {
                maggot=maggots[i];
                var img:Image=maggot.img;
               
                img.scaleY=0.90+Math.sin(tick+maggot.offset)*0.1;
               
                maggot.direction+=maggot.turningSpeed*0.01;
                dir=maggot.direction;
                x=img.x;
                y=img.y;
               
                x+=Math.sin(dir)*(maggot.speed*img.scaleY);
                y+=Math.cos(dir)*(maggot.speed*img.scaleY);
               
                img.rotation=(-dir+Math.PI)*angleUnit;
               
                if (x<wb.x)
                    x+=wb.width;
                else if (x>wb.x+wb.width)
                    x-=wb.width;
                if (y<wb.y)
                    y+=wb.height;
                else if (y>wb.y+wb.height)
                    y-=wb.height;
               
                img.x=x;
                img.y=y;
            }
           
            tick+=0.1;
        }
    }
}

import core.display.Image;
class Maggot
{
    public var img:Image;
    public var direction:Number;
    public var turningSpeed:Number;
    public var speed:Number;
    public var offset:Number;
}