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.
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.
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!