だれでも
シミュレータ

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

2023.03.20
WebGL用3Dモデリング WebGLに最適化した 3Dモデルづくりをサポート

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モデルを制作します。
制作についてのご相談など、お気軽にお問い合わせください。
お問い合わせはこちらまで。

　　　　

おすすめの使い方

3D見積もりシミュレーターの作り方

機能アップデート

だれでもシミュレータで使える3Dファイル形式とカスタマイズ可能なファイル形式

だれでもシミュレータでは、「obj」「gltf」の他、多様なファイル形式に対応する様カスタマイズできます。

Web3Dモデルのマテリアル透過にリアリティを。透明なモデルの仕上げ方

高品質な透過モデルを作るためのマテリアル設定をご案内。質感がより実物に近づけるクオリティアップの方法です。

CADデータのWEBGL化に。FreeCADを使った取り込み方法

CADデータ（IGS・STEP形式等）をだれでもシミュレータに登録する方法のご案内です。

クライアントワークをご一緒に！デザインシミュレーター導入をスムーズに行う方法

れでもシミュレータを使って、一緒にクライアントワークを行いませんか？スムーズな開発のご案内です。

商談中にその場で3D化。お客様から預かった間取り図を読み込み、即座に家具レイアウトを提案して成約率を上げるコツ

システム内で3D平面を生成し、レイアウトシミュレータを作ってみましょう。

3DシミュレータとShopifyの購入ボタンを連携する方法

「だれでもシミュレータ」はシミュレーション結果をShopifyの購入ボタンと連携できます。

もっと便利に！新バージョン、「v2」ベータ版リリースのお知らせ

プロジェクト数無制限、スロットの複製・削除機能搭載のv2リリース！

多数のバリエーションにも対応！iOS・Android対応したWebARの作り方

iOS、Androidに対応したWebARの作り方をご説明します。

だれでもシミュレータのECサイト連携について

「だれでもシミュレータ」は、Shopifyなど各種ECサイトとの連携も可能です。

リアルな3Dモデル作成はおまかせください。

だれでもシミュレータは3Dモデリングをご依頼いただけます。

「だれでもシミュレータ」プランの選び方。必要アセット数で選ぼう

必要アセット数から、最適なプランを選びましょう。

だれでもシミュレータで家具の3Dレイアウトシミュレータを作る方法

商品を3Dで並べる。レイアウトシミュレータの作り方

Web3Dの作り方。開発ベンダーなら「だれでもシミュレータ」

Web3D開発ベンダーをお探しなら「だれでもシミュレータ」にお問い合わせください。

カタログに3Dを載せる。データエクスポートもできる。Web3Dカタログの作り方

Webで見れる3Dカタログ、Web3Dカタログの作り方のご案内です。

「だれでもシミュレータ」でマテリアルを作る方法

だれでもシミュレータでのリアルなマテリアルデータの作り方

だれでもシミュレータのセキュリティ対策について

「だれでもシミュレータ」のセキュリティ対策についてご案内です。

チュートリアルで作る！3Dシミュレータ・コンフィギュレータの作り方。

だれでもシミュレータを使って3Dコンフィギュレータ・シミュレータを作りましょう

「入るかな？」の不安を解消。アプリ開発不要で自社サイトに「AR配置機能」を導入し、購入の最後の一押しを作る方法

その空間に「設置できるか」シミュレーションが行えるAR設置シミュレータの作り方をご案内。

Web3Dコンフィギュレータのダイナミックマテリアル使用法

全体の色を一気に変える「ダイナミックマテリアル」の使い方です

食器のロゴシミュレータの作り方

食器のロゴシミュレータに！だれでもシミュレータで3Dオブジェクトにロゴを貼る方法

ARで見せるために必要なものとは？

これまでARを見せる際に必要だった「環境づくり」も自動で作れます。

お試しに。費用を抑えてAR開発を依頼する方法

費用を抑えてARシミュレータ開発を依頼する方法です。

WebARとは？Webで見れるARの開発環境

スマートフォンやタブレットのWebブラウザでAR体験を提供します。

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

「だれでもシミュレータ」ご利用の方向けに、WebGLに最適化したモデル作りをお手伝い。

だれでもシミュレータへのObjインポート手順とRhinoでの注意点

ライノセラスから出力したobjファイルが表示されない場合の対処法です。

blenderクリエイターならARがサクサク作れる

blenderクリエイターに朗報。WebARが簡単に作れます。

そもそも3Dシミュレータとは？

3Dで自由に組み合わせて、構成や金額をシミュレーションするシステムです。

3Dシミュレータ開発を依頼するには？

3Dシミュレータを作りたい時、依頼したい時はこちらをご覧ください。

ライティング・テクスチャで出す立体感。Web3Dにおすすめの設定方法。

オブジェクトに陰影をつけよう。ステージのライティングについて。
TOPへ戻る