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框架学习一的主要内容,如果未能解决你的问题,请参考以下文章

WebGL——osg框架学习四

WebGL树形结构的模型渲染流程

下一代微学习解决方案,WebGL?

译丨Yarn - Javascript 新一代套件管理

干货|新一代图形技术WebGL,你值得拥有

Phong 和 Gouraud 着色 WebGL