いくつかの基本的な質問Three.jsのShaders（Vertex-and Fragment Shader）について

Question

フラグメントと頂点シェーダに関する一般的な理解の質問をしました。 Tree.js.からカスタムシェーダで透明度を計算し、使用することは可能/または少なくとも非常に困難ではないことを私たちは、講義中にleardまし

、

ここに質問があります：なぜそうなのか、どのようにシェーダで透明なものを作ることができるのか誰にも教えてもらえますか（マテリアルの透明度パラメータ「通常」のように、transpareny：true）。

Answer 1

あなたと講師の意味は「透明性」によって異なります。以下の内容は、分かりやすくするために非常に単純化されています

透明オブジェクトの最初の部分は深度ソートです。 three.jsマテリアルを作成すると、material.transparent = true;は、シーンオブジェクトを、追加された順序ではなく、カメラからの深度に基づいてレンダリング順序に配置する深度ソートを有効にします。これにより、透明なオブジェクトの色が正しく混合されます。これはおそらく、シェイダーが現在の断片を描くことに集中し、周囲のシーンについての情報があまりないため、講師がシェーダーで行うことが難しいとしていたものです。

透明度の2番目の部分（これはおそらくもっと慣れている）は、マテリアルの不透明度の値を設定しています。フラグメントシェーダを見ると、フラグメントの色はvec4に設定されます。

gl_FragColor = something; 

vec4の第4の値は、アルファ（不透明度）の値です。あなたが手動でこのように半tranparent赤にフラグメントを設定できます

gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5); 

しかし、再び、あなたのオブジェクトが正しく深さ、ソートされていない場合、透明性は、あなたが期待してどのように動作しない場合があります。シェーダに値を渡す方法に関するご質問については

は、私は上記のコメントに同意する：あなたの2つ目の質問は、別のポストに分割する必要があります。

つまり、uniforms、attributes、およびvaryingはシェーダの一般的な基本型の修飾子です。それぞれは非常に特殊な使い方をしていますが、違いを理解していないように思えます（それはうまくいきます、あなたはまだ学んでいます）。私はそれらのそれぞれを適切に使用する方法についていくつかの読書をすることをお勧めします（そして、当然、StackOverflowは答えのための良い場所ですlike this one）。