Threejs教程之着色器

Three.js着色器

不少時候若是想寫一些特效，每每須要編寫着色器代碼GLSL，若是你不熟悉着色器語言，天然須要學習着色器語言語法，若是你有着色器語言基礎，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API編寫就能夠。相比較在原生WebGL代碼中編寫着色器要方便的多，在threejs中想着色器傳遞數據不須要像WebGL中要使用WebGL API來傳遞，threejs會自動幫你處理。

學習基礎

• 具有基本WebGL和着色器語言知識，不必定要深刻學習。
• 基本Threejs基礎。
• 若是有圖形學基礎更好，沒有也不要緊，能夠慢慢學習。

WebGL入門

關注郭隆邦技術博客，有不少關於webgl的知識和書籍資料。

• 郭隆邦技術博客提供的webgl視頻教程
• 《WebGL編程指南》，適合入門的書籍
• 《交互式計算機圖形學》源碼也是WebGL，相比較《WebGL編程指南》圖形學算法內容更多，內容更詳實，適合深刻學習。

Three.js着色器API

threejs所謂的材質對象Material本質上就是着色器代碼和須要傳遞的uniform數據(光源、顏色、矩陣...)。
不少時候若是想寫一些特效，每每須要編寫着色器代碼GLSL，若是你不熟悉着色器語言，天然須要學習着色器語言語法，若是你有着色器語言基礎，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API編寫就能夠。相比較在原生WebGL代碼中編寫着色器要方便的多，在threejs中想着色器傳遞數據不須要像WebGL中要使用WebGL API來傳遞，threejs會自動幫你處理。

RawShaderMaterial

和原生WebGL中同樣，頂點着色器、片元着色器代碼基本沒有任何區別，
不過頂點數據和uniform數據能夠經過threejs的API快速傳遞，要比使用WebGL原生的API與着色器變量綁定要方便得多。

ShaderMaterial

ShaderMaterial比RawShaderMaterial更方便些，着色器中的不少變量不用聲明，threejs系統會自動幫你設置，好比頂點座標變量、投影矩陣、視圖矩陣...