WebGL——osg框架学习一
Posted ccentry
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebGL——osg框架学习一相关的知识，希望对你有一定的参考价值。
从今天开始，我们开始正式的学习osg框架，今天我们学习的是osg的渲染模块，我们来看一下代码结构。
所有DrawXXX的js模块都是渲染的模块，我们逐一来简单介绍一下，第一个Drawable.js，这个模块是描述可绘制对象的类，也是我们今天要讨论的类。在osg框架中，渲染管道在准备时期首先要统计管理可绘制对象，我们来看看Drawable模块到底做了什么操作，进行了哪些管理。先贴出代码。
/* 可绘制对象 */ let StateBin = require(\'./StateBin\'); let BoundingBox = require(\'../util/BoundingBox\'); let BoundingSphere = require(\'../util/BoundingSphere\'); let Vec3 = require(\'../util/Vec3\'); let Drawable = function (actor) { this._drawActor = actor;//关联的DrawActor this._geometry = undefined;//渲染的几何Geometry this._transform = undefined;//世界变换 FloatArray(16) this._statebin = undefined;//状态结点，原始的状态，没有额外功能时的状态 this._curStatebin = undefined;//如果状态会动态变化，这里存储每一帧绘制时的状态结点 this._depth = 0.0;//场景深度值，透明需要按深度排序绘制 this._boundingBox = undefined;//包围盒 this._boundingSphere = undefined;//包围球 }; Drawable.prototype = { setGeometry: function (g, transform) { this._geometry = g; this._transform = transform; }, getGeometry: function () { return this._geometry; }, getTransform: function () { return this._transform; }, setStateBin: function (sb) { this._statebin = sb; }, getStateBin: function () { return this._statebin; }, getCurrentStateBin: function () { return this._curStatebin; }, // setDepth: function (d) { // this._depth = d; // }, getDepth: function () { return this._depth; }, reset: function () { this._geometry = undefined; this._transform = undefined; this._statebin = undefined; this._curStatebin = undefined; this._depth = 0.0; this._boundingBox = undefined; this._boundingSphere = undefined; }, valid: function () { if (this._drawActor.getBaseCamera().isBoundingBoxCulled(this.getBoundingBox())) { return false; } return true; }, isTransparent: function () { return false; }, //计算深度值 computeDepth: function () { //根据包围盒和相机变换矩阵，确认中心点的Z值 let mvmatrix = this._drawActor.getBaseCamera().getModelViewMatrix(); let temp = Vec3.MemoryPool.alloc(); this._depth = this.distanceZ(this.getBoundingBox().getCenter(temp), mvmatrix); Vec3.MemoryPool.free(temp); //drawable.setDepth(depth); }, //相机的矩阵要取反 distanceZ: function (coord, matrix) { return -(coord[0] * matrix[2] + coord[1] * matrix[6] + coord[2] * matrix[10] + matrix[14]); }, getBoundingBox: function () { if(this._boundingBox === undefined){ this._boundingBox = new BoundingBox(); this._boundingBox.copy(this._geometry.getBoundingBox(true)); if(this._transform){ this._boundingBox.transformMat4(this._transform); } } return this._boundingBox; }, getBoundingSphere: function () { if(this._boundingSphere === undefined) { this._boundingSphere = new BoundingSphere(); let bb = this.getBoundingBox(); this._boundingSphere.expandByBoundingBox(bb); } return this._boundingSphere; }, getRadius: function () { return this.getBoundingSphere().getRadius(); }, // There are 3 cases when there is a prev / current render leaf // pSG: previousStateGraph // cSG: currentStateGraph // pRL: previousRenderLeaf // cRL: currentRenderLeaf // // A B C // +-----+ +-----+ +-----+ +-----+ // | pSG | | cSG | +--+ SG +--+ | SG | // +--+--+ +--+--+ | +-----+ | +--+--+ // | | | | | // +--v--+ +--v--+ +--v--+ +--v--+ +--v--+ // | pSG | | cSG | | pSG | | cSG | +--+ SG +--+ // +--+--+ +--+--+ +--+--+ +--+--+ | +-----+ | // | | | | | | // +--v--+ +--v--+ +--v--+ +--v--+ +--v--+ +--v--+ // | pRL | | cRL | | pRL | | cRL | | pRL | | cRL | // +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ // // // Case A // no common parent StateGraphNode we need to // popStateSet until we find the common parent and then // pushStateSet from the common parent to the current RenderLeaf // // Case B // common parent StateGraphNode so we apply the current stateSet // // Case C // the StateGraphNode is common to the previous RenderLeaf so we dont need // to do anything except if we used an insertStateSet draw: function (glstate, preDrawable) { //先接受状态，再渲染几何 let curStateGraph = this._statebin; let curStateGraphStateSet = curStateGraph.getStateSet(); let curStateGraphparent = curStateGraph.getParent(); let preStateGraph; let preStateGraphParent; if(preDrawable !== undefined){ preStateGraph = preDrawable._statebin; preStateGraphParent = preStateGraph.getParent(); if(preStateGraphParent !== curStateGraphParent){//A StateBin.moveStateBin(glstate, preStateGraphParent, curStateGraphParent); glstate.applyStateSet(curStateGraphStateSet); }else if(preStateGraph !== curStateGraph){//B glstate.applyStateSet(curStateGraphStateSet); }else{ // in osg we call apply but actually we dont need // except if the stateSetStack changed. // for example if insert/remove StateSet has been used // if (glstate._stateSetStackChanged(idLastDraw, lastStateSetStackSize )) { // glstate.applyStateSet(curStateGraphStateSet); // } } } else{//如果preLeaf为空，第一个绘制的几何，状态遍历到根节点全部push到GLState中 StateBin.moveStateBin(glstate, undefined, curStateGraphParent); glstate.applyStateSet(curStateGraphStateSet); } let camera = this._drawActor.getBaseCamera(); glstate.applyModelMatrix(this._transform, camera.getModelViewMatrix(), camera.getProjectionMatrix()); this._geometry.draw(glstate); return true; }, }; module.exports = Drawable; // set: function (stateGraph, geometry, , depth) { // this._statebin = stateGraph; // this._geometry = geometry; // // this._depth = depth; // }, // drawGeometry: function (glstate) { // //let program = glstate.getLastProgramApplied(); // //let programID = program.getID(); // //let programCaches = glstate.getProgramCaches(); // //let obj = programCaches[programID]; // // if(!obj){//程序不存在，创建一个新的 // // obj = new CacheUniformApply(glstate, program); // // programCaches[programID] = obj; // // } // // //从相机获取modelview和projection // //着色器暂时不需要透视矩阵 // //let modelview = this._camera.get // // // // //glstate.applyModelViewMatrix(this._modelview); // //glstate.applyProjectionMatrix(this._projection); // glstate.applyTransformMatrix(this._transform); // //this._modelview = this._camera.getModelViewMatrix(); // //Mat4.mul(this._modelview, this._modelview, this._transform); // //this._projection = this._camera.getProjectionMatrix(); // glstate.applyModelMatrix(this._transform, this._camera.getModelViewMatrix(), this._camera.getProjectionMatrix()); // // // //let gluniforms = program.getGLUniformsCache(); // //let modelviewloc = gluniforms[glstate._modelViewMatrixUniform.getName()]; // //let viewloc = gluniforms[glstate._viewMatrixUniform.getName()]; // // //obj.apply(glstate, this._modelview, this._modelworld, this._view, this._projection, this._normal); // this._geometry.draw(glstate); // },
我们先来看看Drawable的构造函数，截取构造函数代码
let Drawable = function (actor) { this._drawActor = actor;//关联的DrawActor this._geometry = undefined;//渲染的几何Geometry this._transform = undefined;//世界变换 FloatArray(16) this._statebin = undefined;//状态结点，原始的状态，没有额外功能时的状态 this._curStatebin = undefined;//如果状态会动态变化，这里存储每一帧绘制时的状态结点 this._depth = 0.0;//场景深度值，透明需要按深度排序绘制 this._boundingBox = undefined;//包围盒 this._boundingSphere = undefined;//包围球 };
首先我们看到第一个私有属性是DrawActor，我们看看DrawActor是个什么模块，先贴出DrawActor类代码。
/* 绘制对象角色 每个DrawActor管理自己的渲染数据，自己的状态树，自己的相机树 如果该功能销毁直接销毁对应的DrawActor资源 但是他引用的状态，相机并不是他管理 不想把各个DrawActor搅和在一起，逻辑混乱 绘制分几种情况，全自动，全手动，半自动 全自动-所有的绘制流程从一开始数据构造好后就不会再变更，只需在初始化时确认好 后续直接渲染即可 半自动-部分绘制流程是固定的，部分绘制流程是动态的，比如构件场景下，需要点选高亮等功能变化 全手动-所有的绘制流程都是动态的，每一帧都需要重新构造每个drawable，部分功能数据 */ let Drawable = require(\'./Drawable\'); let StateBin = require(\'./StateBin\'); let NodeVisitor = require(\'../util/NodeVisitor\'); let CullStack = require(\'./CullStack\'); let Mat4 = require(\'../util/Mat4\'); let Group = require(\'../core/Group\'); let Geode = require(\'../core/Geode\'); let MatrixTrasform = require(\'../core/MatrixTransform\'); let SceneRoot = require(\'../scene/SceneRoot\'); let Geometry = require(\'../core/Geometry\'); let DrawActor = function (renderer) { NodeVisitor.call(this, NodeVisitor.TRAVERSE_CHILDREN); CullStack.call(this); //为正确渲染准备的数据 this._renderer = renderer;//所属的渲染器，固有资产，不会变更 this._baseCamera = this._renderer.getMainCamera();//相机，默认为主相机 this._baseState = new StateBin();//状态 this._sceneRoot = undefined;//所属的场景根节点 //渲染的对象 this._drawables = []; // this._drawIndex = 0;//当前绘制的索引数，需要固定帧率渲染的地方使用 // this._currentStateBin = undefined;//当前处理的状态树结点，临时数据 // //this._fixed = false;//是否启用固定帧率 this._valid = true;//直接屏蔽渲染的标记 }; DrawActor.prototype = Object.create(NodeVisitor.prototype); Object.assign(DrawActor.prototype, CullStack.prototype); DrawActor.prototype.constructor = DrawActor; Object.assign(DrawActor.prototype, { setBaseCamera: function (camera) {//设置当前相机，可以自由设置自己独特的相机 this._baseCamera = camera; }, getBaseCamera: function () { return this._baseCamera; }, getBaseStateBin: function () { return this._baseState; }, getBaseStateSet: function () { return this._baseState.getStateSet(); }, //复原场景根节点的状态 revertBaseState: function () { if (this._sceneRoot) { this._baseState.setStateSet(this._sceneRoot.getStateSet()); } }, //与场景的唯一联系，一定要先定义好场景的几何和状态再调用setSceneRoot setSceneRoot: function (root) { this._sceneRoot = root; //一定要先定义好场景根节点的状态，否则会出错！！！ //this._baseState.setStateSet(root.getStateSet()); }, createDrawable: function () {//base override return new Drawable(this);//创建对应类型的Drawable }, addDrawable: function (drawable) { this._drawables.push(drawable); }, getDrawables: function () { return this._drawables; }, valid: function (valid) { if (valid !== undefined) { this._valid = valid; } return this._valid; }, //遍历 apply: function (node) { this[node.typeID](node); }, //重载，压入一个状态 pushStateSet: function (stateset) { if (stateset) { //添加StateGraph子节点，更新当前活动的StateGraph为新的状态 this._currentStateBin = this._currentStateBin.addStateSetChild(stateset); } }, //重载，弹出一个状态 popStateSet: function (stateset) { if (stateset) { this._currentStateBin = this._currentStateBin.getParent(); } }, //重载 pushDrawable: function (geometry) { let drawable = this.createDrawable(); drawable.setStateBin(this._currentStateBin); drawable.setGeometry(geometry, this.getCurrentTransformMatrix()); this.addDrawable(drawable); }, //根重载，绘制当前Actor下的drawables，绘制不需要固定帧率，永远在第一帧里绘制完毕 draw: function (glstate, preCamera) { if (!this._valid) {//不再绘制 return preCamera; } this.drawCamera(preCamera); //循环遍历一遍drawables，绘制实体 let preDrawable = undefined; let l = this._drawables.length; for (let i = this._drawIndex; i < l; i++) { let drawable = this._drawables[i]; if (drawable.valid()) { drawable.draw(glstate, preDrawable);//成功绘制的 preDrawable = drawable; } this._drawIndex++; } return this._baseCamera; }, //每个新帧绘制之前的重置工作 drawReset: function () { this._baseCamera.setClearFlag(false); this._drawIndex = 0; }, //当前Actor的对象是否全部绘制完毕 drawFinished: function () { return this._drawables.length === this._drawIndex; }, //绘制相机状态(视口，清空) drawCamera: function (preCamera) { if (preCamera === this._baseCamera) {//重复的不再处理 return; } //视口何时都需要设置 let glstate = this._renderer.getGLState(); glstate.applyAttribute(this._baseCamera.getViewport()); //以下是每个相机只需要处理一次的事情 if (!this._baseCamera.getClearFlag()) { //更新视锥体，确保剔除正确，每帧相机的投影矩阵和视图矩阵可能都会变化 this._baseCamera.updateCullFrustum(); //清空颜色和深度，但如果是主相机不再需要，在最开始就已经清空 let clearmask = this._baseCamera.getClearMask(); if (clearmask !== 0x0) { let gl = glstate.getWebGLContext(); if (clearmask & gl.COLOR_BUFFER_BIT) { let color = this._baseCamera.getClearColor();//清空颜色 gl.clearColor(color[0], color[1], color[2], color[3]); } if (clearmask & gl.DEPTH_BUFFER_BIT) { let depth = this._baseCamera.getClearDepth();//清空深度 gl.depthMask(true); gl.clearDepth(depth); } gl.clear(clearmask); } this._baseCamera.setClearFlag(true); } }, //根重载，线段求交，返回相交的drawable对象 linesegmentIntersect: function (start, end, threshold) { let LineSegmentIntersector = require(\'../util/LineSegmentIntersector\'); let intersector = new LineSegmentIntersector(); intersector.initialize(start, end, threshold); let length = this._drawables.length; for (let i = 0; i < length; i++) { let drawable = this._drawables[i]; if (drawable.valid()) {//没有隐藏，没有被剔除的drawable进行相交运算 intersector.intersect(drawable); } } //线段求交结果需要根据ratio排序 return intersector.getIntersections(); }, }); DrawActor.prototype[SceneRoot.typeID] = function (root) { this._baseState.removeChildren(); this._baseState.setStateSet(root.getStateSet()); this._currentStateBin = this._baseState; this.pushTransformMatrix(root.getRootTransform());//变换矩阵中先推入一个单位矩阵作为根节点，非常重要 this.traverse(root); this.popTransformMatrix(); this._currentStateBin = undefined; }; DrawActor.prototype[MatrixTrasform.typeID] = function (node) { //模型矩阵变换 let lastModelMatrix = this.getCurrentTransformMatrix(); let mmatrix = undefined; if (lastModelMatrix) { mmatrix = Mat4.clone(lastModelMatrix); } else { mmatrix = Mat4.new(); } node.computeLocalToWorldMatrix(mmatrix); this.pushTransformMatrix(mmatrix); //状态 let stateset = node.getStateSet(); this.pushStateSet(stateset); this.traverse(node); this.popStateSet(stateset); this.popTransformMatrix(); }; DrawActor.prototype[Geode.typeID] = function (geode) { this[Group.typeID](geode); }; DrawActor.prototype[Group.typeID] = function (group) { let stateset = group.getStateSet(); this.pushStateSet(stateset); this.traverse(group); this.popStateSet(stateset); }; DrawActor.prototype[Geometry.typeID] = function (geometry) {//Geometry已经是叶子，不需要继续递归了 let stateset = geometry.getStateSet(); this.pushStateSet(stateset); this.pushDrawable(geometry); this.popStateSet(stateset); }; module.exports = DrawActor; // reset: function () { // this._drawables.length = 0;//置空 // this._sceneRoot = undefined; // }, // polytopeIntersect: function () { // // }, // sphereIntersect: function () { // // },
我们可以看到，DrawActor是将要被绘制的对象，分成全自动（初始化模型数据就构造Drawable，准备渲染）、半自动（事件触发后构造Drawable，等待渲染）、全手动（用户自己构造Drawable，用户自己将Drawable排入渲染队列）。我们看到，DrawActor的构造函数包含的私有属性有this._renderer渲染器、this._baseCamera待渲染模块所属相机、this._baseState状态（对应shader里的uniform参数）、this._sceneRoot所属场景根节点、this._drawables包含的渲染对象、this._drawIndex当前绘制的索引数（代表本次绘制是第几次绘制，如果一此不能全部绘制完，就分多次绘制，例如模型增长）、this._currentStateBin当前处理的状态树节点、this._valid屏蔽渲染的标记（true：加入渲染队列，false：不加入渲染队列）。
我们再来看看DrawActor的成员函数都做了什么，我们依次来看。
1.setBaseCamera设置参考相机，这就是设置当前绘制对象的观察相机。2.getBaseCamera获取参考相机。3.getbaseStateBin获取状态信息，包括当前渲染对象绑定的shader，uniform参数以及frameBuffer材质。4.getBaseStateSet同样是获取当前渲染对象的状态信息，shader，uniform，材质信息，depth深度缓冲等。5.revertBaseState恢复场景根节点状态，包括shader，uniform参数，材质信息，depth深度缓存。6.setSceneRoot设置场景根节点。7.createDrawable创建渲染对象。8.addDrawable追加渲染对象进入绘制对象数组。9.getDrawable返回渲染对象数组。10.valid标记当前渲染对象是否被屏蔽。11.apply取出每个渲染节点。12.pushStateSet向stateBin中加入stateSet，这里说明一点，stateSet是stateBin的属性。13.popStateSet从stateBin中取出stateSet属性参数。14.pushDrawable创建渲染对象drawable然后加入drawActor的drawable渲染对象数组。15.draw这才是drawActor的核心功能函数，同学们，鲫鱼为大家隆重介绍绘制函数，或者叫渲染函数，这就是将所有的drawable渲染对象进行遍历渲染的功能函数。16.drawReset每一帧绘制之前的整理重置。17.drawFinished判断当前drawActor绘制对象是否全部将drawable数组中的渲染对象绘制完毕。18.drawCamera绘制相机状态（视口，深度缓冲），如果没有渲染对象私有独立的相机，就操作主相机。19.linesegmentIntersection射线碰撞，重载父类方法。
依次看一下上面的函数，我们大致了解了DrawActor类处理的是渲染流程管理的工作。我们接下来继续看Drawable类的其他属性。我们再贴出一次drawable的构造函数。
let Drawable = function (actor) { this._drawActor = actor;//关联的DrawActor this._geometry = undefined;//渲染的几何Geometry this._transform = undefined;//世界变换 FloatArray(16) this._statebin = undefined;//状态结点，原始的状态，没有额外功能时的状态 this._curStatebin = undefined;//如果状态会动态变化，这里存储每一帧绘制时的状态结点 this._depth = 0.0;//场景深度值，透明需要按深度排序绘制 this._boundingBox = undefined;//包围盒 this._boundingSphere = undefined;//包围球 };
我们已经看过了this._drawActor，也知道了drawActor是管理渲染的类。接下来我们看this._geometry渲染的几何体成员对象。this._transform空间变换矩阵。this._statebin状态节点，用来添加stateSet状态参数对象。this._currStatebin，保存每一帧的临时状态stateSet。this._depth场景深度值，作用于主相机或渲染对象私有相机（如果有私有相机的话）。this._boundingBox包围盒。this._boundingSphere包围球。这些就是Drawable类的成员。我们马上来看一下Drawable的成员函数。
Drawable成员函数。贴出代码。
setGeometry: function (g, transform) { this._geometry = g; this._transform = transform; }, getGeometry: function () { return this._geometry; }, getTransform: function () { return this._transform; }, setStateBin: function (sb) { this._statebin = sb; }, getStateBin: function () { return this._statebin; }, getCurrentStateBin: function () { return this._curStatebin; }, // setDepth: function (d) { // this._depth = d; // }, getDepth: function () { return this._depth; }, reset: function () { this._geometry = undefined; this._transform = undefined; this._statebin = undefined; this._curStatebin = undefined; this._depth = 0.0; this._boundingBox = undefined; this._boundingSphere = undefined; }, valid: function () { if (this._drawActor.getBaseCamera().isBoundingBoxCulled(this.getBoundingBox())) { return false; } return true; }, isTransparent: function () { return false; }, //计算深度值 computeDepth: function () { //根据包围盒和相机变换矩阵，确认中心点的Z值 let mvmatrix = this._drawActor.getBaseCamera().getModelViewMatrix(); let temp = Vec3.MemoryPool.alloc(); this._depth = this.distanceZ(this.getBoundingBox().getCenter(temp), mvmatrix); Vec3.MemoryPool.free(temp); //drawable.setDepth(depth); }, //相机的矩阵要取反 distanceZ: function (coord, matrix) { return -(coord[0] * matrix[2] + coord[1] * matrix[6] + coord[2] * matrix[10] + matrix[14]); }, getBoundingBox: function () { if(this._boundingBox === undefined){ this._boundingBox = new BoundingBox(); this._boundingBox.copy(this._geometry.getBoundingBox(true)); if(this._transform){ this._boun以上是关于WebGL——osg框架学习一的主要内容，如果未能解决你的问题，请参考以下文章