three.js iOS에서 작동하지 않는 preserveDrawingBuffer

Question

나는 흔적을 남기고있는 파티클 시스템을 렌더링 중입니다. 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