パーティクル

Three.jsにおけるパーティクルシステム

パーティクルのデフォルトの形状は四角形
パーティクルを主に二種類の方法で四角形から加工することが可能
パーティクルを常にカメラ方向に向けるには特殊な設定が必要

1.GPUを使うシェーダーコードを利用してパーティクルの外周を透明化し丸い形に見せる。アルファカットという 2.テクスチャを張り付けて円形に見せる

アルファカット

パーティクルシステムにglslを使って円形にアルファカットするアルファカットが簡単かも

テクスチャーが設定されない場合には、ポイントマテリアル(PointsMaterial)にのみ依存する

頂点シェーダー:

モデルの各頂点ごとに個別に実行される。
頂点数が100個あれば、シェーダーは各頂点に対して並列に処理を行う。

フラグメントシェーダー:

各ピクセル（フラグメント）ごとに個別に実行される。
描画対象の解像度が1920x1080であれば、約200万個のフラグメントごとに処理が並列に行われる GPUは「大量のデータ（頂点やピクセル）」を同時に処理するために設計されています。すべての頂点やピクセルは「独立したタスク」として扱われ、それぞれにシェーダーコードが適用されます。

void main() {
    vec2 coord = gl_PointCoord * 2.0 - 1.0;
    if (length(coord) > 1.0) {
        discard; // 四角形の外周をカットして丸にする
    }
}

gl_PointCoord gl_PointCoordは、パーティクルシステム（THREE.Points）を描画する際に自動的に有効になる組み込み変数 gl_PointCoordはパーティクルシステム（ポイント）描画専用の変数です。メッシュ（THREE.Mesh）やスプライト（THREE.Sprite）では利用できない値の範囲は[0.0, 1.0]で、テクスチャ内の2次元位置を表します。メッシュやスプライトを使う場合、gl_PointCoordは利用できないため、代わりにUVマッピングやカスタム計算を使って座標を取得し、同様の処理を行う必要があります。 gl_PointCoordに基づき、四角形の外周を透明化（discard）する処理が、このコードの核心部分です。

vec2 coordは中心（(0, 0)）からの相対座標

パーティクルシステムの円形処理と色を白色を基本に若干の灰色のノイズを加えたコード

precision highp float;


// ユーザー指定のuniform
uniform float time; // 時間によるノイズの変化
uniform vec2 resolution; // 解像度

float random(vec2 st) { // GLSLノイズ関数
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

void main() {
    // パーティクルシステム内の位置を取得
    vec2 coord = gl_PointCoord * 2.0 - 1.0; // [-1, 1] の範囲に正規化
    float dist = length(coord); // 中心からの距離
    // 円形外の破棄
    if (dist > 1.0) {
        discard; // 四角形の外周をカット
    }
    // ノイズ生成
    float noise = random(coord + time); // 時間で変化するノイズ

    // 基本色（白色）とノイズによるグレーの混合
    vec3 baseColor = vec3(1.0); // 白色
    vec3 grayNoise = vec3(0.9) * noise; // ノイズで灰色を追加
    vec3 finalColor = mix(baseColor, grayNoise, 0.2); // 白色にノイズを20%加える
    // フラグメントカラーの設定
    gl_FragColor = vec4(finalColor, 1.0); // 完全不透明
}

ポイントサイズ（gl_PointSize）頂点シェーダーで gl_PointSize を設定することにより、パーティクルシステムの各ポイントのサイズを制御します。他の描画プリミティブ（例: 三角形メッシュ）ではこの変数は無効です。