THREE.jsでMeshNormalMaterialをGLSLで実装する方法は？

Question

MeshNormalMaterialのようなシェーダを実装したいのですが、通常の色に変換する方法はわかりません。 THREE.jsで

：

マイTEST1：

varying vec3 vNormal; 

void main(void) { 
    vNormal = abs(normal); 
    gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0); 
} 

varying vec3 vNormal; 

void main(void) { 
    gl_FragColor = vec4(vNormal, 1.0); 
} 

マイTEST2：

varying vec3 vNormal; 

void main(void) { 
    vNormal = normalize(normal) * 0.5 + 0.5; 
    gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0); 
} 

varying vec3 vNormal; 

void main(void) { 
    gl_FragColor = vec4(vNormal, 1.0); 
} 

これらの誰もが私を助けることができる...私は色を計算する方法についてのすべてのリソースを見つけることができない、

をテストしていますか？

ありがとうございました。

Answer 1

ビュー空間の法線ベクトルを表示するには、法線ベクトルをモデル空間からワールド空間に変換し、ワールド空間からビュー空間に変換する必要があります。これは、法線ベクトルをnormalMatrixで変換することによって、1つのステップで行うことができます。

varying vec3 vNormal; 

void main(void) 
{ 
    vNormal  = normalMatrix * normalize(normal); 
    gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0); 
} 

それがフラグメントシェーダに頂点シェーダから渡されたときに変化する変数が補間されているので、そのBarycentric coordinatesによれば、色変換は、フラグメントシェーダで行われるべきです。法線ベクトルは、正規化されているので、ノートは、補間後の法線ベクトルは、その成分は、範囲[-1.0、1.0]であり、

varying vec3 vNormal; 

void main(void) 
{ 
    vec3 view_nv = normalize(vNormal); 
    vec3 nv_color = view_nv * 0.5 + 0.5; 
    gl_FragColor = vec4(nv_color, 1.0); 
} 

再び正規化されなければなりません。どのように色として表現するかはあなた次第です。
absの値を使用すると、同じサイズの正と負の値が同じ色表現になります。色の強度は値の勾配とともに増加します。式normal * 0.5 + 0.5 -1から共通x成分において

の強度増加は、赤色表さy成分は緑色であり、z成分がであると

青。

色は、そのコンポーネントの最大値で割ることにより、飽和することができます：あなたの情報について

varying vec3 vNormal; 

void main(void) 
{ 
    vec3 view_nv = normalize(vNormal); 
    vec3 nv_color = abs(view_nv); 
    nv_color  /= max(view_nv.x, max(view_nv.y, view_nv.z)); 
    gl_FragColor = vec4(nv_color, 1.0); 
}