こんにちは、ABEJAに新設されたエンボディドインテリジェンスグループで事業開発をしている栗林です。エンボディって何、というお話は後ほど。

本日はABEJA アドベントカレンダー2025の4日目の記事をお届けします！

ブラウザで動くロボットのシミュレーターを、3D描画のライブラリthree.jsと物理演算ライブラリRapierを使って構築しました。

筆者の過去記事一覧

0. まえがき
1. 目的
- Physical AI 研究の目的
- ルールベースで動くロボットとその制御構築の難しさ
2. 課題設定
3. プロダクト
4. 具体設計
- three.jsおよびRapierの技術選定理由
- 基本となるシミュレーションサイクル
5. 結び
- We Are Hiring!

0. まえがき

昨今、Physical AIやロボティクス基盤モデルという文脈でお話しの場をいただく機会が増えています。「Physical AIというものは、LLMのモデル開発技術を現実世界の動きにも拡張した新しい技術です！」「既存の産業ロボットに比べて、こんな新しい要素があるのです」などの切り口で、技術に関するご説明をしています。

このような説明はロボットに詳しい方には伝わりやすい一方で、これまでロボットに触れていない方からするとそもそも既存のロボットとはという疑問が生じることになります。とはいえ、既存のロボットに触れていただく機会は少なく、実機を用意するのも難しいですし、シミュレーションだけだったとしても意外と環境構築には時間がかかります。そこで、今回は2分でロボット制御技術の難しさをお伝えできるようなプロダクトを構築しました。

1. 目的

そもそも既存の産業ロボットとロボティクス基盤モデルを搭載したロボット（Physical AI、Embodied AI）の違いとはなんでしょうか。

Physical AI 研究の目的

このお話をする上で、まずPhysical AIにおける目的と価値を整理します。ビジネステーマで扱うPhysical AIと人工知能の研究テーマとして扱うPhysical AIは目的が大きく異なります。

ビジネスの側面でのPhysical AIは、企業での実装を念頭に置いた知能を指し、その構築目的は業務プロセスの生産性向上や自動化範囲の拡大にあります。最適化の対象は人件費、作業スループット、安全性など事業価値に直結する指標です。

一方で研究開発の側面でのPhysical AIは、人工知能の認知・適応能力の発展を目的とした知能を指します。この文脈ではロボットやハードウェアはモデルに身体性を与えるための器であり、身体性を持つことで生じる新しい知能の獲得プロセスが主題となります。モデルに身体性を与える、という文脈でPhysical AIとしてだけでなくEmbodied AIなどと呼ばれるケースもあります。

ルールベースで動くロボットとその制御構築の難しさ

本日のお話は前者の、ビジネスの側面としての知能とそのロボットです。

これまでも製造や物流などをはじめ数多くの現場で産業ロボットと呼ばれるロボットが稼働してきました。それらは溶接や組み立てなどの何万回と繰り返される作業を寸分違わぬ精度で繰り返すことが可能です。こうした産業ロボットはルールベースで動いているケースがほとんどです。ルールベースでの制御では、ロボットが行うべきタスクを人間が全てコードで表現する必要があります。

ルールベース制御を中心とした産業ロボットと、データ駆動型制御のPhysical AI

とはいえ、このルールベースのロボットを触ってみないと現実におけるロボット制御の難しさは伝わり辛いです。実際にルールベースで動かすことの難易度は、実際に体感してみることが一番の近道と言えるでしょう。

2. 課題設定

ロボットの制御をルールベースで行う上で、現実空間に対する認知がいかに難しいか、そしてそのコードを記述するにはどのような手順が必要かを学べるような教材を作ります。ここで重要なのは、ロボットに触れたことがない方でもすぐに体感できるという要素です。課題を分解し、満足できるような機能に整理すると次のようになります。

ユーザーが体験として得る結果（機能要件）

ユーザーがロボット制御の難しさを理解できる
状態を操作して、ロボット挙動の変化を確認できる

使いやすさ、導入性など機能を成立させうる性質（非機能要件）

環境構築が不要で、手元ですぐに利用できる
誰でも短時間で操作できる
インタラクティブで直感的に操作できる

これらを満たせるようなプロダクトの詳細設計を実際に行っていきます。

3. プロダクト

実際に構築したプロダクトはこちらです。ロボットアームを題材に、置かれた積み木のようなブロックを灰色のステージに置くというテーマで開発しました。左側の関節角度コントロールパネルで操作をしたり、右側のプログラミングパネルで自動的に操作をしたりできます。そして構築したプログラムの順番で、目標地点である灰色のステージに対象物をいくつ置けるかを競うゲームも可能です。

ロボットに触れたことがある方からするとすごくシンプルな機能群なのですが、まずロボットを触ってみるという目的ではわかりやすいプロダクトになったと考えています。

ポイントとして、記載した非機能要件の通り、ブラウザが動く環境であればログイン不要で数秒で起動でき、マウス一つで操作ができ、リアルタイムでシミュレーションやゲームが行えます。講義や研修のためにアプリのインストールがいらない設計です。

プログラミング機能もあり、これはティーチングのように一箇所一箇所で教えた位置と姿勢をなぞるように繰り返します。

ゲーム機能もあり、構築したプログラムを用いて2分でいくつブロックを積めるかで競うこともできます。4つ以上運べたらかなりエキスパートです。

