3D見積もりシミュレーターの作り方：WebGLに最適化。シミュレータ用3Dモデルへの変換方法

2023.03.20

3DシミュレータやARなどの開発に欠かせないは3Dモデル。

Webブラウザで表示したい、「だれでもシミュレータ」に3Dモデルをアップしたい、使用したい、そう思っても

「CADデータならあるんだけどデータ量が多い」
「2DCADデータをどうやって変換したらいいの？」
「実物はあるけど図面やCADデータがない」

と言ったケースも多いのではないでしょうか。

そんな方に「だれでもシミュレータ」ご利用の際のWebGL用モデリング、変換、最適化の方法についてご案内です。

ー

「だれでもシミュレータ」のWebGLデータを3Dアプリ用にエクスポートする方法はこちら

ー

各プロダクトの最適化方法

例えばカーモデル

数千万ポリゴンにもなるCADモデルがベースの場合は見栄えを落とさず、数万・数十万ポリゴン程度まで最適化しましょう。
極力無駄を排し、綺麗にキャラクターラインが表示される様に、ツールを使わず全て手作業でリダクションする方が手間がかかりますが、その分、無駄なく綺麗なモデルが作れます。

例えばインテリア

無駄を排し、大事に表現したいディテールを崩さず最適化。
硬いところ、柔らかいところ、最大限その特徴を表現できる様な最適化を行いましょう。

だれでもシミュレータ：インテリアデモ
 https://3d-simulator.com/?uid=interior-b&n=4&s=034028032033035110

例えば宝飾品

写真をスキャンだけじゃないエモーショナルなラインなど特徴をを活かしてモデリング。スキャンしたデータだけではない、実際の商品から感じ取れる雰囲気も最大限考慮したモデリングを行います。

WebGLへの最適化とは？

ただ最適化、と言っても用途に応じて様々な調整を行う必要があります。
例えばARの様に「一つの商品を細かいディテールまで見せる」と言った、限りなくリアルに見せる時の作り方と、VR空間の様に数多く表示する場合で作り方を調整する必要があります。
一つの商品をを見せる時には、いかにその商品のディテールまで詳しく表現するか、多くの商品を見せる場合はそれぞれをいかに少ないポリゴンで特徴を表現できるか。
その様な最適化を行ないましょう。

実際にはどの様に作っている？

使用3Dソフト

だれでもシミュレータ推奨の3Dソフト、blenderで3Dパーツの変換や制作、最適化を行なっています。
blender
https://blender.jp/

データ変換

CADデータをbenderに取り込める形式（plyやdaeなど）に変換し、blenderにインポートします。

コラム記事：CADデータのWEBGL化に。FreeCADを使った取り込み方法

blenderにインポートできる3Dデータ形式は主に

obj
dae
fbx
usd
glb/gltf

などです。

インポートした形状データは、blender内で正確なサイズにリサイズし最適化を実施します。
※blenderにインポートした際、極端に大きく・小さくなると言ったケースが多々あります。

モデリングは主に以下の様な留意点を念頭に行います。

「どの様にスムージングされるか考慮した破綻のないメッシュ分割」
「大胆に大きく分割する箇所とエッジ引き立たせたいメッシュの集中箇所の使い分け」
「スケールを考慮したバランスの良いメッシュ分割」

見える見えない・見せる見せないを状況に応じて判断し、Webコンテンツとして最適なWebGLモデルを作ります。
最適化が完了したらblenderからobjデータとしてエクスポート（書き出し）します。
「ファイル → エクスポート → wavefront（.obj）」でobjファイルを書き出します。

※書き出しの際、「選択物のみ」にチェックを入れ、選択したオブジェクト以外書き出されないようにします。

いかがだったでしょうか。WebGL用3Dモデル作成の際、参考にしていただければ幸いです。

尚、だれでもシミュレータでは、WebGLに最適化したモデル作りもお手伝いしています。
これまでの制作経験値を活かした職人技で、ダイナミックに、かつ繊細にメッシュの最適化し、軽く、美しいWebGLモデルを制作します。
制作についてのご相談など、お気軽にお問い合わせください。
お問い合わせはこちらまで。