Three JS Canvas vs WebGL

JavaScript performance comparison

Revision 2 of this test case created by

Preparation code

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>

<script>
var camera, scene, canvas, webGL, geometry, material, mesh;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200,8,8,8);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
canvas = new THREE.CanvasRenderer();
canvas.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(canvas.domElement);
webGL = new THREE.WebGLRenderer();
webGL.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(webGL.domElement);

function renderCanvas() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  canvas.render(scene, camera);
}
function renderWebGL() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  webGL.render(scene, camera);
}
</script>

    

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Canvas
renderCanvas();
pending…
WebGL
renderWebGL();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments