WebGLを触って3Dを体感してみよう

2015年10月30日2015年11月14日

こんにちは、今回は「ブラウザ上」で憧れの3Dを描画してみようと思います。

入門編ということで、WebGLって？というところから、実際にどのように扱うかというところまでやっていきたいと思います。

僕も3Dは、Unity/Cocos2d-xで少し触った程度なので、初心者レベルです。

1 WebGLって？
2 利用イメージ
3 導入コスト
4 thre.jsで3D実装
- 4.1 3D表示手順
- 4.2 開発参考サイト
5 最後に

WebGLって？

Html5のcanvasでブラウザでも3Dを描画できてしまうというすごいものらしい。

WebGL（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。OpenGLもしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。
WebGLはHTMLのcanvas要素を使う。

※wikiぺディアから抜粋

利用イメージ

WebGLでこんなことができるらしい。

初音ミク

懐かしのロックマンが3D!!

ブラウザで欲しい商品・ゲーム等のランディングページで使えそうだなぁと思いました。

導入コスト

そのまま使うには「javascript」以外にも、「3DCGプログラミング知識」・「座標系・行列やベクトル等の線形代数学」等、普通に使うと学習コストも上がってしまいます。

ガチ導入は、コスト高そう・・・・

そこで、「three.js」というWebGLをラップしたライブラリーがあるので、それを使って簡単に体感してみましょう！！

thre.jsで3D実装

実際にライブラリを使って、3Dをブラウザに表示してみましょう。

three.js公式サイトのサンプル一覧

3D表示手順

①ライブラリファイルを取得する。

GitHubからjsファイルを取得しましょう。

ライブラリファイル取得

②取得ファイルを読み込む。


<script src="js/three.min.js"></script>

③プログラミング


<script>

    var scene, camera, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

</script>

これだけとは。。。。恐るべきthree.js。

プログラミング部分でやっているのは、シーン、カメラ、およびキューブを作成し、シーンに立方体を追加します。

その後、シーンやカメラのWebGLのレンダラを作成し、それはdocument.body要素に、そのビューポートを追加。

最後に、カメラのシーン内のキューブをアニメーション化しているようです。

他にもthree.jsをgitから取得すると色々サンプルもありました。

全体のソースは、下記になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webglサンプル</title>
<!-- three.jsを読み込む -->
<script type="text/javascript" src="three.min.js"></script>
</head>
<body>
<script>

    var scene, camera, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

</script>

</body>
</html>