OpenTechSchool Intro to WebGL and shaders

Welcome to your WebGL & Shader Workshop!


Home About

Course by Roman & Quentin for OTS Brussels

Pretty glad you're here; we had much fun writing the course, I hope this will show and make the reading as enjoyable! The aim of this workshop is to show you what your graphic card does, and how to use it to display graphics on your screen. While you might think sometimes along the way that it's waaaay over kill, trust us. Knowing why the little gears are moving as they do will give you a better understanding of the whole picture. In short, learning the basic stuff will help you handle the complex tools at your disposal, and push them beyond what people expect them to do.

This material is not stable yet, so it might still be a bit messy. Don't hesitate to give us some feedback on how well (bad?) we did!

Please, don't be afraid to get out of the beaten track: experiment on what you've learned, express yourself. Don't be in a rush to finish the material, you can always come back to it later, it's meant to stay online.

Some fundamental advices for beginner programmers (you might want to come back here if you have issues):

  1. Get your hands dirty. You'll only learn if you write and run some code. Each piece of code shared has some meaning, would that be for educational purpose, or just to show some neat visualisation. Run them all, and don't hesiate to tweak them, push them forward and explore both your sensibility and what you can do with it.
  2. Understand what you're doing. You need to understand each line of your code, especially in this workshop since we'll probably reuse them and make you modify them short after. If you're not 100% you understand, reread the course. Maybe try the next paragraph. Ask a fellow student, a coach, search online... Anything, but don't continue if you don't understand.
  3. Understand what you're doing! It's fundamental to undersand the grammar of your lines of code, but it's as important to understand its meaning, and place in your code. You're coding your line at a specific place, it has a specific role. Understand that role. Not only of your line but also of your group of lines so that a structure of your code emerge. Sometimes you'll be asked to replace some code, it'll be up to you to understand what to replace.
  4. Don't copy paste. While it might seem as a quick way to advance the material, you will learn less. The more you will write, the more you will remember. And even better, whenever there are number used, try to tweak them, modify them a bit, see what happens.
  5. Regularly clean your code. It's easy to get lost, even more when you're discovering something new. Cleaning your code means getting rid (or commenting) unused part of the code, so you don't surcharge your code and wonder where is that specific part you're lookign for. It means too organising it, so you can infer better meaning from it. And last, the graphic structure. Don't forget to indent (put space at the start of the line) when you enter a new block of code, it eases both the reading and the spotting of bugs.
  6. Learn how to search out the answer when you're stuck. You are part of a group during the workshop, you can always ask the other students or the coaches but it's a good reflex to always try to find out by yourself why there is an issue and how to solve it.

Now that we get to know each other, let's dive into the course itself.