【学习笔记】3D图形核心基础精炼版-8：stage3D实战-范例工程2
这个工程是在范例工程1的基础上由四边形变为一个锥形，增加了一个顶点，同时增加了纹理贴图，以及颜色叠加效果。
链接：http://pan.baidu.com/s/1kUBTaoJ 密码：s9rd
package
{
import com.adobe.utils.AGALMiniAssembler;
import com.adobe.utils.PerspectiveMatrix3D;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.display.Stage3D;
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Context3DRenderMode;
import flash.display3D.Context3DTextureFormat;
import flash.display3D.Context3DVertexBufferFormat;
import flash.display3D.IndexBuffer3D;
import flash.display3D.Program3D;
import flash.display3D.VertexBuffer3D;
import flash.display3D.textures.Texture;
import flash.events.ErrorEvent;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.geom.Matrix3D;
import flash.geom.Point;
import flash.geom.Vector3D;
import flash.ui.Keyboard;
[SWF(width="800", height="600", frameRate="60", backgroundColor="#000000")]
public class Main extends Sprite
{
/**
* 是否首次创建3D环境
*/
private var isFirstCreate:Boolean = true;
/**
* 唯一状态机/画家
*/
private var context3d:Context3D;
/**
* 模型M矩阵
*/
private var modelMatrix:Matrix3D;
/**
* 镜头V矩阵
*/
private var viewMatrix:Matrix3D;
/**
* 投影P矩阵，Adobe封装的，继承于Matrix3D
*/
private var projectionMatrix:PerspectiveMatrix3D;
/**
* 最终矩阵，这个应该是M+V+P
*/
private var finalMatrix:Matrix3D;
/**
* flash要用到的顶点信息：顶点缓冲数据
*/
private var modelVb:VertexBuffer3D;
/**
* flash要用到的顶点索引信息：索引缓冲数据 告诉系统点的绘制顺序，系统才知道有多少个面，是怎样的面
*/
private var modelIb:IndexBuffer3D;
/**
* 画家绘制的代码，就是你告诉他应该如何绘制，调色等，他会按照这个方式来绘制，当然也是程序，汇编的风格... 也就是说你可以预先定制好N个代码来选择哪一个来绘制
*/
private var program:Program3D;
/**
* 当鼠标移动的时候记录的鼠标点
*/
private var onMouseDownPt:Point = new Point();
/**
* 嵌入图片资源到SWF里
*/
[Embed(source = "wall.jpg")]
private var wallClass:Class;
private var wallBmp:Bitmap = new wallClass() as Bitmap;
/**
* flash要用到的纹理信息
*/
private var tex:Texture;
/**
* 顶点的颜色叠加相乘系数
*/
private var colorChangeVal:Number = 1.0;
/**
* 顶点的颜色叠加相乘系数的递增值
*/
private var colorChangeInc:Number = -0.01;
public function Main()
{
// 初始化
init();
}
/**
* 初始化
*
*/
private function init():void{
// -- 如果没有3D环境的话
if(stage.stage3Ds.length==0){
throw("你没有可用的3D环境！");
return;
}
// -- 取得一个stage3D舞台，这里取下标0，因为这个3D舞台100%存在。
var stage3d:Stage3D = stage.stage3Ds[0];
// -- 设置侦听：创建失败的情况
stage3d.addEventListener(ErrorEvent.ERROR,onCreate3dError);
// -- 设置侦听：创建成功的情况或设备恢复的情况
stage3d.addEventListener(Event.CONTEXT3D_CREATE,onCreate3dSuccess);
// -- 请求创建，如果你不请求创建，那么又有什么用呢？渲染模式为硬件模式，表示使用显卡GPU来计算
stage3d.requestContext3D(Context3DRenderMode.AUTO);
}
/**
* 创建3D环境失败
* @param e
*
*/
private function onCreate3dError(e:ErrorEvent):void{
throw("创建3D环境失败！");
}
/**
* 创建3D环境成功的情况或设备恢复的情况
* @param e
*
*/
private function onCreate3dSuccess(e:Event):void{
// 如果找不到状态机context3d的话提示错误
context3d = (e.target as Stage3D).context3D;
if(context3d==null){
throw("创建3D环境失败!");
return;
}
// 当发生错误的时候会显示错误信息，着色语言阶段出错时开启此选项就会报具体的错误信息，你好因此排查错误（无论首次创建还是设备恢复都要重新设定此项）
context3d.enableErrorChecking=true;
// 设定后台缓冲区，一般就是要画画的区域大小了，还有抗锯齿为2的N次方（0表示不抗锯齿画的效率更高但画面更丑）（无论首次创建还是设备恢复都要重新设定此项）
context3d.configureBackBuffer(stage.stageWidth, stage.stageHeight, 16, true);
// 如果第一次创建的话而非设备恢复的情况
if(isFirstCreate){
// -- 标识下，说明不再是第一次创建3D环境了
isFirstCreate = false;
// -- 侦听：每帧渲染
this.addEventListener(Event.ENTER_FRAME,onRender);
// -- 侦听：键盘操控
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
// -- 侦听：鼠标操控
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
// -- 初始化物体相关信息
initModel();
// -- 初始化shader：着色语言
initShader();
// -- 创建镜头V矩阵
viewMatrix = new Matrix3D();
// -- 镜头拉后一点，因为屏幕向里是+，所以这个镜头实际在屏幕外的地方
viewMatrix.appendTranslation(0,0,-3);
// -- 创建投影P矩阵
projectionMatrix = new PerspectiveMatrix3D();
// -- 设定为透视矩阵，越远越小越接近屏幕中心的那种，右手坐标系RightHand
// -- 第一个参数表示透视角度
// -- 第二个参数表示宽高比例
// -- 第三个参数表示裁剪的最近距离，比这个个还近就无法显示
// -- 第四个参数表示裁剪的最远距离，比这个还远的东西就无法显示
projectionMatrix.perspectiveFieldOfViewRH(45.0,stage.stageWidth/stage.stageHeight,0.01,5000.0);
}
// 设备恢复的情况
else{
restore();
}
}
/**
* 初始化物体相关信息
*
*/
private function initModel():void{
// -- 最终矩阵
finalMatrix = new Matrix3D();
// -- 该物体的矩阵
modelMatrix = new Matrix3D();
// -- 该物体的顶点信息（坐标XYZ+对应的颜色RGB）这里5个顶点，我们要绘制一个锥形
var vecVb:Vector.<Number> = Vector.<Number>([
// X Y Z R G B U V
-1, 1,0,1,0,0,0,0, // 0 左上角的点 + 红色 + UV坐标纹理的左上角点
1, 1,0,0,1,0,1,0, // 1 右上角的点 + 绿色 + UV坐标纹理的右上角点
1,-1,0,0,0,1,1,1, // 2 右下角的点 + 蓝色 + UV坐标纹理的右下角点
-1,-1,0,1,1,0,0,1, // 3 左下角的点 + 黄色 + UV坐标纹理的左下角点
0,0,-1,0,1,1,0.5,0.5 // 4 里面中心的点 + 青色 + UV坐标纹理的中间的点
]);
// -- 创建该物体的顶点缓冲：有多少个顶点（当然是4个），以及一个顶点包含多少个信息（上面一行的信息=8）
modelVb = context3d.createVertexBuffer(vecVb.length/8,8);
// -- 通过vector来上传顶点数据：顶点信息、偏移（由于这里vec全部信息只用于一个物体，偏移就是0）、顶点数
modelVb.uploadFromVector(vecVb,0,vecVb.length/8);
// -- 该物体的索引数据：按照下面的顺序来画三角形的
var vecIdx:Vector.<uint> = Vector.<uint>([
0,1,2, // 左上角的点 - 右上角的点 - 右下角的点 这里是顺时针绘制的吧，表示一个三角形
2,3,0, // 右下角的点 - 左下角的点 - 左上角的点 这里也是顺时针绘制的吧，表示第二个三角形
0,1,4, // 锥形面1
0,4,3, // 锥形面2
3,4,2, // 锥形面3
1,2,4 // 锥形面4
]);
// -- 创建该物体的顶点索引缓冲：
modelIb = context3d.createIndexBuffer(vecIdx.length);
// -- 通过vector来上传顶点索引数据：顶点索引数据、偏移（同上由于整个vecIdx都用于一个物体了这里全部都是该物体的信息）、索引个数
modelIb.uploadFromVector(vecIdx,0,vecIdx.length);
// -- 创建纹理，由于使用BitmapData方式转为texture所以模式是RGBA，如果是ATF格式的话则是COMPRESSED，纹理必须是2的n次方宽高，如果不是可以转化一下
tex = context3d.createTexture(wallBmp.width,wallBmp.height,Context3DTextureFormat.BGRA,false);
// -- 上传纹理
tex.uploadFromBitmapData(wallBmp.bitmapData);
}
/**
* 初始化着色语言
*
*/
private function initShader():void{
// -- 创建一个着色语言
program = context3d.createProgram();
// -- 创建一个AGALMiniAssembler辅助类用于写顶点着色代码
// 主要用于输出最终的顶点位置，以及传一些数据给片段着色代码使用
var vShader:AGALMiniAssembler = new AGALMiniAssembler();
vShader.assemble(Context3DProgramType.VERTEX,
"m44 op va0 vc0 \n" + // 输出 = 4个顶点 * 最终矩阵 （这里的*就是m44方法，表示每个点都作用了该矩阵）
"mov v1 va1\n" + // 将4个点的颜色传到中转站以便片段着色代码使用
"mov v2 va2\n" // 将4个点的使用纹理的坐标点传到中转站以便片段着色代码使用
);
// -- 创建一个AGALMiniAssembler辅助类用于写片段着色代码
var fShader:AGALMiniAssembler = new AGALMiniAssembler();
fShader.assemble(Context3DProgramType.FRAGMENT,
// "mov oc v1" // 输出 = 颜色信息（当然这里是4个点的颜色信息了）
"tex ft0, v2, fs0 <2d,linear,repeat,nomip>\n"+ //临时变量 ft0 = v2（UV坐标点）和图片纹理作用的颜色点 关于linear repeat nomip后面再说
"mul ft1 v1 fc0\n" + // 临时变量 ft1 = v1(颜色值) * 系数（0-1)
"add ft0 ft0 ft1\n" + // 颜色叠加 ft0 = ft0 + ft1 也就是说ft1是0的话就没有颜色叠加效果了
"mov oc, ft0\n" // 直接输出颜色点 ft0 从这里看的出来shader就是用来处理点的颜色信息的，比如颜色混合、光照等等
);
program.upload(vShader.agalcode,fShader.agalcode);
}
/**
* 设备恢复的情况
*
*/
private function restore():void{
initModel();
initShader();
}
/**
* 侦听回调：逐帧渲染
* @param e
*
*/
private function onRender(e:Event):void{
// -- 如果设备丢失的话就暂时不绘制不然就报错了，不信你试试注释掉这个并且CTRL+ALT+DEL
if(isContextDispose)return;
// -- 最终矩阵先归零
finalMatrix.identity();
// -- 乘上M矩阵
finalMatrix.append(modelMatrix);
// -- 乘上V矩阵
finalMatrix.append(viewMatrix.clone());
// -- 乘上P矩阵
finalMatrix.append(projectionMatrix);
// -- 设置状态机当前的VB的坐标 到 va0 ，因为只有XYZ，所以偏移是0，长度是3
context3d.setVertexBufferAt(0,modelVb,0,Context3DVertexBufferFormat.FLOAT_3);
// -- 设置状态机当前的VB的颜色 到 va1
context3d.setVertexBufferAt(1,modelVb,3,Context3DVertexBufferFormat.FLOAT_3);
// -- 设置状态机当前的VB的UV纹理坐标 到 va2
context3d.setVertexBufferAt(2,modelVb,6,Context3DVertexBufferFormat.FLOAT_2);
// -- 设置状态机当前的vc0 静态常量：最终矩阵
context3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX,0,finalMatrix,true);
// -- 设置状态机当前的fc0 静态常量：用于 颜色叠加*系数（0-1）
context3d.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT,0,Vector.<Number>([colorChangeVal,colorChangeVal,colorChangeVal,0]));
// -- 设置状态机使用的纹理到当前的fs0
context3d.setTextureAt(0,tex);
// -- 设置状态机使用的代码
context3d.setProgram(program);
// -- 清除画面（实际就是将画布全部像素刷成黑色）
context3d.clear();
// -- 绘制三角形
context3d.drawTriangles(modelIb);
// -- 发送给GPU
context3d.present();
// -- 颜色系数改变
colorChangeVal+=colorChangeInc;
colorChangeVal=colorChangeVal>1?1:colorChangeVal;
colorChangeVal=colorChangeVal<0?0:colorChangeVal;
colorChangeInc=colorChangeVal==1||colorChangeVal==0?-colorChangeInc:colorChangeInc;
}
/**
* 侦听回调：键盘操作 WASD=镜头移动 上下左右=物体移动
* （由于镜头和世界是相反的）所以镜头是反着动的
* @param e
*
*/
private function onKeyDown(e:KeyboardEvent):void{
switch(e.keyCode){
case Keyboard.W: // 镜头往屏幕里面移动 z+=0.1
viewMatrix.appendTranslation(0,0,0.1);
break;
case Keyboard.S: // 镜头往屏幕外面移动 z-=0.1
viewMatrix.appendTranslation(0,0,-0.1);
break;
case Keyboard.A: // 镜头往屏幕左边移动 x+=0.1
viewMatrix.appendTranslation(0.1,0,0);
break;
case Keyboard.D: // 镜头往屏幕右边移动 x-=0.1
viewMatrix.appendTranslation(-0.1,0,0);
break;
case Keyboard.UP: // 物体往屏幕里面移动 z-=0.1
viewMatrix.appendTranslation(0,0,-0.1);
break;
case Keyboard.DOWN: // 物体往屏幕外面移动 z+=0.1
viewMatrix.appendTranslation(0,0,0.1);
break;
case Keyboard.LEFT: // 物体往屏幕左边移动 x-=0.1
viewMatrix.appendTranslation(-0.1,0,0);
break;
case Keyboard.RIGHT: // 物体往屏幕右边移动 x+=0.1
viewMatrix.appendTranslation(0.1,0,0);
break;
}
}
/**
* 鼠标移动旋转物体
* 原理无非就是根据每次移动时的像素差距来计算让物体矩阵M在当前的状态下再围绕X和Y旋转（至于围绕Z轴旋转可以自己添加试试）
* @param e
*
*/
private function onMouseDown(e:MouseEvent):void{
onMouseDownPt.x = e.stageX;
onMouseDownPt.y = e.stageY;
stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onMouseMove(e:MouseEvent):void{
var dx:Number = e.stageX - onMouseDownPt.x;
var dy:Number = e.stageY - onMouseDownPt.y;
var degreesY:Number = dx/2;
var degreesX:Number = dy/2;
onMouseDownPt.x = e.stageX;
onMouseDownPt.y = e.stageY;
modelMatrix.appendRotation(degreesY,Vector3D.Y_AXIS);
modelMatrix.appendRotation(degreesX,Vector3D.X_AXIS);
}
private function onMouseUp(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseUp);
}
/**
* 判断设备丢失
*
*/
private function get isContextDispose():Boolean{
return context3d==null||context3d.driverInfo=="Disposed"||context3d.driverInfo=="";
}
}
}