WebGL Game Development Tutorials

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!

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.(GL Shading Language).

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.

WebGL Tutorials

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 video WebGL tutorial 1 - how to initialize WebGL in 11 minutes, if you prefer video tutorial format.

WebGL Shaders

Shaders are programs running on the video card. Shaders are usually written in a GL shading language, such as GLSL. And then they are loaded into your JavaScript program. Once written, they need to be compiled, and sent ("uploaded") to the graphics card. WebGL provides functions for this. Only one shader can be selected at a time during the drawing process.

In traditional 3D pipelines there are usually three types of shaders: vertex, geometry and fragment. WebGL pipeline intentionally skips the geometry shader. But that's okay, it can be imitated by using JavaScript code to write programs that do similiar calculations and simply pass them on to the other shaders in the WebGL pipeline.

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.

WebGL Book: A WebGL Tutorial Reference Book
WebGL Book - A WebGL Tutorial Reference Book

If tutorials on this site are not enough, or you simply like reading from a physical book or a digital device (Kindle, iPad, tablets, etc.) check out WebGL Book. Written by the author of tutorials on this site.

This book is a WebGL tutorial and a reference that guides the reader through the process of setting up and initializing WebGL, drawing 3D primitives and creating 3D computer games.

Preorder Here
© 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.

Lyrics Haven: a song lyrics website, with clearn printable lyrics react js tutorials react js elements react js components vue js tutorials angular js tutorials