iOSで実行した場合、three.jsのライトの数に制限はあるのでしょうか。
three.jsで遠隔光源、スポットライト、点光源など複数のライトをシーンに追加してシャドーマップをオンにすると図形が表示されません。
ライトの点灯の有無にかかわらず、シーンに5～7個のライトを追加するとこの現象は発生します。
WebGLRendererでmaxLights: 16としてみましたが状況は変わりませんでした。
webglはライトの制限数が8個までと聞きましたが、Windows、Androidでは問題有りません。iOSだけでの現象となっています。iOSの不具合との認識で良いでしょうか。サンプルではAmbientLightを入れて8個なのでギリギリ制限には引っかからないと思うのですが。
Windows,androidでは正常に表示されます。
iOSでは制限があるのでしょうか。
確認したデバイスはiPhone 5s、iPad Proの二つで確認しています。
解決策をご存知のかた、よろしくお願いいたします。
記入がおそくなり申し訳ございません。
下記にサンプルソースを添付します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - PointLight ShadowMap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - PointLight ShadowMap by <a href="https://github.com/mkkellogg">mkkellogg</a>
</div>
<script src="three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer, stats;
var pointLight, pointLight2;
var pointLight3, pointLight4, pointLight5, pointLight6, pointLight7;
var torusKnot;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 10, 40 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x222233 ) );
// Lights
function createLight( color ) {
var pointLight = new THREE.PointLight( color, 1, 30 );
pointLight.castShadow = true;
pointLight.shadow.camera.near = 1;
pointLight.shadow.camera.far = 30;
// pointLight.shadowCameraVisible = true;
pointLight.shadow.bias = 0.01;
var geometry = new THREE.SphereGeometry( 0.3, 12, 6 );
var material = new THREE.MeshBasicMaterial( { color: color } );
var sphere = new THREE.Mesh( geometry, material );
pointLight.add( sphere );
return pointLight
}
pointLight = createLight( 0xffffff );
scene.add( pointLight );
pointLight2 = createLight( 0xff0000 );
scene.add( pointLight2 );
pointLight3 = createLight( 0x00008b );
pointLight3.position.set(10,2,0);
scene.add( pointLight3 );
pointLight4 = createLight( 0x00ff7f );
pointLight4.position.set(0,20,10);
scene.add( pointLight4 );
pointLight5 = createLight( 0xff7f50 );
pointLight5.position.set(20,20,20);
scene.add( pointLight5 );
pointLight6 = createLight( 0x32CD32 );
pointLight6.position.set(0,20,-20);
scene.add( pointLight6 );
pointLight7 = createLight( 0x32CD32 );
pointLight7.position.set(10,0,-10);
scene.add( pointLight7 );
var geometry = new THREE.TorusKnotGeometry( 14, 1, 150, 20 );
var material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
shininess: 100,
specular: 0x222222
} );
torusKnot = new THREE.Mesh( geometry, material );
torusKnot.position.set( 0, 5, 0 );
torusKnot.castShadow = true;
torusKnot.receiveShadow = true;
scene.add( torusKnot );
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 10,
specular: 0x111111,
side: THREE.BackSide
} )
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 10;
mesh.receiveShadow = true;
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild( renderer.domElement );
stats = new Stats();
document.body.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = performance.now() * 0.001;
pointLight.position.x = Math.sin( time ) * 9;
pointLight.position.y = Math.sin( time * 1.1 ) * 9 + 5;
pointLight.position.z = Math.sin( time * 1.2 ) * 9;
time += 10000;
pointLight2.position.x = Math.sin( time ) * 9;
pointLight2.position.y = Math.sin( time * 1.1 ) * 9 + 5;
pointLight2.position.z = Math.sin( time * 1.2 ) * 9;
torusKnot.rotation.y = time * 0.1;
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>