This 1 point studio course will focus on advanced graphics programming skills using OpenGL/WebGL Shading Language to modify the rendering pipeline. This course will only cover GLSL version 1.0 and will focus on fragment shaders, using glslEditor online tool (http://editor.thebookofshaders.com) or its native counterpart glslViewer (https://github.com/patriciogonzalezvivo/glslViewer). Because this language is compatible with OpenGL ES and WebGL, later students will be able to apply the knowledge to other tools, libraries and frameworks such as: Processing, p5.js, openFrameworks, Cinder, Three.js, Shadertoy and more. Due to the complex mathematics required for shader programming, this course will ask you to stretch your comfort zone.
-
Presentation & setup: Introduce the course, instructor and students, review syllabus, discuss technical requirements and tools for shader coding, and present basics of GLSL. Homework: Read chapters 1,2, 3, 4, 5 and do the exercises.
-
Shaping Functions: Explore and analyze the variety of mathematical formulae used to shape position, color, animation and other data in shader code. Homework: Read chapter 6 and do the exercises
-
Color: Explore and understand the creation and modification of color in GLSL, including gradients, stepped colors and time-based animations. Homework: Read chapter 7 and do the exercises.
-
Shapes: Learn to use specialized GLSL methods and functions to create a variety of geometric shapes in shaders, from basic circles and squares to highly complex forms and patterns. Present assignment final project. Homework: Read chapter 8 and do the exercises. Start researching and brainstorming ideas for your final project.
-
Matrices and Animation: Understand the basic concepts and structure of matrix operations, then learn to implement matrices in GLSL for translation, rotation, scaling and time-based animation. Homework: Read chapter 9 and do the exercises, work on your final project
-
Patterns: Learn to use and combine all previously-covered tools to create complex visual patterns width shaders. Final project workshop. Homework: Read chapter 10, 11 and do the exercises. Finish your final project to show time! Final project showoff and celebration!
Use GLSL shaders in a project. On that process please:
- Make your own GLSL library: with the functions you had made during this course.
- Implement a composition using your GLSL library. You can use any framework you feel more comfortable with: OF, Processing, p5.js, THREE.js or other framework (Unity, Tangram, etc). Your project has to be documented and sharable over the internet as a video or webpage.