Blenderで3D表現を試みる #初心者

はじめに

こんにちは。
オークファン開発部デザイナーの@af_etoです。

Adobe Creative Cloudの通知で、Substance 3Dに触れたきっかけで、
3DCG制作に取り組んでみることにしました。

基礎的な3DCG制作を習得しておけば、
簡単なものは少しの手間で作れて便利かもしれません。
デザインの選択肢が増えるならば、表現の幅も広がるかも!?

シンプルなイメージ画像を作ってみる

架空のコーポレートサイトのデザインを元に考えようと思います。

例えば、下の画像のようなページの余白（薄いグレー部）に、
ロゴマークが3Dになったものをさり気なく敷いて、
少し工夫したコーポレートアイデンティティみを出してみたいと思います。

ロゴマークをぼんやり設置してみてもいいですね。

ニューモーフィズム感出してみたり。
背景画像だけで印象が大きく変わりますね。

これで雰囲気は充分な気もしますが、
試しに3Dロゴマーク画像を作成して設置してみましょう。

Blenderを利用する

どうやらAdobeのSubstance3Dは有料らしいので...、
無料で使えるオープンソースの3DCGソフト『Blender』を使います。
まずはダウンロード＆インストールします。

Blenderの初期設定

Blenderを起動すると立方体が置いてあり、よく見るとカメラと照明っぽいものもあります。
初期設定として配置されているようです。
英語表示になっているので、上部メニューのEdit > PreferenceからInterface > languageを「日本語」に変更します。

マウスホイールを回したり、マウスホイールの中心を押して画面をグリグリすると、視点が動きます。
操作は環境によって違いがあるかもしれません。

画面右上の「XYZ」を押すと視点がそれぞれの軸に移動し、テンキーでも視点を変えられるようです。
使い方が分からな過ぎて、しばらく適当に触ってましたが、
XYZという方向感覚をまず身に付けると、操作がスムーズになりそうです。

「Z」真上からの視点です。
カメラと照明の位置関係もわかります。

初期設定でのレンダリング

この初期状態で、カメラに写っている映像をプレビューしてみましょう。
上部メニューのレンダー > 画像をレンダリングしてみると、

およそ想像通りの画像が表示されました。
「物体を作成し、カット・構図を決めてライティング、カメラで撮る」のような手順で進めればよさそうですね。

SVGデータの読み込み

SVGデータを読み込めるようなので、複雑なロゴマークも簡単に立体化できそうです。
上部メニューのファイル > インポートで読み込むSVGファイルを選択すると、

ペラっと配置されます。
それを右の操作パネルオブジェクトプロパティでX軸で90度回転させて起こします。

さらにtabキーで編集モードに変更して、面を選択して押し出します。

立体ロゴマークができました！
さらにSVGから引き継がれた黒は不要なので、
右操作パネルマテリアルプロパティから「SVGMat」を削除して、ベースカラーを白にしました。

tabキーで編集モードに変更して、面を選択して

と、ざっくり書きましたが、
オブジェクトモードではオブジェクトそのものを選択でき、編集モードではオブジェクトの頂点、辺、面を選択することができます。
オブジェクトを選択してtabキーを押すか、左上のモード設定のセレクトボックスで切り替えが可能です。

ロゴマークの立体化にあたっては、ロゴマークを編集モードにして面を選択、
右クリックメニューの面を押出しで立体化しました。

背景を設置する

立体ロゴの影を落として、さらに立体感出したいので、背景を置いてみます。
Shift+Aを押すと新規でオブジェクト、カメラや照明を設置することができます。
メッシュ > 平面を追加して、角度や位置を調整します。

さらに、照明を正面斜めから照らして、カメラも反対の正面斜めから構えます。
下の図はそのセッティングを真上から見たものになります。

そこでレンダリングしてみます。

立体ロゴにフォーカスしてませんでした。背景の切れ目も見えてしまってます。
少し上から捉え過ぎているかもしれません。

再セッティング

初期設定のカメラの調整が難しかったので、
Shift+Aで正面に向けた新規カメラを追加します。
水平を保ちながら、角度を変えて、

背景も切れないようにサイズを変更してレンダリングすると、

ちょっといい感じになりました。
立体ロゴと背景をもう少し近づけて、もっと明るくして..といった具合に、
自分のイメージに近づくようカメラや照明を調整していきます。

照明を強めで、カメラは少し遠目から狙って、

画角も調整して、

レンダリングすると、

なんとか背景画像に使えるかもしれない。
細部の追求は後にして、ひとまずこれで完成とします。
レンダリング画像のウィンドウの上部メニュー画像 > 名前を付けて保存し、
明るさ、コントラストを調整して、先程のページタイトル背景に敷いてみます。

背景画像の完成

