【R3F】R3Fでカメラのピンボケをエモくしてみた話

⚫️ はじめに

React Three Fiberで、マウント時にイージングに対応してカメラの焦点を合わせる演出を実装してみました。これを応用すれば、エモい導入演出を実装することができます。

⚫️ 自己紹介

初めまして。趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します。フルスタック開発やツール制作を楽しんでいる人です。

⚫️ 完成品

同様の効果を私のポートフォリオでも実装しています。ぜひ覗いてみてください。

⚫️ 実装

実装はかなりシンプルで、ボケエフェクト(被写界深度)のパラメータをうまく変更するだけです。変数の状態更新をするだけではうまく行かないので工夫が必要です。

今回作成したソースコードのリポジトリです。

1. カメラのピンボケの実装

事前にR3Fのインストールとオブジェクトやカメラの設定をしておきます。
postprocessingのライブラリをインストールして<Canvas>内にボケエフェクトを適応します。

npm i @react-three/postprocessing

<EffectComposer multisampling={8}>
  <DepthOfField
    focusDistance={30}
    focalLength={0.02}
    bokehScale={80}
  />
  <Noise opacity={0.7} premultiply />
</EffectComposer>

カメラのボケ具合はbokehScaleで設定できます。今回は80に設定しています。追加でノイズを少し載せておくと映えます。

2. アニメーション的に変化する値の作成

ピンボケから焦点を合わせる表現は、カメラのボケ具合の値を80から0に変化させれば実装できそうですね。先述のとおり、状態管理ではボケ具合が変化しないので、アニメーションライブラリであるReact Springを使用していきます。

npm i @react-spring/three 

useSpringフックを利用して、アニメーション的に変化する値を生成します。
イージングはreact springのものを使用します。

  const springs = useSpring({
    from: { blurScale: 80 },
    to: { blurScale: 0 },
    config: {
      duration: 600,
      easing: easings.easeOutCirc,
    },
  });

初期値は80で、0へ収束するように設定します。
また、以下のリンクからイージングを参考にします。イージング、ベジェ曲線については趣旨ではないので解説を省きます。映像制作などにもよく使い、奥深いので是非調べてみてください。今回はeaseOutCircを使用します。easeOutExpoもおすすめですが、シーンに合うものを選びましょう。
アニメーション時間は600ミリ秒を指定しています。

これで、イージングに沿った動きと指定の時間で値を変化させられるようになりました。値自体はsprings.blurScaleのようにして取り出します。

3. コンポーネントへ値を適応する

springs.blurScaleをこのままbokehScale={}へ格納しても動作しません。

<DepthOfField/>をanimated関数を使用して、アニメーション表示を自律的に行うコンポーネント(アニメーション化されたコンポーネント)に変換してあげます。

import {
  DepthOfField as BaseDepthOfField,
  EffectComposer,
  Noise,
} from "@react-three/postprocessing";

const DepthOfField = animated(BaseDepthOfField);

そしてsprings.blurScaleを格納してあげることでようやく機能します。

<EffectComposer multisampling={8}>
  <DepthOfField
    focusDistance={30}
    focalLength={0.02}
    bokehScale={springs.blurScale}
  />
  <Noise opacity={0.7} premultiply />
</EffectComposer>

いい感じですね！動きの滑らかさはlinear(等速)と比較してみてください。一目瞭然です。

⚫️ おまけ

他のエフェクトにも適応してみます。

• Dot Screen
  

• Pixelation
  

⚫️ 最後に

いかがでしたでしょうか。以前もR3Fの実装記事を書きましたが、いまだに自力で実装するのに苦戦しています。今回のように簡単にリッチなエフェクトを実装できるのはありがたいですね。ちなみに登場したモデルはBlenderマスコットのSuzanne君です。
最後まで読んでいただきありがとうございました！それでは！

⚫️ 参考記事