Adding Materials to my WebGL Engine

A simple material system and real-time object transforms — Sparrow WebGL Devlog 13

Published in

Level Up Coding

5 min read9 hours ago

A screenshot of a test scene with two cubes. A red one and a green one. The red box has a different material with very high shininess and no ambient color. — The cubes with different materials. Image by author.

Materials are an essential concept in computer graphics. They are used to describe how the surface of an object looks and interacts with light. From 3D modeling programs like Blender to game engines like Unreal, they all use materials.

Last week, I finally started to work on a new 3D portfolio website, which is one of the projects I have been developing a custom WebGL engine for. Because it involves a larger scene with multiple objects with different materials, I had to add a material system to my WebGL engine.

Continuing the theme of last week’s blog post, I also added two more features to the engine interface: A material editor and an object inspector to see and edit the transforms of an object.

Materials

There are many different ways you can conceptualize and implement materials. Materials are tightly integrated with the renderer or shader. For example, the same Blender material will look drastically different depending on whether you use Cycles or Eevee. A ray-tracing renderer like Cycles will produce the best-looking results and allow for the most flexibility in the material system. However, while modern GPUs come with ray-tracing cores, they are only used for certain parts of the image and cannot render the whole frame fast enough. Sadly, WebGL cannot use the ray-tracing features anyway (we would need WebGPU for that, and it’s not widely supported yet).

When using rasterized rendering like WebGL, there are still many different ways you can handle materials and shading. The best-looking option is arguably physically-based rendering (PBR). However, this is quite difficult and time-consuming to implement (I assume, I haven’t tried it yet, but I would like to at some point).

For now, I’m using very traditional Phong shading (Blinn-Phong to be exact, because it’s better for directional lights). Because I generally create low-poly and vertex-colored scenes with a more stylized look, a simpler shading model is perfectly fine in most situations.

Since I’m focusing on the default engine shader at the moment, I added only one material so far…