Virtual reality Engine (CUBICVR) source code based on flash and its realization principle

Flash degree 3D virtual Reality (CUBICVR) source code and its realization principle
Flash 3D Virtual reality originated from the German Flash graphics, Daniel Andre.michelle published an article on virtual reality in his labsite:lab.andre-michelle.com, and provided an example of NaN SourceCode). In order to penetrate virtual reality, in the next 2 months I have found some cubicvr source files and try to decipher some source code, I also tried to develop a simple flash3d engine and picture 3D stretching algorithm, all of these ideas from Andre-michelle in its log Some ideas that are mentioned in. The example used in this article is still my collation of the earlier version of Andre, although the new version I developed now has better structure and execution efficiency, but this version of the programming idea is more understandable. I want to use this vacation time to develop the Flash ball type virtual reality, make it more real.

The deployment of 3D virtual reality in Flash is no doubt a revolutionary step, and we don't have to install Java virtual machines and QTVR anymore, in fact, virtual realities developed on the basis of a programmable vector graphics interface based on Flash can achieve the perfect user experience through innovative user interfaces. City8.com uses this technique to deploy their panoramic experience of the city map.
Principle:
1.1 Points and projections
By 1 points to produce far smaller near-large changes to create a sense of space, in the CUBICVR, imagine the observer camera in a positive hexahedral center, through a point to calculate each plane in the space projection position in order to produce effect.
2. Subdivision Map
The Matrix class of Flash supports only 2D graphics transformations: Shear, scaling, plane displacement. The bitmap does not implement the 3D transform, unlike OpenGL, OpenGL only needs to define the multilateral vertex and texture normals, the bitmap will be automatically affixed to a patch, and the entire texturing process is complete by the GPU. In Flash, we must use the method of subdivision mapping to deceive people's eyes, both: A picture subdivision into N small triangular surface, and then the small triangular surface shear plane, because of this, flash3d once involved in the map will inevitably lead to a large number of CPU computing resources.
Demo:http://godson./archives/2006/3708.shtml of the subdivision map
3. Blanking algorithm
If there is no hidden algorithm, then the observer can only see the closest face to the screen, and can not see the entire 3D space, theoretically hidden algorithm has 3 steps: 1 in a six-face, the angle between the surface normal and the view cone is greater than 180 degrees should be set to invisible, 2 on the same pixel, Show only the nearest polygon (ZBuffer algorithm) with camera, 3 projection is not visible outside the screen, but these three algorithms are very CPU-intensive, Andrew designed a simpler algorithm: 1 polygons overlap The center of the camera, in the camera coordinate system, Z-value The <0 polygon is not visible, and the 2 projection is not visible in the multilateral form outside the screen.
Source:
--------------------------------Render Part------------------------------------
Reads bitmap data and stores it in an array
var bitmapary = new Array ();
var BitmapSource = Flash.display.BitmapData.loadBitmap ("data2");
For (i=0 i<6; i++) {
var face = new Flash.display.BitmapData (Bitmapsource.width, Bitmapsource.width, false);
Face.copypixels (BitmapSource, New Flash.geom.Rectangle (0, Bitmapsource.width*i, Bitmapsource.width, bitmapsource.width* (i+1)), new Flash.geom.Point (0, 0));
Bitmapary.push (face);
}
var showline = true;
var inbitmapwidth = 1/bitmapary[0].width;
var inbitmapheight = 1/bitmapary[0].height;
var bitmapwidth = bitmapary[0].width;
var bitmapheight = bitmapary[0].height;
Bitmap transformation distance of mouse
This.bitmapmtrx = new Flash.geom.Matrix ();
var Subbitmapmtix = new Flash.geom.Matrix ();
Stage width Variable declaration
Stwidth = Stage.width;
Stheight = Stage.height;
Ox = STWIDTH/2;
Oy = STHEIGHT/2;
Focal length
Focus = 300;
Camera angle Variable
Angu = 0;
ANGV = 0;
Number of fine segments
SubDiv = 9;
Subdivpic = Subdiv*subdiv;
//
var subdivvy = new Array ();
var subdivvx = new Array ();
var subdivvz = new Array ();
var subdivx = new Array ();
var subdivy = new Array ();
var subdivenable = new Array ();
var Mtrx = new Array ();
var mtrx2 = new Array ();
Subdivide bitmap x and y within the map
var subdivmapx = new Array ();
var subdivmapy = new Array ();
var subdivwidth = bitmapary[0].width/(Subdiv-1);
var subdivheight = bitmapary[0].height/(Subdiv-1);
for (var i = 0; i<subdiv; i++) {
for (var j = 0; j<subdiv; j + +) {
var SubID = J+i*subdiv;
Subdivmapx.push (J*subdivwidth);
Subdivmapy.push (I*subdivheight);
}
}
//
for (var i = 0; i<subdivpic; i++) {
Mtrx.push (New Flash.geom.Matrix ());
Mtrx2.push (New Flash.geom.Matrix ());
Subdivvy.push (New Array (subdivpic));
Subdivvx.push (New Array (subdivpic));
Subdivvz.push (New Array (subdivpic));
Subdivx.push (New Array (subdivpic));
Subdivy.push (New Array (subdivpic));
Subdivenable.push (New Array (subdivpic));
}
End of
var mtrxsx = subdivwidth/bitmapwidth;
var mtrxsy = subdivheight/bitmapheight;
var mtrxsxy = subdivwidth/bitmapheight;
var mtrxsyx = subdivheight/bitmapwidth;
for (var i = 0; i<subdiv-1; ++i) {
for (var j = 0; j<subdiv-1; ++j) {
var SubID = J+i*subdiv;
var mtrxtx = subdivmapx[subdiv*i+j];
var mtrxty = subdivmapy[subdiv*i+j];
Mtrx[subid].tx = MTRXTX;
Mtrx[subid].ty = mtrxty;
MTRX[SUBID].A = MTRXSX;
mtrx[subid].b = 0;
MTRX[SUBID].C = Mtrxsxy;
MTRX[SUBID].D = Mtrxsy;
Mtrx[subid].invert ();
Mtrx2[subid].tx = MTRXTX;
Mtrx2[subid].ty = mtrxty;
MTRX2[SUBID].A = MTRXSX;
mtrx2[subid].b = Mtrxsyx;
mtrx2[subid].c = 0;
MTRX2[SUBID].D = Mtrxsy;
Mtrx2[subid].invert ();
}
}
//
Mtrxa = MTRX[0].A;
MTRXB = mtrx[0].b;
MTRXC = mtrx[0].c;
Mtrxd = MTRX[0].D;
MTRX2A = MTRX2[0].A;
mtrx2b = mtrx2[0].b;
mtrx2c = mtrx2[0].c;
mtrx2d = MTRX2[0].D;
Initial spatial position of each bitmap subdivision node in the regular 3D viewport space
function Fun6 (Bitmapno, New19, NEW20, New21, New22, new25, New23, new26, New24, new27) {
NEW15 = Subdiv-1 >> 1;
for (var i = 0; i<subdiv; i++) {
for (var j = 0; j<subdiv; j + +) {
var SubID = J+i*subdiv;
Subdivvy[bitmapno][subid] = new19*new15+new22* (J-NEW15) +new25* (I-NEW15);
Subdivvx[bitmapno][subid] = new20*new15+new23* (J-NEW15) +new26* (I-NEW15);
Subdivvz[bitmapno][subid] = new21*new15+new24* (J-NEW15) +new27* (I-NEW15);
Trace (subdivvy[bitmapno][subid]+ "/" +subdivvx[bitmapno][subid]+ "/" +subdivvz[bitmapno][subid]);
}
}
}
Fun6 (0, 1, 0, 0, 0, 0,-1, 0, 0,-1);
FUN6 (1, 0,-1, 0,-1, 0, 0, 0, 0,-1);
FUN6 (2,-1, 0, 0, 0, 0, 1, 0, 0,-1);
FUN6 (3, 0, 1, 0, 1, 0, 0, 0, 0,-1);
FUN6 (4, 0, 0, 1, 0, 1,-1, 0, 0, 0);
FUN6 (5, 0, 0,-1, 0,-1,-1, 0, 0, 0);
The x and y of each subdiv in the screen coordinate system to store each subdiv visible in subdivenable
function Fun7 (bitmapno) {
for (var i = 0; i<subdivpic; i++) {
This is the core part: The coordinate transformation operation of subdivision map vertex in camera coordinate space _loc5 is z value, and the two equations of _LOC5 and _loc6 are the simplification of space vector distance matrix calculation.
var _loc6 = cos_angu*subdivvy[bitmapno][i]+sin_angu*subdivvx[bitmapno][i];
var _loc5 = cos_angv*_loc6+sin_angv*subdivvz[bitmapno][i];
If the vertex is in front of the view, the projection is calculated
if (_loc5>=0.1) {
var _loc7 = focus/_loc5;
Calculate the x,y of a projection
Subdivx[bitmapno][i] = (sin_angu*subdivvy[bitmapno][i]-cos_angu*subdivvx[bitmapno][i]) *_loc7+ox;
Subdivy[bitmapno][i] = (sin_angv*_loc6-cos_angv*subdivvz[bitmapno][i]) *_loc7+oy;
if (Subdivx[bitmapno][i]>0 and Subdivx[bitmapno][i]<stwidth and Subdivy[bitmapno][i]>0 and SubdivY[bitmapNo] [I]<stheight) {
Subdivenable[bitmapno][i] = 1;
} else {
Subdivenable[bitmapno][i] = 0;
}
}
}
}
//
SUBDIVV = Subdiv-1;
function render () {
for (var i = 0; i<6; i++) {
Fun7 (i);
for (var j = 0; j<subdivv; ++j) {
for (var k = 0; k<subdivv; k++) {
var pointa = K+j*subdiv;
var pointc = k + (j+1) *subdiv;
var pointb = pointa+1;
var pointd = pointc+1;
var _loc2 = Subdivenable[i][pointa]+subdivenable[i][pointd]+subdivenable[i][pointb];
var _loc3 = Subdivenable[i][pointa]+subdivenable[i][pointd]+subdivenable[i][pointc];
If the subdivision surface has 1 vertices on the screen, the surface is rendered
if (_loc2>0) {
Calculation of stretching distance matrix of subdivision surface
SUBBITMAPMTIX.A = Mtrxa;
subbitmapmtix.b = MTRXB;
SUBBITMAPMTIX.C = MTRXC;
SUBBITMAPMTIX.D = Mtrxd;
Subbitmapmtix.tx = MTRX[POINTA].TX;
Subbitmapmtix.ty = Mtrx[pointa].ty;
Renderbitmap (i, Subdivx[i][pointa], Subdivy[i][pointa], SUBDIVX[I][POINTB], SUBDIVY[I][POINTB], SubdivX[i][pointD], SUBDIVY[I][POINTD], Subbitmapmtix);
}
If the subdivision surface has 1 vertices on the screen, the surface is rendered
if (_loc3>0) {
Calculation of stretching distance matrix of subdivision surface
SUBBITMAPMTIX.A = mtrx2a;
subbitmapmtix.b = mtrx2b;
SUBBITMAPMTIX.C = mtrx2c;
SUBBITMAPMTIX.D = mtrx2d;
Subbitmapmtix.tx = MTRX2[POINTA].TX;
Subbitmapmtix.ty = Mtrx2[pointa].ty;
Renderbitmap (i, Subdivx[i][pointa], Subdivy[i][pointa], Subdivx[i][pointd], Subdivy[i][pointd], SubdivX[i][pointC], SUBDIVY[I][POINTC], Subbitmapmtix);
}
}
}
}
}
//
Renderbitmap = function (Bitmapno, point1x, point1y, point2x, point2y, point3x, point3y, Subbitmapmtix) {
Subdivision surface mapping Distance matrix calculation
THIS.BITMAPMTRX.A = (point2x-point1x) *inbitmapwidth;
this.bitmapmtrx.b = (point2y-point1y) *inbitmapwidth;
THIS.BITMAPMTRX.C = (point3x-point1x) *inbitmapheight;
THIS.BITMAPMTRX.D = (point3y-point1y) *inbitmapheight;
This.bitmapMtrx.tx = point1x;
This.bitmapMtrx.ty = point1y;
Subbitmapmtix.concat (THIS.BITMAPMTRX);
Texture rendering
This.photo.beginBitmapFill (Bitmapary[bitmapno], Subbitmapmtix, false, false);
if (ShowLine = = True) {
This.photo.lineStyle (1, 0x000000, 100);
}
This.photo.moveTo (point1x, point1y);
This.photo.lineTo (point2x, point2y);
This.photo.lineTo (point3x, point3y);
This.photo.endFill ();
};
Initial rendering
Photo.clear ();
Cos_angu = Math.Cos (Angu);
Sin_angu = Math.sin (Angu);
COS_ANGV = Math.Cos (ANGV);
SIN_ANGV = Math.sin (ANGV);
Render ();
--------------------------------------Mouse Control Section---------------------------------
var mymouselistener = new Object ();
var mykeylistener = new Object ();
This.createemptymovieclip ("Photo", this.getnexthighestdepth ());
This.createemptymovieclip ("Win", This.getnexthighestdepth ());
Lable.swapdepths (photo);
Win.linestyle (2, 0x000000, 100);
Win.moveto (0, 0);
Win.lineto (stage.width, 0);
Win.lineto (Stage.width, stage.height);
Win.lineto (0, stage.height);
Win.lineto (0, 0);
Mymouselistener.onmousedown = function () {
Onenterframe = function () {
var xwidth = _XMOUSE-DX;
var ywidth = _ymouse-dy;
if (xwidth!= 0 | | | ywidth!= 0) {
Photo.clear ();
Angu = angu-xwidth*0.001;
ANGV = angv-ywidth*0.001;
Cos_angu = Math.Cos (Angu);
Sin_angu = Math.sin (Angu);
COS_ANGV = Math.Cos (ANGV);
SIN_ANGV = Math.sin (ANGV);
Render ();
}
};
DX = _xmouse;
dy = _ymouse;
};
Mymouselistener.onmouseup = function () {
Onenterframe = undefined;
Photo.clear ();
Render ();
};
Mymouselistener.onmousewheel = function (wheelmove) {
i = 0;
Focus = focus+wheelmove*20;
if (focus<180) {
Focus = 180;
}
Photo.clear ();
Render ();
};
Mouse.addlistener (Mymouselistener);