【Sketchfab】Blenderで作成するコンフィグレータ 初級編
高品質シェーダーであり3D図形データベースとしても活用できるSketchfab(スケッチファブ)を使ってみます。Sketchfabでコンフィグレータが作れるとのことでチャレンジ。
おそらくこのサイトを活用した作品として最も有名なのはNIKE社のシューズのコンフィグレータでしょうか。すっごいリアルに表現されていて、色んな柄のシミュレーションができています。
なお3DモデリングソフトはBlenderを使用したいというわがままでやってみます。運良くSketchfabは.blender形式のアップロードが可能なので助かります。
とりあえず今回は最短時間でSketchfabを利用してコンフィグレータを作ってみます。
公式でコンフィグレータのチュートリアルを掲載したりと制作を促しているようです。ソースはチュートリアルをほぼ引用させてもらいます。
なお色替えはマテリアルを複数持たせればよいらしいのですが動作確認中です。
やり方
手始めに障子戸の柄のコンフィグレーターでも作ってみましょう。
１．Blenderでモデリング
単純なやり方としては、変更しないパーツも、変更可能なパーツも全部作っておきます。
そして、変更パーツはノード名を関連させておきます。このノード名を覚えておきましょう、後のHTML作成時に必要です。
プロジェクトファイル名はShojiDoor.blenderとしました。
２．Sketchfabにアップロード
ShojiDoor.blenderをSketchfabにアップロードします。先ほど行ったとおりで.blenderファイルのまんまアップロードできます。
アップ後にシーンやマテリアルの編集が必要であれば[Edit Scene]で行います。
３．公開用のビューを編集する
Sketchfabのチュートリアル『Sketchfab Labs Experiments』をほぼそのまんま使わせてもらいます。
– Sketchfab
index.htmlを開きます。
アップロードしたデータを開きたい場合はDEFAULT_URLID変数にIDをコピペします。
URLの末尾の数字まみれの部分です。
基本はこれだけで図形が開けちゃいます。
コンフィグレータとして動かすためには自分で変更ボタンの実装が必要です。さらに各ボタンに対して、図形との紐付けが必要。
今回はチュートリアルに倣っているのでプログラムの以下の箇所だけ差し替えればOKです。
index.htmlのDEFAULT_PREFIX変数を“shoji “に差し替えます。Blenderのノード名でshojiのあとに半角スペースを入れているので半角スペースを忘れないでください。
完成
こんな感じで障子戸の柄のコンフィグレータが動きました。
応用すれば、マテリアル変更やオブジェクトのON/OFFなど複雑な組み合わせが可能になります。建築でも行けそう
例えばシステムキッチンであれば、戸棚やシンクの色柄変更、オプション品の表示ON/OFFといったギミックを仕込むことができるということですね。
マテリアルの色替えなどはここのプログラムをマテリアル版に書き換えればOKらしいのでこれから試してみます。
参考サイト
・Sketchfab Labs Experiments – Sketchfab
・sketchfab/experiments/configurator/ – GitHub
・Nike Air Max 270 for configurator demo – Sketchfab
