

three.jsで遠隔光源、スポットライト、点光源など複数のライトをシーンに追加してシャドーマップをオンにすると図形が表示されません。

ライトの点灯の有無にかかわらず、シーンに5～7個のライトを追加するとこの現象は発生します。

WebGLRendererでmaxLights: 16としてみましたが状況は変わりませんでした。

webglはライトの制限数が8個までと聞きましたが、Windows、Androidでは問題有りません。iOSだけでの現象となっています。iOSの不具合との認識で良いでしょうか。サンプルではAmbientLightを入れて8個なのでギリギリ制限には引っかからないと思うのですが。

Windows,androidでは正常に表示されます。  
iOSでは制限があるのでしょうか。

確認したデバイスはiPhone 5s、iPad Proの二つで確認しています。

解決策をご存知のかた、よろしくお願いいたします。

記入がおそくなり申し訳ございません。  
下記にサンプルソースを添付します。

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2016-12-14T13:06:29.820
31151
2022-09-13T12:04:20.557
2019-11-27T07:08:26.457
3060
19539
question
ios three.js
iOSで実行した場合、three.jsのライトの数に制限はあるのでしょうか。


PC、Androidでも8〜15個程光源を入れると同じ現象がでました。  
ハードウエアリソース(主にGPU)またはOSの制限のようです。  
iOSの場合、制約がきついようです。


CC BY-SA 3.0
2017-10-14T12:56:40.843
38700
2017-10-14T12:56:40.843
19539
31151
answer