WebGL Academy

Learn WebGL and 3D algorithmic with these interactive tutorials.

This platform has been developed in order to learn WebGL and 3D algorithmic in a progressive and interactive way. It is a simplified online IDE with automatic indentation, syntax highlighting for HTML, JavaScript, GLSL and Python. You can run your code and download your project. It uses Codemirror.

The tutorials are presented in a progressive way. Sometimes there are some development exercises. The indexing of the tutorials only depends on their chronological writing. Below, I have grouped them in several courses. I advise to follow the order of the tutorials inside each course.

Before starting the courses, you should feel comfortable with JavasScript and it would be great if you already know basics of linear algebra (multiplication, addition matrix/vector) and trigonometry (cosinus, sinus, tangent).

The code provided in the tutorials is given in a very sequential format. It won't be handy to have too many files with this simplified IDE and we want to focus on WebGL instead of JavaScript best practices. So all the code is put in script.js. For a production project, you should split the code in different modules and classes and you should use software engineering to keep it clean.

The courses

Click here to launch WebGL Academy IDE with all the tutorials.

In this section, I have grouped the tutorials into differents courses. For each course, I recommend following the provided order (from top to bottom).

Advanced courses
You should have done the previous part, WebGL Basis, before starting these tutorials. These modules are not linked.

To go further

To learn more about 3D programming with WebGL, I highly recommend this book: Real-time rendering, 4th Edition

All the state of the art of real-time rendering is included in this masterpiece. This book is 3D engine agnostic and provides solid theoretical basis. Each chapter has been co-written by dozens of scientists, and references to publications are provided.

Although it details cutting edge algorithms, explanations are crystal clear and easy to understand even if you are a beginner in real-time rendering. It also details mathematics required in 3D and hardware.

If you are a game developer, software engineer, or just looking to learn more about this subject, you need to buy this book. It's the foundational text of the field. Its reviews are not so great because of the quality of the binding of the book, they are not about its content.

You can read the table of contents and buy it on Amazon here

About me

I am Xavier Bourry ( Twitter @xavierbourry ). You can contact me either on Linkedin.

In June 2016 I have cofounded a tech startup, Jeeliz, specialized in GPU deep learning in the browser. Our technology uses feedforward deep neural networks to process the camera video stream in realtime in the web browser. Since March 2020, I am still working on computer vision in the web browser through my new company, WebAR.rocks.

I teach 3D programming with WebGL in a French school of computer science engineering, l'Esipe MLV. I also offer tailored training in web 3D programming and 3D algorithmic using either raw WebGL or Three.js. My training sessions are in French or in English and I can freely move around the NYC area (I am based in Princeton NJ). Of course, I use this tool for my training sessions, and I improve it after each session.

Before starting Jeeliz I provided 3D web development services and training with my own service company, SPACEGOO in France.

I have written 2 books:

I was an organizer of the WebGL Paris annual conference. More information are available on the WebGL Paris official website www.webglparis.com.

Discussion