問題タブ [uv-mapping]

上の図に示すように、1 つの頂点を 2 つの異なる UV 座標にマップする必要があります。Verity を GL_ELEMENT_ARRAY_BUFFER にバインドすることで、別のバッファーでインデックスを作成できることはわかっていますが、これは同じインデックスで UV をバインドします。UV にインデックスを付ける方法を示すドキュメントや記事が見つかりません。これを行う方法があると思います。なぜなら、それは人々が便利だと思うようなものだからです。どうすればいいのですか ？

buffergeometry プレーンを作成しようとしていますが、UV 座標に問題があります。正しい UV マッピング Three.jsに従おうとしましたが、正しい結果が得られません。

uvコードは以下です。また、buffergeometry コード全体をhttp://jsfiddle.net/94xaL/に保存しました。

ここで私が間違っていることについてのヒントをいただければ幸いです。

ありがとう！

4 つのエッジがあり、3 次元空間に存在するという点で、湾曲した紙に似た 3D 三角メッシュがあります。エッジは長さが異なり、カーブも異なりますが、理論的には、紙のように見えるように連続的に変形することができます。UV 座標はすべての頂点に割り当てられており、u と v の範囲は 0 から 1 です。一部の頂点は明らかに境界線上にあります。下の境界では、u は [0,1] の範囲内にあり、v は 0 です。上の境界の頂点は、[0,1] 内に u があり、v = 1 です。左と右の境界は、u = 0 または u = 1 です (それぞれ) [0,1] 内の v を使用します。

ここで、u = 0.5 の「アイソカーブ」について考えてみましょう。これは、サーフェスの「中央」の下から上までの「線」(または線分の集合?) になります。それを見つけるにはどうすればよいですか？

または、UV 座標 (0.2,0.7) に対応する 3D 座標を見つけたいとしましょう。どうすればそこに着くことができますか？

レンダラー (OpenGL など) を介してデータを配置することでこれを実装したくありません。きっと標準的な方法があるはずです。テクスチャ マッピング関数の逆のような感じです。

JPEG テクスチャ マップを球体に配置したいと考えています。私にはうまくいきますが、テクスチャを180度回転させたいです。つまり、画像をゼロの UV 座標からではなく、より早く開始したいのです。

アップデート

球のテクスチャ座標を再割り当てしようとしました。テクスチャ座標は float であり、[0..1] の範囲に制限されないことを望んでいました。それ以外の場合は、画像を [0..1 x 0..1] の領域に配置する必要があります。

それは後者のようなことをしましたが、正確ではありません:

つまり、画像全体が球の小さな領域に入れられました。しかし、それが配置されているこの正確な領域は、 の負の値に対応していますU。つまり、同じ経度にあり、以前の実験で画像の余白があった場所 (上の球体) です。

なんで？

画像はこちら: https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

コードは次のとおりです。

directx 11 を使用して、ジオメトリ シェーダーを使用してワールド空間でクワッドを構築するグラフィックス エフェクト システムに取り組んでいます。これらのクワッドは、メイン テクスチャがレンダリングされたシーン テクスチャであるフラグメント シェーダを使用します。qorld スペース クワッドでポスト プロセス エフェクトを効果的に生成します。最も単純なものは色合い効果です。

頂点シェーダーは、データをジオメトリ シェーダーに渡すだけです。

ジオメトリ シェーダーは、法線に基づいて追加の頂点を計算します。外積を使用して、x 軸と z 軸を見つけ、元の位置から各対角線方向に 4 つの新しい頂点を持つトライストリームを追加します (指定された位置とサイズからクワッドを生成します)。

ピクセル シェーダー (ティント効果) は、シーン テクスチャの色に色変数セットを乗算するだけです。

クワッドが生成され、画面に正しく表示されます。でも;

私が直面している問題は、UV 座標のマッピングがバック バッファーの画像と一致しないことです。つまり、指定された色としてハーフ アルファのティント シェーダーを使用すると、クワッドがカメラの方を向いていない限り、クワッドに表示された画像がバック バッファーの画像に完全にオーバーレイされないことがわかります。四角形の法線がカメラの y 軸と一致するほど、画像の歪みが大きくなります。

現在、以下の式を使用して UV 座標を計算しています。

以下の式も使用しましたが、その結果、(IMO) uv が考慮に入れられませんでした。

質問: ジオメトリ シェーダーで生成された頂点位置に基づいてスクリーン スペースの UV 座標を取得するにはどうすればよいですか?

もし私にどんな点でも詳しく説明してほしいなら、尋ねてください、そして私は最善を尽くします:)

前もって感謝します。

