Advanced Creative Coding with WebGL & Shaders
Table of Contents
IntroductionMatt 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 OverviewMatt explains what WebGL, GLSL, and three.js are and how they apply to rendering graphics for software.
WebGL ExamplesMatt surveys different WebGL examples done by various artists and technologists.
Course Code & Setup canvas-sketchMatt gives an overview of the repositories, guides, and tools used for 3D renderings throughout the course.
canvas-sketch Overview & SettingsMatt 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.
Coordinate SystemsMatt 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 & MeshMatt 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 & SceneMatt 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 SetupMatt 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 SpheresMatt 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 & HierarchyMatt 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 TextureMatt 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 HelperMatt 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 & ScaleMatt 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 ComputationMatt introduces GPGPU and how GPGPU algorithms are used to create visual and non-visual effects with shaders within a scene.
Light & Scene Wrap UpMatt 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 MappingMatt 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.
Custom GeometryMatt 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 GeometryMatt 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.
ShadertoyMatt 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 ShadersMatt explains how fragment shaders strictly use math and numbers to create imagery.
Vertex ShadersMatt 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 ShaderMatt explains how a basic fragment shader is built to determine a single pixel, or fragment, across the surface of a face.
Custom Shader SetupMatt 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 ShaderMatt 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.
Texture CoordinatesMatt 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 InspirationMatt explains, inspired by the work of artist Yayoi Kusama, how to create a sphere with circles on its surface using shaders.
Circular Mask PatternStudents are instructed to add a recursive circle mask pattern with animation to a shader within the box geometry.
Color Interpolation with mixMatt adds color to a shader by using a built-in function called mix.
Translating Mask onto a SphereMatt 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 ShapesMatt demonstrates how UV coordinates are structured among different built-in geometries, and describes the scale of texture coordinates.
Adding GLSL NoiseMatt 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 NoiseMatt 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.
Icosahedron GeometryMatt 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 IcosahedronMatt demonstrates how to turn the wireframe spheres evenly spaced on the sphere geometry into flat circles.
Using a Shader as a TextureMatt demonstrates an alternative approach to adding flat circles onto a sphere geometry by adding shader textures instead of individual circle geometries.
Rim LightingMatt 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 GLSLMatt 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-sketchMatt demonstrates how to export animations using the canvas-sketch browser functionality.
Custom Attributes DemoMatt shares an example of custom attributes that use buffer geometry, and allow more shader-specific complexity.