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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.