three.js preserveDrawingBufferがiOSで動作しない

Question

パーティクルシステムをレンダリングしている。 SafariとChromeの両方のiOS以外のすべてのブラウザで動作します。パーティクルは移動しますが、キャンバスはすべてのフレームでクリアされているように見えます。つまり、履歴の代わりに現在のパーティクルのみが表示されます。

レンダリングオプションでpreserveDrawingBufferをtrueに設定しているため、キャンバスをクリアしないでください。

function setup() { 
    camera = new THREE.OrthographicCamera(canvasSize.width/- 2, canvasSize.width/2, canvasSize.height/2, canvasSize.height/- 2, 0.1, 10000); 
    camera.position.set(0, 0, -10); 
    scene = new THREE.Scene(); 
    var material = new THREE.MeshBasicMaterial({ 
     vertexColors: THREE.VertexColors, 
     opacity: 0.1, 
     transparent: true, 
     linewidth: 1 
    }) 

    for (var i = 0; i < settings.agents; i++) agents.push(new Agent(i, agentDefaults, canvasSize, limits, geometry, colorMixer)) 
    var line = new THREE.LineSegments(geometry, material); 
    scene.add(line); 
    renderer = new THREE.WebGLRenderer({ 
     preserveDrawingBuffer: true, 
     antialias: true, 
     alpha: true, 
    }); 
    renderer.setClearColor(0xffffff, 0) 
    renderer.setPixelRatio(window.devicePixelRatio) 
    renderer.setSize(canvasSize.width, canvasSize.height) 
    renderer.sortObjects = false 
    renderer.autoClearColor = false 

    camera.lookAt(scene.position) 

    settings.container.appendChild(renderer.domElement); 
} 

function draw() { 
    for (var i = 0; i < agents.length; i++) { 
     agents[i].update() 
    } 

    geometry.verticesNeedUpdate = true; 
    geometry.colorsNeedUpdate = true 
    renderer.render(scene, camera) 

    requestAnimationFrame(draw) 
} 

iOS固有の特定のコマンドがありませんか？

Answer 1

問題はレンダラにあり、iOSはアンチエイリアスをサポートしていません。なんらかの理由で、これはpreserveDrawingBufferオプションを解除します。そのため、レンダリング設定からantialias：trueを削除してください。

renderer = new THREE.WebGLRenderer({ 
    preserveDrawingBuffer: true, 
    // antialias: true, 
    alpha: true, 
}); 

https://github.com/mrdoob/three.js/issues/7655