簡單了解three.js 著色器材質(zhì)
說起three.js,著色器材質(zhì)總是繞不過的話題,今天郭先生就說一說什么是著色器材質(zhì)。著色器材質(zhì)是很需要靈感和數(shù)學知識的,可以用簡短的代碼和繪制出十分豐富的圖像,可以說著色器材質(zhì)是脫離three.js的另一塊知識,因此它十分難講,我們只能在一個一個案例中逐漸掌握著色器語言的使用技巧。
1. 什么是著色器材質(zhì)
著色器材質(zhì)(ShaderMaterial)是一個用GLSL編寫的小程序 ,在GPU上運行。它能夠提供 materials 之外的效果,也可以將許多對象組合成單個Geometry或BufferGeometry以提高性能。
2. 著色器材質(zhì)的變量
每個著色器材質(zhì)都可以指定兩種不同類型的shaders,他們是頂點著色器和片元著色器(Vertex shaders and fragment shaders)。
- 頂點著色器首先運行; 它接收attributes, 計算/操縱每個單獨頂點的位置,并將其他數(shù)據(jù)(varyings)傳遞給片元著色器。
- 片元(或像素)著色器后運行; 它設(shè)置渲染到屏幕的每個單獨的“片元”(像素)的顏色。
shader中有三種類型的變量: uniforms, attributes, 和 varyings
- Uniforms是所有頂點都具有相同的值的變量。 比如燈光,霧,和陰影貼圖就是被儲存在uniforms中的數(shù)據(jù)。 uniforms可以通過頂點著色器和片元著色器來訪問。
- Attributes 與每個頂點關(guān)聯(lián)的變量。例如,頂點位置,法線和頂點顏色都是存儲在attributes中的數(shù)據(jù)。attributes 只 可以在頂點著色器中訪問。
- Varyings 是從頂點著色器傳遞到片元著色器的變量。對于每一個片元,每一個varying的值將是相鄰頂點值的平滑插值。
注意:在shader 內(nèi)部,uniforms和attributes就像常量;你只能使用JavaScript代碼通過緩沖區(qū)來修改它們的值。
3. 著色器材質(zhì)的使用
上面說了每個著色器材質(zhì)都可以指定兩種不同類型的shaders,不過如果我們不去指定這兩個shaders而直接使用也不會報錯,因為ShaderMaterial已經(jīng)定義了默認的頂點著色器和片元著色器,他們的代碼是這樣的。
//頂點著色器代碼 void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } //片元著色器代碼 void main() { gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); }
這里的projectionMatrix、modelViewMatrix和position都是three為我們設(shè)置好的變量,可以直接拿來用,前兩個變量我們之前已經(jīng)說了,而position就是每一個頂點的坐標值,當著色器代碼執(zhí)行時,會循環(huán)執(zhí)行g(shù)l_Position和gl_FragColor設(shè)置頂點位置,和顏色插值。并且我們最終要設(shè)置的就是gl_Position和gl_FragColor。多的先不說,下面看一個小例子。
var geom = new THREE.SphereGeometry(10, 30, 20); var mate = new THREE.ShaderMaterial({ vertexShader: ` varying vec3 vNormal; void main() { //將attributes的normal通過varying賦值給了向量vNormal vNormal = normal; //projectionMatrix是投影變換矩陣 modelViewMatrix是相機坐標系的變換矩陣 最后我們將y值乘以1.4得到了一個形如雞蛋的幾何體 gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y * 1.4, position.z, 1.0 ); } `, fragmentShader: ` //片元著色器同樣需要定義varying vec3 vNormal; varying vec3 vNormal; void main() { //vNormal是一個已經(jīng)歸一化的三維向量 float pr = (vNormal.x + 1.0) / 2.0; //pr紅色通道值范圍為0~1 float pg = (vNormal.y + 1.0) / 2.0; //pg綠色通道值范圍為0~1 float pb = (vNormal.z + 1.0) / 2.0; //pb藍色通道值范圍為0~1 gl_FragColor=vec4(pr, pg, pb, 1.0); //最后設(shè)置頂點顏色,點與點之間會自動插值 } ` }) var mesh = new THREE.Mesh(geom, mate); scene.add(mesh)
這篇我們簡單的操作頂點著色器和片元著色器繪制了一個五彩的雞蛋,但是這還僅僅是一個靜態(tài)的著色器,下一篇我們讓著色器材質(zhì)動起來。
以上就是簡單了解three.js 著色器材質(zhì)的詳細內(nèi)容,更多關(guān)于three.js 著色器材質(zhì)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
SharePoint 客戶端對象模型 (一) ECMA Script
今天開始SharePoint Client對象模型的介紹,簡而言之,SharePoint通過WCF技術(shù)在服務(wù)端提供數(shù)據(jù)服務(wù),這些服務(wù)提供的內(nèi)容相當于SharePoint API的一個子集2011-05-05利用Javascript判斷操作系統(tǒng)的類型實現(xiàn)不同操作系統(tǒng)下的兼容性
在通過Javascript實現(xiàn)客戶端和服務(wù)端的交互時,有時候需要對操作系統(tǒng)進行判斷,以便實現(xiàn)不同操作系統(tǒng)下的兼容性;從而實現(xiàn)網(wǎng)站在跨平臺瀏覽時候保持良好的用戶體驗,感興趣的朋友可以了解下啊,或許對你有所幫助2013-01-01微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法,簡單分析了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下2017-12-12javascript arguments 傳遞給函數(shù)的隱含參數(shù)
眾所周知,js是腳本語言,腳本語言的一個特點就是極其靈活。有時“靈活”到使我這種習慣c系主流語言的人不得不佩服腳本的強大。比如這里要講到的 arguments參數(shù)。2009-08-08如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結(jié)果
JsonDiff是一個高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12