Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Canvas+WebGL crashes browser

[ Edited ]

Another bug... https://www.blackberry.com/jira/browse/BBTEN-582 :smileyfrustrated:

 

Using a canvas as WebGL texture. Drawing to the canvas every frame & rendering the scene with three.js.

 

Leaks memory rapidly, crashes the browser after 30 seconds or so. Works fine on Chrome & FireFox.

 

Dev Alpha B, 10.0.9.1675 gold, actual device.

 

Test code:

 

<!DOCTYPE html>
<html>
	<body id="body">
		<h3>Draws to canvas every frame, and uses canvas as WebGL texture. Memory leak. Swipe from top-left corner to monitor. Crashes browser after 30 seconds or so.</h3>
		
		<p>Draw canvas:</p>
		<canvas id="canvas" width="320" height="320"></canvas>

		<p>Use canvas as WebGL texture:</p>
		<div id="view" style="width:320px;height:320px" />
		
		<script src="http://github.com/mrdoob/three.js/raw/master/build/three.js"></script>
		<script>

			var scene, renderer, cam, canvas, ctx, tex; // globals
			init(); // init three.js
			render(); // start rendering

			function  init() {

				// get canvas
				canvas = document.getElementById('canvas');
				ctx = canvas.getContext("2d");

				// init three.js
				scene = new THREE.Scene();
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				cam = new THREE.OrthographicCamera(-160, 160, 160, -160, -2000, 1000 );
				renderer.setSize(320,320);
				document.getElementById('view').appendChild(renderer.domElement);

				// make texture, material, mesh
				tex = new THREE.Texture(canvas);
				tex.needsUpdate = true;
				var mat = new THREE.MeshBasicMaterial({map : tex });
				var mesh = new THREE.Mesh(new THREE.PlaneGeometry(320,320), mat);
				scene.add(mesh);
				
			}
			function render() {
				// draw on canvas
				ctx.beginPath();
				ctx.lineWidth=1;
				ctx.strokeStyle="#772222";
				ctx.moveTo(0,0); ctx.lineTo(320,320);
				ctx.moveTo(320,0); ctx.lineTo(0,320); 
				ctx.stroke();
				// render
				tex.needsUpdate = true;
				renderer.render( scene, cam );
				requestAnimationFrame(render);	
			}
			
		</script>

		
	</body>	
</html>

 

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.