Learning on Web Dev Open is free for all.

Immersive Web > Geometry, assets, and not shipping 40MBWhat a mesh is made of
Phase 07Geometry, assets, and not shipping 40MB345 of 434

What a mesh is made of

Typed arrays of positions, normals and UVs, plus an index buffer that decides how much of it you actually store.

Concept14 minAI pair

A mesh is a set of parallel typed arrays. Position is three floats per vertex; normal is three more and tells the lighting model which way the surface faces; uv is two and says where in a texture this vertex samples from. Add tangents if you use normal maps, colours if you shade per vertex, and skin weights if it is rigged. That is all a mesh is; the object wrapper around it is convenience.

The index buffer is the part beginners skip and every exporter uses. Without it, a shared corner between two triangles is stored twice; with it, vertices are stored once and triangles refer to them by number. A cube has eight corners and twelve triangles, so unindexed it is thirty-six vertices and indexed it is twenty-four: twenty-four rather than eight, because each face needs its own normal and UV, which is the detail that explains why your vertex count is always higher than your intuition.

Normals decide shading, and whether two triangles share a normal decides whether an edge looks smooth or sharp. That is what smoothing groups in a modelling tool actually control, and it is why a model that arrives faceted is usually a normals problem rather than a geometry one.

You should now be able to

  • Describe the attributes a renderable mesh needs
  • Explain what an index buffer saves
  • Say why a normal is not just a direction you invented
Ask the community

Loading…