CHAPTER 1

image

Setting the Scene

In this chapter we will go through all the steps of creating a scene rendered with WebGL. We will show you how to

  • obtain a WebGL context
  • create different primitive types in WebGL
  • understand and create vertex buffer objects (VBOs) and attributes
  • do static two-dimensional rendering
  • create a program and shaders
  • set up the view matrices
  • add animation and movement
  • render a three-dimensional model

A Blank Canvas

Let’s start by creating a HTML5 document with a single <canvas> element (see Listing 1-1).

Listing 1-1. A basic blank canvas

<!doctype html>

<html>

       <head>

           <title>A blank canvas</title>

           <style> ...

Get Beginning WebGL for HTML5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.