THREE.JS入門教程(2)著色器-上

2024-05-06 14:19:51

字體：大中小

來源：轉載

供稿：網友

譯序
Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D。但是目前這項技術還處在發展階段，資料極為匱乏，愛好者學習基本要通過Demo源碼和Three.js本身的源碼來學習。

0.簡介
之前我已經給出了一篇《開始使用Three.js》。如果你還沒有讀過，你可能需要去讀一下，本文的基礎是在那一篇教程的基礎上完成的。

我想討論一下著色器。在Three.js幫助你免去了很多麻煩之前，原生WebGL就很優秀了。有的時候，你也許會想要完成一些特定的效果，或者想對呈現在你的屏幕上的東西鉆研得更深入一些，那么著色器一定會進入你的視野。如果你像我一樣，你也同樣希望實現一些比上一篇教程中的基礎更加有意思的東西。這篇教程中，我會講解Three.js的基礎，這些基礎實際上為我們做了很多枯燥的工作。
在開始之前我還要說，這篇教程會有相當多的篇幅在解釋著色器的代碼，之后會有一篇教程會在著色器代碼的基礎上前進一點，利用著色器去做點什么。這是因為著色器shaders第一眼看上去并不易懂，需要一些解釋。
1.兩種著色器
WebGL沒有固定的渲染管線，你無法直接使用一個黑盒子式的著色器（譯者注：上個世紀的顯卡基本都只支持固定渲染管線）；WebGL提供的是可編程的管線，這種方式更強大但也更難理解和使用。長話短說，可編程渲染管線意味著編寫程序的人要自己負責獲取頂點并將它繪制在屏幕上了。著色器是渲染管線的一部分，有兩種著色器：
1.頂點著色器
2.片元著色器
你應當知道的是，這兩種著色器都完全運行在顯卡的GPU上，我們將需要它們處理的數據從CPU上卸下，裝到GPU上，減輕了CPU的復旦。現代的GPU對著色器需要的調用的運算類型都做了大幅優化，這樣做很值得。
2.頂點著色器
基元形狀，比如一個球體，是由頂點構成的，是吧？頂點著色器被依次傳入這些頂點中的一個頂點，然后處理它。如何處理每個頂點是可以自由定制的，但頂點著色器有一個必做的事，就是為一個名為 gl_Position 的變量賦值，該變量是一個4維數組，表示該頂點最終在屏幕上的位置。這本身是個有意思的過程，因為我們實際上在談論如何將一個三維坐標（一個具有x、y、z值得頂點）轉化為，或者說投影到二維的屏幕上。謝天謝地，要是我們使用Three.js之類的工具，我們能夠如此方便地訪問到 gl_Position 。
3.片元著色器
現在我們有包含頂點的三維物體了，現在要將物體投影到二維屏幕上了，但顏色哪里去了？紋理和光照呢？這正是片元著色器要處理的。
和頂點著色器類似，片元著色器有一項必須完成的任務：設置或消除變量 gl_FragColor ，另一個四維浮點變量，也就是片元點最終的顏色。什么是片元？想象一個具有三個頂點的三角形，片元就是經過這三個頂點計算后的，所有在三角形內部的點。因此，片元值由頂點的值內插生成。如果一個頂點的顏色是紅色，相鄰頂點的顏色是藍色，那么我們可以觀測到顏色從紅色頂點附近漸變，由紅色變成紫色，最終在藍色頂點附近變成藍色。

上一篇：js修改input的type屬性及瀏覽器兼容問題探討與解決

下一篇：重構Javascript代碼示例(重構前后對比)