WebGLを触って3Dを体感してみよう
こんにちは、今回は「ブラウザ上」で憧れの3Dを描画してみようと思います。
入門編ということで、WebGLって?というところから、実際にどのように扱うかというところまでやっていきたいと思います。
僕も3Dは、Unity/Cocos2d-xで少し触った程度なので、初心者レベルです。
スポンサーリンク
WebGLって?
Html5のcanvasでブラウザでも3Dを描画できてしまうというすごいものらしい。
WebGLはHTMLのcanvas要素を使う。
※wikiぺディアから抜粋
利用イメージ
WebGLでこんなことができるらしい。
懐かしのロックマンが3D!!
ブラウザで欲しい商品・ゲーム等のランディングページで使えそうだなぁと思いました。
導入コスト
そのまま使うには「javascript」以外にも、「3DCGプログラミング知識」・「座標系・行列やベクトル等の線形代数学」等、普通に使うと学習コストも上がってしまいます。
ガチ導入は、コスト高そう・・・・
そこで、「three.js」というWebGLをラップしたライブラリーがあるので、それを使って簡単に体感してみましょう!!
thre.jsで3D実装
実際にライブラリを使って、3Dをブラウザに表示してみましょう。
three.js公式サイトのサンプル一覧
3D表示手順
①ライブラリファイルを取得する。
GitHubからjsファイルを取得しましょう。
②取得ファイルを読み込む。
<script src="js/three.min.js"></script>
③プログラミング
<script> var scene, camera, renderer; var geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; geometry = new THREE.BoxGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } </script>
これだけとは。。。。恐るべきthree.js。
プログラミング部分でやっているのは、シーン、カメラ、およびキューブを作成し、シーンに立方体を追加します。
その後、シーンやカメラのWebGLのレンダラを作成し、それはdocument.body要素に、そのビューポートを追加。
最後に、カメラのシーン内のキューブをアニメーション化しているようです。
他にもthree.jsをgitから取得すると色々サンプルもありました。
全体のソースは、下記になります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webglサンプル</title> <!-- three.jsを読み込む --> <script type="text/javascript" src="three.min.js"></script> </head> <body> <script> var scene, camera, renderer; var geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; geometry = new THREE.BoxGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } </script> </body> </html>
開発参考サイト
他にもやってみたいという方向けの参考サイトです。
・これから始める方向けに、細かく概念や手順が載ってます。
参考WebGL を始める全ての人へ
・WebGL本家のサイト
参考公式サイト
・three.jsのサイト
参考公式サイト
・three.jsでプログラミング
参考three.jsを使ったWebGLプログラミング!
・もっと勉強したい方
最後に
今回は、触りの部分だけでしたが、ライブラリを使えば、思った以上に3Dを使えるようになります。
カメラ操作もライブラリを読み込むだけで、簡単に実装できてしまうのと「three.js」のライブラリのzipファイルの中には、サンプルコードもたくさん入ってましたので、使えそうな部品を応用して使えば、WEB制作でも使えるなぁと思いました。