VITALIFY.ASIA logo

次世代の製品カタログ:URDFが変える「動く」Web展示の可能性

ロボット設計図「URDF」をWebブラウザで滑らかに動かす技術ショーケースを公開。CADデータから「触れる製品カタログ」への転換が、製造業のプロモーションをどう変えるのか。ゲーム開発の知見を用いたリアルな可動表現の可能性を解説します。

次世代の製品カタログ:URDFが変える「動く」Web展示の可能性
目次

今回、私たちはWebの先端技術を模索するプロジェクトの一環として、URDFデータをブラウザ上で表示し、滑らかにアニメーションさせるショーケースを制作・公開しました。

デモサイト:Web URDF Viewer

なぜゲームやアプリの開発を主軸とする私たちが、ロボット業界の規格であるURDFに注目したのか。その背景と、これからの製品紹介の形についてお話しします。

URDFとは何か?:ロボットの「脳」に体を教える設計図

URDF(Unified Robot Description Format)は、一言で言えば「ロボットの構成をコンピューターに教えるための共通言語」です。

ロボットは、腕や足などの「部位(Link)」と、それらをつなぐ「関節(Joint)」の組み合わせで構成されています。URDFには、それぞれのパーツがどこにあり、どの方向に、どれくらいの範囲で動くのかという情報がXML形式で記述されています。

通常、これはROS(Robot Operating System)といったロボット制御や、物理シミュレーションの世界で使われる「専門家のためのデータ」です。しかし私たちは、このデータが持つ「動きのルール」という側面に、Webコンテンツとしての大きな可能性を感じました。

なぜ今、URDFをWebで動かすのか

私たちはロボット工学の専門家ではありません。日々、ゲームやアプリケーションのUI/UXを追求しているエンジニアチームです。しかし、CADやBIMといった製造・建築のデータが3D化していく中で、「製品をWebでどう見せるか」という課題に直面しました。

これまでの製品サイトは、写真や動画が主流でした。最近では3Dモデルをぐるぐる回せるサイトも増えていますが、「どこがどう動くのか」までをユーザーが直感的に体験できるものはまだ多くありません。

URDFをWeb技術(Three.jsなど)と組み合わせることで、以下のような「一歩先の体験」が可能になります。

  • 「可動域」の体験: マウス操作で、アームがどこまで伸びるのか、扉がどこまで開くのかをシミュレートできます。
  • 「構造」の理解: アウトライン描画や透過表示を使い、あえて「設計データ風」に見せることで、内部の仕組みを視覚的に伝えることができます。
  • 「軽量」な動作: 重厚な製造用CADデータをWeb用に最適化し、スマホのブラウザでもサクサク動く体験を提供します。

「動き」に命を吹き込む:ゲーム開発者の視点

URDFを動かすだけなら、ライブラリを使えば誰でもできるかもしれません。しかし、そこに「製品らしさ」や「心地よさ」を与えるには、また別の技術が必要です。

私たちが業界用語で「段取り臭い」と呼ぶ、カクカクとした機械的な動き。 素人が設定したアニメーションは、一つの関節が動いてから次の関節が動くような、不自然な間が生じがちです。

私たちはゲーム開発で培ったアニメーション技術を使い、慣性や重なり、そして物理的な重みを感じさせる動きを実装しました。これにより、画面の中の製品が単なる3Dデータではなく、実在感を持った「動く製品」として命を宿します。

ご提案:写真を超えた「触れるカタログ」へ

製造業や機械メーカーの皆様、自社製品の魅力をWebサイトで伝えきれているでしょうか?

「この関節の滑らかさを伝えたい」「このコンパクトな可動範囲を見てほしい」 そうした願いは、静止画や一方通行の動画よりも、ユーザー自身が操作できるURDFコンテンツの方がはるかに深く伝わります。

私たちは、CADデータを預かり、それをWeb上で美しく、かつ直感的に動く「デジタルツイン・カタログ」へと昇華させるお手伝いをしています。

ショーケースのご案内ととお問い合わせ

今回制作したショーケースでは、未来空間をイメージしたデザインの中で、ロボットアームが滑らかに駆動する様子をご覧いただけます。

デモサイト:Web URDF Viewer

「自社の製品でもこんな動く展示ができるのか?」「CADデータからWeb展開したい」といったご相談がございましたら、ぜひお気軽にお問い合わせください。

私たちは、エンジニアリングと表現力の力で、貴社の製品の魅力を最大化するお手伝いをいたします。

1,000社以上の事業成長を支えた圧倒的な『スピードと柔軟性』で、御社のアイデアを最短で形にします。まずは無料で壁打ちしませんか?

ブログに戻る

関連記事

3DGSを理解する 第3回:3DGSと2DGSは何が違うのか? ―「2D」の意味を正しく理解する3D

3DGSを理解する 第3回:3DGSと2DGSは何が違うのか? ―「2D」の意味を正しく理解する

3DGSと2DGSは、どちらも3次元空間のシーンを表現するGaussian Splatting技術ですが、使うGaussianの形状と重視する点が異なります。本記事では、3次元Gaussianを使う3DGSと、平面状Gaussianで表面形状の整合性を高める2DGSの違いを整理し、2D画像を表現するGaussianImageとの違いも解説します。

Toshihiko Nagaoka
3DGSを理解する 第2回:3DGSはフォトグラメトリと何が違うのか?3D

3DGSを理解する 第2回:3DGSはフォトグラメトリと何が違うのか?

3DGSとフォトグラメトリは、どちらも複数の写真から3D空間を再構成する技術です。本記事では、SfMによるカメラ位置・姿勢推定やSparse Point Cloudまでの共通点と、その後にフォトグラメトリがMVS・Dense Point Cloud・メッシュ生成へ進み、3DGSがGaussianの初期化・最適化へ進む違いを整理して解説します。

Toshihiko Nagaoka
3DGSを理解する 第1回:3DGSは従来の3D制作と何が違うのか?3D

3DGSを理解する 第1回:3DGSは従来の3D制作と何が違うのか?

3DGSは、従来のメッシュとは異なり、大量のGaussianを空間に配置して現実の見た目を再現する3D表現技術です。本記事では、メッシュとの違い、写真から3D空間を生成する仕組み、不動産・建築・文化財・映像・XRへの活用例、そして3DGSが従来の3D制作を置き換えるのかまで、初心者向けに整理して解説します。

Toshihiko Nagaoka
ぼくはデューパー、なんでもきいてね!