ログイン

初心者が話すWebGL -第1回- 『WebGLとは』

 2019.2.20 グローバルゴリラー李 ゴリラーブログ ブログ

中国出身のグローバルゴリラー、李と申します。
今日はWebGLについて書いていきます。

WebGL

技術の世界においては、発展スピードが速すぎて、あっという間に立ち後れることになります。WebGLと出会って、すごく嬉しかったです。3Dの世界を作れることだけではなく、なんとブラウザで動作できるのです。
例えばChromeで➞http://aleksandarrodic.com/p/jellyfish/を開くと僕が何を言いたいのかがわかるでしょう。これを見ますと、どうやって実現したのだろうと気になりませんか?これから、紹介も含めて説明していきます。

WebGL(ウェブジーエル)は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。WebGLはHTML5のcanvas要素に描画する。----出典: フリー百科事典『ウィキペディア(Wikipedia)』

three.js

しかし、WebGLだけで3Dプログラムを作るのは大変です。でも、いいことにオープンソースの世界にはthree.jsというライブラリがあります。➞https://github.com/mrdoob/three.js

早速ですが、まずthree.jsの導入。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>

ChromeのConsoleでthree.jsの導入は成功であることを確認します。THREE.REVISIONを入力してEnterを押します。下の画像のようにバージョン番号が表示されたらOKです。

サンプル作成

一番簡単なサンプルを試しに作成してみます。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
		
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
		
        var renderer = new THREE.WebGLRenderer();
		
        renderer.setSize(window.innerWidth, window.innerHeight);
		
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

次回からはscene 、camera 、rendererを順番に紹介していきたいと思います。

© 2019 Mountain Gorilla Co., Ltd. 

プライバシーポリシー