うーん...。はじめてなので、これで良しとしましょう！

3DデータをWEBページで動かす

「Blender」でGoogle検索していると、three.jsを使って
3DデータをWEBページに表示する記事を多く見かけます。
頑張ればできそうなのでやってみましょう。

動作を決める

再び架空のサービスサイトのデザインを元に考えようと思います。

下の画像のようなページ構成のスマートフォンを3Dデータにして、
マウスの動きに合わせてユラユラ動かしてみます。

2D画像から3Dモデルを作成する

Blenderでスマートフォンを作成するのですが、
まずはガイドとなるスマートフォンを2Dで作成し、Blenderに読み込みます。

Shift+Aでメッシュ > 立方体を追加して、形状を合わせていきます。
角に丸みを付けたい場合は編集モード >　辺で丸みをつけたい辺を選択し、control+Bで角を取れます。

押し出しでスピーカー部のへこみを作ります。

ボタンを取り付けて、

色をつけて、

ページのキャプチャをスクリーン画面に設定します。

工程の詳細をだいぶ省略してますが、操作にさえ慣れれば、割と手軽に作れます。

カメラや照明を調整してる風ですが、かなり暗中模索です...。
やればやるほど遠ざかっていくような気がしているので、
きちんと基礎から学習しなければならないなと痛感しています。

ひとまずスマートフォンの3Dデータは完成しました。

上部メニューのファイル > エクスポート > glTF 2.0 (.glb/gltf)から
3Dデータを「glTFファイル」の形式でエクスポートして準備完了です。

three.jsのダウンロード

Github、または公式からThree.jsのライブラリ一式をダウンロードします。

three.jsのライブラリを読み込む

必要なjsファイルを任意のフォルダにコピーします。

index.html

<script src="/assets/js/threejs/three.min.js"></script>
<script src="/assets/js/threejs/OrbitControls.js"></script><!-- カメラ制御 -->
<script src="/assets/js/threejs/RoomEnvironment.js"></script><!-- 環境光制御 -->
<script src="/assets/js/threejs/GLTFLoader.js"></script><!-- glTFの読み込み -->
<script src="/assets/js/index.js"></script>

HTML

描画エリアとなるcanvas要素を用意します。

index.html

<div id="canvasBox"><canvas id="canvas"></canvas></div>

3D表示用のJavaScriptを用意

レンダラー作成（画面描画）

const renderer = new THREE.WebGLRenderer({
    // 出力するcanvas要素
    canvas: document.querySelector('#canvas')
});

canvas設定

// canvas親要素
const container = document.getElementById('canvasBox');
// ウィンドウサイズ設定
let windowW = window.innerWidth;
let windowH = window.innerHeight;
// canvasサイズ設定
let parentW = container.clientWidth;
let parentH = container.clientHeight;

レンダラー設定

// 描画サイズ調整
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(parentW, parentH);
// 背景透過
renderer.setClearColor(0x000000, 0);
// Blenderの色をThree.jsで再現する設定
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
// シャドウ有効
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

シーン作成

const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();

環境光設定

const roomEnviroment = new THREE.RoomEnvironment();
scene.environment = pmremGenerator.fromScene(roomEnviroment, 0.04).texture;

glTF/glbロード

// カメラを作成
let camera;
const loader = new THREE.GLTFLoader();
// glTFファイル
const url = 'assets/glb/smartphone.glb';

let model = null;
loader.load(
    url,
    function (gltf) {
        model = gltf.scene;
        // シーンにモデル追加
        scene.add(model);
        // Blenderで作成したカメラの配列
        camera = gltf.cameras[0];
        render();
    },
    undefined, function (e) {
        console.log(e);
    }
);

マウス座標管理用のベクトル

const mouse = new THREE.Vector2();
const windowHalf = new THREE.Vector2(
    windowW / 2,
    windowH / 2
);

マウスイベント

function onDocumentMouseMove( event ) {
    mouse.x = (event.clientX - windowHalf.x) / windowHalf.x;
    mouse.y = (event.clientY - windowHalf.y) / windowHalf.y;
    scene.traverse(function(obj) {
        if (obj.isMesh) {
            obj.rotation.y = mouse.x / 2;
            obj.rotation.x = mouse.y / 2;
        }
    });
}

レンダリング

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

ブラウザで確認

何とか動きました。。。
ひとまず、マウスの動きに合わせて3Dデータが動いているので良しとしましょう。
https://manahub.github.io/jizn/

おわりに

スマートフォンの3Dモデル作成の際に、照明設定が上手にできず、Blenderの照明は利用しませんでした。
やはり、マテリアル、照明、カメラの設定を基礎から学習する必要がありそうです。
そのうち3D動画制作もやってみたいと思います。

Blenderで3D表現を試みる