Three.jsとReact Three FiberにおけるVisual Effects (VFX)の章へようこそ。この章では、3Dシーンを生き生きとさせる驚くべきビジュアルエフェクトを作成する方法を学びます。

私の目標は、VFXを始める手助けをし、あなた自身のエフェクトを作成するためのインスピレーションを与えることです。私は無数の時間を費やして異なるリソースを参照したり、実験したりして、数週間または数ヶ月かかったであろうことを数時間で学べるように最適なアプローチを探し続けました。

一緒に構築するTSL GPGPUプロジェクトのプレビュー。

VFXの芸術

VFXはVisual Effectsの略です。それは、映画、ビデオゲーム、あるいは私たちの3Dウェブ体験の視覚体験を向上させるためのエフェクトを作成する芸術です。

VFXは爆発、火、水、煙などのリアリスティックなエフェクトを作成するために使われたり、魔法の呪文やテレポーテーションなどの幻想的なエフェクトを作成するために使われたりします。

私たちのコンテキストでは、ゲームを制作していなくても、VFXはプロジェクトにちょっとしたエクストラタッチを加えるために使うことができます。より没入感のあるエクスペリエンスを創り出したり、シーンをより魅力的にしたり、より洗練された見た目を作り出すために使用できます。究極的には、よりプロフェッショナルで視覚的に魅力的なプロジェクトを構築することができます。

例えば、あなたのプロジェクトにドラッグ＆ドロップの機能があるとしましょう。ユーザーがアイテムをドロップしたときやアイテムをドラッグしている間にパーティクルエフェクトを追加することができます。これにより、インタラクションがより魅力的で楽しいものになります。

VFXの世界に入ることで、ビデオゲームや映画を見る目が変わる準備をしてください。スクリーン上で見ているものを作り出すために使用されているエフェクトに気づき始めることでしょう。

複数のタイプのエフェクトの構成

エフェクトは1つ以上の要素で構成されています。これらの要素には、パーティクル、シェーダー、テクスチャ、メッシュ、トレイルなどがあります。これらの要素を組み合わせることで、複雑で美しいエフェクトを作成することができます。

次のレッスンでは、Three.jsとReact Three Fiberを使ってこれらの要素を個々に作成する方法を学びます。しかし、まずはそれぞれの要素を見ていきましょう。

パーティクル

パーティクルは、特定のポイント（ソース）から放出される小さな要素です。これらは火、風、雨、雪、魔法の呪文などの効果を作り出すために使用できます。

パーティクルの数やサイズ、テクスチャ、色、速度、ライフタイムなどのプロパティを操作することで、無限のエフェクトを作り出すことができます。

パーティクルはスプライト（カメラに向いたままの2D画像）や3Dオブジェクトとして使用可能です。

花火のレッスンのプレビュー。

メッシュ/ジオメトリ

パーティクルをポイントやスプライトとして考えることが多いですが、メッシュもエフェクトを作成するのに使用できるという点は重要です。例えば、地面から出てくる岩や、開くポータルなどです。

ジオメトリやマテリアル、シェーダーを操作することで、目立つユニークな効果を作り出すことができます。

一緒に作成するウィザードゲームでは、地面からの氷の破片が全体的な効果にどのように寄与しているかを見ることができます。

トレイル

トレイルは、オブジェクトの後ろに線を作り出す種類のエフェクトです。これらは彗星、レーザービーム、風などの効果を作成するために使用できます。

動きの印象を与え、速度や方向感を出すために使用できます。

トレイルを作成するには、パーティクルやメッシュ（ラインやチューブなど）を使用できます。次のレッスンで両方の方法を学びます。

私たちは彗星の効果やそれ以上のものを作成するためにトレイルを使って遊んでいきます。

Shaders/Textures

専用の章でシェーダーについては既に学びました。VFXの文脈では、シェーダーはパーティクル、メッシュ、シーン全体に適用して、それらを動かしたり、色を変化させたり、歪ませたりなどと、さまざまな効果を生み出すことができます。唯一の制限は想像力です。

シェーダーとテクスチャを組み合わせることで、さらに複雑な効果を作り出すことができます。テクスチャは、ノイズ、パターン、画像など、エフェクトにディテールを追加するために使用できます。

SFX

SFXはサウンドエフェクトの略で、VFXに直接関係ないように見えますが、重要な要素の一つです。サウンドエフェクトをVFXに追加し、視覚効果と同期させることで、より没入感のある一貫した体験を作成できます。

このコースではサウンドエフェクトの作り方を学びませんが、3D空間で空間化された音を再生する興味深い技術を学びます。

CPU vs GPU

特にウェブのような制限された環境でVFXを作成する際は、効果のパフォーマンスに注意を払うことが重要です。

VFXを作成する際には、可能な限り多くの作業をGPUにオフロードしたいと考えます。つまり、シェーダーやテクスチャその他のGPU加速技術を使用して効果を作成するということです。

少数のパーティクルなど単純な効果の場合はCPUを使用することができます。しかし、何千ものパーティクルのような複雑な効果の場合はGPUを使用したいです。

このコースでは、CPUとGPUの両方の技術を学びますが、できる限りGPUの技術に焦点を当てます。これにより、多くのデバイスでエフェクトがスムーズに実行されることを保証します。

簡単に複雑な効果を作成できる簡易的なGPU VFXエンジンを作成します。また、素敵なGPGPUプロジェクトを通してTSLと共にWebGPUを発見します。

さらに進む

VFXは広大な分野であり、今回のコースで扱わない技術や効果がたくさんあります。しかし、基本を学ぶことで、さまざまな効果を作成できるようになるでしょう。

リソース

Three.jsのエコシステムはVFXにおいては限られているものの、ゲーム開発における多くのリソースがThree.jsに応用可能です。Unity、Unreal、GodotはVFXについてさらに学ぶための素晴らしいエンジンです。

異なるリソースを相互参照することは、常に学ぶための素晴らしい方法です。以下は、学習の開始に役立つリソースです:

• Gabriel AguiarのYouTubeチャンネルは、Unityおよび現在はGodotでのVFXについて優れたチュートリアルを提供しています。また、UdemyのVisual Effects for Games in Unity - Beginner To Intermediateという彼のコースもお勧めです。

• BrackeysのYouTubeチャンネルは、Unity（そして長い休止期間後にはGodot）でのVFXに関する優れたチュートリアルを提供しています。

• Coreb Gamesは、前述のものと同様ですが、Unreal Engineを使用したチュートリアルを提供しています。

• VFX Apprenticeは、VFXとその原則に関する多くの動画を含んだYouTubeチャンネルまたはウェブサイトです。

これらのチュートリアルで見た効果をThree.jsとReact Three Fiberで再現してみてください。そうすることで多くを学ぶことができます。

ArtStationやPinterestもインスピレーションを得るための素晴らしい場所です。

ライブラリ

残念ながら、Three.jsにはUnityやUnrealのような組み込みのVFXエンジンはありませんが、Three.jsでVFXを作成するのに役立ついくつかのライブラリがあります：

• Quarks VFXは、Three.js用の最も先進的なVFXライブラリです。UnityのShuriken実装に基づいており、UnityのVFXをThree.jsにインポートすることができます。有料のライブラリですが、プロジェクトのニーズに応じて多くの時間を節約できます。
• VFX Composer Suiteは、Hendrik MansによるThree.jsでVFXを作成するための優れたライブラリです。無料でオープンソースですが、Quarks VFXほどは維持されていません。
• Wawa VFXは、このコースで一緒に作成したライブラリです。簡単に複雑な効果を作成できるシンプルなVFXエンジンです。無料でオープンソースで、将来的にはTSLに変換する予定です。是非貢献してください。

結論

VFXの世界に飛び込むことに興奮していることを願っています。この章で得る知識をもとに、どんなものを作り上げるのか、楽しみにしています。