プロジェクトレポート-ALPOLIC Design Simulator
今年の3月に、会社として初めて建材ビジュアリゼーションのためのアプリを作りました。今回はその内容と、簡単に使った技術の説明をしたいと思います。
1.ALPOLIC Design Simulatorとは
アルポリックは三菱ケミカルインフラテックという会社が開発したアルミ樹脂複合板です。現在は約150以上の種類の仕上げがあり、それぞれ色調、反射などが違っています。しかし一般のお客様にとって、カタログを見るだけで、アルポリックが実際にどんな風に見えるのかをイメージすることはなかなか困難です。その仕上げを画面上で繊細に、実際の建物での使用シーンに近い形で表現できる、デジタル3DカタログがこのALPOLIC Design Simulatorです。
ALPOLIC Design Simulatorの構成
- 標準デザインの建築サンプル
シンプルなデザインの建築モデルを使い、ファサード、内装、天井など各建築の要素で、自由にアルポリックの素材を組み合わせて、それぞれの仕上げを変更できます
- 約150種類のマテリアル
現在約150種類のアルポリック素材があり、ALPOLIC Design Simulatorではそのすべてを表現できます。ユーザーが自由にそれらをピックアップして、あらゆるアングルで色合いや光沢の変化を確認できます。
- オフライン版とオンライン版
きれいな表現を得るために、最初は個々のパソコンで独立に起動するオフラインのアプリケーションを作成しました。更にユーザーがより快適に、ブラウザ上でアルポリックの素材を確かめるため、オンライン版も開発しました。やはりウェブサイトからアクセスして、直接ブラウザ上でシミュレーションできる方が、イメージを直感的に共有しやすいです。
2. 主要な機能
今回のALPOLIC Design SimulatorはUnreal Engine4を使用して作成しました。マテリアルの作成にはSubstance Designerというソフトウェアを使用しました。具体的には、Substance Designerで各カテゴリのマテリアルテンプレートを作成して、実物サンプルと比較対照し、テクスチャマップをUnreal Engine4にインポートしました。金属の質感の表現が重要なものは、専用のシェーダーを組み合わせて表現し、より現実に近い質感を実現しました。そして一般ユーザーも簡単に操作できるようなものにしたいので、ユーザーインタフェースにもいろいろな機能を追加しました。
ALPOLIC Design Simulatorの機能
- マテリアルを割り当てる機能
アルポリックを建築のモデルに割り当て、素材の色や質感をシミュレーションします。 - 時間の切り替え機能
スライダーバーでリアルタイムの時間切り替えができる機能です。 - パネル割りの変更
パネルの縦横サイズの切り替えができます。 - カメラの位置を切り替え
シーン中に設置したカメラの位置にテレポートできます。 - マテリアルの検索機能
テキストボックスで入力したキーワードでカテゴリー内のマテリアルを検索する機能もあります。数字コード、色の名前を検索できます。 - 選択のアイコン
選択中のマテリアルの色、コードを表示します。 - スター付き機能
お気に入りのマテリアルを登録できます。
3.簡単な技術説明
ALPOLIC Design Simulatorの機能は、Unreal Engineのブループリントで作成しました。ブループリントはノードベースのスクリプティングシステムです。短期間でプロジェクトの必要な機能を実装できることが一番の魅力です。
- マテリアルを割り当てる機能
レベル内のメッシュにタグを付ければ、ワンクリックでタグで指定されたメッシュのマテリアルを変更できます。今回のコンテンツではよく使う機能なので関数で作成しました。
- 時間の切り替え機能
スライダーを使ってシーンの時間を変更することが可能です。UE4の具体的にはスライダーの０から１変数を一日の時間に割り当てたら、レベル内の太陽光、スカイドームをリアルタイムに連動して実現しました。
- パネル割りの変更
UIのボタンで、指定するオブジェクトの表示をオンオフすることで、リアルタイムでパネルを切り替えることが可能です。今回のプロジェクトは２種類のファサードを切り替えるので、それぞれのモデルにタグをつけてシンプルに作りました。
- 固定カメラの切り替え
レベルの複数のカメラにタグをつけて、そのカメラの位置、方向を設定すればテレポートできます。カメラのレンダーターゲットを使用すれば、UIのボタンもリアルタイムでシーンをキャプチャーできます。しかし、リアルタイムのキャプチャーは計算が多少重くなるので、今回のプロジェクトは使用しませんでした。
- マテリアルの検索機能
入力したキーワードで、UIのスクロールボックスのマテリアルを検索する機能です。入力テキストがマテリアルのテキストに含まれるときに、そのマテリアルを表示します。具体的には、入力したテキストとスクロールボックスの子要素から取得したテキスト両方でチェックして判別できます。その判定で子要素のマテリアルだけを表示することが可能です。
- 選択のアイコン
UIのマテリアルボタンをクリックにより値が変わる、マテリアル選択の変数をセットします。マテリアルの変数でUI表示の色スタイル、テキストをバインディングすれば完成です。
- スター付き機能
今回はシンプルに、お気に入りのスクロールボックスの内容表示のオンオフだけで作成しました。
4.まとめと今後の課題
素材をバーチャルにシミュレーションすることで、実物のカタログや素材サンプルを見せるよりも、手軽にお客様に素材の見え方をシェアして、早めにイメージを共有できるようになったと思います。
今後の課題ですが、表現クォリティーやパフォーマンスのさらなる向上やファイルサイズの軽量化が挙げられます。加えてオンライン版の開発では、ブラウザからの機能制限が課題となっています。今後も開発を進め、オフライン版、オンライン版ともにさらなる機能向上を行っていきたいと考えています。
また、プロダクトデザインの分野ではすでにこのような、素材の質感を簡単に比べられるソフトがありますが、建材ではまだまだ少ないように感じます。他の建材でも今回蓄積したノウハウは活用できるのではないかと思います。
