Design and Development - Game Development with Three.js - page 83

Rendering optimizations
Three.js has built-in support for other detail-related optimizations as well in order
to make processing faster. Culling , the process of excluding hidden objects from
rendering, is a common example. Three.js does view frustum culling based on
bounding spheres, meaning it will avoid spending valuable compute time calculating
visual information about objects that are off screen. It also does backface culling by
default, which hides the back side of mesh faces. However, it doesn't do occlusion
culling , meaning it doesn't know not to render an object that is in front of the camera
but obscured by another object that is closer to the camera. The implication of these
optimizations is that large meshes should often be split into several smaller ones to
reduce computation if only part of the large mesh is on the screen, and you don't get
any benefits by default from having short viewable distances. This simple change
might be sufficient for top-down games where few objects are obscured by other
objects. Other games, such as first-person shooters where buildings or terrain can
block long view distances, may need to compensate in other ways. For example, if
you have really large or detailed worlds, you may want to work on manual occlusion
culling. Game engines typically do this using a technique called depth testing ,
but a simpler approach that can work for enclosed layouts (such as the insides of
buildings) is to create invisible cubes encompassing different zones in the world
based on view distances and then toggle the visibility of meshes inside those zones
when the player gets close enough.
We've already discussed the advantages of merging geometry in Chapter 2 , Building
a World , but you can get additional performance benefit out of transforming static
geometry into BufferGeometry . BufferGeometry typically renders faster than
standard Geometry because it uses a data structure that is closer to what will get
passed to the GPU instead of one that is easy for humans to understand. As a result,
it is harder to manipulate, but it works well if you know your geometry won't
change. The easiest way to use BufferGeometry is to convert from existing Geometry
using the utility in examples/js/BufferGeometryUtils.js :
THREE.BufferGeometryUtils.fromGeometry(geometry);
You can use the result with meshes the same way you would use normal geometry.
Another powerful optimization is changing the resolution of the canvas. Assuming
renderer and camera are globals, you can use this function to do so:
var resize = (function() {
var canvas = renderer.domElement;
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
var originalWidth = canvas.width;
var originalHeight = canvas.height;