WebGL Academy

Interactive tutorials to learn WebGL and 3D algorithmic

Here you can 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 relies on Codemirror for code editing.

The indexing of the tutorials only depends on their chronological writing. Below, I have grouped them into courses. I advise following the order of the tutorials inside each course.

Before starting the courses, you should feel comfortable with JavaScript and it would be great if you already know the 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. Most of the code is written in main.js. For a production project, you should split the code into different modules and classes and you should use software engineering to keep it clean. It is better to use a modern JavaScript environment (ES6/NPM/Webpack).

The courses

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

Advanced courses
You should have completed 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 browse 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 founded a tech startup, Jeeliz, which specialized in GPU deep learning in the browser. I developed a technology relying on feedforward deep neural networks to process the camera video stream in real-time 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 have taught 3D programming with WebGL in a French school of computer science engineering, l'Esipe MLV for 4 years to M.Sc computer science students. I provided more than 10 in-company training sessions lasting between 4 and 10 days each. My clients include Cisco, Criteo, Essilor, 60FPS, Actemium, Lectra. I also offer tailored training in web 3D programming and 3D algorithmic using either vanilla WebGL or Three.js. I can teach in both French and English.

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