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.
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.
HTML:Somewhere in your HTML document add the canvas tag or anywhere you want the canvas rendering area to appear on your page layout.
Just ensure that the <canvas> tag is placed somewhere inside your HTML page, usually at the very bottom right before the closing </body> tag.
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.
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 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.