Unityで製品紹介ビデオ制作にトライする

f:id:stacked-tip:20190815183758g:plain:w400
製品を紹介するビデオを作成したい。
具体的には、3Dの製品が画面の真ん中でクルクル回るような映像を作りたい。

この記事では、

  • 回転させたいものの3DCADデータがある状態で
  • Unityを使って

それを実現する方法を紹介します。

…3DCADデータがない?Blenderで作ってくれ。
私もBlender初心者だったが、色々ググって数時間でモデリングできるようになったから。
なお、トップの文字列が回転しているものについては、
もっとお手軽に「TINKERCAD」でモデリング、objデータをエクスポートしてUnityにインポートしています。

開発環境

私の開発環境は以下のとおり。3D映像制作をするのには、余りに貧弱だが仕方ない。
PC: SONY VAIO Pro 11 (VJP111B01N)
CPU: Intel Core i7-4510U @ 2.00GHz
RAM: 8.00GB
GPU: なし
OS: Windows 8.1
Unity: 2018,4,6f1 Personal

今回は、以下のようなコインをクルクルさせようと思う。
(本当はBlenderで組んだモデルを見せたいところだが、大人の都合でそれはできないので…)
f:id:stacked-tip:20190815133659p:plain:w400

コインをクルクルさせる

3Dオブジェクトをクルクルさせるには、そのようなC#スクリプトを書いて、そのオブジェクトに紐づければOKです。

もう少し丁寧に言えば、

  • [Assets]エリアを右クリックし、[Create]→[C# Script]を選択してC#スクリプトを作成し、
  • それをダブルクリックしてコードエディタを開き、
  • そこにコードを記述、保存して閉じてから、
  • C#スクリプトをコインにドラッグ&ドロップして紐づける

とやればOKです。

C#コードはこんな感じです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class rotate : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        transform.Rotate(new Vector3(0,0,90)*Time.deltaTime);
    }
}

結果は以下のとおり。
f:id:stacked-tip:20190815135312g:plain:w400
メインカメラの位置について、開発画面と再生画面を一致させています。

  • [Hierarchy]で[Main Camera]を選択したうえで、
  • メニューバーの[GameObject]→[Align With View]を選択

因みに、このコードは下記書籍を参考にしています。
藤森将昭『Unityではじめる おもしろプログラミング入門』リックテレコム

背景を黒にする

さて、上記の映像でOKならそれでいいのですが、私は、背景を真っ黒にしたいなと思いました。
暗闇の中で、モデルがクルクル回っているイメージです。

Unityで背景を真っ黒にするのにはいくつか設定が必要なのですが、
詳しくは以下のブログ様を参照してください。
私もこれに従って背景を真っ黒にできました。
murasame-labo.hatenablog.com

1. シーンに配置された光源を無効にする

新規でシーンを作成すると、ディレクショナルライトという光源がデフォルトで設定されています。
詳細は割愛しますが、ディレクショナルライトとは、シーン内のすべての場所に対して、一定の方向から光を当てる光源です。
これを無効にすると、以下のようになります。
f:id:stacked-tip:20190815165341g:plain:w400
確かに暗くはなりましたが、予想よりもまだまだ明るいです。

2. 環境を構成する天と太陽を消す

実は、シーンを照らす光は、光源だけではありません。
光源とは別に「環境光」なるものがUnityにはあります。
私のバージョンでは、
[Window]→[Rendering]→[Lighting Settings]
で環境光の設定画面に到達できます。

先に紹介したブログ様では、環境光の強さ(Intensity Multiple)を0にしていますが、
ここでは、そもそも環境光の存在自体を消してしまいます。
ついでに、シーンの背景にある空も消してしまいましょう。

先ほど開いた設定ウィンドウの、

  • Skybox Material
  • Sun Source

を見てください。
f:id:stacked-tip:20190815171212p:plain:w300
私のバージョンでは、デフォルトでは

  • Skybox Material: Default - Skybox
  • Sun Source: Directional Light (Light)

となっていました。

ここで、それぞれを次のように設定します。
f:id:stacked-tip:20190815171856p:plain:w300

  • Skybox Material: None (Material)
  • Sun Source: None (Light)

これにより、開発画面も目に見えて真っ暗になってしまいました。
f:id:stacked-tip:20190815172125p:plain:w400

再生画面もこのとおり。
f:id:stacked-tip:20190815172423g:plain:w400

3. カメラの背景色を黒にする

「カメラの背景色」とは?と思うでしょう。
実は、カメラの設定として、オブジェクトの背景を何にするという設定ができます。
ここで、背景色(Background)の色を変更します。
f:id:stacked-tip:20190815173013p:plain:w400
ここを、デフォルトの群青色から、黒にします。
f:id:stacked-tip:20190815173606p:plain:w400

こうして、シーンを完全な暗闇にすることができます。
f:id:stacked-tip:20190815173816p:plain:w400

光源を有効にしてみる

本当に完全な暗闇では、何も見えないので、オブジェクトを照らすくらいの光は欲しいです。
そこで、最初に無効化した光源「ディレクショナルライト」を再度有効にしてみましょう。
すると、このようになります。
f:id:stacked-tip:20190815174233g:plain:w400

背景を白にしてみる

背景を白にしたい?先ほどのカメラの背景を白にすれば、再生画面の背景も白になります。
f:id:stacked-tip:20190815174750g:plain:w400
でもこれだと、背景は白なのにコインは暗くて違和感がありますね。

カメラのClear FlagsをSolid Colorにする

実は、カメラの背景の設定として、Clear Flagsというのがあります。
デフォルトはSkyboxですが、これをSolid Colorにしてみましょう。
その上で、環境光の設定を元に戻してみてください。

  • Skybox Material: Default - Skybox
  • Sun Source: Directional Light (Light)

すると、開発画面での背景は、以前の空と地面がある背景なのに、
Camera Previewでは背景が白色になっています。
f:id:stacked-tip:20190815180004p:plain:w400

再生画面もこのとおり。
f:id:stacked-tip:20190815180704g:plain:w400

参考情報

GIFアニメーションは、「ScreenToGif」というソフトウェアで作成しました。
github.com