three中的著色器示例

其實在3d引擎/庫的幫助下，我們做webgl開發的難度已經很大大地降低了，熟悉相關api的話，開發乙個簡單的3d程式可以說是很輕鬆的事情。

在我看來，webgl的核心就是著色器(頂點著色器、片元著色器)，這兩者決定了如何在螢幕上繪製出我們想要的效果。所以，無論你是剛入門的3d開發者(我也是剛剛探索3d領域)還是該領域的資深老鳥，對著色器的了解都是至關重要的。

我們一般的軟體開發(例如一些管理系統、**小程式)，諸如這些業務邏輯性非常強的程式，都是依靠cpu的高速運算，而做webgl(3d開發)，我們寫的程式**是要跑在gpu上的，因為對於繪圖能力來說，gpu是遠遠高於cpu的，所以，我們做的就是gpu程式設計了。

今天，就以乙個demo來體會一下，three.js中如何編寫自定義的著色器並運用到mesh材質上的。

(首先預設大家都已經學會three.js的一些基本操作，例如將乙個three.js內建的面板planegeometry放到場景中)

一、新增plane

function addplane());

var plane = new
three.mesh(planegeometry,meshmaterial);
scene.add(plane);
}

ok，這就是乙個plane了。

二、著色器**

模型矩陣： 將頂點從區域性座標系轉換到世界座標系中；

檢視矩陣： 將頂點從世界座標轉化到檢視座標系下；

投影矩陣： 將頂點從檢視座標系轉換到規範立方體中（即螢幕中）;

區域性座標系(模型/物體本身)----->世界座標系----->檢視座標系----->螢幕。

片元著色器中，因為片元著色器是針對頂點著色器輸出的頂點資料 (gl_position)進行逐點繪製的，所以該著色器就是對每個點賦予乙個顏色值，針對上面的片元著色器，他接受外界賦予的變數(uniform型別)。

三、著色器材質

下面我們就用兩種著色器來生成乙個材質。

//

建立shadermaterial紋理的函式
function creatematerial(vertexshader, fragmentshader) ;
//配置著色器裡面的uniform變數的值
var uniforms =,
resolution: 
};var meshmaterial = new
three.shadermaterial();
return
meshmaterial;
}

function addplane()

五、其他著色器效果示例

著色器（Shader）之畫素著色器

畫素著色器實際上就是對每乙個畫素進行光柵化的處理期間，在gpu上運算的一段程式。不同與頂點著色器，畫素著色器不會以軟體的形式來模擬畫素著色器。畫素著色器實質上是取代了固定功能流水線中多重紋理的環節，而且賦予了我們訪問單個畫素以及訪問每乙個畫素紋理座標的能力 多重紋理就是我們同時啟用多層紋理，然後規定...

OpenGL ES 著色器 片斷著色器詳解

opengl es 入門 01 opengl es 入門 02 opengl es 入門 03 opengl es 入門 04 opengl es 入門 05 opengl es 入門練習 01 opengl es 入門練習 02 opengl es 入門練習 03 opengl es 入門練習 0...

頂點著色器 片段著色器

一 著色器 著色器只是一種把輸入轉化為輸出的程式。著色器也是一種非常獨立的程式，因為它們之間不能相互通訊 它們之間唯一的溝通只有通過輸入和輸出。在最簡配置下，至少都得有兩個著色器 乙個叫頂點著色器 vertex shader 它將作用於每個頂點上 另乙個叫片段著色器 fragment shader ...