Advanced Creative Coding with WebGL & Shaders
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Matt DesLauriers summarizes the tools and platforms needed for the course, and explains that some npm packages used in the course are written in GLSL.
WebGL, GLSL & Three.js Overview
Matt explains what WebGL, GLSL, and three.js are and how they apply to rendering graphics for software.
WebGL Examples
Matt surveys different WebGL examples done by various artists and technologists.
Course Code & Setup canvas-sketch
Matt gives an overview of the repositories, guides, and tools used for 3D renderings throughout the course.
canvas-sketch Overview & Settings
Matt gives advice on troubleshooting canvas-sketch, explains canvas-sketch's main objects that determine a project's visual attributes, and demonstrates how to configure and save an image file using the canvas-sketch rendering in the browser.
Three.js Intro
Coordinate Systems
Matt explains how coordinate systems are the basis for working in WebGL, covers the importance of coordinates in relation to an origin point, and how it will affect the overall result of a 3D project.
Geometry, Materials & Mesh
Matt explains how coordinates and color attributes are defined in the three.js library, and how the library is used to create 2D, 3D and 4D coordinates.
Position & Scene
Matt demonstrates ways to position, rotate, and scale three.js meshes by using multiple built-in functions, and how to place the meshes in a scenegraph container that can hold multiple meshes, lights, and other 3D objects.
Three.js Setup
Matt describes how the local canvas-sketch file is organized, and surveys the types of geometries and materials available on three.js to help measure and find a visual fit for a canvas-sketch project.
Creating a Scene
Applying Images to Spheres
Matt demonstrates how to map a sphere by applying an earth image file to a texture, and explains how different mesh types can help enhance a visual.
Grouping & Hierarchy
Matt adds an animated orbit to the scene by creating an anchor that uses grouping and hierarchy to make the moon orbit around the earth sphere.
Lighting & Material Texture
Matt introduces lighting to add the visual effect of a sun within the scene and explains how to modify, position, color, and scale light within the scene.
Light & Grid Helper
Matt demonstrates how to apply texture mapping to a sphere using an equirectangular PNG of the Earth, explains how different materials can be used to debug a scene, and adds animation to the project started in the previous section.
Units & Scale
Matt demonstrates how to add a property to a specific group of objects within a scene, and explains how to add units to realistically scale distance.
GPGPU for Computation
Matt introduces GPGPU and how GPGPU algorithms are used to create visual and non-visual effects with shaders within a scene.
Light & Scene Wrap Up
Matt explains that fully understanding geometries and their properties helps optimize a scene's potential, and opens up an example showing how multiple lights interact with a material.
Texture Mapping
Matt covers the concept of equirectangular textures and how they're useful in mapping objects in a scene, and introduces types of maps that help debug how light and other properties will affect the texture of an object's mapping.
Geometry
Custom Geometry
Matt demonstrates how to build a triangle geometry from scratch using Geometry. In three.js, Geometry is a function that stores attributes like vertex positions and color.
Buffer Geometry
Matt explains how to manually define a quad, or two triangles, within buffers using BufferGeometry. BufferGeometry is a function that stores vertex positions, indices, normals, colors, UVs, and custom attributes to apply to a mesh.
Shaders
Shadertoy
Matt introduces Shadertoy, a platform to build, share, and learn about shaders. Shadertoy is an example of taking shaders to the limit of their capabilities by creating entire scenes out of fragment shaders.
Fragment Shaders
Matt explains how fragment shaders strictly use math and numbers to create imagery.
Vertex Shaders
Matt explains how vertex shaders determine the screen-space position of specific vertices of a mesh, creating a 3D effect within a 2D screen-space.
Basic GLSL Fragment Shader
Matt explains how a basic fragment shader is built to determine a single pixel, or fragment, across the surface of a face.
Custom Shader Setup
Matt creates a new sketch using the command line, demonstrates how to change a sphere geometry to a box geometry, adds extensions to the code editor for syntax highlighting of shader functions, and adds color to the fragment shader.
Custom Gradient Shader
Matt creates a vertex shader that interacts with the fragment shader in order to create a gradient on a box geometry using varying. Varying helps pass texture coordinates between shaders.
Passing Data into Shaders
Matt demonstrates how to pass JavaScript data into both fragment and vertex shaders using uniforms. Uniforms are global GLSL variables that are passed to shader programs.
Texture Coordinates
Matt demonstrates how vUv values are used in texture mapping, rendering the x and y texture coordinates to create the gradient on a box geometry.
Example Shader Inspiration
Matt explains, inspired by the work of artist Yayoi Kusama, how to create a sphere with circles on its surface using shaders.
Circular Mask Pattern
Students are instructed to add a recursive circle mask pattern with animation to a shader within the box geometry.
Color Interpolation with mix
Matt adds color to a shader by using a built-in function called mix.
Translating Mask onto a Sphere
Matt demonstrates how to change the box geometry into a sphere, and modifies the mask pattern to have equirectangular properties to make the circles on the mask more circular.
Mapping UV Coordinates on Shapes
Matt demonstrates how UV coordinates are structured among different built-in geometries, and describes the scale of texture coordinates.
Adding GLSL Noise
Matt installs the npm package glsl-noise to use GLSL, and creates random sized circles. GLSL is a C-like language tailored for graphical use.
GLSL Noise
Matt explains the math behind GLSL noise by using an example of wave functions and their frequency, amplitude, and phase, that apply a function returning random values.
Advanced Geometry
Icosahedron Geometry
Matt introduces a solution to mapping issues with evenly placing circles onto a sphere called icosahedron geometry. The icosehedron shape has evenly spaced vertices to use as values to position the circles within the mask.
Drawing Circles onto an Icosahedron
Matt demonstrates how to turn the wireframe spheres evenly spaced on the sphere geometry into flat circles.
Using a Shader as a Texture
Matt demonstrates an alternative approach to adding flat circles onto a sphere geometry by adding shader textures instead of individual circle geometries.
Rim Lighting
Matt demonstrates how to add a rim lighting effect to geometries by adding a snippet of code that modifies the fragment shader to have a lighting effect.
Antialiasing with GLSL
Matt explains how to visually smooth out edges in a fragment shader by using the anti-alias smoothstep utility function provided by the package glsl-aastep, and how to enable the function using the standard derivatives extension in the shader material.
Exporting Animations in canvas-sketch
Matt demonstrates how to export animations using the canvas-sketch browser functionality.
Custom Attributes Demo
Matt shares an example of custom attributes that use buffer geometry, and allow more shader-specific complexity.
