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

2015年11月14日

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

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

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

スポンサーリンク

WebGLって?

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

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

※wikiぺディアから抜粋

利用イメージ

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

webgl-hatune-miku
初音ミク

webgl-sample-rockman
懐かしのロックマンが3D!!

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

導入コスト

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

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

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

thre.jsで3D実装

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

three-sample-list
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>

開発参考サイト

他にもやってみたいという方向けの参考サイトです。

・これから始める方向けに、細かく概念や手順が載ってます。
参考WebGL を始める全ての人へ

・WebGL本家のサイト
参考公式サイト

・three.jsのサイト
参考公式サイト

・three.jsでプログラミング
参考three.jsを使ったWebGLプログラミング!

・もっと勉強したい方

最後に

今回は、触りの部分だけでしたが、ライブラリを使えば、思った以上に3Dを使えるようになります。

カメラ操作もライブラリを読み込むだけで、簡単に実装できてしまうのと「three.js」のライブラリのzipファイルの中には、サンプルコードもたくさん入ってましたので、使えそうな部品を応用して使えば、WEB制作でも使えるなぁと思いました。


スポンサーリンク
PAGE TOP