web-dev-qa-db-ja.com

Three.js:ランバートとフォンの正確な違いは何ですか?

一般的なコンピュータグラフィックスにおけるランバートとフォンの違いを理解しています。また、three.jsを使用して独自のマテリアルを変更および作成する方法も理解しています。しかし、MeshLambertMaterialとMeshPhongMaterialのデフォルト状態の違いを理解することはできません。

1つの指向性光源と125の球があるシーンでそれらを切り替えてみましたが、違いはまったくわかりません。 Three.jsは私の本の章で使用されているので、すべての情報が正確で正確であることを確認する必要があります。

ありがとう、シェーン

24
Shane Hudson

Three.jsに実装されているMeshLambertMaterialMeshPhongMaterialの正確な違いが必要だと思います。

シェーディングモデルとイルミネーションモデルを区別する必要があります。 Three.jsは、「純粋な」PhongまたはLambertモデルを実装していません。

MeshLambertMaterialの場合、照明の計算は各頂点で実行され、結果の色はポリゴンの面全体に補間されます。 (グーローシェーディング;(一般化)ランバート照明モデル)

MeshPhongMaterialの場合、頂点法線はポリゴンの表面全体で補間され、照明の計算は各テクセルで実行されます。 (フォンシェーディング;(一般化)フォンイルミネーションモデル)

顔に近いpointLightがある場合、特にライトの減衰距離が顔の頂点までの距離よりも短い場合は、明確な違いがわかります。

どちらのマテリアルでも、FlatShadingの場合、面の法線が各頂点の法線に置き換わります。

three.js.r.66

22
WestLangley

シェーン、あなたが混乱しているのはあなたのせいではありません。

ランバートは、表面で反射された光の照明モデル(物理ベース)であり、入射点での表面法線に対する入射照明の方向で表されます。

Phongは、より微妙なシェーディングモデル(よりハッキーなモデルではありますが)であり、光は周囲+拡散+鏡面反射成分で構成されていると言います。アンビエントコンポーネントをどこでも一定として扱い(ハック!)、上記のランバートモデルを使用した拡散コンポーネント、およびべき乗則フォールオフを使用したスペキュラーコンポーネント(これは巧妙なハックであり、実際のBRDFにほぼ近似しています)。

「フォン」という言葉は、補間法でもあります(最新の三角形ベースのレンダリングパイプラインのコンテキストで使用される場合)。三角形の内部のピクセルでの照明を計算する場合、2つの選択肢があります。

  1. グーローシェーディング:3つの頂点の色を計算し、重心座標を使用して内部を補間します。または

  2. フォンシェーディング:3つの頂点の法線を使用して、内部の法線を補間し、各ピクセルでこの補間された法線を使用してシェーディングを計算します。

これが(@RayToalが指摘したように)、鏡面ハイライトが三角形の内部にある場合、どの頂点も明るくなりませんが、フォンシェーディングは法線を補間し、内部に明るいスポットがある理由です。レンダリングされた三角形の。

24
Rahul Banerjee

コンピュータグラフィックスでは、フォン反射モデルフォンシェーディングを混同することがよくあります。 -)。前者はランバートのような点の局所照明のモデルですが、後者はグーローシェーディングのような内挿法です。それらを区別するのが難しい場合は、これらの各トピックに関する詳細な記事のリストを以下に示します。 http://en.wikipedia.org/wiki/List_of_common_shading_algorithms

3

GLSLを少し知っている場合は、両方の場合に生成された頂点/フラグメントシェーダーを調べて、違いを探すのが最善の方法だと思います。 http://benvanik.github.com/WebGL-Inspector/ を使用してプログラムのコードを取得するか、3つのjsソースの適切な場所にconsole.log()を配置できます。 (buildProgramを探します。プログラムコードを表示するには、prefix_fragment + fragmentShaderprefix_vertex + vertexShaderを出力する必要があります)。

また、両方のシェーダーを作成するために使用されるビルディングブロックを確認することもできます。

ランバート: https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L2036 フォン: https://github.com/ mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L2157

ソースプログラムのコードを見るよりも読みやすいかもしれません。

2
Popov