押し出されたジオメトリの表面にテクスチャを使用したいと考えています。私はカスタム UVgenerators をしばらく研究しており、これらの関連する質問を見つけました: 1.) THREE.ExtrudeGeometry にテクスチャを適用する方法は? 2.)読み込まれたテクスチャがぼやけて見える、または単色のように見える。食感をカリッとシャープにする方法

ただし、ジオメトリ ポイントを 1000 で割る方法が提案されてmesh.scale.set(1000,1000,1)いますが、ジオメトリが正しい場所にないため、機能しません。UV マッピングを指定したいと思います。1 つの答えは、ソース コードに基づいてカスタム uvgenerator を実装すると言っていますが、私は立ち往生しており、何をすべきかわかりません。

これは私のジオメトリ作成です。マテリアルは 512x512px です。テクスチャを上部にマップするにはどうすればよいですか?:

Blender から .obj ファイルをエクスポートしたい。法線と UV 座標でエクスポートします。次に、それらを OpenGl アプリケーションにインポートします。UV エディタでは、正規化されたカーソルの座標を表示できます。私の問題は、OpenGLがそれらをそのように必要とするため、それらを正規化してエクスポートする必要があることです。これを行う可能性はありますか、それとも手動で変換するアプリケーションを作成する必要がありますか?

私は THREE.js で SDF フォントを使用しようとしています。それらには、文字の PNG マップと、各文字 x オフセット、y オフセット、幅、高さなどの文字データが付属しています。

各キャラクターのオフセットと幅などを含むキャラクター データを使用する前に、three.js/examples のサンプル UV テクスチャの 1 つの一部だけをマッピングしてみました。

JSFiddle: http://jsfiddle.net/b2zegeht/3/

したがって、上の画像はクワッドにレンダリングされており、ループ内の次のコードを使用しています。

クワッドにテクスチャの一部を表示するには、UV 座標を調整する必要があると仮定します。問題は、それらのいくつかは私の期待どおりに動作し、一部はそうではないことです。たとえば、テクスチャを 3 つずつ移動すると、0.3 から 1 の範囲で表示され、期待どおりに動作します。

次に、クワッドの上部の 2 つのコーナーを 2 つ下げて 0.8 にします。

しかし、これは機能しません。実際には U/X 座標に影響を与え、テクスチャの上半分を左にシフトしたようです。faceVertexUvs は、X、Y 座標と同じプロパティを示すようには見えません。ここで何が欠けているのか説明できますか? また、0.7、0.7 のような 1 つの正方形を表示するにはどうすればよいでしょうか。

これを理解したら、次のようなテクスチャからクワッドに文字をレンダリングできます。

私は現在、API の使用方法を学習する試みとして、OpenGL で小さなゲームを作成しようとしています。単純なシーンでカメラを動かし、モデルをレンダリングして単純な phong モデル シェーダーでシェーディングできるようになりました。

私は今、シーン内のモデルのテクスチャリングに取り組んでいるので、Maya のコピーを入手し、(かなり苦労して) Maya 内で作成された UV マッピングを使用してテクスチャを持つ正方形を作成しました。

シーンをレンダリングすると、テクスチャが適用されますが、正しくありません。モデルは、自分で作成したパーサーを使用して .obj ファイルとして読み取ります。テクスチャは、しばらく前にオンラインで見つけた機能を使用して読み取られます。

問題を十分に詳細に説明する方法も、コードで何を探すべきかもわかりませんが、問題が含まれていると思われるコードの一部を次に示します。

テクスチャを読む

メッシュをレンダリングする前にテクスチャを設定する

頂点シェーダー

フラグメントシェーダー

いくつかのことが奇妙に書かれていることは知っていますが、この時点で、それを機能させるためにあらゆることを試み始めています.

この奇妙な UV マッピングを解決する方法について誰か提案がありますか?

編集：

オブジェクトの読み込み

obj ローダーにすべての頂点属性を出力させ、これらを .obj ファイルのインデックスと比較しました。verecies、法線、UV が正しい順序で表示されているように見えます。

スクリーンショット

シーンは、単純な reg から緑へのグラデーションをテクスチャ イメージとして使用すると、次のようになります。

（私の理解では、正方形はテクスチャからのグラデーションを表示する必要がありますか？単色だけではありません）

アライメントは欠陥の可能性があるように聞こえますが、これを修正するにはどうすればよいですか?

http://imageshack.com/a/img674/9927/y0bJ51.png

解決

私は非常に単純で見落としやすい間違いを犯しました。私が書いた頂点シェーダーの上部に

したがって、法線データを場所 1 に送信したときに、テクスチャ座標を法線データに設定したため、UV 座標がフラグメント シェーダーに到達しなかったと思います。

以下に変更すると、それ以上変更せずに問題が解決しました。