Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flickering on iOS when drawing with LineSegment

See original GitHub issue

(*** This section is for bug reports and feature requests only. This is NOT a help site. Do not ask help questions here. If you need help, please use stackoverflow. ***)

Description of the problem

When rendering a line with LineSegment and preserveDrawingBuffer: true, the lines flicker on any iOS device. This doesn’t happen anywhere else. I think this is a bug, apologies if not. I don’t think it’s z fighting as it happens with only a single line drawn in different places and incrementing the z value each time its drawn. I’ve added a simple test case.

jsfiddle example

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three lines test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>

    <body>
        <script src="lib/three.min.js"></script>

        <script type="text/javascript">
            var canvasSize = { width: 300, height: 300 }
            var material = new THREE.LineBasicMaterial({
                    color: 0x000000
            })
            var geometry = new THREE.Geometry()
            geometry.vertices.push(
            new THREE.Vector3(-100, 0, 1),
            new THREE.Vector3(100, 100, 1)
        )
            var line = new THREE.LineSegments(geometry, material);

            var camera = new THREE.OrthographicCamera( canvasSize.width / - 2, canvasSize.width / 2, canvasSize.height / 2, canvasSize.height / - 2, 10, 10000 );
            camera.position.set(0, 0, -10);
            var scene = new THREE.Scene();
            scene.add(line);
            var renderer = new THREE.WebGLRenderer({
                    preserveDrawingBuffer: true,
                    alpha: true,
            });
            renderer.setPixelRatio(window.devicePixelRatio)
            renderer.setSize(canvasSize.width, canvasSize.height)
            renderer.autoClearColor = false

            camera.lookAt(scene.position)
            document.body.appendChild(renderer.domElement)

            draw()

            function draw() {
                    for (var i = 0; i < geometry.vertices.length; i+=2) {
                        geometry.vertices[i].x += 20
                        geometry.vertices[i+1].x += 20
                        geometry.vertices[i].z += 1
                        geometry.vertices[i+1].z += 1
                    }
            geometry.verticesNeedUpdate = true
            renderer.render(scene, camera)

            requestAnimationFrame(draw)
        }
        </script>
    </body>
</html>

Three.js version

Browser

[] All of them
Chrome
Firefox
Internet Explorer
iOS/webkit browsers

OS

All of them
Windows
Linux
Android
IOS

Hardware Requirements (graphics card, VR Device, …)

Issue Analytics

State:
Created 7 years ago
Comments:5

Top GitHub Comments

1reaction

Mugen87commented, May 20, 2017

Closing for now. We can reopen it if the problem still exists.

1reaction

Mugen87commented, Oct 25, 2016

What happens if you set preserveDrawingBuffer to false? Besides, do you think you can create a reduction test with plain WebGL? Just to be sure it’s not a problem in the library. For me this looks like an iOS issue.