three.jsで遊んでみる（13）

前回の続きです。
セルフシャドウがオカシイ感じの件ですが、
改善できました。

アレのせいかも、
と薄々感じてはいたのですが、
やはりアレのせいでした(^_^;)

順を追って書いてみます。

さて、
ミクさんのモデルは、スカートや袖の内側とか
ポリゴンが貼られてない所があるため、
普通にレンダリングするとその部分が透けてしまいます。
その状況はこちらで確認できます。
ただ、こちらで書いたように
edge処理による裏面描画で自動的にうまく行くようになっています。

ところがシャドウマップではこのことが問題となっていました。
光源から視た深度マップを作成する際、
モデルの裏面は除外(Culling)して処理します。
視点から見えない裏面を対象にするのは無駄なので当然な処理なわけですが、
ミクさんのモデルの場合はポリゴンが貼ってなくて
透けてしまう部分があるため
不自然な深度マップが出来てしまっていたのです。

そこで、
THREE.ShadowMapPlugin を改造して、
オブジェクト単位にCullingを無効にできるようにしました。
本来は対象にしなくても良い「面」についても描画することになるため、
処理的には冗長になってしまうのですが、仕方ありません。
以下の様な感じに改造しました。

THREE.ShadowMapPlugin = function ( ) {
	.
	.
	this.update = function ( scene, camera ) {
		.
		.
		_gl.enable( _gl.CULL_FACE );
		_gl.frontFace( _gl.CCW );
		if ( _renderer.shadowMapCullFrontFaces ) {
			_gl.cullFace( _gl.FRONT );
		} else {
			_gl.cullFace( _gl.BACK );
		}
		.
		.
		// render depth map
		for ( i = 0, il = lights.length; i < il; i ++ ) {
			.
			.
			// render regular objects
			for ( j = 0, jl = renderList.length; j < jl; j ++ ) {
				webglObject = renderList[ j ];
				if ( webglObject.render ) {
					object = webglObject.object;
					.
					.

					// ADD
					if (object.shadowMapCullDisable) {
						_gl.disable( _gl.CULL_FACE );
					} else {
						_gl.enable( _gl.CULL_FACE );
					}

					if ( buffer instanceof THREE.BufferGeometry ) {
						_renderer.renderBufferDirect( shadowCamera, scene.__lights, fog, material, buffer, object );
					} else {
						_renderer.renderBuffer( shadowCamera, scene.__lights, fog, material, buffer, object );
					}
					.
					.

ちなみに、

material.side = THREE.DoubleSide;

とやるとモデルのマテリアルを両面ポリゴン化することができるので、
これをやればCulling無効と同じになるはずと思って
やってみたのですがうまく行きません。
調べてみたらShadowMapPluginでは深度マップを生成するために、
専用のマテリアルが使用されていました。
（普通に考えれば、こういう実装になるよね）
つまりモデル側のマテリアルは無視されることになるので、
両面ポリゴン化しても効果はないわけです。
いいアイデアと思ったんですが、
そうは問屋がおろさない、ですね(^_^;)

ということで、
改善されたセルフシャドウなミクさんはこちらです。