今天和大家分享的是webgl渲染樹形結構的流程。用過threejs，babylonjs的同學都知道，一個大模型都是由n個子模型拼裝而成的，那麽如何依次渲染子模型，以及渲染每個子模型在原生webgl中的流程是怎樣的呢，我就以osg框架為原本，為同學們展示出來。

　　首先介紹osg框架，該框架是基於openGL的幾何引擎框架，目前我的工作是將其翻譯成為webgl的幾何引擎，在這個過程中學習webgl原生架構的原理和工程構造方式，踩了各種坑，每次爬出坑都覺得自己又強大了一點，呵。

　　閑話少敘，切入正題，首先我們要明確一個渲染流程，那就是webgl到底是怎麽將模型繪制到canvas畫布中去的，這就牽扯到我之前的一片文章《原生WebGL場景中繪制多個圓錐圓柱》，鏈接地址https://www.cnblogs.com/ccentry/p/9864847.html，這篇文章講述的是用原生webgl向canvas中持續繪制多個模型，但這篇文章的局限性在於，他重復使用了同一組shader（頂點shader，片段shader），並且多個模型也不存在父子關系，這就導致了局部坐標系和全局坐標系的紊亂。今天我們就來彌補這篇文章的不足之處。

　　按部就班，我們先討論的是webgl渲染單個模型的過程，首先我們構造著色器，請看下面著色器代碼

attribute vec3 position;
        attribute vec3 normal;
        attribute vec4 color;
        uniform   mat4 mvpMatrix;
        uniform   mat4 invMatrix;
        uniform   vec3 lightDirection;
        uniform   vec4 ambientColor;
        varying   vec4 vColor;
        uniform   
 
float lightS;

        void main(void){
            vec3  invLight = normalize(invMatrix * vec4(lightDirection, 0)).xyz;
            float diffuse  = clamp(dot(normal, invLight), 0.0, 1.0) * lightS;
            vColor         = color * vec4(vec3(diffuse), 1.0) + ambientColor;
            gl_Position    = mvpMatrix * vec4(position, 1.0
 
);
        }

頂點著色器

precision mediump float;
        varying vec4 vColor;
        void main(void){
            gl_FragColor = vColor;
        }

片段著色器
　　好了，接下來我們的模型數據怎麽和著色器進行數據鏈接呢，很簡單，我們首先創建著色器的gl對象，用以js傳參，請看代碼

/**
             * 生成著色器的函數
             */
            function create_shader(id){
                // 用來保存著色器的變量
                var shader;

                // 根據id從HTML中獲取指定的script標簽
                var scriptElement = document.getElementById(id);

                // 如果指定的script標簽不存在，則返回
                if(!scriptElement){return;}

                // 判斷script標簽的type屬性
                switch(scriptElement.type){

                    // 頂點著色器的時候
                    case ‘x-shader/x-vertex‘:
                        shader = gl.createShader(gl.VERTEX_SHADER);
                        break;

                    // 片段著色器的時候
                    case ‘x-shader/x-fragment‘:
                        shader = gl.createShader(gl.FRAGMENT_SHADER);
                        break;
                    default :
                        return;
                }

                // 將標簽中的代碼分配給生成的著色器
                gl.shaderSource(shader, scriptElement.text);

                // 編譯著色器
                gl.compileShader(shader);

                // 判斷一下著色器是否編譯成功
                if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){

                    // 編譯成功，則返回著色器
                    return shader;
                }else{

                    // 編譯失敗，彈出錯誤消息
                    alert(gl.getShaderInfoLog(shader));
                }
            }

這個函數生成的既可以是頂點著色器，也可以是片段著色器，在此不加贅述，有了著色器的gl對象，我們就能向著色器裏傳attribute和uniform參數了嗎，顯然不行，那麽接下來我們就要構造一個可以向著色器對象傳參數的程序對象gl.program，這也是難點之一，先看代碼

