注： 元の記事にはWebGL2のデモがあり、翻訳ではビデオとGIFに置き換えられます。
私の趣味の1つは、モデルビューアーとゲームのグラフィカルツールを書くことです。 これは、グラフィック、レンダリング、複雑なシステムのリバースエンジニアリング、古いビデオゲームへのノスタルジアなど、興味のあるトピックの適切な組み合わせです。
私は最近、ゼルダの伝説風のタクトとスーパーマリオサンシャインなど、ニンテンドーゲームキューブの一部のゲームのサポートを追加することにより 、 WebGLベースのゲームモデル表示アプリケーションの機能を拡張しました。 GameCubeには、わからない場合、高度でほぼプログラム可能なビデオプロセッサがインストールされていますが、機能は固定されています。 開発者はシェーダーを書くことができず、代わりにglTexEnvパイプラインで使用されているのと同様の方法でテクスチャコンビネーターのセットをプログラムしましたが、最大化しました。 現代のプログラマブルビデオプロセッサに慣れている人にとっては、この手法を使用して複雑な効果を実装できると考えるのはおかしいかもしれません。 それにもかかわらず、2002年にスーパーマリオサンシャインは、当時の見栄えの良い水とともにリリースされました。 実際の動作は次のとおりです。
この効果は、Delfino Plazaのゲームソースファイルからブラウザーに直接読み込まれ、飛行機に配置されます。 実装方法を詳しく見てみましょう。
プレーンのテクスチャリング
信じられないかもしれませんが、この効果は実際にはこれから始まります：
この効果は、非常に古い手法である「テクスチャスクロール」のかなり複雑なバリエーションと考えることができます。 ここで示したよりも少し複雑ですが、基本は同じです。 私たちの飛行機は、このスクロールする波のテクスチャとして私たちの人生を始めます。 次に、同じテクスチャの2番目のレイヤーと結合されますが、今回は1次元でのみスクロールします。
これにより、興味深いモアレパターンが得られます。これは、水が泡立って自然に動くように見えるという事実の基礎です。 2つのテクスチャが出会うと、「幽霊のような」オーバーレイに気付くかもしれません。 このアーティファクトはソースマテリアル上で顕著ですが、意図的に追加された太陽光線または水を通過する光に似ています。 よく考え抜かれたマテリアルデザインでこのようなアーティファクトを隠すことは、ゲームグラフィックス技術の重要な部分です。
明らかに、テクスチャは黒ではありません。 色は白黒ではなく、背景と混ざり合い、より透明な外観になります。
そして、何かが私たちのためにうまくいき始めます。 この段階では、2番目のテクスチャレイヤーが最初のように2回追加されているため、ブルームエフェクトのように特に明るくなります。 この機能は、後で水面のまぶしさを検出するときに役立ちます。
ソース素材に戻ると、はるかに「動的」に見えます。 カメラを動かし、ズームインおよびズームアウトすると、テクスチャが変化しているようです。 近くでは、はっきりと見えており、次第に遠くに消えていきます。 機能が固定された従来のコンベアでは、このタイプの効果は不可能です。 素材はカメラまでの距離を知ることができません！ ただし、この効果を実装するために、任天堂はより伝統的な方法でトリッキーなトリックを実行します。 私が「ミップトリック」と呼んでいるものについて話しましょう。
丸い穴から正方形のミップを構築する
Mipテクスチャリングは、グラフィックスを最適化するための伝統的な手法です。 ビデオプロセッサがテクスチャをオーバーレイするとき、完成した画像を可能な限り滑らかにすると同時に、可能な限り高速にするよう努めています。 ここでサンプリングされたテクスチャは実際にはたった64×64ピクセル（はい、本当です！）で、ブラウザのウィンドウは通常ずっと大きいです。 特に最後のデモでは、カメラを近づけると、ピクセルとそれらがどのように混ざり合って表示され、ディゾルブするかを見ることができます。 ただし、ビデオプロセッサは、 完成した画像の各ピクセルに対してこれらの計算を実行する必要があることを忘れてはなりません。 上から見た場合、この場合、テクスチャは増加しますが、平面が少し圧縮されると角度を見ると、画面上のテクスチャは64×64ピクセルより小さくなります。
これが発生すると、テクスチャが「最小化」され、ビデオプロセッサがより多くのテクスチャピクセルを読み取って、完成した画像を滑らかにする必要があると彼らは言います。 これは、コンピューティングの観点からコストがかかります。ビデオプロセッサは、できるだけ少ないピクセルを読み取ろうとします。 このため、「ミップテクスチャ」が発明されました-各画像の事前に計算された小さなバージョン。 テクスチャを最小化する場合、ビデオプロセッサはフルテクスチャの代わりにこれらのバージョンを使用できます。 したがって、32×32ピクセルと16×16ピクセルのサイズのテクスチャのバージョンがあり、ビデオプロセッサは必要なものを選択するか、2つのバージョンを混合して最高の画像を得ることができます。 Mipテクスチャは、時間とスペースのトレードオフの優れた例であり、アプリケーションのビルドプロセス中のコンテンツの最適化の例でもあります。
しかし、私が言ったように、これはテクスチャが最小化されたときに起こります。 これは、画面上で小さくなったときに発生し、通常、テクスチャがより遠くにあるときに発生します。 私が得ているものを参照してください？ これは、カメラからの距離を取得する方法です。
同じテクスチャーの小さいバージョンを使用する代わりに、異なるテクスチャーを使用するとどうなりますか？ 任天堂も同じ決定を下しました。 これは私が「ミップトリック」と呼んでいるものです。 上で示した波のテクスチャーは、すべてではありません。 実際には、すべてのレベルのミップテクスチャが表示されたフルウェーブテクスチャがあります。
ミップテクスチャの最大レベル（テクスチャがカメラに最も近い場合）では、ピクセルはありません。 本質的に、これはチャンバーの周りの小さな半径の水の影響を取り除き、水をきれいにします。 第一に、これは水の素材の単調感を回避し、第二に、ゲームプレイに役立ち、プレイヤーの隣にいる水中オブジェクトを表示します。 スマートな決定！ ミップテクスチャの2番目のレベルは、まさに現在の瞬間までデモで使用されていたテクスチャであり、「中程度の強度」があります。
ミップテクスチャの3番目のレベルは最も明るく、真ん中の明るいグローのこの「ストリップ」に対応します。 このストリップは、環境の反射をシミュレートするスマートな方法だと思います。 カメラからこの距離では、空のテクスチャの反射であり、たとえば雲のように20度の角度で水に向かって傾いていることが想像できます。 シレーナビーチレベルでは、このストリップの黄色がかった色になっており、夕方の日没に対応する美しい黄色の輝きを与えます。
これらすべてのミップテクスチャをデモにロードしてみましょう。
私たちはすでに望ましい効果にずっと近づいています！
簡単な余談：テクスチャに使用されるミップテクスチャを選択するアルゴリズムはビデオプロセッサでハードコーディングされているため、これは必ずしも移植性がないことを意味します。 GameCubeは640×548の解像度でレンダリングされ、このサイズのミップテクスチャが作成されます。 Dolphinエミュレーターの開発者もこれに気付きました。DolphinはGameCubeコンソールでサポートされている解像度よりも高い解像度でレンダリングできるため、考慮しないとこのトリックが壊れる可能性があります。 幸いなことに、最新のグラフィックスAPIを使用すると、ミップテクスチャを選択するときにオフセットを適用できます。 画面解像度を取得し、GameCubeコンソールの初期解像度640×548の知識があれば、このオフセットを計算してサンプリング時に使用できます。
この問題を解決したら、最後の仕上げをすることができます。 繰り返しますが、信じられないかもしれませんが、最後のデモを完成品にするための手順はあと1つだけです。 単純な関数（アルファテストと呼ばれる）は、最終ピクセルがどれだけ「明るい」かをチェックし、特定の制限内にある場合、ピクセルは完全に破棄されます。 この場合、0.13〜0.92の範囲のすべてのピクセルは完全に破棄されます。
これにより、エフェクトの外側のストリップに「粘着フィルムのグリッター」のユニークな外観が与えられます。 中央では、水は主に明るいピクセルで構成されています。つまり、しきい値を高くすると、最も明るいピクセルのみを照らすことができます。 それは私たちにそのような空の縞とこれらの素晴らしいハイライトを与えます！
忘れられた伝統
プログラマブルシェーダー、PBRパイプライン、膨大なグラフィックバジェットの現代世界では、これらのトリックは忘れられた知識を連想させます。 私の偏った見方では、GameCube時代のゲームはその時代で最も美しいグラフィックを持っています。 GameCubeについてのみ言及しましたが、Wiiは基本的に同じ機器を使用しているため、Mario Galaxyシリーズのゲーム、Super Smash Brosでも同じトリックを見つけることができます。 「ゼルダの伝説スカイワードソード」でも乱闘。 2001年に発明されたビデオプロセッサテクノロジーにより、任天堂がWii Uがリリースされた2012年までずっと進んだことは非常に興味深いことです。
優れた芸術的方向性、膨大な量の創造的なデザイン、および「鉄」の詳細な知識により、このような厳しい制限に直面しても素晴らしい効果を生み出すことができました。 楽しみのために、 デルフィーノホテルレベルのガラスパネルの効果や、 スーパーマリオギャラクシーで使用されている機能強化を試してみてください。
これらの各デモで使用されるコードはオープンソースであり、GitHubに投稿されています 。 明らかに、オリジナルのグラフィックスの作成に関するすべての作業は、任天堂の信じられないほど才能のあるアーティストによって行われました。 さらに、 Dolphinエミュレータチームで働くすべての友人に特別な感謝を伝えます。