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:334I 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