threejs/shader/將mesh的世界空間變換傳入shader以得到正確光照

今天剛開始寫shader material，要實現的是在一個已經有波形變化的平面上做基本Phong光照。本來PlaneGeometry是在XOY平面中的，轉了九十度到XOZ平面上，結果發現出來的渲染效果不太對：

後來想了想，是因爲我在創建mesh之後又旋轉了mesh：

    sea.rotation.x = -Math.PI/2;

但是這並不會改變mesh.vertices中存儲的position值，因爲它們是model space的，而變換是在world space中進行的。

要改正很簡單，mesh.matrixWorld保存了世界空間變換的矩陣，將其作爲uniform傳入vertex shader，乘modelMatrix即可。
代碼：

varying vec2 vUv;
varying vec3 worldPos;
varying vec3 vNormal;
uniform mat4 transform;
void main() { 
    vUv = uv; 
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix  * vec4( position, 1.0 ); 
    // 配合片段着色器的光照計算，在世界空間中進行
    worldPos = transform * modelMatrix * vec4(position.xyz, 1.0);

}

修正後：