GLSL-Courses

(to be completed) Introduction to fragment shader programming using GLSL language and WebGL technologies

Courses

• [X] chp0: Welcome to pixel world : Introduction
• • [X] Video introduction
• [x] chp1: What is a shader and how it work
• • [x] GPU vs CPU computation
• [x] chp2: Discovering fragment shader : A world from 0 to 1
• • [x] Underlying concept of a fragment shader (macro, variable and main function)
• • [x] Main variable type in GLSL
• [x] chp3: Programming fragment shader using Atom
• • [x] Install language-glsl package for shader programming highlight in Atom
• • [x] Install/using glsl-preview package for shader live programming in Atom
• • [x] Global uniform variable tu used with glsl-preview
• [x] chp4: Basic shaping function in GLSL
• • [x] gl_FragCoord
• • [x] Comparision and interpolation using step and smoothstep
• • [x] Basic maths function (sin, cosine, mod, fract...)
• • [x] Creating your own shaping function
• [X] chp5: Using color
• • [X] Color normalized system
• • [X] Converting from HSB to RGB system
• • [x] Using shaping function to create a gradient color
• [X] chp6: Drawing basic shapes with function
• • [x] Line
• • [x] Rectangle
• • [x] Ellipse
• [x] chp7: Drawing complexe shape with function
• • [x] Polygon (3, 4, 5...edges)
• • [x] Modulating radius
• [x] chp8: Matrix transformation : Rotate, translate and scale
• • [X] Translation
• • [X] Rotation
• • [X] Scale
• [x] chp9: Easing animation
• • [x] Using shaping function to ease your animations
• [x] chp10: Pattern : multiplying your shapes
• • [x] Creating a grid using fract and floor
• • [x] Manipulating the pattern using cell index
• [x] chp11: Pattern : deforming the grid
• • [x] using sin wave to animate and deform your pattern
• [x] chp12: Adding randomness : chaos
• • [x] Create a random function
• [x] chp13: Adding randomness : noise
• • [x] Create a simple noise function
• [x] chp14: Add shader to you webpage
• • [x] Create a basic HTML template
• • [x] Using three.js to import and play your shader
• • [x] Add mouse interactivity
• • [x] Add and bind variables to your shaders
• [x] chp15: Going beyond your limit
• • [X] Conclusion (video)