THREE.JS入門チュートリアル(4)パーティクルシステムの作成_基礎知識

翻訳
Three.js は、優れたオープンソース WebGL ライブラリです。WebGL を使用すると、JavaScript が GPU を操作してブラウザ側で真の 3D を実現できます。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。
0. はじめに
こんにちは、またお会いしました。そこで、Three.js の学習を開始しました。前の 3 つのチュートリアルをまだ読んでいない場合は、最初に読むことをお勧めします。これまでのチュートリアルを読んだことがあれば、パーティクルを使って何かをしたいと思うかもしれません。正直に言うと、誰もがパーティクル エフェクトが大好きです。知っていても知らなくても、簡単に作成できます。
1. パーティクル システムを作成します
Three.js は、パーティクル システムを基本ジオメトリとして扱います。これは、形状、位置、スケール係数、回転属性を備えた基本ジオメトリに似ているためです。パーティクル システムは、ジオメトリ オブジェクト内の各ポイントを個別のパーティクルとして扱います。なぜこれを行うのでしょうか?これは次の理由によると思います。まず、パーティクル システム全体を描画するために、特定の描画関数を何千回も呼び出す必要がなく、一度呼び出すだけで済みます。次に、これにより、すべての描画関数に影響を与えるいくつかのグローバル パラメータを設定できるようになります。パーティクル システムのコンポーネント。

パーティクル システムがオブジェクト全体として扱われる場合でも、各パーティクルに個別に色を付けることができます。これは、パーティクル システムを描画するプロセス中に、Three.js が属性変数 color を通じてシェーダに渡すためです。各頂点の色。このチュートリアルではこれを行うつもりはありません。これがどのように行われるかを知りたい場合は、GitHub にアクセスして Three.js の例を参照してください。

パーティクル システムには、注意が必要な特別な効果がある場合があります。Three.js は、初めてレンダリングされるときにパーティクル システムのデータをキャッシュします。その後、システム内のデータを増減することはできません。 。 粒子。パーティクルを表示したくない場合は、その色のアルファ値を 0 に設定できますが、削除することはできません。したがって、パーティクル システムを作成するときは、表示する必要があるすべてのパーティクルを考慮する必要があります。
パーティクル システムの作成を開始するには、これだけが必要です:

コードをコピーしますコードは次のとおりです:

// パーティクル ジオメトリを作成します。
vararticleCount = 1800、
particles = new THREE.Geometry()、
pmaterial =
new THREE。 ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20
});
// 個々のパーティクルを順番に作成します
for(var p = 0; p // パーティクルの範囲 -250 ～ 250 の間
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math. random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
)// パーティクル ジオメトリにパーティクルを追加します
columns.vertices.push (particle);
}
// パーティクル システムを作成します
vararticleSystem =
new THREE.ParticleSystem(
particles,
pmaterial); / パーティクル システム シーンを追加します。
scene.addChild(particleSystem);

を実行すると、1 のパーティクルがすべて正方形であることがわかります。 >2. パーティクルはすべて四角です じっとしてください一つ一つ修正していきます。

2. スタイル

パーティクルの基本マテリアルを作成するときに色とサイズを渡しました。私たちがやりたいことは、テクスチャ イメージを渡してパーティクルを表示することで、パーティクルの外観を適切に制御できるようにすることです。 パーティクルが正方形に描画されていることがわかります。そのため、正方形のテクスチャ イメージも使用する必要があります。見栄えを良くするために、加算ブレンドも使用しますが、これにより、テクスチャ イメージの背景が黒くなり、透明になりません。私が理解している理由は、添加剤のブレンドと透明なマテリアルの間に互換性がないからです。しかし、それは問題ではありません、最終的には素晴らしく見えるでしょう。

パーティクルの基本マテリアルとパーティクル システムを更新し、追加的に混合された透明なパーティクルを追加しましょう。必要に応じて、私の粒子の写真を使用することもできます。

コードをコピー コードは次のとおりです: // パーティクルの基本マテリアルを作成します

var pMaterial =

