問題タブ [gouraud]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
5480 参照

algorithm - グーロー シェーディングの三角形のセットから頂点法線を計算する最も効率的なアルゴリズム

三角形のセットが与えられます。各三角形は点のトリプレットです。各点は実数の 3 要素です。各三角形の表面法線を計算できます。ただし、グーロー シェーディングの場合は、頂点法線が必要です。したがって、各頂点にアクセスして、その頂点を共有する三角形を調べ、それらの表面法線を平均して、頂点法線を取得する必要があります。

これを達成するための最も効率的なアルゴリズムとデータ構造は何ですか?

素朴なアプローチはこれです(疑似pythonコード):

より効率的なアプローチはありますか?

0 投票する
2 に答える
8744 参照

c++ - OpenGL でグーロー シェーディングが機能しない

光源による陰影をつけようとしていますが、形をすべて 1 つの色にしたいと考えています。

私の問題は、どんなに頑張っても、単一のカラーモデルでシェーディングが得られないように見えることです. この例をわかりやすくするために、モデルを 1 つの三角形に単純化しました。

私は OpenGL に本当に慣れていないので、それが単純なものであることを願っています。法線を設定することを覚えていたので、他に何が問題なのかわかりません。

最終的な目的は、コースワークのためにグーロー シェーディング (およびテクスチャ) を使用して顔をレンダリングすることですが、OpenGL (1.4 - コース要件) を自分で理解する必要があり、シェーダーの使用は許可されていません。この写真に似たものを作成しようとしています(Googleから取得): ここに画像の説明を入力

私の三角形で。

0 投票する
1 に答える
92 参照

opengl - ADS (Phong/Gourang) コンポーネントの構成

Phong ライティング モデルの基本的なシェーダー コードを以下に示します。ディフューズ、アンビエント、スペキュラー ライティングをテストしましたが、正しい結果が得られています。最終的な行でそれらを構成することになると、それ自体でアンビエント ライティングのように見える効果を得続けます。何が悪いのか誰か知っていますか?

0 投票する
1 に答える
194 参照

opengl - GLSL 1.5 はカラー入力を取得できません

オブジェクトにいくつかの異なる色を使用して単純なグーロー シェーディングを実行したいだけです。基本的に私の問題は、色の値をシェーダーに入れることができず、黒くレンダリングされることです。シェーダーでベクトルをオブジェクト全体の色として定義すると、うまく機能します。

メインプログラム:

シェーダー:

バーテックス

断片

0 投票する
2 に答える
1352 参照

opengl - グーロー シェーディングで、T ジャンクションの問題と OpenGL でそれを実証する方法

グーロー シェーディングの部分で、「ポリゴンが隣接している T ジャンクションは視覚的な異常を引き起こす場合があります。一般的に、T ジャンクションは避けるべきです」と書かれていることに気付きました。

T ジャンクションは、下の図の約 3 つのサーフェスでエッジを共有しているように見えます。ポイント A は、異なるサーフェスに属しているため、異なる法線ベクトルを持つ可能性があります。

ここに画像の説明を入力

しかし、Tジャンクションが発生したときの影響と、OpenGLを使用してそれを実装する方法は何ですか? 各長方形の頂点ごとに異なる法線を設定し、シーンにライトを配置してみましたが、接合点 A に異常は見られませんでした。

これが私のコードです:

ポイント ライトはカメラと同様に (0, 0, 10) にあります。以下の結果には、視覚的な異常はないと思います。たぶん法線は特別なものであるべきですか?

私が何か間違ったことはありますか?これを実現するためのヒントを誰か教えてもらえますか?

ここに画像の説明を入力

0 投票する
1 に答える
514 参照

graphics - 小規模なグーロー シェーディングを例で理解する

私はコンピュータ グラフィックスのコースにいて、フォンとグーロー シェーディングに関する講義に合格したところです。私は何が言われているのかよく分からなかったので、明確にするために教科書に目を向け、私を助けるかもしれない実行可能な例を見つけました. この例について皆さんと議論したいと思います。

例は次のように述べています。

頂点には次の RGB カラーがあります。

