WebGPUライブラリ「UltraMotion3D」で3DのサンプルWebコンテンツを動かしてみよう

2025年6月5日(木)
大西 武 (オオニシ タケシ)
第3回の今回は、WebGPUライブラリ「UltraMotion3D」を使った3DのサンプルWebコンテンツの動かし方と「XAMPP」の使い方を解説します。

XAMPPを使って
テクスチャを貼ったキャラクターを表示する

記事冒頭で説明したように、ローカルのパソコンで図3のようなテクスチャファイルを使ったサンプルを動作させるにはWebサーバが必要ですが、第1回でも解説したXAMPPを使えばローカルサーバを立てることができます。なぜWebサーバが必要かと言うと、テクスチャファイルは「オリジン間リソース共有(CORS)」で.htmlファイルと同じドメインのWebサーバ上のファイルしか読み込めないためです。

今後は、基本的にテクスチャを使わないサンプルをメインに解説すると思うので、ほとんどXAMPPでWebサーバを立てなくてもローカルのWebブラウザでUltraMotion3Dライブラリを使ったサンプルを実行できると思います。ただし、テクスチャの読み込みと表示を実装する際はもちろんWebサーバが必要になります。

図3:テクスチャを貼った3Dキャラクター

XAMPPの使い方

まず、webgpu.zipを解凍したwebgpuフォルダを「C:¥xampp¥htdocs」フォルダ内に移動してください。このフォルダ内に配置したWebページをXAMPPを使ってWebブラウザで見ることができます。

図4のようにXAMPPを起動したら「Apache」を「Start」してWebサーバを開始します。これでWebブラウザ(ここではGoogle Chrome)の「ローカルホスト(http://localhost/webgpu/index.html)」をWebサーバ上で見ることができます。Webブラウザを閉じたときは「Stop」してWebサーバを停止するのを忘れないように。

図4:XAMPPでApacheをStartとStop

テクスチャを貼った3Dキャラクター

次のサンプルコード「texture.html」をコーディングしたら、マウスドラッグでキャラクターを回転できます。またキャラクターは歩くアニメーションをしていますが、マウスクリックでジャンプするアニメーションに切り替わり、着地したらまた歩くアニメーションをループ再生します。

「models」→「RedGirl.js」ファイルを開いて見てください。「setMaterial」メソッドの最後の引数に"models/RedGirl.jpg"というファイルがありますね。これがテクスチャ(ポリゴンに貼る模様)ファイルです。RedGirl.jsから見た相対パスではなく、index.htmlファイルから見た相対パスなのでmodelsフォルダも書かれています。なお、テクスチャファイルのパスはRedGirl.jsスクリプトを読み込む.htmlファイルから見た相対パスなので気を付けてください。

・サンプルコード「texture.html」
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>UltraMotion3D</title>
    <meta name="viewport" content="width=device-width">
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" />
    <script src="lib/Material.js"></script>
    <script src="lib/Vector3D.js"></script>
    <script src="lib/Matrix3D.js"></script>
    <script src="lib/Model3D.js"></script>
    <script src="lib/BoneModel3D.js"></script>
    <script src="lib/WGSL.js"></script>
    <script src="lib/UltraMotion3D.js"></script>
    <script src="models/RedGirl.js"></script>
    <script type="text/javascript">
var _model;
var _pos = new Vector2D(0,0);
var _click = false;
  
function init() {
  _model = new RedGirl();
  if ( 'ontouchend' in document ) {
    document.addEventListener('touchstart',onMouseDown,false);
    document.addEventListener('touchmove',onMouseMove,false);
    document.addEventListener('touchend',onMouseUp,false);
  } else {
    document.onmousedown = onMouseDown;
    document.onmousemove = onMouseMove;
    document.onmouseup  = onMouseUp;
    document.oncontextmenu = function () { return false; }
  }
}

function draw() {
  if (!_model.playing) _model.playAnimation(0,true);
  _camera.lookAt(new Vector3D(0,150,600),new Vector3D(0,150,0),new Vector3D(0,1,0))
  _model.draw();
}

function onMouseDown(event) {
  _pos = getPos(event);
  _click = true;
}

function onMouseMove(event) {
  if ( _click ) {
    pos = getPos(event);
    _model.rotate.addX(pos.y-_pos.y);
    _model.rotate.addY(pos.x-_pos.x);
    _pos = pos;
  }
}

function onMouseUp(event) {
  _click = false;
  _model.playAnimation(1,false);
}
    </script>
  </head>
  <body onload='initWebGPU("CanvasAnimation");'>
    <canvas id="CanvasAnimation" width="2000" height="1000"></canvas>
    <div id="container">
      <header>
        <h1>UltraMotion3D</h1>
        <nav>
          <a href="index.html">HOME</a>
          <a href="bone.html">BONE</a>
          <a href="texture.html">TEXTURE</a>
          <a href="about.html">ABOUT</a>
        </nav>
      </header>
      <div id="space"></div>
      <h2>メニュー</h2>
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="bone.html">BONE</a></li>
        <li><a href="texture.html">TEXTURE</a></li>
        <li><a href="about.html">ABOUT</a></li>
      </ul>
      <footer>
        <h3>このサイトは2023年から<a href="http://vexil.jp" target="_blank">Vexil.jp</a>がテストしています。</h3>
      </footer>
       </div>
  </body>
</html>

【サンプルコードの解説】
UltraMotion3Dの読み込みは最初のページと同じです。女の子のキャラクターをRedGirl.jsから読み込みます。
クリックとドラッグでのキャラクターの回転は前のページと同じです。
モデルのアニメーションが停止(!_model.playing)していたら「playAnimation」メソッドで0番のアニメーションをループあり(true)で再生します。
マウスが離されたらplayAnimationメソッドで1番のアニメーションをループなし(false)で再生します。

おわりに

今回は、UltraMotion3Dライブラリを使って3DのWebコンテンツを作る解説をしました。また、テクスチャを表示するにはWebサーバが必要で、そのためにローカルでXAMPPを使う解説もしました。

次回は、いよいよUltraMotion3Dライブラリを1から作っていく解説を始めます。

著者
大西 武 (オオニシ タケシ)
1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp

連載バックナンバー

開発言語技術解説
第3回

WebGPUライブラリ「UltraMotion3D」で3DのサンプルWebコンテンツを動かしてみよう

2025/6/5
第3回の今回は、WebGPUライブラリ「UltraMotion3D」を使った3DのサンプルWebコンテンツの動かし方と「XAMPP」の使い方を解説します。
開発言語技術解説
第2回

WebGPUを使うための「HTML5+CSS+JavaScript」の文法を学ぼう

2025/5/20
第2回の今回は、WebGPUコンテンツを作る上で、最低限知っておくべきHTML5+CSS+JavaScriptの文法と、それを使った簡単なサンプルを解説します。
開発言語技術解説
第1回

「WebGPU」の基礎と3DCG開発のはじめかた

2025/4/25
第1回の今回は、WebGPUと3DCGの基礎知識と、開発環境の準備、JavaScriptによるプログラミングの基本について解説します。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています