一种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));
}
}
}
这样，就可以通过截图，得到了3D的序列图，最后使用一个XMovieClip显示出来：
当然，为了效果更好，我使用了一点点外发光。
后续——性能与可行性分析：
如果加载1500个面的3D模型，几乎没有性能问题。也许这个就是pv3D的瓶颈。如果超过了1500面，就会出现停顿问题。
主要性能问题集中在：
DAE的XML解析、bitmapData.draw方法非常慢。
因此，一个游戏，除了BOSS、主角，基本上其他的角色都可以用这个方法进行加载。
而且是 任意尺寸、任意角度、任意动作！！！！
代码下载：
pv2d，转换核心引擎
https://app.box.com/s/6pwhv6b65o9uylpzmjeo
修改的pv3d版本：
https://app.box.com/s/wayokxv5feldgjp9gexf