What does p5.Geometry do and how to use it?

p5.Geometry is used to represent 3d objects. It is returned by the loadModel() function, and also used internally by the 3d primitive drawing functions. 3d objects are commonly described as a list of vertices, a list of vertex normals, a list of triangles which reference the vertexes, and a list of texture coordinates for each vertex. Vertex normals are a vector describing the direction of the surface of the object at that point which is used to affect how light will illuminate a surface based on the angle of the light relative to the angle of the surface.

The most common use case for p5.Geometry is via the loadModel() function, but it is possible to create your own custom 3d objects via the callback that can be passed to the p5.Geometry constructor. In this callback you need to populate: the vertices array with vectors representing the corners of all the triangles, the faces array with arrays of indices for the corners of each triangle, and if you want to apply a texture, the uvs array with arrays containing the X and Y position in texture space for each vertex (order and length should be the same as the vertices array). I have an example in a glitch project (see /haumana/kumu-paul/sprite-voxel.js), but it’s pretty complicated (here’s the running version).

9 Likes