new THREE.ParticleBasicmaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});
// 希望する効果を達成するためにパーティクル システムがパーティクルをソートできるようにします
particleSystem.sortParticles = true;


これはすでにかなり良くなってきています。ここで、少し物理学を導入して粒子を動かしましょう。
3. 物理学の紹介
デフォルトでは、パーティクル システムは 3 次元空間で移動しません。これは良いことです。しかし、私はそれらを動かし、パーティクル システムも次のように動かしたいと考えています。つまり、パーティクルを y 軸の周りで回転させます。各軸上のパーティクルの範囲は -250 ～ 250 であるため、y 軸を中心に回転するということは、システムの中心を中心に回転することを意味します。

また、シェーダーに関する前回のチュートリアルで行ったのと同様に、フレーム ループ コードがすでにどこかにあることも前提としています。したがって、ここではこれを実行するだけです:

コードをコピー コードは次のとおりです:

// フレーム ループ
function update() {
// 少し回転を追加します
particleSystem.rotation.y = 0.01
// パーティクル システムを描画します
renderer.render(scene, Camera);
//次のフレームが更新されたときに更新するように呼び出しを設定します
requestAnimFrame(update)
}

次に、単一のフレームの動きを定義します。粒子 (翻訳者注: 前の回転は粒子システム全体の動きです)。単純な雨粒エフェクトを作成しましょう。これには次の手順が含まれます:
1. 各フレームで、各パーティクルにランダムな重力が割り当てられます。加速度
3. 各フレームで、速度は加速度によって更新され、位置は速度によって更新されます
4. パーティクルが視界の外に移動すると、初期位置と速度をリセットします
大変そうに思えますが、しかし実際には、書くのに必要なコードはほとんどありません。まず、パーティクルを作成するプロセスで、各パーティクルに水平方向の速度を追加します。

コードをコピーします コードは次のとおりです。 :

// 各パーティクルの水平運動速度を作成します
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y: 乱数
0); // z

次に、各パーティクルをフレームバッファに渡し、パーティクルが画面の下部から出て必要なときにリセットします。位置と速度をリセットします。

コードをコピー コードは次のとおりです:

// フレーム ループ
関数の更新() {
// 回転量を増やします
particleSystem.rotation.y = 0.01;
var pCount =articleCount;
while(pCount--) {
// 単一の値を取得しますパーティクル
varparticle =articles.vertices[pCount];
// リセットが必要かどうかを確認します
if(particle.position.y particle.position.y = 200 ;
particle.velocity.y = 0;
}
// 水平速度成分を乱数で更新し、速度に従って位置を更新します。 random() * .1;
particle.position.addSelf(
particle.velocity);
}
// パーティクルの位置を変更したことをパーティクル システムに伝えます
particleSystem.geometry。 __dirtyVertices = true;
// Draw
renderer.render(scene, Camera);
//次の呼び出しを設定します
requestAnimFrame(update); 🎜>十分に衝撃的ではありませんが、この助詞は少なくともその方法を示しています。素晴らしいパーティクル エフェクトを自分で作成して、私に知らせてください。
ここで注意していただきたい警告があります。フレーム ループではやりすぎました。すべてのパーティクルを 1 つのループでループしました。これは実際には非常に大まかなアプローチです。フレーム ループであまりにも多くの作業を行っている場合 (翻訳者注: フレーム ループの js コードは CPU で実行されることに注意してください。一度に何千もの単純なプロセスを発行できる GPU とは異なります)、実際、requestAnimationFrame を使用すると、ビューが 1 秒あたり 60 回更新されます。したがって、コードを最適化し、フレーム ループでの処理をできるだけ少なくすることをお勧めします。

4. 概要

パーティクル エフェクトは素晴らしいもので、誰もが大好きなパーティクル エフェクトです。これで、Three.js でパーティクル エフェクトを追加する方法がわかりました。以前と同様に使いやすいと感じていただけると幸いです。
もう一度、
ソース コード
をダウンロードしてください。気に入った点があれば教えてください。