2013/10/22

Webサイト上で3D表示を実現!!canvas要素で3D処理の基本

Web上で3D表示が!?canvas要素で3D処理を行う方法

HTML5で新規追加されたcanvas要素を使用することで,Web上でも3D処理を割と簡単に行うことが可能になりました.
今回はその方法と簡単なサンプルを紹介します.画像だけの表示では出来なかった演出も可能になるので,Webページのデザインの幅が拡がると思います.

※なおこの記事はIE以外のモダンブラウザでご覧ください.(IEではサンプルが表示されません)

目次

新機能!canvas要素とは?

HTML5から新規に追加された要素です.
名前の通りキャンバス(要素内)に図形や画像等のグラフィックを描画することができます。

JavaScriptを利用することで要素内に描画したグラフィックの操作が可能なため,移動や再描画等を行い,様々な演出を加えることが出来ます.
2Dのグラフィックだけでなくブラウザの性能によっては3Dのグラフィックの描画を行えます.

3D描画の要!WebGL

WebGLとは,OpenGL(Open Graphics Libraryは,Khronosが策定している2D,3Dのコンピュータグラフィックスに対応し,Windows,Mac,Linuxなどのクロスプラットフォームに対応したグラフィックハードウェアAPI)と同様のAPIと,HTML5のcanvas要素を利用してWebブラウザ上に3Dの画像を描画するために策定されたものがWebGLです.

WebGLをcanvas内で利用するには,複雑な演算を行わなければならないため,JavaScriptで記述された「three.js」というライブラリを利用してプログラムを記述していきます.
このライブラリを使用することで,処理の記述が容易になることなどから大変人気があり,本記事でもこのライブラリを利用して3D描画の方法を紹介します.

three.jsの使い方とサンプル

まずはサンプルを見ていただきましょう.
ワイヤーフレームの立方体を表示させるサンプルになります.

まずthree.jsをmrdoob / three.jsGitHub.)からダウンロードし,読み込みます.

<div id="canvas"></div>

そして,上記の要素を任意の場所に記述します.ここにcanvas要素が生成されます.

window.addEventListener("load", function() {
    function threeRender() {
	var renderer = new THREE.WebGLRenderer({
	    "antialias" : true
	});
	renderer.setSize(400, 400);
	document.getElementById("canvas").appendChild(renderer.domElement);

	var camera = new THREE.PerspectiveCamera(40, 1.0, 1, 10000);
	camera.position.set(50, 20, 60);
	camera.lookAt({
	    x : 0,
	    y : 0,
	    z : 0
	});

	var cube = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30), new THREE.MeshLambertMaterial({
	    "color" : 0xffffff,
	    "wireframe" : true
	}));

	var scene = new THREE.Scene();
	scene.add(cube); 
	scene.add(camera);
	
	 renderer.render(scene, camera);
    }
    threeRender();

}, false);

JavaScriptのソースコードはこのようになっています.

では処理の内容ごとに分割して説明していきます.

レンダリングオブジェクトの生成

/* オブジェクトの生成 */
var renderer = new THREE.WebGLRenderer({
	    "antialias" : true
	});
/* サイズの設定 */
renderer.setSize(400, 400);
/* HTML上に出力 *//*  */
document.getElementById("canvas").appendChild(renderer.domElement);

まず,レンダリングするオブジェクトを生成します.
デフォルトの設定ではアンチエイリアスがかからない設定になっているので,パラメータにtrueを指定することで,アンチエイリアスをかけています.

次に,setSize()メソッドを利用して描画領域のサイズを設定しています.

そして,先ほど付与したIDのあるdiv要素内に出力します.このオブジェクトにはcanvas要素が内包されているので,そのまま出力すると,HTML上のdiv要素内にcanvas要素が生成されます.

カメラの生成

/* カメラの生成 */
var camera = new THREE.PerspectiveCamera(40, 1.0, 1, 10000);
/* カメラ位置の設定 */	
camera.position.set(50, 20, 60);
camera.lookAt({
    x : 0,
    y : 0,
    z : 0
});

次にカメラの設定です

three.jsには平行投影法透視射影法の2つのカメラがあります.
PerspectiveCameraを指定すると透視射影法のカメラを生成できます.

position.set()メソッドを利用してカメラ位置をx,y,zのそれぞれの座標で指定して設定します.
そしてlookAt()メソッドで演算処理を行っています.

物体の生成

/* 立方体の生成 */
var cube = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30),
/* 素材の設定 */     
new THREE.MeshLambertMaterial({
	    "color" : 0xffffff,
	    "wireframe" : true
	}));

立方体は,パラメータにサイズと素材を指定して,THREE.Mesh()として生成します.
さらに 素材には物体の色や素材の質感などのパラメータを指定することが出来ます.

シーンの生成

/* シーンの生成 */
var scene = new THREE.Scene();
	scene.add(cube); 
	scene.add(camera);

そして,シーンを生成します.THREE.Scene()として生成したシーンに事前に生成した立方体とカメラをadd()メソッドを利用して追加します.

レンダリングの開始

/* 描画の開始 */
 renderer.render(scene, camera);

最後にrender()メソッドのパラメータにシーンとカメラを指定して,描画処理を行います.

他にも球やトーラス,文字などの物体を生成することができます.
光源の設定をすることで陰影を付けたり,物体にテクスチャマッピングを施したり,物体に回転や移動運動を行わせたりと,様々な演出を加える事が出来ます.

そういった手法は次回以降に説明していきます.

まとめ

いかがだったでしょうか.3Dでの描画を行う方法が意外と簡単だということがおわかりいただけたかと思います.回転したり移動したりする物体がWebページ上にあれば目を引くこと間違いなしですね.是非ご自分のWebページに3D要素を出力してみてはいかがでしょうか.