O'Reilly logo

Beginning WebGL for HTML5 by Brian Danchilla

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required