Sunday, July 22, 2012

WebGL vs Canvas Three.js

‹prev | My Chain | next›

I was eventually able to add a skybox to my Three.js animation yesterday:


The implementation is both slightly disappointing and clunky. Even so, I going to push past that today, starting with something on which my avatar can walk. I start with a sundering sea surrounding a large, very square island:
  // Sea
  var seaGeometry = new THREE.PlaneGeometry(M, M, 3, 3)
    , seaMaterial = new THREE.MeshBasicMaterial({color: 0x483D8B})
    , seaMesh = new THREE.Mesh(seaGeometry, seaMaterial);
  seaMesh.position.y = -1;
  scene.add(seaMesh);

  // Grass
  var grassGeometry = new THREE.PlaneGeometry(M*0.9, M*0.9, 3, 3)
    , grassMaterial = new THREE.MeshBasicMaterial({color: 0x7CFC00})
    , grassMesh = new THREE.Mesh(grassGeometry, grassMaterial);
  scene.add(grassMesh);
The sea is just slightly below (y = -1) the island grass. This seems simple enough so I do not expect any problems, yet I see:


I really do not understand why this renders so poorly. The green grass should completely cover the water and the sky should certainly not protrude out into the water and grass. Perhaps this is simply the limitation of the CanvasRenderer?

To test that theory, I switch to the WebGLRenderer instead:
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
When I reload the page, however, I am greeted with a blank screen and WebGL errors in the JavaScript console:
THREE.WebGLRenderer 49                                         Three.js:331
Error creating WebGL context.                                  Three.js:334
Uncaught TypeError: Cannot call method 'getExtension' of null  Three.js:334
I am unsure what caused this, but I have been unable to get any WebGL stuff to work for the past week or so of Chrome canary updates (I am currently using 22.0.1207.1 dev). Lacking any clearer ideas on how to fix this, I start poking around in Chrome's about:flags. There are no obvious webgl-is-disabled settings (the only webgl setting is definitely on), so I start looking at GPU settings. Eventually, I stumble across "Override software rendering list":


So I enable this setting:


And behold, I have WebGL rendering again on Chrome:


I am unsure why my system no longer support GPU-acceleration without an override. For now, I will chalk that up to running a canary build of a browser on Mint Linux.

I am also unsure why the WebGL rendering is so much better than the Canvas version. I would expect WebGL to be more efficient, but not less buggy. But, for whatever reason, using WebGL rendering has certainly improved things. I call it a night here and will get started on moving the avatar about land tomorrow.


Day #455

No comments:

Post a Comment