0

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

4

1 回答 1

1

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

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

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

于 2016-10-24T11:54:42.003 回答