Welcome to WebGLTutorials.org
An independently published WebGL tutorial website
WebGL allows displaying 3D graphics in web browsers using HTML5 canvas tag. WebGL is often used for making 3D and yes, even 2D games. This quick start tutorial briefly goes over the key ideas behind WebGL programming.
You can think of WebGL as OpenGL for web. It's the API for creating 3D games and impressive visual effects using shaders written in GLSL language for browsers.
3D graphics are drawn on the screen using 3D shapes called primitives. Once initialized, WebGL can render these objects using vertex coordinates passed to the GPU - the graphics card hardware inside your computer.
Most Recent WebGL Tutorials
Recently published on WebGLTutorials.org. New tutorials are posted every week or so. For more premium WebGL tutorials, subscribe to my free WebGL newsletter to receive even more tutorials, demos, and source code examples in your inbox.
- 04-01-2017 WebGL Quick Start How to get started with WebGL (source code included)
This is the main WebGL tutorial section (head over there now) where you will learn everything from scratch. The journey will not be easy, it will take patience and time. But going through entire series of tutorials on this site you will be equipped with a decent amount of knowledge to start making your own 3D web applications and WebGL games.
After rendering your primitives, you will need basic knowledge of 3D matrices to get around the newly-created 3D world. Conceptually, it takes time to get used to camera movement in 3D. There is a distinction between moving objects and the camera. Moving objects in one direction produces the same effect as moving the camera in an opposite direction along the same vector. This intuitive double-reverse effect can create a moment of perplexity. But with a little practice it becomes natural.
WebGL Quick Start
To get started with WebGL you have to first initialize WebGL canvas, which puts your HTML canvas into 3D mode. This tutorial demonstrates the basics, and if this is your first time writing a WebGL program it's the first step and a great starting point. You can also watch my WebGL tutorial 1 - how to initialize WebGL in 11 minutes, if you prefer video tutorial format.
Vertex shader accepts vertex coordinates to construct 3D primitives from, and then they pass them on to the fragment shader for rasterization: the process that takes 3D vertex and texture data to draw the final image on the flat, 2-Dimensional surface of your screen. This is where the perspective projection matrix is utilized using basic trigonometry operations.
Fragment shader operates on a single pixel (fragment) in your 3D scene. It's a program written to "shade" the rendered pixel on the screen a certain color based on primitive texture data, vertex color, light source (sun, ambient color,) angle of the model and the light source.
WebGL for 2D games
By rendering rectangular surfaces consisting of 2 triangles we can imitate 2D sprites, as long as they are always facing the screen. WebGL can therefore be used for making 2D games. There are advantages to this over the regular HTML5 canvas initialized in 2D mode.
While a lot of the time HTML5 canvas tag is already hardware-accelerated (when possible) WebGL shaders provide way better effects for 2D graphics, and sprite rendering is generally faster. Because WebGL is supported by many mobile platforms, there are already a few 2D game engines out there that support WebGL as their primary graphics rasterizer.
Make a Donation
To support this site you can submit a donation to support these free tutorial articles that resemble book chapters. Tons of hard work goes into creating something like this, and your support helps run this website and continue serving useful educational material for WebGL programmers.