TCW

Tsukami 3D

Tsukami 3D

Concept

柔術・グラップリングの決め技(サブミッション)を、ドラッグで360°回転できる3Dモデルで紹介するWebサイトです。

写真や動画では「足がどう絡んでいるのか」「背中側で何が起きているのか」が見えにくいという、自身が練習の中で感じていた課題から企画しました。

2人の人体モデルの制作・ポーズ付け・質感づくりまでをBlenderで行い、ブラウザ上でどの角度からでも技の形を確認できるようにしています。英語・日本語の2言語に対応しています。

Modeling

人体はBlenderの人体生成アドオン(MPFB)で作ったリグ付きモデルをベースに、攻め手・受け手の共通キャラクター(身長172cm)を用意し、技ごとに同じ2人を使い回す構成にしています。顔立ちや年齢感はシェイプキーで調整し、実在の人物に似ないよう配慮しました。

ポーズはIK(インバースキネマティクス)とボーンの回転で付け、手足の位置・関節の向きを実際の技の形に合わせて細かく調整しています。足首や肘が人体としてあり得ない方向に曲がらないこと、2人の体がめり込まないことを制作ルールとして定め、体同士の貫通を数値で測りながら仕上げました。

肌・髪・服の色は1枚のテクスチャに焼き込み(ベイク)、UVの継ぎ目に色の割れが出ないよう処理しています。Web表示用には、ポーズを反映したメッシュをDraco圧縮のglTF(GLB)で書き出し、1技あたり約300KBまで軽量化しました。

制作はBlender MCPによるAIプロンプトを活用し、ポーズ調整・貫通チェック・書き出しをPythonスクリプトで自動化することで、技を追加するたびに同じ品質で量産できるワークフローを組んでいます。

Design

道場のマットをイメージした床とダーク基調の背景で、人物モデルが主役として際立つ画面にしています。ライティングは全技共通とし、どの技のページでも同じ見え方になるよう統一しました。

PCでは3Dビューアと解説(手順・ポイント・受け手の防御)を横並びに、スマートフォンでは縦に並べ、片手でも操作しやすいレイアウトにしています。

Plan

現在はリアネイキッドチョーク・腕十字固めの2技を公開しています。今後は三角絞め・キムラなどの技を順次追加し、レスリング・柔道の技にも広げていく予定です。

あわせて、3Dモデルを回転させた縦型動画をSNSで発信し、道場での指導にも使ってもらえるサービスに育てていく計画です。

Point

  • Character

    Blenderでのキャラクター制作画面

    リグ付き人体モデルにIKでポーズを付け、貫通チェックとテクスチャベイクまでをBlender上で制作。攻め手・受け手の共通キャラクターをMPFBで生成し、技ごとに使い回せるベースモデルとして管理。

  • Blender

    Blenderでのポーズ調整画面

    IKとボーンの回転で技のポーズを作成。2人の体が貫通しないよう関節の向きを細かく調整。

  • UX

    3Dビューア

    ドラッグで360°回転、ホイール・ピンチ・ダブルタップで見たい部分へ寄れる直感的な操作性。

Other Works

React Mapping(仮)

React.jsのキャッチアップとして作成した、トレーニングスポットを地図上で管理できるWEBアプリです。

Supabaseによる認証・DB連携込みのCRUDを一通り実装しています。

TCW Ver.2.0

フロントエンド、バックエンドに関する技術や知識をNext.jsで構築したサイトに掲載しております。

2026年10月現在、ヘッドレス化を行い、パフォーマンス評価を 58 → 70 に改善しました。

自身のアウトプット用メモとして活用し、私のレベル感をご確認頂く際の参考にしてもらえますと幸いです。

Webサイト・ホームページの制作、業務委託等のご相談は
下記からお問い合わせください