読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

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

Babylon.js で地球を回してみるテスト

Windows WebGL JavaScript Babylon.js IE11 Chrome Firefox

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

今回日程 シリーズ構成言語
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

今回は、MS の中の人による WebGL ライブラリ「Babylon.js」を用いてみたいと思います。

f:id:cx20:20140125025416p:plain

0. 事前準備

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

1. ソースを作成する

  • earth.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, Babylon.js World!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" width="465" height="465"></canvas>
<script type="text/javascript" src="earth.js"></script>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

body {
    background: #000;
}
  • earth.js
if (BABYLON.Engine.isSupported()) {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
    var sphere = BABYLON.Mesh.CreateSphere("sphere", 30, 1, scene);
    var material = new BABYLON.StandardMaterial("default", scene);
    material.diffuseTexture = new BABYLON.Texture("earth.jpg", scene);
    material.emissiveColor = new BABYLON.Color3(1.0, 1.0, 1.0);
    sphere.material = material;
    scene.clearColor  = new BABYLON.Color3(0.0, 0.0, 0.0);
    
    var renderLoop = function () {
        engine.beginFrame();
        scene.render();
        engine.endFrame();
        BABYLON.Tools.QueueNewFrame(renderLoop);
    };
    
    BABYLON.Tools.QueueNewFrame(renderLoop);
    
    var alpha = 0;
    sphere.scaling.x = 7.0;
    sphere.scaling.y = 7.0;
    sphere.scaling.z = 7.0;
    scene.beforeRender = function() {
        sphere.rotation.y = alpha;
        alpha += 0.01;
    };
}

ちゃんと確認した訳ではないですが、コード量としては、Three.js と、それ程、変わらない感じです。

ちなみに、テクスチャの画像ファイルですが、前回の「earth.jpg」

f:id:cx20:20140125025413j:plain

を、そのまま使ってみたところ、

f:id:cx20:20140125025415p:plain

と、謎の惑星になってしまいました(^^;;

とりあず、90度回転+左右反転したところ、見覚えのある惑星が表示されるようになりました。

f:id:cx20:20140125024050j:plain

これが、正しいのか、よく分かっていませんが。。。

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

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

f:id:cx20:20140125025416p:plain

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

はてなブログが IE10 の互換性モードを指定している為、WebGL が表示できないようです。IE11 の場合は、別ウィンドウで開いてみてください。

参考

■ Babylon Engine for HTML5

http://www.babylonjs.com/

■ BabylonJS_Babylon.js · GitHub

https://github.com/BabylonJS/Babylon.js