※画像をクリックして実際の動作が見れます。chrome 推奨です。

こんにちは、ほひょんです。

いきなり「遊ぼう」でちょっと怒られそうな気がしますが

技術は技術でもユースフルというよりはちょっとインタレスティングのほうがインタレスティングなのでインタレスティングな記事書いてみようかと思います。

なので今回はWebGLについて

WebGLとは、

WebGL[1]（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。 WebGLはHTMLのcanvas要素を使う。

と、wikipediaに書いてありました。

ブラウザで３Dを扱う技術です。

?で、WebGLをそのまま扱おうとするとなかなかめんどくさいのですが、Mr.doob氏のThree.jsという素敵なライブラリを使うと便利でいいです。(サンプル)

なのでThree.jsを使って簡単な立方体を作ってみましょう。

まず、コンピューター上で３Dを表示する概念的なものとして

ざっと以下の様な工程が必要になります。(順番は多少前後します。)

・カメラを用意
・シーンを用意
・メッシュを作成
・ジオメトリーを作成
・マテリアルを作成
・メッシュをシーンに追加
・光源を作成
・光源をシーンに追加
・レンダラーを用意
・レンダラーをDOMに追加
・レンダリング
・必要であればアニメーション

まずはHTMLを。

・Three.jsはこちらよりダウンロードしてください。
・canvasは内部的に生成されるようです。

次にjavascriptです。

var width = window.innerWidth;
var height = window.innerHeight;

var geometry = new THREE.CubeGeometry(150, 150, 150); //立方体作成
var material = new THREE.MeshLambertMaterial({color: 0x00aaaa}); //材質、色
var mesh     = new THREE.Mesh(geometry, material); //上の二行を合わせて「メッシュ」とする
mesh.rotation = {x: 0.1, y: 0.5, z: 0.0};

var camera   = new THREE.PerspectiveCamera(40, width/height, 1, 1000); //カメラ作成 画角が40度、距離1～1000までを表示
camera.position.z = -400; //カメラのポジションのZ軸が-400
camera.lookAt(mesh.position); //メッシュの位置にカメラを向ける

var scene    = new THREE.Scene(); //シーン作成
scene.add(mesh); //シーンにメッシュを追加

var light    = new THREE.DirectionalLight(0xffffff, 1.5); //光源の色と強さ
light.position = {x: 0, y: 0.2, z: -1} //光源の位置
scene.add(light); //光をシーンに追加

var renderer = new THREE.WebGLRenderer(); //レンダラ作成
renderer.setSize(width, height); //サイズ設定

renderer.domElement.addEventListener("mousemove", function(event){
?mesh.rotation.x = event.clientX / 100; //メッシュの傾きをマウスに追従させる
?mesh.rotation.y = event.clientY / 100;
?render();
}, false);

function render(){
?renderer.render(scene, camera); //レンダリング
}
window.onload = function(){
?document.getElementById("canvas").appendChild(renderer.domElement);
?render();
}

下記リンクにサンプルなど網羅されていて参考になりまっせ。
THREE.js Doc
こんな感じで簡単に3Dを表示させることができます。
面白いですね!
次はWeb Audio APIについて書いてみようと思いま～す。お楽しみに～