three.js preserveDrawingBuffer 在 iOS 上不起作用答案

【问题标题】：three.js preserveDrawingBuffer not working on iOSthree.js preserveDrawingBuffer 在 iOS 上不起作用
【发布时间】：2017-03-05 13:35:44
【问题描述】：

我正在渲染一个留下痕迹的粒子系统。它适用于除 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 的特定命令？

【问题讨论】：

标签： ios three.js webgl mobile-safari chrome-ios

【解决方案1】：

问题出在渲染器上，iOS 不支持抗锯齿。由于某种原因，这破坏了 preserveDrawingBuffer 选项。因此，请从您的渲染设置中移除 antialias: true。

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

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

【讨论】：