掴み判定については摩擦の設定が難しかったです。ブロックやロボットの衝突や摩擦も定義しているのですが、アームの形状などから掴むことの難易度がすごく高くなっています。簡単化するため「ある程度アームの内側に入ったら掴んでいる」というモードも追加し、ある程度で楽しめるように設計しています。それでは、どのように上記機能を設計していったのかご説明します。

4. 具体設計

今回のプロダクトを構築するにあたり、体感を実現するための3D要素そして物理演算要素が重要になります。実現するための、three.jsによる3Dアニメーション描画や、Rapierによる物理エンジンについてご紹介をします。

three.jsおよびRapierの技術選定理由

今回、環境構築不要で短時間で使えるというのが大きなポイントだったので、フロントエンドの範囲のみでの構築を目指しました。バックエンドは使っていません。アニメーションであるという特性上Three.jsなどの描画ライブラリは必須となり、衝突などの物理現象を扱う都合上物理演算Rapierも必須となります。

Three.jsはWebGLを抽象化するJavaScriptライブラリです。WebGLだけで3D表現をするには立方体一つを表示するだけでも多くのコードを書かなければならないのですが、このライブラリであれば数行で3Dコンテンツを扱えます。一方で、Three.jsは描画のためのライブラリであり、力学計算・衝突検出・積分などの機能は提供していません。

そこで、今回用いたのがRapierです。高速な物理シミュレーションを提供するRust製の物理エンジンで、JavaScript (WASM) からも利用できます。剛体シミュレーション、衝突判定、関節など、ゲームやリアルタイムシミュレーションに必要な物理計算を実行します。前回の記事では物理シミュレーションのための運動力学計算等も自前でしていたのですが、完全に車輪の再発明でした。もちろん、衝突判定などが厳密に必要なかったという背景もあります。 🚀 SpaceXのロケット技術を、自作シミュレーターで解説する

Rapierでは、衝突判定を行うためのコライダー（直方体、球体、カプセル、メッシュなどの当たり判定）による衝突モデルを扱えるので、ロボットおよび積み木にこれらを適用すれば、掴むという動作も再現が可能になります。これらを組み合わせることで、Rapierで剛体の位置・姿勢を計算し、Three.jsのMeshにRapierの演算結果を反映して描画することでリアルなシミュレーションが行えます。Three.jsのMeshとは、形状（Geometry）と表面特性（Material）を組み合わせた3Dオブジェクトを表すものです。

以下に、基本的なコードサンプルを示します。

// Three.jsなら、たった数行で3Dシーンが完成！
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Rapierではプリセットの物理演算設定を利用可能！
await RAPIER.init();
const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 });  // 重力設定

// リジッドボディの作成
const rigidBodyDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 10, 0);
const rigidBody = world.createRigidBody(rigidBodyDesc);

// コライダー（衝突形状）の追加
const colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5);
world.createCollider(colliderDesc, rigidBody);

基本となるシミュレーションサイクル

Three.jsでMesh（物体や環境）を作成し、Rapierで対応する剛体とコライダー（物質情報と物理法則）を作成し、毎フレームの物理演算を進め、描画として反映する基本サイクルは以下です。

(1) Three.js でメッシュを作成する

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial()
);
scene.add(mesh);

(2) Rapier で対応する剛体とコライダーを作成する

const rigidBodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0);
const rigidBody = world.createRigidBody(rigidBodyDesc);

const colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5);
world.createCollider(colliderDesc, rigidBody);

Rapier にはRapier.Worldという物理シミュレーションを管理するためのコンテナがあります。WorldはRigidBody（剛体）、Collider（衝突形状）、Joint（関節）、重力、物理ステップ（step）、衝突イベント等、物理空間に存在する全ての要素を保持します。

(3) 毎フレーム物理計算を進める

world.step();

(4) Rapier の剛体の位置を Three.js のメッシュに適用する

const position = rigidBody.translation();
const rotation = rigidBody.rotation();

mesh.position.set(position.x, position.y, position.z);
mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);

three.jsそしてRapierは互いに専用設計されているわけではないですが、3D空間での位置ベクトル、四元数による回転を備えておりこれを介して計算結果を組み合わせることができるというわけです。

3D空間の描画は、最終的には位置と姿勢のみで表現ができるというシンプルな理由ですね。

mesh.position.copy(rigidBody.translation());
mesh.quaternion.copy(rigidBody.rotation());

5. 結び

実際に作成したシミュレーションと、ロボティクス基盤モデルによる制御の両方を試していただく講義・研修などを行いました。そこでの感想の一部を記載します。

ルールベースでのアーム制御方法と、VLAを搭載したロボットによるデータ収集をハンズオンで体験できる非常に貴重な講義でした。実際にロボットを動かすことで、従来手法と模倣学習の違いを実感でき、今後のロボット産業の発展に大きな可能性を感じました。
ロボットシミュレーションを動かすのが難しく、思い通りにいかないもどかしさを感じました。パソコンの性能もあって、アームが時差で動いたり、本来掴みたくないブロックが取れたりと、色々な課題がわかりました。
実際に自分でWEBアプリ上で体験するのと、実際にロボットを動かしてみるので少々感じ方が違い、その違いも体感できて良かったです。

狙い通り、シミュレーションでもロボット制御の難しさを伝えることができたようです。

今回構築したシミュレーターの基本動作原理を用いれば、さまざまな物理シミュレーションをブラウザでできるとわかったので、たとえば模倣学習等への拡張も行えるように改善をしていきたいと考えています。