見出し画像

ワールドクラフトでポストプロセスをオンオフするアイテム（備忘録　その２）

inaba（イナバ）


こんにちは、こんばんは！イナバです。
メタバースプラットフォーム「cluster」でワールドやアイテムを制作しております。

本日は、前回に引き続きclusterのベータ機能に追加されたポストプロセス機能を試してみました。


ベータ機能に追加されたポストプロセス

ポストプロセス（PostProcess）は画面全体にフィルターや効果を加えることで、見た目のクオリティを上げることができる機能です。
詳しくはクラスターの公式記事をご参照ください！

bloom

bloomを使用すると、emissionが設定されたアイテムを光らせることができます。

//BLOOM
$.onInteract(playerHandle => {
    if ($.state.Open) {
      playerHandle.setPostProcessEffects(null);
      $.state.Open = false;
    } else {
      const effects = new PostProcessEffects();

      effects.bloom.active = true;
      effects.bloom.threshold.setValue(0.5);
      effects.bloom.intensity.setValue(2.0);

      playerHandle.setPostProcessEffects(effects);
      $.state.Open = true;
    }
  });

・intensity：数字が大きいほど眩しくなります。
・threshold：小さいほどBloomの影響を受ける範囲が広がります。
この２つの数字を変更することで、光る感じを微妙に変更することができます。
※上記以外にも設定できる項目はあります。

chromaticAberration

複数の色がズレて重なったような表現をすることができます。

//chromaticAberration
$.onInteract(playerHandle => {
    if ($.state.Open) {
      playerHandle.setPostProcessEffects(null);
      $.state.Open = false;
    } else {
      const effects = new PostProcessEffects();

      effects.chromaticAberration.active = true;
      effects.chromaticAberration.intensity.setValue(1);

      playerHandle.setPostProcessEffects(effects);
      $.state.Open = true;
    }
  });

・intensity：ChromaticAberrationのエフェクトの強さを設定します。 0以上1以下の値を設定できます。

colorGrading

colorGradingは画面の色に関する見え方を変更することができます。
colorGradingは設定できる項目が多岐にわたるのですが、今回はカラーフィルターの設定です。

// colorGrading
$.onInteract(playerHandle => {
    if ($.state.Open) {
      playerHandle.setPostProcessEffects(null);
      $.state.Open = false;
    } else {
      const effects = new PostProcessEffects();
      
      effects.colorGrading.active = true;
      effects.colorGrading.colorFilter.setValue(0, 1, 1, 255);

      playerHandle.setPostProcessEffects(effects);
      $.state.Open = true;
    }
  });

・colorFilter：setValue(r: number, g: number, b: number, a: number)の（）中の数字が左から順に赤、緑、青、透明度を表しています。この数字を変えると、カラーフィルターの色を変えることができます。RGBカラーコードを参考にして数字を入れました。

depthOfField

depthOfFieldは焦点位置やボケを設定できます。

//depthOfField
$.onInteract(playerHandle => {
  if ($.state.Open) {
    playerHandle.setPostProcessEffects(null);
    $.state.Open = false;
  } else {
    const effects = new PostProcessEffects();
    
    effects.depthOfField.active = true;
    effects.depthOfField.aperture.setValue(6);
    effects.depthOfField.focalLength.setValue(50);
    effects.depthOfField.focusDistance.setValue(2);

    playerHandle.setPostProcessEffects(effects);
    $.state.Open = true;
  }
});

・aperture：DepthOfFieldのエフェクトの絞り値を設定します。 0.05以上32以下の値を設定できます。
・focalLength：DepthOfFieldのエフェクトの焦点距離の近接値を設定します。 1以上300以下の値を設定できます。
・focusDistance：DepthOfFieldのエフェクトの焦点距離を設定します。 0.1以上の値を設定できます。

数字を変えることで焦点の位置やボケ具合を調整することができます。

grain

画面全体をざらつかせるような演出が加えられます。

