3Dシミュレーション・Webカスタマイザー開発の実績
ITサポーターKUMA222では、WordPressやレンタルサーバーの設定、Google Workspaceなどのサポートだけでなく、JavaScriptやPHPを利用したWebアプリケーションの開発にも対応しています。
その中で、実際の商品をWebブラウザ上で確認しながら、色や素材、パーツなどを変更できる3Dシミュレーション・3Dカスタマイザーの開発にも携わってきました。
今回は、これまでの制作を通して経験した3Dシミュレーション開発について、実績の一部をご紹介します。
Webブラウザ上で動く3Dシミュレーション
3Dシミュレーションというと、専用ソフトや非常に高性能なサーバーが必要と思われることがあります。
しかし、作るシステムの内容によっては、JavaScript、PHP、WebGLなどの技術を組み合わせることで、一般的なWebブラウザ上で利用できる3Dシミュレーションを構築できます。
構成によっては、VPSや専用サーバーではなく、一般的なレンタルサーバーを利用できるケースもあります。
たとえば、
・商品を3Dで表示する
・パーツごとに色を変更する
・金属、樹脂などの素材を変更する
・選択した内容を保存する
・注文情報として管理する
・ECサイトと連携する
といった仕組みを組み合わせることで、商品のWebカスタマイザーとして利用することもできます。
実際に開発して分かった3Dシミュレーションの難しさ
3DモデルをWebサイトに表示するだけであれば、比較的簡単にできる場合もあります。
しかし、実際の商品販売などに利用できる3Dシミュレーションを作る場合は、それだけでは終わりません。
STEPなどのCADデータからWebで扱いやすいGLB形式へ変換したり、スマートフォンでも表示できるようデータを軽量化したり、UV、テクスチャ、マテリアル、反射、光沢などを調整したりする必要があります。
さらに、ユーザーが選択した内容を注文情報として管理したり、ShopifyなどのECサイトと連携したりする場合には、Webアプリケーションとしての設計も必要になります。
このあたりについては、ココナラブログで詳しく紹介しています。
「実際に作って分かった、3Dシミュレーション開発の難しさ」
https://coconala.com/blogs/45810/817175
3Dモデルがあれば、そのまま使えるとは限りません
3Dシミュレーションをご相談いただく際、
「すでに3Dデータがあるので、すぐ作れるのでは？」
と思われることもあります。
しかし実際には、3Dデータだけでは判断できないことがたくさんあります。
たとえば、
・どのパーツの色を変更するのか
・金属なのか樹脂なのか
・光沢があるのか艶消しなのか
・どの部分に模様やテクスチャがあるのか
・3Dモデル内部のノード名と実際の商品名がどのように対応しているのか
などです。
商品の写真や完成イメージ、カラーコード、パーツの対応表などがあると、制作をかなりスムーズに進めることができます。
3Dシミュレーション制作をご検討されている方向けに、事前に準備していただきたい資料についてもまとめています。
「3Dシミュレーション制作をご依頼いただく前に準備してほしいこと」
https://coconala.com/blogs/45810/818852
見た目では分からない「メッシュ」の問題
3Dシミュレーションの制作では、画面に表示されているものだけを見ていても分からない問題があります。
その一つが、3Dモデル内部の「メッシュ」です。
画面上では一つの部品に見えていても、
・実際には複数のメッシュに分かれている
・別々の部品に見えるものが一つにつながっている
・パーツとパーツの間に小さな別パーツが存在する
・同じテクスチャを適用したい部分がUV上に見つからない
といったケースがあります。
また、実際の商品写真と提供された3Dモデルの形が異なり、元のモデルをそのまま利用できないケースもありました。
その場合は、既存モデルを壊さないようにメッシュを分割・追加したり、必要な情報をベイク（焼き付け）したりしながら、実物に近づけていきます。
こうした「完成画面からは見えない部分」の調査や修正も、3Dシミュレーション制作では重要な工程です。
実際に経験したメッシュ調整については、こちらの記事で詳しく紹介しています。
「見た目は一枚の面でも、3Dデータの中身は違う。メッシュ調整で苦労したこと」
https://coconala.com/blogs/45810/821133
3Dだけではなく、Webシステム全体を考えます
私が3Dシミュレーションを制作する際に重視しているのは、3Dモデルだけを作ることではありません。
実際にWeb上で利用することを考えて、
・3Dモデル
・JavaScript
・PHP
・データベース
・レンタルサーバー
・ECサイト
・管理画面
などを含めて、システム全体を確認します。
「3Dモデルを表示するところまではできたけれど、その先が分からない」
「3Dデータは持っているので、Web上で商品シミュレーションができるようにしたい」
「ユーザーが色やパーツを選べる商品カスタマイザーを作りたい」
「選択した内容を注文や見積もりにつなげたい」
といったご相談にも対応できます。
レンタルサーバーでWebアプリを動かしたい方もご相談ください
Webアプリケーションというと、クラウドサーバーやVPSが必要と思われることがありますが、システムの内容によっては、現在利用している一般的なレンタルサーバーを活用できる場合があります。
特に、
・PHPが利用できる
・データベースが利用できる
・JavaScriptを利用したフロントエンド処理が中心
といった構成であれば、既存のWebサイトと同じサーバー上にWebアプリを設置できる可能性があります。
一方で、Node.jsなどの常時実行環境、特殊なサーバー処理、大量の3Dデータ処理などが必要な場合は、VPSやクラウド環境の方が適していることもあります。
「今使っているレンタルサーバーで実現できるのか分からない」
という段階からでも構いません。
現在のサーバー環境や実現したい機能を確認し、どのような構成が適しているか一緒に整理することも可能です。
3Dシミュレーション・Webアプリのご相談を承ります
3DシミュレーションやWebカスタマイザーは、完成した画面だけを見るとシンプルに見えることがあります。
しかし実際には、3Dモデル、メッシュ、UV、マテリアル、テクスチャ、表示速度、JavaScript、PHP、データベース、サーバーなど、さまざまな要素が関係しています。
これまでの3Dシミュレーション開発で得た経験を活かし、既存の3DデータやWebサイトをできるだけ活かした形でのご相談にも対応しています。
・3DシミュレーションをWebサイトに設置したい
・商品カスタマイザーを作りたい
・既存の3DモデルをWebで利用したい
・レンタルサーバー上でWebアプリを動かしたい
・現在の3Dシステムを修正、改善したい
・3DとECサイトを連携したい
といった内容がございましたら、お気軽にご相談ください。
「このサーバーで実現できるのか」「手元にある3Dデータが使えるのか」といった段階からでも、内容を確認しながらご提案いたします。
講座やイベント紹介等ウェブサイトを作ります SVGアニメーションやwordPressのプラグイン開発含む