PhiloGL で地球を回してみるテスト
○○ で地球を回してみるシリーズ。
今回は、Sencha Touch や Ext JS の開発で知られる Sencha 社 の PhiloGL を使ってみたいと思います。
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>
- style.css
* { 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」です。
2. ローカルで実行してみる
ブラウザにて earth.html を開きます。
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