Game Development Reference
In-Depth Information
return function(scale) {
canvas.width = Math.round(originalWidth*scale);
canvas.height = Math.round(originalHeight*scale);
camera.aspect = canvas.width / canvas.height;
camera.updateProjectionMatrix();
renderer.setSize(canvas.width, canvas.height);
}
})();
You can use this function by calling
resize(0.5)
, for example, which will allow the
renderer to paint only
0.5*0.5 = 25%
of the pixels it would paint at full resolution,
even though the canvas will take up the same amount of space on the screen. (The
scale
parameter is always relative to the canvas' original size.) This works because
canvases are basically just images. In the same way that you can style an image to be
larger in CSS without changing its actual size, you can style a canvas to be larger too.
In our
resize
function, we first reduce the actual size of the canvas by changing its
width
and
height
attributes, then scale it back up using the CSS width and height
styles. The result is that the canvas takes up the same amount of screen space that it
did originally, but each actual pixel is displayed larger. This significantly reduces the
amount of computation required to render a scene, although the scene will be blurrier.
Changing the resolution of the canvas affects how you need to compute
where the user clicks. You should track the canvas' current scale and
adjust the screen-space vector in our click method from
Chapter 3
,
Exploring and Interacting
, accordingly:
var vector = new THREE.Vector3(
scale * renderer.devicePixelRatio * (event.pageX -
this.offsetLeft) / this.width * 2 - 1,
scale * -renderer.devicePixelRatio * (event.pageY -
this.offsetTop) / this.height * 2 + 1,
0.5
);
Techniques that compromise visual detail in favor of speed are especially useful
when combined with frame-rate testing. If the frame rate dips below a certain
threshold for more than a given percent of the time in a certain testing period, you
may want to reduce your game's detail. (You should figure out what your bottleneck
is before implementing this approach. If your frame rates are low because your
physics loop takes a long time to run, reducing visual detail may not help much.)
