alexr4 / GLSL-Courses

GLSL course (to be completed)

GLSL-Courses

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

Courses

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