Antonius Posted February 21, 2014 Share Posted February 21, 2014 So, I've written a simple animation with three.js using the canvas renderer. It works just as expected on the desktop, but it leaves an afterimage of the first frame when compiled for android on cordova. Download this video I recorded with SCR Screen Recorder to see exactly what I'm talking about. Here's the following markup and script for the said animation (which, again, works fine on the desktop, but leaves an afterimage on android). Of course, you'll also need to download three.min.js in the same directory if you want to run it.<!DOCTYPE html><html><head> <title>Cube</title> <style type="text/css">* { margin: 0; padding: 0; } canvas { width: 100%; height: 100% }</style></head><body> <script type="application/javascript" src="three.min.js"></script> <script type="application/javascript"> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // create geometry var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, overdraw: true } ); var cube = new THREE.Mesh( geometry, material ); // create lights var light = new THREE.AmbientLight( 0x004400 ); // soft green var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1).normalize(); // camera orientation camera.position.z = 5; camera.position.y = 2; camera.lookAt( scene.position ); // draw objects scene.add( cube ); scene.add( light ); scene.add( directionalLight ); function render() { requestAnimationFrame(render); cube.rotation.y += 0.1; if (cube.position.z <= -5) {cube.position.z = 0;} else {cube.position.z -= 0.1;} renderer.render(scene, camera); } render(); </script></body></html> Quote Link to comment Share on other sites More sharing options...
Antonius Posted February 21, 2014 Author Share Posted February 21, 2014 For anyone who comes across this problem, the answer is to clear the drawing buffer just before you run your render loop. So you'd run renderer.clear() where the renderer variable is the canvas renderer like this: var renderer = new THREE.CanvasRenderer(); Not sure why this problem doesn't affect the desktop, but clearing the buffer doesn't seem to hurt it. There's also an .autoClear() method for CavasRenderer(). Quote Link to comment Share on other sites More sharing options...
kriffe Posted May 22, 2014 Share Posted May 22, 2014 I have a similar problem for Android but I can't get it to work with your renderer.clear() fix. I've tried to clear the buffer at various different location in the code, but must be doing something wrong.. Could you post the complete version of your code example and what version of cordova you are running please? Running it on cordova version 3.4.1 together with your three.js.min version 67. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 18, 2014 Share Posted June 18, 2014 Is this problem only seen on canvas renderer or does webglrenderer exhibit the same issue? I try to avoid canvasrenderer due to performance since most browsers now support webglrenderer and I don't care about IE due to it's low share, that and I don't release for the browser directly (yet) only standalone. I haven't looked much into Cordova, I am looking at CocoonJS for porting to Android and iOS. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.