CX's Hatena Blog

はてなブログを使ってみるテスト

PhiloGL で地球を回してみるテスト

○○ で地球を回してみるシリーズ。

今回日程 シリーズ構成言語
1日目OpenGL で地球を回してみるテスト C/C++
2日目DirectX で地球を回してみるテスト C/C++
3日目Java 3D で地球を回してみるテスト Java
4日目WebGL で地球を回してみるテスト JavaScript
5日目Three.js で地球を回してみるテスト JavaScript
6日目Babylon.js で地球を回してみるテストJavaScript
7日目gl.enchant.js で地球を回してみるテストJavaScript
8日目PhiloGL で地球を回してみるテストJavaScript
9日目CubicVR.js で地球を回してみるテストJavaScript
最終日Away3D で地球を回してみるテストJavaScript
追加+1Flash 版 Away3D で地球を回してみるテストActionScript
追加+2WPF で地球を回してみるテストC# + XAML
追加+3JavaFX 3D で地球を回してみるテストJava

今回は、Sencha TouchExt JS の開発で知られる Sencha 社PhiloGL を使ってみたいと思います。

f:id:cx20:20140127070309p:plain

0. 事前準備

WebGL に対応したブラウザ(任意のブラウザ)とライブラリ「PhiloGL」を用意します。

1. ソースを作成する

  • earth.html
<!DOCTYPE html>
<html>
<head>
<title>Hello, PhiloGL World!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="PhiloGL.js"></script>
<script type="text/javascript" src="earth.js"></script>
</head>
<body onLoad="webGLStart();">
  <canvas id="renderCanvas" width="450" height="450"></canvas>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

body {
    background: #000;
}
  • earth.js
function webGLStart() {
    var sphere = new PhiloGL.O3D.Sphere({
        nlat: 30,
        nlong: 30,
        radius: 2,
        textures: 'earth.jpg'
    });
    sphere.rotation.x = Math.PI;

    PhiloGL('renderCanvas', {
        camera: {
            position: {
                x: 0,
                y: 0,
                z: -5.5
            }
        },
        textures: {
            src: ['earth.jpg'],
            parameters: [{
                name: 'TEXTURE_MAG_FILTER',
                value: 'LINEAR'
            }, {
                name: 'TEXTURE_MIN_FILTER',
                value: 'LINEAR_MIPMAP_NEAREST',
                generateMipmap: true
            }]
        },
        onLoad: function (app) {
            var gl = app.gl,
                program = app.program,
                scene = app.scene,
                canvas = app.canvas,
                camera = app.camera;

            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clearDepth(1.0);
            gl.enable(gl.DEPTH_TEST);
            gl.depthFunc(gl.LEQUAL);
            gl.viewport(0, 0, +canvas.width, +canvas.height);
            scene.add(sphere);
            draw();

            function draw() {
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                sphere.rotation.y += 0.01;
                sphere.update();
                scene.render();
                PhiloGL.Fx.requestAnimationFrame(draw);
            }
        }
    });
}

テクスチャの画像ファイルは、いつもの「earth.jpg」です。

f:id:cx20:20140125025413j:plain

2. ローカルで実行してみる

ブラウザにて earth.html を開きます。

f:id:cx20:20140127070309p:plain

3. jsdo.it で実行してみる

参考

■ ぜひ触れてみよう。Sencha Inc.開発のWebGLフレームワーク「PhiloGL」| - MOONGIFT

http://www.moongift.jp/2011/02/20110303-3/

■ senchalabs-philogl - GitHub

https://github.com/senchalabs/philogl

■ PhiloGL A WebGL Framework for Data Visualization, Creative Coding and Game Development

http://www.senchalabs.org/philogl/