快捷導(dǎo)航

簡(jiǎn)單了解three.js 著色器材質(zhì)

更新時(shí)間：2020年08月03日 09:52:48 作者：郭先生

這篇文章主要介紹了three.js 著色器材質(zhì)的相關(guān)資料，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

說起three.js，著色器材質(zhì)總是繞不過的話題，今天郭先生就說一說什么是著色器材質(zhì)。著色器材質(zhì)是很需要靈感和數(shù)學(xué)知識(shí)的，可以用簡(jiǎn)短的代碼和繪制出十分豐富的圖像，可以說著色器材質(zhì)是脫離three.js的另一塊知識(shí)，因此它十分難講，我們只能在一個(gè)一個(gè)案例中逐漸掌握著色器語(yǔ)言的使用技巧。

1. 什么是著色器材質(zhì)

著色器材質(zhì)（ShaderMaterial）是一個(gè)用GLSL編寫的小程序，在GPU上運(yùn)行。它能夠提供 materials 之外的效果，也可以將許多對(duì)象組合成單個(gè)Geometry或BufferGeometry以提高性能。

2. 著色器材質(zhì)的變量

每個(gè)著色器材質(zhì)都可以指定兩種不同類型的shaders，他們是頂點(diǎn)著色器和片元著色器(Vertex shaders and fragment shaders)。

頂點(diǎn)著色器首先運(yùn)行; 它接收attributes，計(jì)算/操縱每個(gè)單獨(dú)頂點(diǎn)的位置，并將其他數(shù)據(jù)（varyings）傳遞給片元著色器。
片元（或像素）著色器后運(yùn)行; 它設(shè)置渲染到屏幕的每個(gè)單獨(dú)的“片元”（像素）的顏色。

shader中有三種類型的變量: uniforms, attributes, 和 varyings

Uniforms是所有頂點(diǎn)都具有相同的值的變量。比如燈光，霧，和陰影貼圖就是被儲(chǔ)存在uniforms中的數(shù)據(jù)。 uniforms可以通過頂點(diǎn)著色器和片元著色器來訪問。
Attributes 與每個(gè)頂點(diǎn)關(guān)聯(lián)的變量。例如，頂點(diǎn)位置，法線和頂點(diǎn)顏色都是存儲(chǔ)在attributes中的數(shù)據(jù)。attributes 只可以在頂點(diǎn)著色器中訪問。
Varyings 是從頂點(diǎn)著色器傳遞到片元著色器的變量。對(duì)于每一個(gè)片元，每一個(gè)varying的值將是相鄰頂點(diǎn)值的平滑插值。

注意：在shader 內(nèi)部，uniforms和attributes就像常量；你只能使用JavaScript代碼通過緩沖區(qū)來修改它們的值。

3. 著色器材質(zhì)的使用

上面說了每個(gè)著色器材質(zhì)都可以指定兩種不同類型的shaders，不過如果我們不去指定這兩個(gè)shaders而直接使用也不會(huì)報(bào)錯(cuò)，因?yàn)镾haderMaterial已經(jīng)定義了默認(rèn)的頂點(diǎn)著色器和片元著色器，他們的代碼是這樣的。

//頂點(diǎn)著色器代碼
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為我們?cè)O(shè)置好的變量，可以直接拿來用，前兩個(gè)變量我們之前已經(jīng)說了，而position就是每一個(gè)頂點(diǎn)的坐標(biāo)值，當(dāng)著色器代碼執(zhí)行時(shí)，會(huì)循環(huán)執(zhí)行g(shù)l_Position和gl_FragColor設(shè)置頂點(diǎn)位置，和顏色插值。并且我們最終要設(shè)置的就是gl_Position和gl_FragColor。多的先不說，下面看一個(gè)小例子。

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是相機(jī)坐標(biāo)系的變換矩陣 最后我們將y值乘以1.4得到了一個(gè)形如雞蛋的幾何體
    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是一個(gè)已經(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藍(lán)色通道值范圍為0~1
    gl_FragColor=vec4(pr, pg, pb, 1.0); //最后設(shè)置頂點(diǎn)顏色，點(diǎn)與點(diǎn)之間會(huì)自動(dòng)插值
  }
  `
})
var mesh = new THREE.Mesh(geom, mate);
scene.add(mesh)