Developer Manual

Geometry

A geometry is one of the building blocks for a 3D object: it defines it shape.

In WebGL, everything that is rendered on screen is a triangle, so geometries represent that.

Geometries contain their data in javascript typed arrays, which are essentially more performant versions of standard javascript arrays that can only contain numbers.

Each of these arrays is called an attribute.

A geometry contains the 3D coordinates for all the points that make it, which are stored in its position attribute.

It may also contain an index: when the geometry contains points that are used in several of its triangles, we can choose to index these points to avoid having the same point stored multiple times in the position attribute.

If the geometry doesn’t contain an index, the WebGL renderer assumes that every 3 consecutive points should be drawn as a triangle.

Attributes can also affect other parameters than position:

  • they can store UV coordinates, which are passed as a varying to the fragment shader, mapping a point in the geometry to a point on the texture or material that will be applied to the geometry
  • they can also store normals, a normal being a vector that is perpendicular to the geometry at a certain point
  • they can also store colors, so that each point has its own color

Attributes can only be read by the vertex shader. In order to access them in the fragment shader, they must be passed to it as a varying. A varying is declared in both the vertex and fragment shaders’ declarations (before the main() function), and is conventionally prefixed with the letter v.

Vertex:

varying vec3 vPosition

void main(){

// assign the attribute to the varying

vPosition = position;

...

}

Fragment:

varying vec3 vPosition

void main(){

// do something with the varying

gl_FragColor.r = fract( vPosition.x );

...

}

Geometry types

There are two types of geometries:

  • procedural geometries are entirely generated by code. Basic shapes such as cubes, spheres, curves are usually procedurally generated, as it is more efficient in terms of resources to create it on the user’s device instead of having them download the geometry – a procedural geometry defined in a few lines of code can create a geometry with millions of points very quickly, whereas loading the same pre-created geometry from a server would take significant time and bandwidth
  • model geometries, created in a 3D modelling software then exported to a WeGL compatible format ( ideally GLTF/GLB, though FBX and OBJ are also supported)

Watch out

Resources

THREE.js Geometry documentation