Question

我正在渲染一个留下痕迹的粒子系统。它在除iOS之外的每个浏览器中工作，包括safari和chrome。粒子移动但画布似乎在每一帧都被清除，这意味着只能看到当前粒子而不是历史。

我在渲染选项中将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

three.js preserveDrawingBuffer无法在iOS上运行

1 个答案: