Flat Shading in WebGL with PlayCanvas — A Quick Tip

The Desired Look

The goal is to create something just like in the PlayCanvas homepage.

Figure 1
Figure 2
Figure 3

The Problem With WebGL

The generated geometry itself is not smooth, and looks like the right half of the image above. The reason the left half looks smooth is because of a modern graphics trick where the normals between vertices are interpolated.

Figure 4
Figure 5
Figure 6
Figure 7

The Solution

All we have to do is simply duplicate the vertices. It’s so “simple” in fact that I couldn’t find any explanation of what it meant to duplicate the vertices or why that fixed anything. It’s only straightforward if you know how the geometry is stored and sent to the GPU, but these details are usually hidden away in high level frameworks, so I’m going to spell it out here.

Figure 8
vertexBuffer = [0,5,0, 5,5,0, 5,0,0, 0,0,0]
indexBuffer = [0,1,3, 1,2,3]
Figure 9
Figure 10
vertexBuffer = [0,5,0, 5,5,0, 5,0,0, 0,0,0]
indexBuffer = [0,1,3, 1,2,3]
vertexBuffer = [0,5,0, 5,5,0, 5,5,0, 5,0,0, 0,0,0, 0,0,0]
indexBuffer = [0,1,4, 2,3,5]
indexBuffer.length == (vertexBuffer.length / 3)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Omar Shehata

Omar Shehata

Graphics programmer working on maps. I love telling stories and it's why I do what I do, from making games, to teaching & writing. https://omarshehata.me/