Freelancer
Advanced Creative Coding with WebGL & Shaders
4 hours, 17 minutes
CC
Course Description
Go deeper into creative coding and 3D graphics programming using WebGL, ThreeJS, and GLSL. In this course, you'll learn 3D vectors and shader effects. The skills you'll learn apply to many fields, including AR/VR, game development, interactive installations, media art, and more.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Really good explanations here! I would recommend to anyone who's learning 3D web development.
Nataliia Frank
nataliiafrank
Course Details
Published: April 21, 2020
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 39 minutes
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.
Matt explains what WebGL, GLSL, and three.js are and how they apply to rendering graphics for software.
Matt surveys different WebGL examples done by various artists and technologists.
Matt gives an overview of the repositories, guides, and tools used for 3D renderings throughout the course.
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
Section Duration: 20 minutes
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.
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.
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.
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
Section Duration: 34 minutes
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.
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.
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.
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.
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.
Matt introduces GPGPU and how GPGPU algorithms are used to create visual and non-visual effects with shaders within a scene.
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.
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
Section Duration: 16 minutes
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.
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
Section Duration: 1 hour, 27 minutes
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.
Matt explains how fragment shaders strictly use math and numbers to create imagery.
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.
Matt explains how a basic fragment shader is built to determine a single pixel, or fragment, across the surface of a face.
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.
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.
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.
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.
Matt explains, inspired by the work of artist Yayoi Kusama, how to create a sphere with circles on its surface using shaders.
Students are instructed to add a recursive circle mask pattern with animation to a shader within the box geometry.
Matt adds color to a shader by using a built-in function called mix.
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.
Matt demonstrates how UV coordinates are structured among different built-in geometries, and describes the scale of texture coordinates.
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.
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
Section Duration: 48 minutes
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.
Matt demonstrates how to turn the wireframe spheres evenly spaced on the sphere geometry into flat circles.
Matt demonstrates an alternative approach to adding flat circles onto a sphere geometry by adding shader textures instead of individual circle geometries.
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.
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.
Matt demonstrates how to export animations using the canvas-sketch browser functionality.
Matt shares an example of custom attributes that use buffer geometry, and allow more shader-specific complexity.
Wrapping Up
Section Duration: 10 minutes
Matt answers additional questions about the course material, and reiterates that there are countless ways to create a specific effect within WebGL.
Matt wraps up the course, and provides resources demonstrating different ways to deploy WebGL graphics as native applications for iOS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops