ブログ
blog
【WebGL特集】第7回：影とアンチエイリアシング
※この記事はGoogleChrome9以上 またはFireFox4以上で見てください。
webGL特集最終回です。最後は影とアンチエイリアシングの設定をして
webGLの表示をきれいにしてみましょう。
次のソースは、「第5回：Blenderでアニメーション出力」で作ったwebGLに、影とアンチエイリアシングの設定を与えたものです。
ハイライト部分が追記、修正した記述です。
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #fffffff;
}
</style>
</head>
<body>
<script src="build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
var clock = new THREE.Clock();
var morphs = [];
init();
animate();
function init() {
//Camera
camera = new THREE.PerspectiveCamera( 70, 640/480, 1, 2000 );
camera.position.set( 0, 50, 500 );
trackball = new THREE.TrackballControls( camera );//カメラぐりぐりしたいならこれと・・・
//Scene
scene = new THREE.Scene();
// Json
var loader = new THREE.JSONLoader();
loader.load( 'charaAni.js', function ( geometry, materials ) {
var material = materials[ 0 ];
material.morphTargets = true;;
var faceMaterial = new THREE.MeshFaceMaterial( materials );
morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
morph.duration = 1000; // one second duration
var s = 40
morph.scale.set( s, s, s );
morph.position.set( 0, 0, 0 );
morph.matrixAutoUpdate = false;
morph.updateMatrix();
morph.castShadow = true;
morph.receiveShadow = true;
scene.add( morph );
morphs.push( morph );
} );
//グリッド
planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
scene.add( planeMesh );
//グリッド 影専用
planeGeometry2 = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xffffff } );
planeMesh2 = new THREE.Mesh( planeGeometry2, planeMaterial2 );
planeMesh2.rotation.x = -90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
planeMesh2.receiveShadow = true; //影
scene.add( planeMesh2 );
//ライティング
var directionalLight = new THREE.DirectionalLight( 0xffffff, 3);
scene.add( directionalLight );
var AmbientLight = new THREE.AmbientLight( 0xA9A9A9 ); // soft white light
scene.add( AmbientLight );
var SpotLight = new THREE.SpotLight( 0xffffff );
SpotLight.position.set( -300, 500, 100 );
SpotLight.castShadow = true;//影
scene.add( SpotLight );
//レンダラー
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( 640, 480 );
renderer.shadowMapEnabled = true;//影
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
// animate morphs
var delta = clock.getDelta();
if ( morphs.length ) {
for ( var i = 0; i < morphs.length; i ++ )
morphs[ i ].updateAnimation( 600 * delta );
}
render();
}
function render() {
var timer = Date.now() * 0.0005;
renderer.render( scene, camera );
trackball.update(); //これ追加
}
</script>
</body>
</html>
【ソースの解説】
影をつけるためには、オブジェクトとライトとレンダーの３つの設定を行います。
アンチエイリアシングは、レンダラーの設定でアンチエイリアシングをTrueにするだけです。
morph.castShadow = true;
morph.receiveShadow = true;
オブジェクトの影の設定です。castShadowプロパティでキャラに光が当たったときに、影のもとになるかどうかの設定をし、
receiveShadowプロパティで、キャラ自体に影を落とすかどうかを設定します。
//グリッド 影専用
planeGeometry2 = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xffffff } );
planeMesh2 = new THREE.Mesh( planeGeometry2, planeMaterial2 );
planeMesh2.rotation.x = -90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
planeMesh2.receiveShadow = true; //影
scene.add( planeMesh2 );
必須ではありませんが。地面がワイヤーフレームなのでこのままでは影が投影されません。
影専用の板ポリゴンを用意してグリッドなのに影を無理やり投影させています。65行目のreceiveShadowで影を受ける設定をします。
var AmbientLight = new THREE.AmbientLight( 0xA9A9A9 ); // soft white light scene.add( AmbientLight ); var SpotLight = new THREE.SpotLight( 0xffffff ); SpotLight.position.set( -300, 500, 100 ); SpotLight.castShadow = true;//影 scene.add( SpotLight );
ディレクションライトのみでは、影が落ちないので、スポットライトを設定しています。また擬似環境光としてアンビエントライトを設定しています。
影の設定はスポットライトのみに設定しています。77行目のcastShadowで影を放つ設定をしています。
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( 640, 480 );
renderer.shadowMapEnabled = true;//影
82行目はアンチエイリアシングの設定です。webGLRendererの引数でantialiasプロパティをtrueにするだけでＯＫです。
84行目のshadowMapEnabledプロパティをTrueにすると、影もレンダリングされるようになります。
以上です。
全7回のwebGL特集、いかがでしたでしょうか。
webGL(Three.js)はwebデザイナーでもなければ使う機会もないでしょうし、アニメーターには特別必要なスキルではないとも思います。
しかし近い将来、動画にかわって、webGLでグリグリと気軽にアニメーションを発表できる時代になれば
CGアニメーターはもっと「動き」を作るのが楽しくなるのではないでしょうか。アニメーションに興味を持ってくれる人もきっと増えると思います。
そう思いこの記事を書きはじめました。
IE11の登場までもう少し。キャラクターアニメーターにとって、すごしやすい時代になることを願っています。
おしまい