Cesium原理篇：6 Render模塊(3: Shader)

       在介紹Renderer的第一篇，我就提到WebGL1.0對應(yīng)的是OpenGL ES2.0，也就是可編程渲染管線。之所以單獨強調(diào)這一點，算是為本篇埋下一個伏筆。通過前兩篇，我們介紹了VBO和Texture兩個比較核心的WebGL概念。假設(shè)生產(chǎn)一輛汽車，VBO就相當于這個車的骨架，紋理相當這個車漆，但有了骨架和車漆還不夠，還需要一臺機器人來加工，最終才能成產(chǎn)出這輛汽車。而Shader模塊就是負責這個生產(chǎn)的過程，加工參數(shù)（VBO，Texture），執(zhí)行渲染任務(wù)。

       這里假設(shè)大家對Shader有一個基本的了解，這一塊內(nèi)容也很多，不可能簡單兩句輕描淡寫就豁然開朗，而且我也沒有進行過系統(tǒng)的學習，所以就不班門弄斧了。進入主題，來看看Cesium對Shader的封裝。

      

圖1：ES2.0可編程渲染管線

 

       上圖是可編程渲染管線的一個大概流程，我們關(guān)注的兩個橙色的圓角矩形部分，分別是頂點著色器和片源著色器。既然是可編程渲染管線，面向Shader的開發(fā)者提供了一種稱為GLSL的語言，如果你懂C的話，兩者語法是相當?shù)模詮恼Z法層面學習成本不大。

ShaderSource創(chuàng)建

       首先，Cesium提供了ShaderSource類來加載GLSL代碼，我們來看一下它對應(yīng)的拷貝構(gòu)造函數(shù)：

ShaderSource.prototype.clone = function() { return new ShaderSource({
        sources : this.sources,
        defines : this
        
        	

        		
延伸閱讀
        		

        			
        			
ssh框架
        			2016-09-30
        			
        			
        			
        			
阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖
        			2017-07-26
        			
        			
        			
        			
消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
        			2024-03-26
        			
        			
        			
        			
Selective Search for Object Recognition 論文筆記【圖片目標分割】
        			2017-07-26
        			
        			
        			
        			
詞向量-LRWE模型-更好地識別反義詞同義詞
        			2017-07-26
        			
        			
        			
        			
從棧不平衡問題 理解 calling convention
        			2017-07-26
        			
        			
        			
        			
php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
        			2017-07-26
        			
        			
        			
        			
Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
        			2017-07-26
        			
        			
        			
        			
阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析
        			2017-07-26
        			
        			
        			
        			
集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二)
        			2017-07-26
        			
        			
        			
        		
        		
        		學習是年輕人改變自己的最好方式