Cesium原理篇：6 Render模塊(3: Shader)
在介紹Renderer的第一篇，我就提到WebGL1.0對(duì)應(yīng)的是OpenGL ES2.0，也就是可編程渲染管線。之所以單獨(dú)強(qiáng)調(diào)這一點(diǎn)，算是為本篇埋下一個(gè)伏筆。通過前兩篇，我們介紹了VBO和Texture兩個(gè)比較核心的WebGL概念。假設(shè)生產(chǎn)一輛汽車，VBO就相當(dāng)于這個(gè)車的骨架，紋理相當(dāng)這個(gè)車漆，但有了骨架和車漆還不夠，還需要一臺(tái)機(jī)器人來加工，最終才能成產(chǎn)出這輛汽車。而Shader模塊就是負(fù)責(zé)這個(gè)生產(chǎn)的過程，加工參數(shù)（VBO，Texture），執(zhí)行渲染任務(wù)。
這里假設(shè)大家對(duì)Shader有一個(gè)基本的了解，這一塊內(nèi)容也很多，不可能簡(jiǎn)單兩句輕描淡寫就豁然開朗，而且我也沒有進(jìn)行過系統(tǒng)的學(xué)習(xí)，所以就不班門弄斧了。進(jìn)入主題，來看看Cesium對(duì)Shader的封裝。
圖1：ES2.0可編程渲染管線
上圖是可編程渲染管線的一個(gè)大概流程，我們關(guān)注的兩個(gè)橙色的圓角矩形部分，分別是頂點(diǎn)著色器和片源著色器。既然是可編程渲染管線，面向Shader的開發(fā)者提供了一種稱為GLSL的語(yǔ)言，如果你懂C的話，兩者語(yǔ)法是相當(dāng)?shù)?，所以從語(yǔ)法層面學(xué)習(xí)成本不大。
ShaderSource創(chuàng)建
首先，Cesium提供了ShaderSource類來加載GLSL代碼，我們來看一下它對(duì)應(yīng)的拷貝構(gòu)造函數(shù)：
ShaderSource.prototype.clone = function() { return new ShaderSource({ sources : this.sources, defines : this延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式