今天總結記錄一下WebGL中主循環的創建和作用。我先說明什麽是主循環，其實單純的webgl不存在主循環這個概念，這個概念是由渲染引擎引入的，主循環就是利用一個死循環或無截止條件的遞歸達到定時刷新canvas場景的函數，也就是人們常說的canvas刷新率（fps）。在討論主循環的用處之前，我們先明確一下一個簡單的完整webgl的渲染過程是怎樣的，請看下圖。

好了我們通過上圖看到一個mesh完整的渲染流程，大致再講解一下，首先如果是持續繪制模型的話，就不要gl.clear(gl.color_buffer_bit)，否則會將之前繪制進canvas場景的模型擦除，這也是我們所不希望看到的。還是老樣子，向vertex-shader中傳入attribute和uniform參數，然後調用gl.drawElement進行一次繪制。這個流程已經很清楚了，如果還有問題，請看之前的博客，鏈接地址https://www.cnblogs.com/ccentry/p/9864847.html。到這裏我們把一次繪制渲染的流程重新理了一遍，接下來我們再把場景樹的流程理清楚，請看下圖。

我們可以看到，每次我們遍歷到一個樹節點，我們就會檢查這個節點使用的shader是哪一對vertex-shader和fragment-shader，然後調用之前圖示的渲染流程，綁定shader；接下來檢查該節點相對於其父節點的空間變換矩陣matrixTransform，經過運算傳給shader的uniform；隨後檢查mesh，傳給shader的attribute；最後檢查材質和UV這類參數，傳給shader。最後所有傳值都結束以後，drawElement將該節點模型繪制到canvas場景中去。直到遍歷玩整棵樹，將所有模型都繪制進canvas場景，才是完整的一幀渲染流程。

　　以上是復習之前2篇文章討論的內容，也理了一遍整個渲染流程。接下來我們進入今天要討論的主題，即webGL制作的渲染引擎的主循環。文章開頭說過了，主循環就是一個無限循環的函數，在這個函數中我們要做的就是重復剛才我們渲染整個scene場景的過程。具體的循環間隔可以人為的去設置，例如通過setTimeout來設施循環時間間隔，即設置每次重新渲染的時間間隔。這麽做有什麽好處嗎，當然有。我之前做的demo就沒有主循環的概念，純粹是鼠標事件觸發的重新繪制，即clear（擦除）->traverseNodeTree(遍歷樹)->buffer(傳參)->draw(繪制)->traverseNodeTree->buffer->draw ......->traverseEnd(遍歷結束)。每次這個過程都是計算鼠標的clientXY來重繪，由mouseUp事件觸發。其實就是一個靜態模仿動態的過程。這麽做當然也能做出動態交互的效果，沒有問題，但主循環給了我們一個更好的交互事件管理模式，即每一幀繪制時間間隔到了的時候，就會檢查交互後的模型參數，然後進行重繪。同樣也是計算clientXY，就不需要一次次去監聽mouseUp事件了。這是我理解的主循環在事件交互裏的作用。當然更復雜的交互管理，模型預篩選（超過視棱臺的discard或選擇不繪制），都可以在主循環裏操作。主循環還有制作animation動畫的用處，這裏不是討論的重點，所以就暫時不展開講。

　　說了半天，怎麽構造WebGL主循環還沒說，我們就以Threejs的render渲染流程為依托，來看看render在主循環裏是怎麽玩的，以及今天要說的window.requestAnimationFrame是怎麽用的，請看下面代碼。

/**
     * 進行渲染
     * */
    function rend(){
        renderer.render(scene, camera);
    }
    //動效
    function animate(){
        requestAnimationFrame( animate );
        controls.update();
        rend();
    }
    animate();
 

我們看到這就是一個簡單的遞歸，目的就是利用html5的requestAnimationFrame進行定時重繪。從而達到上面說的鼠標交互效果。
　　今天僅僅是初步了解了一下主循環是什麽，幹什麽用的，其應用場景討論也局限在渲染和鼠標交互上，本人水平有限，希望各位大佬指教，在此貽笑大方。謝謝@山椒@上校已死兩位大佬的解釋指點，今天就寫這些見解，再次感謝。

引用本文請註明出處https://www.cnblogs.com/ccentry/p/9938725.html

WebGL中使用window.requestAnimationFrame創建主循環