Flickering on iOS when drawing with LineSegment #9935
Description
(*** 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.
<!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
- Dev
- r82
- ...
Browser
- [] All of them
- Chrome
- Firefox
- Internet Explorer
- iOS/webkit browsers
OS
- All of them
- Windows
- Linux
- Android
- IOS