Summary

Let’s summarize what we learned in this chapter:

• We studied the difference between a framebuffer and a renderbuffer. A renderbuffer is a special buffer that is attached to a framebuffer.
• We learned that WebGL provides mechanisms to create offscreen framebuffers that differ from the default onscreen framebuffer.
• We covered how a framebuffer needs to have at least one texture to store colors and a renderbuffer to store depth information.
• We discussed how to convert user click coordinates to canvas coordinates so that we can map them to values in the offscreen framebuffer.
• We discussed the Picker architecture. Picking can have different states, and each state is associated with a callback function. Picker callbacks allow custom application logic to determine what happens when picking is in progress.
• We learned how to implement color-based picking in WebGL. Picking purely based on a diffuse color is limited, because there could be scenarios where several objects have the same diffuse color.
• We learned that it’s better to assign a new color property that is unique for every object to perform picking. This property is known as picking the color/object label.
• We discussed encoding unique IDs rather than unique colors into the four-based vector, RGBA.

In the next chapter, we will bring all of the concepts we've covered in the previous chapters together and build a 3D virtual car showroom. Additionally, we will see how to import car models from Blender, a 3D editing tool, into a WebGL application.