表現をリッチにできる「PostProcess API」がベータ機能として提供開始されました！【Cluster Creator Kit v2.8.0.1 リリースノート】

2024年2月27日 13:27

こんにちは、プロダクトマネージャーの Smith です。

メタバースプラットフォーム cluster では、クリエイターのみなさんの創造力をより加速できるように制作環境の改善を行っています。
この記事では 2/26 の cluster アプリのリリースでベータ版としてリリースされた機能を紹介します。

v2.8.0.1 の内容

今回の変更は cluster アプリを最新のバージョンにアップデートすることで適用されます。
動作確認等を行う前に、最新版であることをご確認ください。

PlayerHandle.setPostProcessEffects

表現をリッチにできる「PostProcess API」

ポストプロセス（PostProcess）は画面全体にフィルターや効果を加えることで、見た目のクオリティを上げることができる機能です。
この機能を使うことで、下図のように色収差や魚眼レンズのような表現、ワールドのライトの光の強さを変えたり、色味を変えることができます。

PlayerHandle.setPostProcessEffects は、対象のプレイヤーに対してポストプロセスを適用します。

setPostProcessEffects(effects: PostProcessEffects): void

適用できるポストプロセスは PostProcessEffects のプロパティとしてあらかじめ定義されています。
各プロパティは該当するポストプロセスのパラメーターを設定するものです。

declare class PostProcessEffects {
  grain: GrainSettings;
  bloom: BloomSettings;
  chromaticAberration: ChromaticAberrationSettings;
  colorGrading: ColorGradingSettings;
  depthOfField: DepthOfFieldSettings;
  lensDistortion: LensDistortionSettings;
  motionBlur: MotionBlurSettings;
  vignette: VignetteSettings;
  fog: FogSettings;

  constructor();
}

利用方法

PostProcessEffects インスタンスに任意のパラメーターを設定し、PlayerHandle インスタンスの setPostProcessEffects メソッドに渡します。
下記の例は chromatic aberration エフェクトを設定する例です。

$.onInteract(playerHandle => {
  const effects = new PostProcessEffects();
  effects.chromaticAberration.active = true;
  effects.chromaticAberration.intensity.setValue(1);

  playerHandle.setPostProcessEffects(effects);
});

上記を実行するとポストプロセスがプレイヤーに適用され、画面に対する効果が加わります。
chromatic aberration を使うと、画面端に描画されるものほど色収差が大きくなっていることが確認できます。

他のポストプロセスについても、設定できるパラメータに差分はありますが同じ要領で適用できます。
下記は lens distortion を適用する例です。

$.onInteract(playerHandle => {
  const effects = new PostProcessEffects();
  effects.lensDistortion.active = true;
  effects.lensDistortion.intensity.setValue(70);

  playerHandle.setPostProcessEffects(effects);
});

lens distortion を使うと、魚眼レンズのように歪むような効果がかかります。

複数の効果を同時に適用することもできます。
この場合、同じ PostProcessEffects インスタンスに複数の設定をします。
先程の chromatic aberration と lens distortion の効果を同時に適用する例です。

$.onInteract(playerHandle => {
  const effects = new PostProcessEffects();
  effects.chromaticAberration.active = true;
  effects.chromaticAberration.intensity.setValue(1);

  effects.lensDistortion.active = true;
    effects.lensDistortion.intensity.setValue(70);

  playerHandle.setPostProcessEffects(effects);
});

2つの効果が適用され、より説得力のあるレンズ効果が実現できました。

適用したポストプロセスを取り消したい場合は setPostProcessEffects に null を渡してください。

$.onInteract(playerHandle => {
  playerHandle.setPostProcessEffects(null);
});

適用の優先順位

スクリプト API によるポストプロセスは下記の優先度で適用されます。

Creator Kit 製ワールド

Creator Kit 製ワールドでの Priority が 101 以上のポストプロセス
setPostProcessEffects によるポストプロセス
Creator Kit 製ワールドでの Priority が 99 以下のポストプロセス

ワールドクラフト

「ワールド環境」の「エフェクト」設定
setPostProcessEffects によるポストプロセス

その他の詳細な情報はスクリプトリファレンスを参照してください。

ベータ機能を正式版に上げるには

ベータとして提供される機能は、より多様なコンテンツ体験を実現するための機能です。
しかし使い方によってはコンテンツ体験を悪くすることもできてしまいます。
ベータ機能は、実際にクリエイターの皆様に使い込んでもらうことでその安全性が確かめられます。
正式版に上げていきたい機能ほど、コンテンツに組み込んでいただけると正式版昇格が早くなるので、ご協力いただけると助かります。

ご意見・ご感想お待ちしています

cluster は、みなさんが楽しくバーチャル空間で創造できるように様々な改善を行っています。
Discord ではみなさんの要望を投稿したり、クリエイターさん同士でお互いの創作活動を支え合える場所を設けていますので、ぜひご活用ください！

Discordサーバー: Creator Community のご案内
https://docs.cluster.mu/creatorkit/support/creator-community/