公開
技の動きをテストで疑う — tricking-3d の妥当性テストとカメラ追従
トリッキングの技を 3D で見る tricking-3d を 27 技から 59 技にした。股関節の可動域・着地足の滑り・手をつく順番を数値のテストにし、移動する技はカメラが腰の軌跡を平滑化して追う。スマホでは注釈を番号の丸印にまとめた。
tricking-3d は、トリッキングとパルクールの技を Three.js の人形で再生し、回転軸や重心の軌跡を見るアプリです。2026-10-11 の PR で、技を 27 から 35・43・51・59 へ増やしました(#28・#30・#32・#34)。追加した技は Loopkicks Tricktionary の各技ページ(前提技・別名・着地の定義)と照らし合わせ、解説には Loopkicks で確かめられたことだけを書いています。
見た目では気づきにくい誤り
キーフレームで作った動きは、もっともらしく見えても体としてはおかしいことがあります。本番ビルドを撮って見直す中で、次のような誤りが見つかりました。
- バックサイド720 が空中で 180° しか回らず、全体でも 255° で着地していた
- ルーザーの振り上げた脚が背中側を回り、胴体の中を通っていた(股関節が 170° 以上反る)
- タッチダウンライズで、着地した足が 0.9 m 滑り、手から 1.2 m 後ろに降りていた
- 旧来の DSL で作ったウェブスターは、キーの間を最短経路で補間するため、190° 離れたキーの間で脚が背中側に折り畳まれていた
妥当性テスト
見つけた誤りは、数値の条件にして plausibility.test.ts に書きました。全技に共通するものと、技ごとの契約があります。
- 全技: 床を貫かない、踏切足と着地足がカタログどおり、太ももが背中側へ 100° 以上振り上がらない
- 追加した技: 着地した足が 5 cm 以上滑らない
- 手をつく技: タッチダウンライズは手の接地が 1 回だけで、足が着くまで続く。ガンビーは踏切から着地まで常にどこかが床についている。ロンダートは左手、右手の順につき、両足が同時に接地する
- 回転: バックサイド720 は空中で 400° 超・全体で 500° 超、ポップ720 は空中で 500° 以上・全体で 650° 以上。アラビアンは逆さを通って後ろ向きに進み、最初と反対を向いて着地する
#33 では、「左手をつく」「両足で接地」などのキーポイントの時刻が、実際に手や足が床につくフレームと正規化時間で ±0.02 以内に合うことも全技で検査するようにしました。これで、側転で着地した右足が約 40 cm 滑っていたことや、スクートで説明とは逆の右手が床についていたことが見つかり、直しています。
#28 と #29 では、直す前の動きに戻すとテストが失敗することも確かめています。テストは #28 の時点の 222 件から、#34 で 447 件になりました。
移動する技をカメラが追う
チート系やライズ、側転のように進む技は、原点を向いたままのカメラでは画面の端へ寄っていました。#29 では、重心ラインのために計算している腰の軌跡を一度だけガウス平滑化(σ 0.22 秒、遅れなし)し、その分だけカメラと回転の中心を一緒に平行移動します。プリセットの視点でも自由視点でも、角度と距離は変えません。腰と画面中心の距離は、最大 4.55 m から 0.45 m になりました。
開始位置から 0.6 m 以内に収まる 11 技は追従せず、構図は今までどおりです。オフセットは再生時刻だけで決まるので、シークやループでも同じ構図になります。OS の「視差効果を減らす」が有効なら、再生中はカメラを動かさず、移動の範囲全体が入るように引きます。
スマホでは注釈をまとめる
注釈のラベルは毎フレーム画面上で配置し直し、ラベル同士や画面のボタンと重ならないようにしました。それでも 390px 幅では、キーポイントが 8〜9 個ある技でラベルが人体を覆います。#31 では、ラベルがキャンバスの面積の 12% を超えるときだけ、再生位置にいちばん近いラベルを 1 枚残し、残りを番号付きの丸印にまとめました。丸印をタップすると、その時刻へ移動します。
ほかに、置いていない人形の GLB を本番で毎回取りに行って 404 になっていたのを、ビルド時にファイルの有無を調べてリクエストしないようにしました。
参考
- tricking-3d PR #28(27 → 35 技、股関節と滑りのテスト)・#29(カメラ追従・ラベル配置・ウェブスター・GLB)
- #30(35 → 43 技)・#31(スマホの注釈)・#32(43 → 51 技)
- #33(接触のキーポイントと実際の接地を合わせるテスト)・#34(51 → 59 技)
- tricking-3d の README
- アプリ