three.js preserveDrawingBuffer not working on iOS - ios

Question

I am rendering a particle system that leaves trails behind. It's working in every browser except on iOS, both safari and chrome. The particles move but the canvas appears to be cleared on every frame, meaning that only the current particles can be seen instead of the history.
I have preserveDrawingBuffer set to true in the render options, so the canvas should not be cleared.
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)
}
Am I missing a particular command specific to iOS?

Answer 1

The problem is in the renderer, iOS doesn't support anti-aliasing. For some reason this breaks the preserveDrawingBuffer option. So remove antialias: true from your render setup.
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
// antialias: true,
alpha: true,
});
https://github.com/mrdoob/three.js/issues/7655