一种Flash页游前端3D转2D显示技术——PV2D, 颠覆传统吧！

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

stage3D很强大，但是客户端硬件加速支持有限。

出来的图形锯齿严重，看上去和果冻一样。

Stage3d不兼容2d模式。

总的来说，3D很美好，现实很残酷。但是3D有无可比拟的优势：那就是节省90%的带宽和提升无限的显示效果。

本文根据前辈的经验，总结一种在中低模型下，3D显示为2D的技术。颠覆传统吧！

前言——为什么用3D？

在页游界，不要相信3D所谓华丽的效果。至少2014年结束，也不需要去幻想。端游就另当别论。

但是3D只需要一个模型+一个贴图，就完成了所有需要的人物显示。如果用传统序列图，8个方向，每个方向12帧，每帧15K来计算，就需要1440K，接近1.5M。但是3D不超过200K。

多么诱人的性能啊。要知道节省了10倍带宽，那就是一个服务器节省了几千块钱的带宽了。

而且，任意角度、任意视觉，不需要美术处理。

所以，3D，必须的。

3D转2D核心技术——PV2D

无论用alway3D, unity3D, stage3D，starling什么的，都不可能实现3D转2D。所以必须把老祖宗拿出来，那就是 papervision3D.

哦。原来是这个。相信很多资深前端主程已经不屑一顾了。但是，就是这个papervision3D，现在还能再一次颠覆传统。

但是pv3D有些缺陷，需要修改animationController类，添加一个帧总数和下一帧控制。

public function get totalFrames():int{
var count:int = 0;
if(!this._channels)
return count;
for each(var _channel:Channel3D in this._channels)
{
if(_channel.output == null)
continue;
count = Math.max(_channel.output.length, count);
}
return count;
}

/**
* 显示下一帧
*/
public function next():void{
_frameIndex++;
if(_frameIndex >= totalFrames)
{
_frameIndex = 0;
}
_currentTime = endTime / totalFrames * _frameIndex;
this._isStepping = true;
}

增加一个stepping方法

private function stepping():void
{
var channel : Channel3D;
var et : Number = _clip ? _clip.endTime : endTime;
var clipName :String = _clip ? _clip.name : "all";if(_currentTime > et)
{
if (_dispatchEvents)
{
dispatchEvent(new AnimationEvent(AnimationEvent.COMPLETE, et, clipName));
}if(!_loop)
{
stop();
return;
}
if(_clip)
{
_currentTimeStamp -= (_clip.startTime * 1000);
}
_currentTime = _clip ? _clip.startTime : startTime;
}for each(channel in _channels)
{
channel.update(_currentTime);
}if (_isPlaying && _dispatchEvents)
{
dispatchEvent(new AnimationEvent(AnimationEvent.NEXT_FRAME, _currentTime, clipName));
}
}

最后修改update方法：

/**
* Update.
*/
public function update() : void
{
if(_isStepping)
{
stepping();
return;
}

简单说下DAE模型，他使用了时间去控制帧，因此需要计算开始时间、结束之间、总帧数，来换算控制下一帧播放。具体代码我会给出来。

然后完成我们的pv3dLoader:

package com.xtar.loader.utils
{
import com.xtar.common.FilterCoder;
import com.xtar.common.MovieClipInfo;
import com.xtar.interfaces.IDisposable;import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.utils.Dictionary;
import flash.utils.getTimer;import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.view.layer.util.ViewportLayerSortMode;//http://www.flashquake.cn/?tag=pv3d 破图的解决方法
//http://stackoverflow.com/questions/549766/papervision-render-to-bitmap
public class Pv3dLoader extends EventDispatcher implements IDisposable
{
private var view:Pv3dContainer = new Pv3dContainer;
private var dae:DAE = null;
private var config:Pv3dConfig = new Pv3dConfig;
private var frames:Dictionary = new Dictionary;private var timeStart:Number = -1;public function Pv3dLoader()
{
view.viewport.containerSprite.sortMode = ViewportLayerSortMode.Z_SORT;
FilterCoder.addFilter(view, new GlowFilter(0x000000, 1, 1.5, 1.5, 2));
}public function load(config:Pv3dConfig):void{
this.config = config;
if(config.width > 0)
view.viewport.viewportWidth = config.width;
if(config.height > 0)
view.viewport.viewportHeight = config.height;
view.viewport.autoScaleToStage = false;
dae = new DAE(false);
dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, daeComplete);
dae.addEventListener(IOErrorEvent.IO_ERROR, daeError);
dae.addEventListener(FileLoadEvent.ANIMATIONS_PROGRESS, daeProgress);
dae.load(config.url, null, false);
timeStart = getTimer();
}public function get content():*{
return this.frames;
}public function dispose():void{
frames = null;
view = null;
dae = null;
config = null;
}private function daeComplete(e:FileLoadEvent):void{trace(getTimer() - timeStart);
timeStart = getTimer();dae.stop();
view.scene.addChild(dae);
view.camera.z = -1 * (config.distance * Math.cos(Math.PI / 180 * config.angleGround));
view.camera.x = 0;
view.camera.y = config.distance * Math.sin(Math.PI / 180 * config.angleGround);var rect:Rectangle = new Rectangle(-this.view.viewport.viewportWidth / 2, -this.view.viewport.viewportHeight / 2,
this.view.viewport.viewportWidth, this.view.viewport.viewportHeight);for each(var direction:Number in config.directions)
{
dae.animation.next();
view.nextFrame();view.nextFrame();for(var i:int = 1; i<dae.animation.totalFrames;i++)
{
dae.rotationY = direction;
dae.animation.next();
view.nextFrame();view.nextFrame();
getFrames(direction).push(transferToBitmapData(view, rect));
}
}
trace(getTimer() - timeStart);
loadComplete();
}private function transferToBitmapData(obj:DisplayObject, rect:Rectangle):MovieClipInfo{
var bitmap:BitmapData = new BitmapData(Math.ceil(rect.width), Math.ceil(rect.height), true, 0);
bitmap.draw(obj);var info:MovieClipInfo = new MovieClipInfo;
info.frameIndex = 0;
info.x = rect.x;
info.y = rect.y;
info.data = bitmap;
return info;
}private function getFrames(direction:Number):Array{
if(frames[direction])
return frames[direction];
frames[direction] = new Array;
return frames[direction];
}private function daeError(e:Event):void{
if(this.hasEventListener(IOErrorEvent.IO_ERROR))
this.dispatchEvent(new IOErrorEvent(IOErrorEvent.IO_ERROR, e.bubbles, e.cancelable, config.url));
}private function daeProgress(e:FileLoadEvent):void{
if(this.hasEventListener(ProgressEvent.PROGRESS))
this.dispatchEvent(new ProgressEvent(ProgressEvent.PROGRESS, e.bubbles, e.cancelable, e.bytesLoaded, e.bytesTotal));
}private function loadComplete():void{
this.dispatchEvent(new Event(Event.COMPLETE));
}
}
}