ウェブブラウザで動く
3次元コンピュータグラフィックス講座

このページでは、WebGLという技術を使って、ウェブブラウザで動く3次元コンピュータグラフィックスを体験していただきます。

なお本資料の内容は

HTML5による物理シミュレーション環境の構築 WebGLライブラリThree.js 入門
(http://www.natural-science.or.jp/article/20120220155529.php)

からの抜粋によって記述されています。

また各種の操作方法について、お茶の水女子大学理学部情報科学科の計算機室においてあるMacを前提とした記述になっている点に注意して下さい。

情報科学科計算機室のMacでSafariを起動するには、下端のアイコンが並んでいる場所(Dock)の中から、左から5番目にある方位磁石のアイコン(Safari)をダブルクリックします。

Part 1: まずは簡単な例を表示してみよう

まず最初に以下の2つのファイルを、同じ場所に（同じフォルダに）ダウンロードしてください。

three.min.js
tutorial1a.html

※上述のthree.min.js よりも本格的な機能を駆使するために Three.js を使う場合もあります。

情報科学科計算機室のMacでは以下の方法でダウンロードしてください。
  1. カーソル（矢印）を以下のファイル名にあててください。
  2. マウスでボタンの右側を押すとメニューが表示されますので、「リンク先のファイルを別名でダウンロード」を選んで下さい。 　
  3. ウィンドウが表示されますので、右下の「保存」ボタンを押してください。

そして tutorial1a.html をダブルクリックしてみてください。 正常に動作していれば、以下のような赤い立方体がSafariに表示されるはずです。

続いて、「Xcode」を起動して、tutorial1a.htmlを開いて下さい。

情報科学科計算機室のMacでは以下の手順でXcodeを起動してください。
  1. 左下端の青い顔のアイコン(Finder)をダブルクリックします。
  2. ウィンドウ左側の「アプリケーション」を選びます。 　
  3. 右側に「Xcode」というアイコンがありますのでダブルクリックします。 　
  4. Xcodeでファイルを開くには、画面左上のメニューで「File」の「Open」を選びます。
  5. tutorial1a.html を選びます。

これを見ると、72行にもわたって、意味不明な英単語や数字が並んでいることが確認できるかと思います。
これを書き換えることで、立体的ないろんなシーンを作ることができます。

Xcodeはデフォルトで行数が表示されません。
メニューバーの「Preferences→Text Editing」を選び、「Line numbers」にチェックすれば、
行数が表示されるので、以後の動作が楽になるかと思います。

Part 2: ちょっと書き換えてみよう: 見る位置、見る方向を変える

tutorial1a.html の28行目から、以下のような文があります。 

function initCamera() {
  var camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
  camera.position.x = 100;
  camera.position.y = 20;
  camera.position.z = 50;
  camera.up.x = 0;
  camera.up.y = 0;
  camera.up.z = 1;
  camera.lookAt( {x:0, y:0, z:0 } );

}

この中の 

  camera.position.x = 100;
  camera.position.y = 20;
  camera.position.z = 50;

に代入されている100,20,50の各値を変えると、見る位置が変化します。 （あまり大きく変えると赤い箱が見えなくなってしまうので、例えば100を99に変える、といった感じで少しずつ値を変えてみてください。）

情報科学科計算機室のMacでは以下の手順で表示の変化を確認してください。
  1. Xcode上でファイルを編集し、数値などを書き換えます。
  2. Xcodeを操作している状態で、画面左上のメニューで「File」の「Save」を選ぶと、書き換えた内容を保存します。
  3. Safariのウィンドウの上のほうにある、矢印が回転したようなアイコンをクリックすると、図形の表示が更新されます。
  4. あるいは編集中のHTMLファイルを再度ダブルクリックしてもいいです。この場合にはSafariのタブが1個増えます。

また、この中の 

  camera.lookAt( {x:0, y:0, z:0 } );

に代入されている0,0,0の各値を変えると、見る方向が変化します。 （あまり大きく変えると赤い箱が見えなくなってしまうので、例えば0を1に変える、といった感じで少しずつ値を変えてみてください。）
まずは以上について試してみてください。

Part 3: ちょっと書き換えてみよう: 箱の形・色・位置を変える

続いて箱を操作してみます。tutorial1a.htmlの49行目に以下のような記述があるのを見て下さい。 

 function initObject(){
    cube = new THREE.Mesh(
         new THREE.CubeGeometry(50,50,50),
         new THREE.MeshLambertMaterial({color: 0xff0000})
    );
    scene.add(cube);
    cube.position.set(0,0,0);

  }

この中で 

         new THREE.CubeGeometry(50,50,50),

は箱の横、縦、高さが全て50であることを意味します。この値を変えることで、箱を大きくしたり小さくしたり、また細長くすることができます。
また 

         new THREE.MeshLambertMaterial({color: 0xff0000})

は箱の色を設定しています。color:0xの後にある「ff0000」は赤を意味します。 この記号の意味を説明するのは簡単ではないので、詳しい説明は省略します。 他の色を使いたい場合には例えば、以下のような記号で書き換えてみてください。

白:0xffffff   緑:0x00ff00   黄:0xffff00   青:0x0000ff
肌:0xffaa55   紫:0xaa00aa   桃:0xff55ff   茶:0x880000

また 

    cube.position.set(0,0,0);

の0,0,0の3つの値が正方形の位置を決定しています。この値を変えることで、正方形の位置を動かすことができます。 （あまり大きく変えると赤い箱が見えなくなってしまうので、例えば0を1に変える、といった感じで少しずつ値を変えてみてください。）
引き続き、以上について試してみてください。

Part 4: ちょっと書き換えてみよう: 図形を増やす

(2)で赤い正方形の形・色・位置を変える方法について説明しましたが、今度は図形を増やしてみましょう。 まずは以下のファイルをダウンロードしてダブルクリックしてみてください。

tutorial1b.html

うまく表示されれば、下の画像のように3つの図形が表示されるでしょう。

ではtutorial1b.htmlをXcodeで開いてみてください。 先ほどとの違いは、49行目以降が長くなっていることです。 ここでSphereは球を表し、Planeは平面を表します。 

var cube, sphere, plane;
function initObject(){
  cube = new THREE.Mesh(
       new THREE.CubeGeometry(50,50,50),
       new THREE.MeshLambertMaterial({color: 0xff0000})
  );
  scene.add(cube);
  cube.position.set(0,-50,0);

  sphere = new THREE.Mesh(
    new THREE.SphereGeometry(20,20,20),
    new THREE.MeshLambertMaterial({color: 0x00ff00})
  );
  scene.add(sphere);
  sphere.position.set(0,0,0);

  plane = new THREE.Mesh(
    new THREE.PlaneGeometry(50, 50),
    new THREE.MeshLambertMaterial({color: 0x0000ff})
  );
  scene.add(plane);
  plane.position.set(0,50,0);
}

これらの図形をもっと増やしてみれば、立体的ないろんなものを作れるかと思います。ぜひ挑戦してみてください。
なお、球を2個以上使う、箱を2個以上使う、ということも自在にできます。 例えば球を3個使う場合には、以下のように、球に関する記述を必要な個数だけ繰り返して下さい。 

var sphere1, sphere2, sphere3;
function initObject(){
  cube = new THREE.Mesh(
       new THREE.CubeGeometry(50,50,50),
       new THREE.MeshLambertMaterial({color: 0xff0000})
  );
  scene.add(cube);
  cube.position.set(0,-50,0);

  sphere1 = new THREE.Mesh(
    new THREE.SphereGeometry(20,20,20),
    new THREE.MeshLambertMaterial({color: 0x00ff00})
  );
  scene.add(sphere1);
  sphere1.position.set(0,0,0);

  sphere2 = new THREE.Mesh(
    new THREE.SphereGeometry(20,20,20),
    new THREE.MeshLambertMaterial({color: 0x00ff00})
  );
  scene.add(sphere2);
  sphere2.position.set(-30,0,0);

  sphere3 = new THREE.Mesh(
    new THREE.SphereGeometry(20,20,20),
    new THREE.MeshLambertMaterial({color: 0x00ff00})
  );
  scene.add(sphere3);
  sphere3.position.set(30,0,0);
}

Part 5: アニメーション

WebGLでは物体を動かすこともできます。今回のセミナーでは時間の都合によりアニメーションの原理までは解説できませんが、以下のようなアニメーションをつくることができます。

tutorial2a.html
(物体を回転するだけの簡単なアニメーション)
tutorial2b.html
(見る位置も変化するアニメーション)
tutorial2c.html
(光と影の計算を改善したアニメーション)

Part 6: おわりに

今日のセミナーでは立体図形のごく簡単な編集を学びましたが、今日体験していただいたWebGLは既に、さまざまな場面で実用されています。以下のウェブページからいろんな実用例を体感してみてください。

http://webos-goodies.jp/archives/65_impressive_webgl_demos_and_apps.html
Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個　

またWebGLは特別なPCでのみ動くものではなく、最近買ったPCであればどこでも動くようになっています。もし今日のセミナーを機にWebGLに興味をもつ人がいましたら、今日編集したファイルをUSBメモリに保存して持ち帰って頂いて結構ですので、ぜひご自宅で続きをやってみてください。