2D惑星テクスチャの3Dイリュージョン


10

数年前、私はユーザーに2Dテクスチャを使用して回転する惑星のような錯覚を与えるテクニックを耳にしました。ユーザーがその位置やビューポートを変更できないと仮定します。

このテクニックの名前は何ですか?

回答:


25

わかりました。今担当者がいます。画像が埋め込まれた以前の投稿の内容。これはあなたが探している回転惑星効果ですか?スターフィールドの半透明の「穴」から見た単純なスクロール2D画像。

効果がどのように見えるかを簡単にアニメーション化したgifをまとめました。明らかに、アニメーションをよりスムーズにアニメーション化できます。惑星の表面をフレームごとに4ピクセルシフトしました。また、画像をラップするように設定されていないため、ループの最後にグリッチがあります。

惑星http://www.perludus.com/orbit.gif

これはすべてPhotoshopで行いましたが、コンセプトはアルファ透明度などを実行できる2Dレンダリング環境で機能するはずです。ここでは、プロセスを示す一連のスクリーンショットを示します...

  1. 空の星の背景を作成し、そこに丸い穴を切ります。
    代替テキスト
  2. このような、あなたの惑星のためのグレースケールの陰影付きの球を見つけてください
    代替テキスト
  3. これは、穴が開いた星で、影付きの球が上にあり、半透明です
    代替テキスト
  4. 青い円を穴のサイズにして、外側に青い輝きを与えます。また、半透明に設定します。シェーディングされた球での様子は次のとおりです
    代替テキスト
  5. 次に、惑星の表面テクスチャを見つけます。私はこれが「惑星表面の質感」をグーグルするのを見つけました
    代替テキスト
  6. 星の画像の下に半透明の穴がある惑星のテクスチャを配置して、この外観を作成します
    代替テキスト

惑星の表面をアニメーション化するには、下にある惑星の表面テクスチャを移動します。テクスチャがエッジに達したときにテクスチャをシフトして、シームレスで無限の回転を得るには、賢い方法が必要です。

これが役立ち、あなたが探していた効果であることを願っています!

PS惑星のテクスチャを作成するためのかなり斬新な方法でアーティストについてこの記事を見ました-私にこの答えを考えさせました:) http://www.behance.net/gallery/Pan-Planets/9557465


np Henrik。私はあなたの投稿を見てすぐに、「この男の意味がわかっているに違いない」と思った。100%確信はありませんが、これはオリジナルのスタートレックのテレビ番組で回転惑星効果が行われた方法だと思います。
Tim Holt

これは素晴らしい答えでした。私が持っているゲームプロジェクトのアイデアを教えてくれます。次にStarcraft 2をロードするときは、これがどのように行われるかを確認する必要があります=)
Bryan Harrington

素晴らしい答え、素晴らしいスクリーンショット!
エラー454

あなたのイメージは死にました。あなたはそれを修正できると思いますか?
Mithical 2017年

3

私はあなたが何を意味するのかを推測し、そこにアイデアを投げるつもりですが、それが確かにそれを行うための「有名な」方法ではないでしょう。

すべて2Dで

2つのテクスチャを取得します。1つはあなたの陸塊、もう1つはあなたの雲です。雲には、「透けて見える」ように一致するアルファレイヤーが必要です。

テクスチャをタイル可能にします。つまり、シームレスにラップします。これらを作成するのに役立つプログラムや、フォローできるフォトショップのチュートリアルがあります。

最後に、円形のステンシルマスクを作成します。これにより、正方形のテクスチャにある丸い穴を通して実際に見ているので、角が見えなくなります。

次に、土地と雲のテクスチャのテクスチャマトリックスをアニメーション化して、それらを動かします。それらを異なる方向と速度で移動させると、回転しているように見えます。それはすべて、テクスチャをどの程度シームレスに作成したかに依存します。


2

この記事ではその手法について説明していると思います。(ロシア語なので、翻訳したリンクを投稿します。)

https://translate.googleusercontent.com/translate_c?depth=1&hl=en&rurl=translate.google.com&sl=auto&sp=nmt4&tl=en&u=https://habrahabr.ru/post/248381/&usg=ALkJrhgViuYdAi-Vav3cyhxvydkaBKh6E

ここに実装しました。http://github.com/meric/renderplanet

基本的には、正射影をエンコードした画像(http://mathworld.wolfram.com/OrthographicProjection.html)を取り、シェーダーを使用して惑星と雲のテクスチャーをラップします。惑星テクスチャをdtに従ってオフセットして回転させます。準備された半透明のイメージを大気圏リングとシャドウに使用するか、半透明のアークを描画してシャドウのシェーダーを試して生成します。

これが画像です:

正射図法

円内の各ピクセルは、Red + Green/255ルックアップするプラネット/クラウドテクスチャの正規化されたX座標でBlue + Alpha/255あり、正規化されたY座標です。

結果は次のとおりです。

サンプル

惑星と雲のテクスチャは、正距円筒図法である必要があります。


1

作業しているコンテキストの制限についての質問は不明確です。3Dレンダリングのテクスチャの大部分は2Dです。したがって、2D表面テクスチャがマッピングされた3D球体を表示しているだけの場合、これは実際には問題ではありません。3Dレンダリングを使用できない場合は、何を使用できるかを正確に言う必要があります。

基本的な問題は、球の表面上にフラットテクスチャをレンダリングする必要があることです。これは、3Dレンダリングで無料で取得できます。惑星が回転すると、惑星の表面の可視部分が非線形にアニメーション化されます(テクスチャの赤道部分は極よりも速く移動します)。したがって、ディスク上にマップするときにイメージを自分で変形する必要があるか、VirtualVoidが提案するようにして、時間の経過とともに変化する複数のイメージを保持する必要があると思います。

実装するのは恐ろしいことですが、テクスチャをピクセルごとにレンダリングできる場合は、基本的に、球の各ラインのラスター化計算を個別に行うことができます。赤道に512pxの画像があるように、表面マップテクスチャが平坦化されていると仮定しましょう。また、表示されるディスクの幅が256ピクセルであるとします。ここで、レンダリングされたディスクの各ラインを、表面テクスチャ上のスライドウィンドウとして考えます。赤道では、ウィンドウはテクスチャの幅の50%であり、256pxのそれぞれをディスク上の同等のピクセルにコピーするだけです。ディスクの下の次の行は256ピクセルより少し小さくなりますが、表面マップが歪んでいるため、256ピクセルの入力表面マップデータが残っています。したがって、入力サーフェスマップデータをサブサンプリングし、結果のピクセルをレンダリングします。簡単な計算のために、みましょう ■赤道と極の間の3分の1の幅が出力ディスクで128pxであると想定しています。したがって、これらの128pxのそれぞれは、2つの隣接するピクセルの平均になります。極点に到達すると、256pxのすべてを平均して数個の出力ピクセルのみになります。

別の方法で行うこともでき、ソーステクスチャのラインの長さを変えることができます。したがって、ソースデータを含むラインには512pxがありますが、1/3のラインには256pxしかなく、下部のラインには数ピクセルしかありません。ただし、各線は、同等のy座標でディスクの幅の2倍です。しかし、そのようなテクスチャは作成しなければならないことは絶対に恐ろしいことです。そして恐らく恐ろしいエイリアシング問題に苦しむでしょう。

どちらの場合も、アニメーションは入力テクスチャの開始ピクセルxをインクリメントし、入力テクスチャラインの開始位置に折り返します。

今これについて書くほど、それは恐ろしい考えであり、本当に他に選択肢がまったくない場合にのみ実装することを確信します。そして、あなたは他に選択肢がないために非常に珍しい状況にならなければなりません。

特定の名前付きの手法として、この(漠然とした)問題の解決策について聞いたことがないと思います。


0

スプライト。あなたが説明しているのは、安価にレンダリングするための3Dゲームエンジンの2Dスプライトのようです(Nintendo64は、多くの初期の3Dエンジンがそうであったように、あらゆる場所でこれを行いました)。

回転する惑星をレンダリングしたい場合は、事前にレンダリングされた惑星の回転であるスプライトシートに基づいてアニメーション化された2Dスプライトを表示する必要があります。ちょうど、例えば、アニメーション化された.GIFです。問題は、それが事前にレンダリングされることです。そのため、あなたが言ったように、これはユーザーが視野角を操作することを許可されていない場合にのみ機能します。

http://en.wikipedia.org/wiki/Sprite_(computer_graphics


0

これは、複数のフレームを持つ1つのテクスチャを使用した単純なアニメーションの場合があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.