3 点がそれぞれの色で指定されている三角形または平面のグーラード シェーディングを行う方法は?
三角形ABC
ポイントAは座標x1、y1と色r1、g1、b1を持っています
点 B は座標 x2,y2 と色 r2,g2,b2 を持ちます
点 C は座標 x3,y3 と色 r3,g3,b3 を持ちます
誰でも助けてくれますか
Javascript のみを使用する
質問する
334 次
1 に答える
1
もちろん。C での実装は次のとおりです: http://www.nbb.cornell.edu/neurobio/land/oldstudentprojects/cs490-95to96/guo/report.html
記憶が正しければ、Quake および/または Quake2 のソース コード リリースにも含まれています。
正直なところ、最後に実装してから約 18 年になります。3D カードがコンシューマー コンピューター用に登場し始めた時代にさかのぼります。もちろん、オンボード グラフィックス チップにもハードウェア実装があり、directX と openGL の両方で使用できます。もちろん、WebGL を使用して Web ページ内から OpenGL を活用する機能もあります。
アルゴリズムは非常にシンプルで簡単です。水平線をレンダリングします。各行には、開始色と終了色があります。これらの 2 点の間で色を補間するだけです。各水平線の開始色と終了色を取得するには、各頂点で指定された色を補間します。
これは、色自体の線形補間にすぎません。入射角を補間し、各ピクセルの色を計算するために使用される Phong モデルとは異なり、色は、面の法線と光ベクトルから各頂点でのみ計算されます。 . (Phong では、ポリゴンの中央でスペキュラー ハイライトが許可されます。Gouraud では、頂点がハイライト エリア内に含まれている場合に許可されます。また、Gouraud は、1 ピクセルあたりの内積と比較して、三角形ごとに 3 つの内積を考慮して、明らかにはるかに安価に計算できます。フォン)
3 つではなく 1 つのコンポーネントを使用した大まかな例
?...?
.....
.....
.....
?...?
1...?
.....
.....
.....
5...?
1...2
.....
.....
.....
5...3
11122
22222
33322
44433
55433
アルゴリズムの説明だけで実装できて満足です。役に立つと思われるいくつかのリソース:
shaderToy (webGL デモ) - http://www.iquilezles.org/apps/shadertoy/
グーロー シェーディングの js の例 - http://eng-przemelek.blogspot.com.au/2010/05/gouraud-shading-in-javascript.html
楽しむ！
于 2013-02-17T01:52:04.603 に答える