箱の中身はそらでした

クリエイターを目指すエンジニア奮闘記

【WebGL】three.jsでHalloWorld【three.js】

はじめに

WebGLの勉強やってます。というか始めました。ド初心者です。
ぶっちゃけJavaScriptもド初心者です。

先日id:doxas様のWebGLスクールに参加しました。
日本においてWebGLという分野を引っ張っているすごいお方です。
初回だったので、「WebGLとは何ぞや?」というのと、「three.jsのライブラリ使って簡単に何か作ってみよう!」という内容が主でした。
初心者歓迎な内容だったので本当に助かるレベルでした。助かりました。

ってことで、まずはおさらい。
アウトプットだいじ。
※以下超初歩なんでググればいっぱい出てくるレベル。

WebGLとは何ぞや

JavaScript使ってWebページでCGできるよ!(雑
OpenGLのモバイル用のOpenGL ESをWeb用に移植したものらしい。
最悪OpenGLの解説とか見ても勉強になるとか。

three.jsとは何ぞや

素のWebGLは難しい*1ので、ある程度簡単に書けるようにしてくれるライブラリ。

とりあえずHalloWorld

まずは全文。講義のサンプルをほぼ流用。*2
使用しているthree.jsはr85です。

JS
(() => {
        window.addEventListener('load', () => {
        
        // 汎用変数の宣言
        let width = window.innerWidth;   // ブラウザの領域の幅
        let height = window.innerHeight; // ブラウザの領域の高さ
        let targetDOM = document.getElementById('webgl'); // スクリーンとして使うDOM

        let scene;    // シーン
        let camera;   // カメラ
        let renderer; // レンダラ
        let geometry; // ジオメトリ
        let material; // マテリアル
        let mesh;     // メッシュ
        let light;    // ライト

        // 各種パラメータ
        let CAMERA_PARAMETER = { // カメラのパラメータ
            fovy: 60,
            aspect: width / height,
            near: 0.1,
            far: 10.0,
            x: 0.0, // + 右, - 左
            y: 2.0, // + 上, - 下
            z: 5.0, // + 手前, - 奥
            lookAt: new THREE.Vector3(0.0, 0.0, 0.0) // 注視点
        };
        let LIGHT_PARAMETER = { // ライトのパラメータ
            color: 0xffffff,
            x: 4.0,
            y: 5.0,
            z: -5.0          
        };
        let RENDERER_PARAMETER = { // レンダラのパラメータ
            clearColor: 0x333333,  // 背景のリセットに使う色
            width: width,
            height: height
        };
        let MATERIAL_PARAMETER = { // マテリアルのパラメータ
            color: 0xff99ff
        };

    // シーン初期化
        scene = new THREE.Scene();

        // カメラの初期化
        camera = new THREE.PerspectiveCamera(
            CAMERA_PARAMETER.fovy,      // y軸視野角
            CAMERA_PARAMETER.aspect,    // 縦横比
            CAMERA_PARAMETER.near,      // これより近いと映らない
            CAMERA_PARAMETER.far        // これより遠いと映らない
        );
        camera.position.x = CAMERA_PARAMETER.x;
        camera.position.y = CAMERA_PARAMETER.y;
        camera.position.z = CAMERA_PARAMETER.z;
        camera.lookAt(CAMERA_PARAMETER.lookAt); // 注視点を設定
        
        // ライトの追加
        light = new THREE.DirectionalLight(0xffffff);
        scene.add(light);
        
        // レンダラの初期化
        renderer = new THREE.WebGLRenderer();
    // 背景色初期化
        renderer.setClearColor(new THREE.Color(RENDERER_PARAMETER.clearColor));
        // 表示サイズ
        renderer.setSize(RENDERER_PARAMETER.width, RENDERER_PARAMETER.height);
        targetDOM.appendChild(renderer.domElement); // ←表示しているCanvas

        // ジオメトリとマテリアルの初期化
        geometry = new THREE.BoxGeometry(1.0, 1.0, 1.0); // 箱。x,y,z

        material = new THREE.MeshBasicMaterial(MATERIAL_PARAMETER);

        // メッシュの初期化 
        mesh = new THREE.Mesh(geometry, material);

        // シーンにメッシュを追加する
        scene.add(mesh);

        // レンダラにシーンとカメラを渡して描画させる
        renderer.render(scene, camera);
    }, false);
})();

f:id:nil0303:20170502205240j:plain
基本形の完成。コメント見れば大体わかるべ(適当
流れとしてはsceneの中に箱やらカメラやらをボコボコ放り込んでいく感じらしい。
あと上の方でプロパティとか変数の定義しておくと見やすくなるし管理しやすいみたい。変数めっちゃ多い。


3Dオブジェクトを実際に突っ込んでいるのはここの部分。

        // ジオメトリとマテリアルの初期化
        geometry = new THREE.BoxGeometry(1.0, 1.0, 1.0); // 箱。x,y,z

        material = new THREE.MeshPhongMaterial(MATERIAL_PARAMETER);

        // メッシュの初期化 
        mesh = new THREE.Mesh(geometry, material);

        // シーンにメッシュを追加する
        scene.add(mesh);

three.jsの世界では、箱とかの3Dオブジェクトはメッシュと呼ぶらしい。
メッシュ(表示される箱とかのオブジェクト)」=「ジオメトリ(頂点情報)」+「マテリアル(色とか質感)」で出来ていて、メッシュをシーンに放り込んでいく。


マテリアルにはいくつか種類があるらしい。
MeshBasicMaterialとかMeshLambertMaterialとかMeshPhongMaterialとか。
今回はMeshPhongMaterialで箱を出してみた。
ちなみにMeshBasicMaterialだと陰影なしのベタ塗りした感じになる。使いどころがわからない。
f:id:nil0303:20170502213424j:plain


レンダラっていうのは・・・なんだろう。イメージは沸くけど。
実際に画面に表示させるために頑張ってくれているモノ。みたいな。


あとカメラやらライトやら、meshとかにもいろいろパラメータがある。
とりあえずposition(位置)とかrotation(回転)とかcolor(色)とか弄れるって考えておけば大丈夫そう。

次回

宿題やります。

*1:もう意味不明

*2:流用OKだそうです

ブログはじめました

nil0303と申します。にるです。
システム屋さんとして働いてます。
今はエンドユーザさん用にシステムのマニュアルとかの作成がメイン。
一応JavaC/C++はわかります。*1

学生時代からCGが好きだったので、WebGLの勉強中。
アウトプットも含めて技術ブログ的な趣向でやっていきたいと思います。

よろしくお願いします。

*1:ただし基本的なことだけ