ポイント (a.) (30,30) とポイント (b.) (45, 30) の RGB カラーは何ですか?

のために)

A と B の R と B の値を想定します。それらは同じであり、30 は 10 と 50 の間にあるため、G の A と B の色値の平均をとります。

したがって、(25, 135, 30) はポイントのカラー値です。この値を次の問題で使用します。つまり、点 M と呼びましょう。

(b) の場合

y 座標として 30 を持つ唯一の点は C です。点 M は (30,30) にあります。したがって、(30,30) と (60,30) は同じ R 値と B 値を持っているため、(45, 30) の値も同じであると仮定します。45 はちょうど 30 と 60 の間にあるので、ここでも G 値を平均化します。

したがって、答えは (25, 125, 30) です。

だから私の質問は - これは正しいですか?もしそうなら-これは補間とは何を意味するのですか-この種の...平均化ですか?フォン シェーディングはこれとどう違うのですか?

0 投票する
1 に答える
599 参照

graphics - グーローシェーディングのやり方

グーロー シェーディングについて説明してもらえますか? Google で「グーロー シェーディング」を検索することはできますが、あまり意味がありません。(x, y) 位置と int[r,g,b] 色を持つ 3 つの頂点があります。頂点の色を線形に補間して (これが何を意味するのかわかりません)、三角形のシェーディングを行いたいと考えています。そうするためのロジックは何ですか?

0 投票する
1 に答える
120 参照

opengl - グーローシェーダースクリプトで色値はどのように補間されますか?

グーロー シェーダーは、各三角形の角の照明を計算し、三角形で覆われた各ピクセルの結果の色を線形補間します。

この特定の補間を(GLSLコードで)どのようにプログラムしますか?

これを自分でコーディングする必要がありますか、それとも OpenGL が 単独で(内部的に)補間しますか?

0 投票する
0 に答える
234 参照

three.js - three.jsがグーロー補間について一貫していないのはなぜですか?

THREE.BoxBufferGeometryシンプルな を使用してをシェーディングしたいTHREE.MeshLambertMaterial。マテリアルは、ランバート イルミネーション モデルを使用して各頂点の色を選択し (実際にそうします)、グーロー シェーディングを使用して各面に滑らかなグラデーションを生成することになっています。

グーロー部分は起きていません。代わりに、立方体の面はそれぞれ 1 つの単色でシェーディングされます。

他のさまざまな を試しBufferGeometryましたが、一貫性のない結果が得られました。

たとえば、代わりに を作成するIcosahedronBufferGeometryと、同じ問題が発生します。各面は 1 つの単色になります。

一方、 を作るとSphereBufferGeometry、グーローが存在します。

しかし、 を使用して立方体を作成すると、詳細を 以外に設定しない限りPolyhedronBufferGeometryグーロー シェーディングは表示されません。0

BufferGeometryメソッドcomputeFaceNormals()とメソッドの存在を認識していますcomputeVertexNormals()。法線は、各面と頂点の色をそれぞれ決定するために使用されるため、ここでは非常に重要です。しかし、それらは に役立ちますが、存在するか、1 つだけ存在するか、または両方が両方の可能な順序で存在するかに関係なく、Icosahedronには影響しません。Box

これが私が期待するコードです:

面 (実際の三角形の面) がグラデーションでシェーディングされた立方体を取得する必要があります。最初に面の法線を計算し、次にそれらによって形成された面の法線を平均化して頂点の法線を計算する必要があります。以下は、正しいグーロー シェーディングが適用されている三角両錐です。

正しいシェーディング

しかし、上記のコードは代わりにこれを生成します:

不正確なシェーディング

three.js がエラーや警告をコンソールに記録することは決してありません。

それで、ここで何が起こっているのですか?私が考えることができる唯一の説明は、Box実際には立方体の各コーナーに 3 つずつある 24 の頂点で構成され、各頂点の計算された法線が同じ方向を向いている最大 2 つの面の平均になるように面を形成するということです。しかし、それがどこにも書かれていないことがわかりません。その説明はPolyhedron、頂点と面がコードで明示的に指定されている場所には当てはまりません。