本文へスキップ

3D 図

すべきことを見せる、本物の物体のライブ描画。Arion のオンボーディングで振り向き、ふたを開け、音声入力キーに寄っていくノートパソコンがその例です。

ライブの図

Arion の音声入力キーのステップの図を、同じカメラ、陰影、タイミングで描いています。別のキーを選ぶか押してみてください。操作は図の外にあります。

音声入力キー

話している間押し続け、離すと入力されます。

ほかの図

同じカメラ、インク、登場を Arion のほかの 3 つのステップに使います。どの図も実在の物体がひとつで、ステップには物理的な反応をひとつだけ返します。

ライブレベル

レベルが届くとメーターはセグメント単位で点灯します。40ms 以内に上がり、240ms かけて下がります。マイクが開いている間は最初のセグメントが点いたままで、音がなければ何も動きません。

Arion に声を届ける

マイクは音声入力中だけオンになります。

進捗

カートリッジは実際の軸に沿ってスロットに収まります。ライトバーは届いた分だけ比例して満ち、新しい量まで 240ms かけて動き、戻ることはありません。満ちたら完了です。

音声入力を準備しています

認識モデルのダウンロードは一度だけ。その後はオフラインで使えます。

2 つの状態

2 つの状態を持つ部品は実際の経路を動きます。シャックルは 160ms で 10mm 上がり、420ms で長い脚を軸に開きます。閉じるときは同じ経路を逆にたどります。自分の動きを持たない図は中央の枠を飛ばします。

Arion に入力を任せる

アクセシビリティの権限で、Arion はカーソルの位置に文字を入力できます。

描き方

  1. 1本物の物体を実際の比率で、約 1 ミリの世界単位で、プラットフォームの実際の配列でモデリングする。
  2. 2ワイヤーフレームではなく立体:面は紙の色で塗り、見る人の左からの光に対する向きで 12 分の 1 刻みに陰影を付ける。
  3. 3面が背を向けるところに輪郭線、上面と側面が出会うところに淡い折れ線。カメラが寄るにつれ線は 0.6px から 1px に。
  4. 4奥から手前へ深度順に描き、底面の下にやわらかい 2 重の接地影を置く。
  5. 5黄色に光る部品は主題ひとつだけ。図の中にラベル、矢印、注記を入れない。

振り付け

  1. 1登場は約 1 秒ずつ重なり合うトラックで物語を語る。250、650、1000ms に始まり、2.1 秒で終わる。
  2. 2ズームは比率で均等に変え、焦点はズームとともに物体全体から主題へ移す。
  3. 3主題が変わると、カメラは 420ms で行き過ぎずにそこへ滑り、途中でズームの 78% まで引く。
  4. 4フィードバックは物理的に:押すと主題は実際のストロークだけ沈む。80ms で下がり、480ms まで保ち、700ms で戻る。
  5. 5視差効果を減らす設定では最終の姿勢をすぐに表示し、図の横の文字は決して動かさない。

描画

  1. 1姿勢が変わったときだけ描く。止まっている図はコストがかからない。
  2. 2デスクトップでは面ごとのパスではなく CPU で 1 枚のビットマップにラスタライズする。Web では canvas を 1 つ、デバイス比は最大 2。
  3. 32× で 1 フレーム約 10ms 以内に収める。
  4. 4図はラベル付きの 1 枚の画像として扱う。