はじめに
こんにちは。
オークファン開発部デザイナーの@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ファイルを任意のフォルダにコピーします。
<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要素を用意します。
<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動画制作もやってみたいと思います。