RainDropEffectDesc
RainDropEffectDescクラスは、画面に雨粒の屈折効果を適用するDescriptorです。雨粒が画面を流れ落ちるアニメーション効果を生成します。
Properties
Section titled “Properties”visible
Section titled “visible”Type: boolean | undefined
Description: エフェクトの表示/非表示を制御します。
Default: true
opacity
Section titled “opacity”Type: number | undefined
Description: シェーダー実行後に適用される不透明度を指定します。エフェクトのブレンドに便利です。
Default: 1
Example:
{ rainDrop: { opacity: 0.8, }}dropGridSize
Section titled “dropGridSize”Type: number | undefined
Description: 雨粒を配置するために使用されるUVグリッドのサイズを指定します。大きい値ほど小さなセルになります。
Default: 12
Example:
{ rainDrop: { dropGridSize: 15, }}dropDensity
Section titled “dropDensity”Type: number | undefined
Description: 雨粒の生成数を制御するシェーダー内の乗数を指定します。
Default: 1
Example:
{ rainDrop: { dropDensity: 1.5, }}dropLayers
Section titled “dropLayers”Type: number | undefined
Description: シミュレートされるアクティブなレイヤー数を指定します。高い値は小さな雨粒を追加しますが、コストが増えます。
Default: 4
Example:
{ rainDrop: { dropLayers: 3, }}dropSizeFactor
Section titled “dropSizeFactor”Type: number | undefined
Description: グリッドサイズをスケールして雨粒がどれだけ密に詰まっているかを制御します。
Default: 0.015
Example:
{ rainDrop: { dropSizeFactor: 0.02, }}noiseScale
Section titled “noiseScale”Type: number | undefined
Description: ジッターと屈折の揺らぎを駆動するノイズをスケールします。
Default: 200
Example:
{ rainDrop: { noiseScale: 250, }}refractionStrength
Section titled “refractionStrength”Type: number | undefined
Description: 屈折によって引き起こされるUV歪みの強度を指定します。
Default: 0.3
Example:
{ rainDrop: { refractionStrength: 0.5, }}minDropStrength
Section titled “minDropStrength”Type: number | undefined
Description: 雨粒をレンダリングする前に必要な最小強度を指定します。
Default: 0.01
Example:
{ rainDrop: { minDropStrength: 0.02, }}dropFadeStart
Section titled “dropFadeStart”Type: number | undefined
Description: 雨粒の表示のスムーズなフェードウィンドウの開始を指定します。
Default: 0.3
Example:
{ rainDrop: { dropFadeStart: 0.4, }}dropFadeEnd
Section titled “dropFadeEnd”Type: number | undefined
Description: 雨粒の表示のスムーズなフェードウィンドウの終了を指定します。
Default: 0.8
Example:
{ rainDrop: { dropFadeEnd: 0.9, }}dropThresholdFactor
Section titled “dropThresholdFactor”Type: number | undefined
Description: 生成確率を制御するベース閾値係数を指定します。
Default: 0.08
Example:
{ rainDrop: { dropThresholdFactor: 0.1, }}gridDensityLow
Section titled “gridDensityLow”Type: number | undefined
Description: 密度が低い時に適用される調整を指定します。
Default: 1.15
Example:
{ rainDrop: { gridDensityLow: 1.2, }}gridDensityHigh
Section titled “gridDensityHigh”Type: number | undefined
Description: 密度が高い時に適用される調整を指定します。
Default: 0.85
Example:
{ rainDrop: { gridDensityHigh: 0.9, }}jitterStrengthLow
Section titled “jitterStrengthLow”Type: number | undefined
Description: まばらな雨粒の最大ジッターを指定します。
Default: 0.45
Example:
{ rainDrop: { jitterStrengthLow: 0.5, }}jitterStrengthHigh
Section titled “jitterStrengthHigh”Type: number | undefined
Description: 密集した雨粒の最小ジッターを指定します。
Default: 0.08
Example:
{ rainDrop: { jitterStrengthHigh: 0.1, }}Usage Examples
Section titled “Usage Examples”基本的な雨粒エフェクトの追加
Section titled “基本的な雨粒エフェクトの追加”import ThreeView from "@navaramap/three";import { RainDropEffectDesc } from "@navaramap/three-default-descs";import { DefaultPlugin } from "@navaramap/three-default-plugin";
const view = new ThreeView();const plugin = new DefaultPlugin();view.addPlugin(plugin);await view.init();
// アニメーションを有効にする（雨粒が流れるため必須）view.animation = true;
// デフォルトのフォトリアルオブジェクトを追加plugin.addDefaultPhotorealScene();
// 雨粒エフェクトを追加const rainDropDesc = view.addEffect<RainDropEffectDesc>({ rainDrop: { opacity: 0.85, dropGridSize: 14, dropDensity: 0.8, dropLayers: 3, refractionStrength: 0.3, }, visible: true,});このエフェクトはallowDuplicationがtrueに設定されているため、複数のRainDropEffectDescインスタンスを作成できます。時間とともにアニメーションする雨粒エフェクトを提供します。アニメーションを有効にするためにview.animation = trueを設定する必要があります。