4
0

More than 1 year has passed since last update.

clusterでカメラ被写界深度を実装しよう!

Last updated at Posted at 2022-12-20

この記事はクラスターAdvent Calender 2022 カレンダー2の20日目の記事です。
昨日は@kaznishiクラスター株式会社で半年過ごして思う、ココ好きポイントでしたね。

はじめに

こんにちは!8月からクラスター株式会社でSoftware Engineerをしている@Senchaです。
自分が開発に携わり、10月のCluster Conference 2022 でも発表のあった「カメラ被写界深度」開発の様子を紹介していきたいと思います。

カメラの被写界深度とは

そもそも被写界深度とはどういうものかというと、いわゆる「良い感じの写真」が撮れる機能のことです。
もう少し詳しく説明すると、被写体にピントを合わせてその前後をボケさせることができるものです。iPhoneにもポートレートという名称で存在しますよね。

954bbf9b-fb90-43ee-9aee-1e4cf660daf7.png

今回のカメラ被写界深度の機能では2つのモードを入れました。
画面の被写体にタッチすることでフォーカスすることができるオートフォーカスモード
画面上UIのスライダー、F値を調整することでフォーカスすることができるマニュアルフォーカスモード
オートフォーカスモードは簡単に被写界深度を使って撮影したい方、マニュアルフォーカスモードはよりボケ方や撮影距離を調整して写真を撮りたい方に向けたものになっています。

特にオートフォーカスモードでは、アバター・風景問わずどこにでもタッチしてフォーカスできるように作ることが必要でした。

被写界深度実装

それでは実際の実装方法についてです。仰々しい感じで説明しましたが、実は被写界深度のエフェクトを効かせること自体はそこまで複雑なことはしていません。今回はUnityのPostProcessing(以下: PPs)のDepth Of Field(以下: DoF)を使用していきます。

PPsのDoFには現実のカメラのようなパラメータが存在します。

  • Focus Distance (撮影距離)
  • Focal Length (焦点距離)
  • Aperture (絞り, いわゆるF値)

撮影したい対象に合わせてパラメータを調整し、いい感じにボケた写真撮影を行えるようになります。
マニュアルフォーカスでは画像のようにUIでFocus DistanceとApertureの値を調整することができます。この際、Focal LengthはUnityのカメラコンポーネントのFieldOfViewToFocalLength という関数で計算しています。Unityのコンポーネントにはこういった便利な関数があってありがたいですね。

IMG_0534.png

さて、問題はオートフォーカス時のFocus Distanceです。値を取得する方法はいくつか考えられますが、前述した「アバター・風景問わずどこへでもフォーカスできる」といったことを考慮するとやり方は限られてきます。
そこで今回選択したのは深度から取得するといった方法です。
オートフォーカスの流れは以下のようになります。

  1. カメラから得られた深度情報をshaderを介しグレースケール画像に変換(正規化する)
  2. 変換したものをカメラのRenderTextureに反映
  3. RenderTextureをTexture2Dに変換し、タッチした位置のカラー情報を取得
  4. カラー情報(RGBどの値も0 ~ 1となっている)からDoFのFocus Distanceに反映

これでカメラに写っているものであればタッチしてFocus Distanceを取得することができるようになりました!無事実装完了です。

おわりに

今回はカメラの新機能である被写界深度の開発事例について紹介しました。
個人的な感想ですが、リリース以降好意的なフィードバックが多く、SNSなどでも素敵な写真が共有されているのを見ると非常に嬉しく、達成感を感じることができました。
どんどん撮影して盛り上げていっていただければ嬉しいです!

明日は@fatdesignの「伝わるビジュアルに落とし込むことの重要性」ですね!お楽しみに!

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0