ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

夏なので、WebGL始めました

突然ですが、今週からWebGLの勉強を始めてみました。

WebGLというのは「ブラウザ上で3DCGを表現できるグラフィックス技術」のことで、イメージとしては
OpenGLをWeb上で使う」という表現が近いのかなと勝手に思っています。

今までWebGLはあまり興味が無かったのですが、先日の天下一altJS勉強会で
同じDart枠で発表されていた方のデモを拝見してからモチベーション急上昇中です。

実際に動いてるモノを見ると心に響く物もある。ということで早速やってみました。

今回は、three.jsという「WebGLを複雑な手順なしで直感的に操作することができるライブラリ」を使って 立方体のアニメーションを作ってみます。

まずはthree.jsのHP

three.js - JavaScript 3D library

からライブラリ本体をダウンロード。ダウンロードしたものを解凍したら、
buildフォルダの中から「three.js」「three.min.js」を持ってきて任意の場所にコピーします。

必要なモノを用意できたら、コードを書いていきましょう。
今回自分が本家HPを見ながら書いたコードは以下の通りです。

main.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Hello three.js</title>
</head>
<body>
    
    <script src="js/three.min.js"></script>
    <script type="text/javascript">
   var main = function() {

       // シーン作成
       var scene = new THREE.Scene();

       // カメラ作成
       var width = window.innerWidth;
       var height = window.innerHeight;
       var fov = 60;
       var aspect = width / height;
       var near = 1;
       var far = 1000;
       var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
       // カメラの位置調整
       camera.position.set(0, 0, 50);

       // レンダラーの配置
       var renderer = new THREE.WebGLRenderer();
       renderer.setSize(width, height);
       document.body.appendChild( renderer.domElement );

       // 光源追加
       var directionalLight = new THREE.DirectionalLight( 0xffffff );
       directionalLight.position.set(0, 0.7, 0.7);
       scene.add( directionalLight );

       // 表示する物体を追加する
       var geometry = new THREE.BoxGeometry(20, 20, 20);
       // 赤、緑、青で三色で構成された素材を使用
       var material = new THREE.MeshNormalMaterial();
       var mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );

       // 少しづつ動かすアニメーション
       function rendering() {
           mesh.rotation.x += 0.01;
           mesh.rotation.y += 0.01;
           renderer.render( scene, camera );
           requestAnimationFrame(rendering);
       }
       rendering();

   };

   window.addEventListener('DOMContentLoaded', main, false);
   </script>

</body>
</html>
  • 物体を表示する場所
  • 物体を写すカメラ、カメラを置く位置
  • 物体を照らす光源
  • 物体のアニメーション処理

等をJSで1つ1つ定義していきます。この40行くらいのJSを書くと、
アニメーションで動く立方体をブラウザ上で表現することが出来ます。
結果が気になる方は是非お試しください。

自分でも理解し切れていない部分が多々あるので、それはこれからの学習で補っていきたいと思います。

目先の目標はプラネタリウムっぽいものを自作すること・・

7月前半くらいには何とか作りあげたいですね。

おしまい