/**
             * 程序對象的生成和著色器連接的函數
             */
            function create_program(vs, fs){
                // 程序對象的生成
                var program = gl.createProgram();

                // 向程序對象裏分配著色器
                gl.attachShader(program, vs);
                gl.attachShader(program, fs);

                // 將著色器連接
                gl.linkProgram(program);

                // 判斷著色器的連接是否成功
                if(gl.getProgramParameter(program, gl.LINK_STATUS)){

                    // 成功的話，將程序對象設置為有效
                    gl.useProgram(program);

                    // 返回程序對象
                    return program;
                }else{

                    // 如果失敗，彈出錯誤信息
                    alert(gl.getProgramInfoLog(program));
                }
            }

我們看到這個函數做了兩件事，第一gl.attachShader將我們剛剛生成的著色器對象綁定到gl.program編程對象上，第二件事就是gl.useProgram激活綁定好著色器對象的編程對象，當然第二件事有待商榷，那就是如果我們有多個gl.program是不是每次創建綁定好著色器都要激活，這個要看具體使用場景，再次說明，這裏這種綁定立即激活的方式不建議使用，一半都是綁定完成後等到要使用時才激活。為了這個還被lasoy老師批評了，哈哈，再次膜拜lasoy老師，阿裏大佬。

好了，現在我們有了gl.program編程對象，就能夠安心的向shader裏傳attribute和uniform參數了，具體傳參方法不是我們這篇文章討論的重點，請參考我的上一篇博客《原生WebGL場景中繪制多個圓錐圓柱》，鏈接地址https://www.cnblogs.com/ccentry/p/9864847.html。

　　接下來我們進入正題，持續繪制多個模型進一個canvas場景。也許同學們要說，這很簡單啊，每次要繪制一個模型進入場景，就重復上述過程，先構造著色器對象gl.createShader(v-shader1),gl.createShader(f-shader1)，然後綁定到程序對象gl.createProgram(program1)上，激活一下gl.useProgram(program1)，接下來該穿attribute/uniform就傳參，直接gl.drawElement()不就行了嘛，要繪制多少不同的模型就調用這個過程多少次，不就可以了嘛，哪來那麽多廢話，是不是。對於這種論調，我只能說，邏輯上是完全正確的，也能夠正確無誤地將多個長相各異的模型持續繪制進同一個canvas場景，沒毛病。同學們就要噴了，那你bb了半天，想說啥呢？好，我就來說一說這麽做的壞處是什麽。請看下面場景

場景中的紅色圓錐和紅色圓柱的繪制方式就是類似剛才那種思想，不斷重復構造著色器對象v-shader1 = gl.createShader()，f-shader1 = gl.createShader()，綁定編程program1 = gl.createProgram（v-shader1,f-shader1），激活編程對象gl.useProgram(program1)，然後傳attribute/uniform參數給著色器，空間位置姿態變換，gl.drawElement()，從而繪制出圓錐；再來就是重復這個過程繪制出圓柱，唯一稍有區別的是，我偷懶沒重新構造shader對象，重新綁定program對象，而是重復利用同一套shader和program，只不過每次繪制傳參attribute重新傳了一次，覆蓋前一次的attribute而已，原理其實一模一樣，大家不要學我偷懶。有的同學看到結果以後更來勁了，你看看，這不是挺好嗎，持續繪制多個不同模型成功了呀，有啥問題呀？那麽我就說說問題在哪裏。首先會發生交互的全局坐標系紊亂，請看下圖

我們看到，整個模型錯位了，原因就是空間變換矩陣並不能和每個模型相對於世界坐標系的相對局部坐標系矩陣正確相乘，這就是零散繪制多模型的坑。解決這個問題的方法就是采用樹結構繪制子模型。這也是本文的核心論點，接下來我們就來看看如何采用樹結構繪制，樹的每個節點存儲的又是什麽對象。

　　由於osg和threejs都有自己的樹結構，所以我也模仿二者自己構造了我的樹，請看下面代碼

/**
 * 坐標系
 * */
let Section = require(‘./Section‘);
let Operation = require(‘./Operation‘);

let Geometry = require(‘../core/Geometry‘);
let MatrixTransform = require(‘../core/MatrixTransform‘);
let StateSet = require(‘../core/StateSet‘);
let StateAttribute = require(‘../core/StateAttribute‘);
let BufferArray = require(‘../core/BufferArray‘);
let DrawElements = require(‘../core/DrawElements‘);
let Primitives = require(‘../core/Primitives‘);
let Depth = require(‘../core/Depth‘);
let LineWidth = require(‘../core/LineWidth‘);
let Material = require(‘../core/Material‘);
let BlendFunc = require(‘../core/BlendFunc‘);
let Algorithm = require(‘../util/Algorithm‘);
let BoundingBox = require(‘../util/BoundingBox‘);
let Vec3 = require(‘../util/Vec3‘);
let Vec4 = require(‘../util/Vec4‘);
let Plane = require(‘../util/Plane‘);
let Quat = require(‘../util/Quat‘);
let Mat4 = require(‘../util/Mat4‘);
let Utils = require(‘../util/Utils‘);
let ShaderFactory = require(‘../render/ShaderFactory‘);
let PolyhedronGeometry = require(‘../model/polyhedron‘);
let Group = require(‘../core/Group‘);

let CoordinateSection = function(viewer){
    Section.call(this, viewer);
    //坐標系模型的空間位置和姿態矩陣
    this.position = Mat4.new();
    this._coordRoot = undefined;

    this._scale = Vec3.create(1, 1, 1);
    this._translate = Vec3.new();
    this._rotate = Quat.new();

    this._scaleMatrix = Mat4.new();
    this._translateMatrix = Mat4.new();
    this._rotateMatrix = Mat4.new();
};
//繼承Section類
CoordinateSection.prototype = Object.create(Section.prototype);
CoordinateSection.prototype.constructor = CoordinateSection;

CoordinateSection.prototype = {

    /**
     * 創建坐標系模型
     * root:scene根節點
     * */
    create : function(root){
        //初始化坐標系根節點
        this._coordRoot = new MatrixTransform();
        //幾何
        let polyhedronGeo = new PolyhedronGeometry();
        //構造單位尺寸的模型
        polyhedronGeo.getCone(0.2, 0.5, 16);
        let geoms = polyhedronGeo.vertices;
        let array = new Float32Array(geoms);
        let vertexBuffer = new BufferArray(BufferArray.ARRAY_BUFFER, array, 3);
        //面索引繪制方式
        let indices = [];
        indices = polyhedronGeo.faces;
        //幾何體類實例
        let geom = new Geometry();
        geom.setBufferArray(‘Vertex‘, vertexBuffer);
        let index = new Int8Array(indices);
        let indexBuffer = new BufferArray(BufferArray.ELEMENT_ARRAY_BUFFER, index, index.length);
        let prim = new DrawElements(Primitives.TRIANGLES, indexBuffer);
        geom.setPrimitive(prim);
        //將幾何對象加入坐標系根節點
        this._coordRoot.addChild(geom);
        //渲染組件
        let stateSet = new StateSet();
        //使用ColorDefaultProgram這組著色器
        stateSet.addAttribute(ShaderFactory.createColorDefault.call(this));
        stateSet.addAttribute(new Material([1, 0.5, 0, 1]));
        stateSet.addAttribute(new BlendFunc(BlendFunc.SRC_ALPHA, BlendFunc.ONE_MINUS_SRC_ALPHA));
        stateSet.addAttribute(new Depth(Depth.LESS, 0.1, 0.9, false));//深度值在中間
        this._coordRoot.setStateSet(stateSet);
        //將坐標系根節點加入場景根節點
        root.addChild(this._coordRoot);
    },
    /**
     * 調整坐標軸尺寸姿態
     * boundingBox:scene場景的包圍盒
     * vec3Translate:場景平移向量
     * vec4Rotate:場景旋轉四元數
     * vec3Scale:場景縮放向量
     * mat4Scale:場景縮放矩陣
     * mat4Translate:場景平移矩陣
     * mat4Rotate:場景旋轉矩陣
     * worldMatrix:當前場景的世界坐標
     * */
    update: function (boundingBox, vec3Scale, vec3Translate, vec4Rotate, mat4Scale, mat4Translate, mat4Rotate, worldMatrix) {
        if(boundingBox instanceof BoundingBox){//先保證boundingBox是BoundingBox類的實例
            let vecSRaw = Vec3.new();
            Vec3.copy(vecSRaw, vec3Scale);//克隆縮放向量，防止汙染場景縮放向量
            let vecS = Vec3.new();
            this.computeScale(vecS, vecSRaw);//取場景縮放最長邊的1/4作為坐標系模型縮放比例
            let vecT = Vec3.new();
            Vec3.copy(vecT, vec3Translate);//克隆平移向量，防止汙染場景平移向量
            let vecR = Vec4.new();
            Vec4.copy(vecR, vec4Rotate);//克隆旋轉向量，防止汙染場景旋轉向量
            if (boundingBox.valid()) {//場景模型存在的話
                let min = boundingBox.getMin();
                let max = boundingBox.getMax();
                boundingBox.getCenter(vec3Translate);
                Vec3.sub(this._scale, max, min);
            }
            let matW = Mat4.new();
            Mat4.copy(matW, worldMatrix); //克隆一個世界坐標系矩陣，防止修改場景包圍盒的矩陣
            let matS = Mat4.new();
            Mat4.copy(matS, mat4Scale); //克隆一個縮放矩陣，防止汙染場景包圍盒的縮放矩陣
            let matT = Mat4.new();
            Mat4.copy(matT, mat4Translate); //克隆一個平移矩陣，防止汙染場景包圍盒的平移矩陣
            let matR = Mat4.new();
            Mat4.copy(matR, mat4Rotate); //克隆一個旋轉矩陣，防止汙染場景包圍盒的旋轉矩陣
            Mat4.fromScaling(matS, vecS);
            Mat4.fromTranslation(matT, vecT);
            Mat4.fromQuat(matR, vecR);

            Mat4.mul(matW, matT, matR);
            Mat4.mul(matW, matW, matS);

            this._coordRoot._matrix = matW;
        }
    },
    //計算坐標系縮放比例
    computeScale : function(newScale, boundingBoxScale){
        //取場景模型包圍盒最長一邊的1/4
        var scale = boundingBoxScale[0] > boundingBoxScale[1] ? boundingBoxScale[0] : boundingBoxScale[1];
        scale = scale > boundingBoxScale[2] ? scale : boundingBoxScale[2];
        scale *= 1/4;
        newScale[0] = scale;
        newScale[1] = scale;
        newScale[2] = scale;
    }
};

module.exports = CoordinateSection;

在這個構造類中，我將坐標系模型做成了一個根節點coordRoot，這個根節點下掛載了一個子模型（圓錐），該子模型下又掛載了三個子節點，一、geometry幾何特征；二、transformMatrix千萬註意是相對於他的父節點的空間變換矩陣，不是相對於世界坐標系的空間變換矩陣，千萬註意；三、stateSet著色器相關對象，就是實現shader，program，傳參attribute，uniform，空間變換，drawElement相關的配置和操作對象。這樣做的好處就顯而易見了，遍歷整棵模型樹，我既能將樹上每一個節點都綁定不同的shader繪制出來，又能知道子節點相對於父節點的空間變換矩陣，就不會出現剛才那種錯位的事了。
　　同學們看到這裏應該明白樹形結構加載多個子模型的好處了，由於這次的代碼並不完整，osg也需要nodejs的運行環境，所以事先說明，貼出的代碼只是為了幫助說明觀點，本文代碼只是局部關鍵部位，並不能運行，如有問題，可以交流。引用本文請註明出處https://www.cnblogs.com/ccentry/p/9903166.html

WebGL樹形結構的模型渲染流程