WebGL Game Development Tutorials

Above you're seeing the Mario Kart 7 engine I wrote in OpenGL (sans Unity or UE). For a long time I wanted to learn how to make 3D games with OpenGL and WebGL. I wanted to make something reasonably good and not just technical demos.

I am currently working on the WebGL port of this engine. But there is still a lot of Blender level design work ahead. I'm still building out the Golden Gate bridge model.

After a while of practicing I decided to build this site to share my WebGL tutorials and everything I learned over the years. Hopefully these tutorials will help someone to get to a point of building your own WebGL game engine faster. The fundamentals never change but the learning curve is steep.

I am looking to port the 3D kart racing demo above to WebGL since it's my second engine. Meanwhile I wanted to show you this MK7 graphics test I created, and hope it encourages someone out there.

Game programming and level design can be difficult, even to some of the most passionate game developers. Keep going, with time you will gain experience and things get a whole lot better.

WebGL Tutorial News

06-18-2018: New WebGL tutorials were added, currently cleaning up the layout a bit, so that the site doesn't look like a frankenstein of varying templates.
05-07-2017: I am currently still building this site up with more tutorials on the way. Especially, I'd like to talk more about WebGL shaders. Just note that some pages and/or links may be missing content during this process - it takes time to move completed tutorials over from my documents and convert each one to HTML with code highlighting due to the sheer number of tutorials I've written.

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.

Resetting background color is common in 2D games, unless its completely filled with background imagery. In WebGL, if you still need to do this you can clear webgl canvas to any color you want using gl.clearColor function. It is a bit different from the way you would do it with a 2D canvas.

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.

You can follow OpenGL tutorials on WebGL tutorials sister site!

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 clean printable lyrics react js tutorials react js elements react js components vue js tutorials angular js tutorials