夏日博客

A-A+

基于flash的360虚拟现实引擎（cubicVR）源代码及其实现原理

2015年09月17日 前端设计 暂无评论 阅读 10 views 次

flash的3D虚拟实境最早源自于德国的flash图形学大牛andre.michelle在其labsite:lab.andre-michelle.com上发表了一篇关于虚拟实境的文章，并提供了一个实例（NaN sourcecode）.为了深入虚拟实境，在接下来的2个月里我陆续找到一些cubicVR的源文件并尝试破译了一些源码，我同时尝试开发了一个简单的flash3D引擎以及图片3D拉伸算法，所有这些的思想均来自于andre-michelle在其日志中提到的一些idea.现在在这篇文章中所用的实例依然是我对andre早期版本的整理，虽然目前我开发的新版本有更好的结构以及执行效率，但此版本的编程思想更通俗易懂。我想利用这个假期时间开发出flash球型虚拟实境，使它变得更真实。

在flash里部署3D虚拟实境无疑是一个革命性进步，我们再也不用去安装java虚拟机和QTVR了，事实上，在基于flash的可编程矢量图形界面基础上开发出来的虚拟现实可以通过创新的用户界面以达到完美的用户体验。city8.com既采用这种技术来部署他们的全景体验城市地图。

原理：

1.1点与投影

通过1点来产生远小近大的变化以产生空间感，在cubicVR中，设想观察者camera在一个正六面体中央，通过一点来计算每个面的在空间投影中的位置，以产生效果。

2.细分贴图

flash的matrix类只支持2D图形变换：切变、缩放、平面位移。位图无法实现3D变换，这与openGL不同,openGL只需要在定义多边型顶点和贴图法线，位图就会自动贴到一个面片上，而且整个贴图过程完全由GPU完成。而在flash中必须使用细分贴图的方法来欺骗人们的眼睛，既：将一张图片细分为n张小的三角面片，再将小三角面片进行平面切变，正因为如此，flash3D一旦涉及贴图必然导致大量占用cpu运算资源。
细分贴图的demo:http://godson./archives/2006/3708.shtml

3.消隐算法