//grain
$.onInteract(playerHandle => {
  if ($.state.Open) {
    playerHandle.setPostProcessEffects(null);
    $.state.Open = false;
  } else {
    const effects = new PostProcessEffects();

    effects.grain.active = true;
    effects.grain.intensity.setValue(0.6);
    effects.grain.luminanceContribution.setValue(0.5);
    effects.grain.size.setValue(10);
        
    playerHandle.setPostProcessEffects(effects);
    $.state.Open = true;
  }
});

・intensity：Grainのエフェクトの強さを設定します。 0以上1以下の値を設定できます。
・luminanceContribution：Grainのエフェクトの輝度を設定します。 0以上1以下の値を設定できます。
・size：Grainのエフェクトのサイズを設定します。 0.3以上3以下の値を設定できます。

lensDistortion

魚眼レンズのような演出を加えることができます。

// lensDistortion
$.onInteract(playerHandle => {
  if ($.state.Open) {
    playerHandle.setPostProcessEffects(null);
    $.state.Open = false;
  } else {
    const effects = new PostProcessEffects();

    effects.lensDistortion.active = true;
    effects.lensDistortion.intensity.setValue(50);
  
    playerHandle.setPostProcessEffects(effects);
    $.state.Open = true;
  }
});

・lensDistortion：LensDistortionのエフェクトの強さを設定します。 -100以上100以下の値を設定できます。

motionBlur

スピード感を感じさせる映像のブレを表現できます。

//motionBlur
$.onInteract(playerHandle => {
  if ($.state.Open) {
    playerHandle.setPostProcessEffects(null);
    $.state.Open = false;
  } else {
    const effects = new PostProcessEffects();

    effects.motionBlur.active = true;
    effects.motionBlur.sampleCount.setValue(16);
    effects.motionBlur.shutterAngle.setValue(180);

    playerHandle.setPostProcessEffects(effects);
    $.state.Open = true;
  }
});

・sampleCount：MotionBlurのエフェクトのサンプル数を設定します。 4以上32以下の値を設定できます。
・shutterAngle：MotionBlurのエフェクトのシャッターアングルを設定します。 0以上360以下の値を設定できます。

vignette

画面の周辺をぼやかせて、画面中央に集中させる演出です。

// vignette
$.onInteract(playerHandle => {
  if ($.state.Open) {
    playerHandle.setPostProcessEffects(null);
    $.state.Open = false;
  } else {
    const effects = new PostProcessEffects();

    effects.Vignette.active = true;
    effects.Vignette.center.setValue(0.5, 0.5);
    effects.Vignette.color.setValue(0, 0, 0, 255);
    effects.Vignette.intensity.setValue(0.6);
    effects.Vignette.roundness.setValue(1);
    effects.Vignette.smoothness.setValue(0.4);
    
    playerHandle.setPostProcessEffects(effects);
    $.state.Open = true;
  }
});

・center：Vignetteのエフェクトの中心を設定します。 スクリーンの左下を(0, 0)、右上を(1, 1)とする座標系で表されます。 スクリーンの中心をエフェクトの中心として設定する場合、(0.5, 0.5)を設定します。
・color：Vignetteのエフェクトの色を設定します。setValue(r: number, g: number, b: number, a: number)の（）中の数字が左から順に赤、緑、青、透明度を表しています。
・intensity：Vignetteのエフェクトの強さを設定します。 0以上1以下の値を設定できます。
・roundness：Vignetteのエフェクトのラウンドネスを設定します。 0以上1以下の値を設定できます。
・smoothness：Vignetteのエフェクトのスムーズネスを設定します。 0.01以上1以下の値を設定できます。 

サンプルワールド

ベータ機能を使用することでスクリプトでポストプロセスを設定できるようになり、ワールドクラフト製のワールドにもポストプロセスを設定できるようになりました！
ポストプロセスを体験できるワールドクラフト製のワールドをつくりましたので、あわせて参考としていただければと思います！

お試しあれ！

この記事が気に入ったらサポートをしてみませんか？