0

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?

Tom
  • 1,546
  • 2
  • 20
  • 42

1 Answers1

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

Tom
  • 1,546
  • 2
  • 20
  • 42