如果没有消隐算法，那么观察者只能看到离屏幕最近的面，而不能看到整个3D空间，理论上消隐算法有3个步骤：1在一个六面体中，面法线与视锥体夹角大于180度则应设为不可见，2在同一个像素上，只显示与camera最近的多边形（Zbuffer算法），3投影在屏幕以外的多边型不可见，但这三种算法非常占用cpu资源，andrew设计了一种更简单的算法：1多边形的中心与camera重合，在camera坐标系中Z值<0的多边形不可见，2投影在屏幕以外的多边型不可见。 源代码:

  1. --------------------------------渲染部分------------------------------------  
  2. //读入位图数据,将其存放在数组中  
  3. var bitmapAry = new Array();  
  4. var bitmapSource = flash.display.BitmapData.loadBitmap("data2");  
  5. for (i=0; i<6; i++) {  
  6.  var face = new flash.display.BitmapData(bitmapSource.width, bitmapSource.width, false);  
  7.  face.copyPixels(bitmapSource, new flash.geom.Rectangle(0, bitmapSource.width*i, bitmapSource.width, bitmapSource.width*(i+1)), new flash.geom.Point(0, 0));  
  8.  bitmapAry.push(face);  
  9. }  
  10. var showLine = true;  
  11. var inBitmapWidth = 1/bitmapAry[0].width;  
  12. var inBitmapHeight = 1/bitmapAry[0].height;  
  13. var bitmapWidth = bitmapAry[0].width;  
  14. var bitmapHeight = bitmapAry[0].height;  
  15. //鼠标按下时bitmap的变换距阵  
  16. this.bitmapMtrx = new flash.geom.Matrix();  
  17. var subBitmapMtix = new flash.geom.Matrix();  
  18. //舞台宽度变量申明  
  19. StWidth = Stage.width;  
  20. StHeight = Stage.height;  
  21. ox = StWidth/2;  
  22. oy = StHeight/2;  
  23. //焦距  
  24. focus = 300;  
  25. //摄影机角度变量  
  26. angU = 0;  
  27. angV = 0;  
  28. //细分段数  
  29. subdiv = 9;  
  30. subdivsubdivPic = subdiv*subdiv;  
  31. //  
  32. var subdivVy = new Array();  
  33. var subdivVx = new Array();  
  34. var subdivVz = new Array();  
  35. var subdivX = new Array();  
  36. var subdivY = new Array();  
  37. var subdivEnable = new Array();  
  38. var mtrx = new Array();  
  39. var mtrx2 = new Array();  
  40. //细分bitmap在map内部的X和Y  
  41. var subdivMapX = new Array();  
  42. var subdivMapY = new Array();  
  43. var subdivWidth = bitmapAry[0].width/(subdiv-1);  
  44. var subdivHeight = bitmapAry[0].height/(subdiv-1);  
  45. for (var i = 0; i<subdiv; i++) {  
  46.  for (var j = 0; j<subdiv; j++) {  
  47.   var subID = j+i*subdiv;  
  48.   subdivMapX.push(j*subdivWidth);  
  49.   subdivMapY.push(i*subdivHeight);  
  50.  }  
  51. }  
  52. //  
  53. for (var i = 0; i<subdivPic; i++) {  
  54.  mtrx.push(new flash.geom.Matrix());  
  55.  mtrx2.push(new flash.geom.Matrix());  
  56.  subdivVy.push(new Array(subdivPic));  
  57.  subdivVx.push(new Array(subdivPic));  
  58.  subdivVz.push(new Array(subdivPic));  
  59.  subdivX.push(new Array(subdivPic));  
  60.  subdivY.push(new Array(subdivPic));  
  61.  subdivEnable.push(new Array(subdivPic));  
  62. }  
  63. // end of for  
  64. var mtrxSx = subdivWidth/bitmapWidth;  
  65. var mtrxSy = subdivHeight/bitmapHeight;  
  66. var mtrxSxy = subdivWidth/bitmapHeight;  
  67. var mtrxSyx = subdivHeight/bitmapWidth;  
  68. for (var i = 0; i<subdiv-1; ++i) {  
  69.  for (var j = 0; j<subdiv-1; ++j) {  
  70.   var subID = j+i*subdiv;  
  71.   var mtrxTx = subdivMapX[subdiv*i+j];  
  72.   var mtrxTy = subdivMapY[subdiv*i+j];  
  73.   mtrx[subID].tx = mtrxTx;  
  74.   mtrx[subID].ty = mtrxTy;  
  75.   mtrx[subID].a = mtrxSx;  
  76.   mtrx[subID].b = 0;  
  77.   mtrx[subID].c = mtrxSxy;  
  78.   mtrx[subID].d = mtrxSy;  
  79.   mtrx[subID].invert();  
  80.   mtrx2[subID].tx = mtrxTx;  
  81.   mtrx2[subID].ty = mtrxTy;  
  82.   mtrx2[subID].a = mtrxSx;  
  83.   mtrx2[subID].b = mtrxSyx;  
  84.   mtrx2[subID].c = 0;  
  85.   mtrx2[subID].d = mtrxSy;  
  86.   mtrx2[subID].invert();  
  87.  }  
  88. }  
  89. //  
  90. mtrxmtrxA = mtrx[0].a;  
  91. mtrxmtrxB = mtrx[0].b;  
  92. mtrxmtrxC = mtrx[0].c;  
  93. mtrxmtrxD = mtrx[0].d;  
  94. mtrx2mtrx2A = mtrx2[0].a;  
  95. mtrx2mtrx2B = mtrx2[0].b;  
  96. mtrx2mtrx2C = mtrx2[0].c;  
  97. mtrx2mtrx2D = mtrx2[0].d;  
  98. // 初始每个bitmap细分结点在正则化3D视见体空间中的空间位置   
  99. function fun6(bitmapNo, new19, new20, new21, new22, new25, new23, new26, new24, new27) {  
  100.  new15 = subdiv-1 >> 1;  
  101.  for (var i = 0; i<subdiv; i++) {  
  102.   for (var j = 0; j<subdiv; j++) {  
  103.    var subID = j+i*subdiv;  
  104.    subdivVy[bitmapNo][subID] = new19*new15+new22*(j-new15)+new25*(i-new15);  
  105.    subdivVx[bitmapNo][subID] = new20*new15+new23*(j-new15)+new26*(i-new15);  
  106.    subdivVz[bitmapNo][subID] = new21*new15+new24*(j-new15)+new27*(i-new15);  
  107.    //trace(subdivVy[bitmapNo][subID]+"/"+subdivVx[bitmapNo][subID]+"/"+subdivVz[bitmapNo][subID]);  
  108.   }  
  109.  }  
  110. }  
  111. fun6(0, 1, 0, 0, 0, 0, -1, 0, 0, -1);  
  112. fun6(1, 0, -1, 0, -1, 0, 0, 0, 0, -1);  
  113. fun6(2, -1, 0, 0, 0, 0, 1, 0, 0, -1);  
  114. fun6(3, 0, 1, 0, 1, 0, 0, 0, 0, -1);  
  115. fun6(4, 0, 0, 1, 0, 1, -1, 0, 0, 0);  
  116. fun6(5, 0, 0, -1, 0, -1, -1, 0, 0, 0);  
  117. // 求每个subdiv的在屏幕坐标系的x和y将每个subdiv可见量存储于subdivEnable中  
  118. function fun7(bitmapNo) {  
  119.  for (var i = 0; i<subdivPic; i++) {  
  120.   //此为核心部分:细分贴图顶点在camera坐标空间中的坐标系变换运算 _loc5为z值,_loc5与_loc6的两个方程是对空间向量距阵计算的简化  
  121.   var _loc6 = cos_angU*subdivVy[bitmapNo][i]+sin_angU*subdivVx[bitmapNo][i];  
  122.   var _loc5 = cos_angV*_loc6+sin_angV*subdivVz[bitmapNo][i];  
  123.   //如果顶点在视角前方则进行投影计算  
  124.   if (_loc5>=0.1) {  
  125.    var _loc7 = focus/_loc5;  
  126.    //计算投影的x,y  
  127.    subdivX[bitmapNo][i] = (sin_angU*subdivVy[bitmapNo][i]-cos_angU*subdivVx[bitmapNo][i])*_loc7+ox;  
  128.    subdivY[bitmapNo][i] = (sin_angV*_loc6-cos_angV*subdivVz[bitmapNo][i])*_loc7+oy;  
  129.    if (subdivX[bitmapNo][i]>0 and subdivX[bitmapNo][i]<StWidth and subdivY[bitmapNo][i]>0 and subdivY[bitmapNo][i]<StHeight) {  
  130.     subdivEnable[bitmapNo][i] = 1;  
  131.    } else {  
  132.     subdivEnable[bitmapNo][i] = 0;  
  133.    }  
  134.   }  
  135.  }  
  136. }  
  137. //  
  138. subdivsubdivV = subdiv-1;  
  139. function render() {  
  140.  for (var i = 0; i<6; i++) {  
  141.   fun7(i);  
  142.   for (var j = 0; j<subdivV; ++j) {  
  143.    for (var k = 0; k<subdivV; k++) {  
  144.     var pointA = k+j*subdiv;  
  145.     var pointC = k+(j+1)*subdiv;  
  146.     var pointB = pointA+1;  
  147.     var pointD = pointC+1;  
  148.     var _loc2 = subdivEnable[i][pointA]+subdivEnable[i][pointD]+subdivEnable[i][pointB];  
  149.     var _loc3 = subdivEnable[i][pointA]+subdivEnable[i][pointD]+subdivEnable[i][pointC];  
  150.     //如果细分表面顶点有1个在屏幕内则渲染该面片  
  151.     if (_loc2>0) {  
  152.      //细分表面拉伸距阵计算  
  153.      subBitmapMtix.a = mtrxA;  
  154.      subBitmapMtix.b = mtrxB;  
  155.      subBitmapMtix.c = mtrxC;  
  156.      subBitmapMtix.d = mtrxD;  
  157.      subBitmapMtix.tx = mtrx[pointA].tx;  
  158.      subBitmapMtix.ty = mtrx[pointA].ty;  
  159.      renderBitmap(i, subdivX[i][pointA], subdivY[i][pointA], subdivX[i][pointB], subdivY[i][pointB], subdivX[i][pointD], subdivY[i][pointD], subBitmapMtix);  
  160.     }  
  161.     //如果细分表面顶点有1个在屏幕内则渲染该面片  
  162.     if (_loc3>0) {  
  163.      //细分表面拉伸距阵计算  
  164.      subBitmapMtix.a = mtrx2A;  
  165.      subBitmapMtix.b = mtrx2B;  
  166.      subBitmapMtix.c = mtrx2C;  
  167.      subBitmapMtix.d = mtrx2D;  
  168.      subBitmapMtix.tx = mtrx2[pointA].tx;  
  169.      subBitmapMtix.ty = mtrx2[pointA].ty;  
  170.      renderBitmap(i, subdivX[i][pointA], subdivY[i][pointA], subdivX[i][pointD], subdivY[i][pointD], subdivX[i][pointC], subdivY[i][pointC], subBitmapMtix);  
  171.     }  
  172.    }  
  173.   }  
  174.  }  
  175. }  
  176. //  
  177. renderBitmap = function (bitmapNo, point1X, point1Y, point2X, point2Y, point3X, point3Y, subBitmapMtix) {  
  178.  //细分表面贴图距阵计算  
  179.  this.bitmapMtrx.a = (point2X-point1X)*inBitmapWidth;  
  180.  this.bitmapMtrx.b = (point2Y-point1Y)*inBitmapWidth;  
  181.  this.bitmapMtrx.c = (point3X-point1X)*inBitmapHeight;  
  182.  this.bitmapMtrx.d = (point3Y-point1Y)*inBitmapHeight;  
  183.  this.bitmapMtrx.tx = point1X;  
  184.  this.bitmapMtrx.ty = point1Y;  
  185.  subBitmapMtix.concat(this.bitmapMtrx);  
  186.  //贴图渲染  
  187.  this.photo.beginBitmapFill(bitmapAry[bitmapNo], subBitmapMtix, false, false);  
  188.  if (showLine == true) {  
  189.   this.photo.lineStyle(1, 0x000000, 100);  
  190.  }  
  191.  this.photo.moveTo(point1X, point1Y);  
  192.  this.photo.lineTo(point2X, point2Y);  
  193.  this.photo.lineTo(point3X, point3Y);  
  194.  this.photo.endFill();  
  195. };  
  196. //初始渲染  
  197. photo.clear();  
  198. cos_angU = Math.cos(angU);  
  199. sin_angU = Math.sin(angU);  
  200. cos_angV = Math.cos(angV);  
  201. sin_angV = Math.sin(angV);  
  202. render();  
  203. --------------------------------------鼠标控制部分---------------------------------  
  204. var myMouseListener = new Object();  
  205. var myKeyListener = new Object();  
  206. this.createEmptyMovieClip("photo", this.getNextHighestDepth());  
  207. this.createEmptyMovieClip("win", this.getNextHighestDepth());  
  208. lable.swapDepths(photo);  
  209. win.lineStyle(2, 0x000000, 100);  
  210. win.moveTo(0, 0);  
  211. win.lineTo(Stage.width, 0);  
  212. win.lineTo(Stage.width, Stage.height);  
  213. win.lineTo(0, Stage.height);  
  214. win.lineTo(0, 0);  
  215. myMouseListener.onMouseDown = function() {  
  216.  onEnterFrame = function () {  
  217.   var xWidth = _xmouse-dx;  
  218.   var yWidth = _ymouse-dy;  
  219.   if (xWidth != 0 || yWidth != 0) {  
  220.    photo.clear();  
  221.    angUangU = angU-xWidth*0.001;  
  222.    angVangV = angV-yWidth*0.001;  
  223.    cos_angU = Math.cos(angU);  
  224.    sin_angU = Math.sin(angU);  
  225.    cos_angV = Math.cos(angV);  
  226.    sin_angV = Math.sin(angV);  
  227.    render();  
  228.   }  
  229.  };  
  230.  dx = _xmouse;  
  231.  dy = _ymouse;  
  232. };  
  233. myMouseListener.onMouseUp = function() {  
  234.  onEnterFrame = undefined;  
  235.  photo.clear();  
  236.  render();  
  237. };  
  238. myMouseListener.onMouseWheel = function(wheelMove) {  
  239.  i = 0;  
  240.  focusfocus = focus+wheelMove*20;  
  241.  if (focus<180) {  
  242.   focus = 180;  
  243.  }  
  244.  photo.clear();  
  245.  render();  
  246. };  
  247. Mouse.addListener(myMouseListener);  
标签：

给我留言