WebGL Quick Start

WebGL Book: A WebGL Tutorial Reference Book
Easily understand WebGL and learn how to create 3D worlds and games from scratch.

WebGL Gems is the authorative guide on WebGL programming published by Learning Curve - education for software developers. This book in JavaScript programming series clearly, and in easy to follow language, explains fundamental principles behind programming 3D games using the WebGL framework for JavaScript.

Preorder Now in PDF format for Kindle and get a discount.
WebGL Gems is coming out on April 15th, 2017.
The paperback version will be available via this Amazon page, please bookmark it!

WebGL Quick Start

It's ironic to name this page Quick Start because WebGL is such a vast subject. Nonetheless this "as quick as possible" guide is part one of the whole tutorial series on this site. It will walk you through the basic set up.

WebGL Base Code Download WebGL Source Code (4kb)
Great starting point with pre-written HTML and JavaScript code.
Demonstrating WebGL initialization,
clearing the canvas with a WebGL color,
and loading simple vertex and fragment shaders.
Fork WebGL Tutorial on GitHub
Fork it on Github

Grab the download link above which serves as minimum starting point. This "WebGL base code" will give you a blank WebGL-initialized canvas to play with. Then just follow tutorials on this site to get something interesting going.

WebGL tutorials on this site are designed for absolute beginners in mind. Someone who may not even know anything about JavaScript, WebGL or 3D graphics programming.

To get started we'll do two things: create <canvas> tag on our HTML page (this tutorial shows you where to place it within your HTML document) and then write a few lines of JavaScript code to initialize main WebGL-enabled canvas by creating a context object.


Somewhere in your HTML document add the canvas tag or anywhere you want the canvas rendering area to appear on your page layout.
<body> <!-- The rest of your HTML code //--> <canvas id = "view"></canvas> </body>

Just ensure that the <canvas> tag is placed somewhere inside your HTML page, usually at the very bottom right before the closing </body> tag.


Then write the following JavaScript program:
var canvas = document.getElementById( "view" ); var context = canvas.getContext('webgl');

The JavaScript code for WebGL initialization above should go somewhere between your <script language = "javascript"></script> tags or if you are using jQuery - for example - it should go inside the anonymous callback function for the onReady event: $(document).ready(function(){ /* here */ });

Note that document.getElementById function expects the ID name of the canvas tag. In this case, it is "view", but you can call your canvas ID anything you want, as long as it remains consistent throughout your source code it's okay.

That's all that you need to get started! But this will only display a blank background. Loading shaders is the next step, so we can start passing 3D primitives data to the GPU and draw them in our 3D world.

From now on, we're ready to start writing WebGL-specific code, initialize WebGL, create programmable GLSL shaders. The rest of tutorials on this site will show you how. But your journey may not be that easy, because of the commitment it takes to explore the vast number of subjects just to get something interesting going on the screen.

Initialize WebGL

You should still read "How to Initialize WebGL tutorial" on this site, even if you already downloaded the source code example from the GitHub link above. It will explain step by step, what's each line of code does.

If you prefer learning from video, you can check out my video WebGL initialization video tutorial

Principles of 3D Graphics Programming

Programming 3D graphics is a generally difficult craft. Learning WebGL is challenging because it demands knowledge of a large number of subjects just to get started. But the good news is that the results are outstanding. Wouldn't you want to make your own 3D games that work on any mobile device?

If you are a beginner, it will probably be enough to just initialize WebGL canvas, draw a few shapes and learn how to rotate and move them around on the screen. But the more ambitious your projects get, the more knowledge will be expected.

In order to master WebGL you will be required to understand 3D graphics pipeline, 3D primitives, shaders (geometry, vertex and fragment), texture mapping, lighting types (ambient, diffuse, specular), sky boxes, collision detection, loading 3D objects, 3D matrices, basic animation and that's just a starting point.

The Purpose Of WebGL Tutorials On WebGLTutorials.Org

And finally, I wanted to explain the purpose of why I created this website. Sinice 2003, when I started my first OpenGL tutorial website FalloutSoftware.com I simply wrote about subjects that interested me. I wanted to learn how to make 3D games. When WebGL came out, it was only natural to create its sister website.

My goals with this site and my WebGL book are outlined below:

  • To not offend the reader by long explanations. Enlighten him (or her) with dense ones.
  • Effective educational material that gradually builds on knowledge from prior chapters.
  • Do not use filler text to increase perceived length of the book.
  • Use accurate facts and ready to use source code examples.
  • Don't complicate material to veil its perceived appearance as more intelligent than it is.

WebGL has been around since 2011 but there hasn't been any dense tutorials that focus only on the important source code examples that accomplish practical tasks. My WebGL book, as well as tutorials on this site, try to fill that chasm.

I hope my tutorials on this site will help newcomers to the WebGL framework get started at an optimal pace through the learning curve. This period may or may not be steep based on your past experience with 3D graphics. In particular, OpenGL.

However, the book assumes absolutely no prior knowledge and gradually takes the reader from basic 3D principles straight to their counterpart implementations in cross-browser source code.

The book also has a large chapter on Light and although it's a total mystery on how it works in reality - because it behaves as wave and particle at the same time - it certainly follows principles we can pin down for close analysis. With this knowledge we can imitate them in our own 3D applications for generating realistic 3D shading techniques used in modern computer and video games like Mario Kart 8.

Aside from all that my goal was nothing more but to create a valuable resource for those who are looking to learn how to write WebGL applications for making 2D or 3D game engines that work in web browsers. That's one reason I called this book gems which also fits my other web development publications in a similar format.

As a tutorial writer for over 14 years I have developed an instinct to know that readers simply want working source code examples with direct explanations that focus on how to get things done.

© 2017 Copyright WebGL Tutorials (webgltutorials.org)

All content and graphics on this website are the property of webgltutorials.org - please provide a back link when referencing on other sites.