Advanced Creative Coding with WebGL & Shaders

Frontend Masters Advanced Creative Coding with WebGL & Shaders 10/2020

[FrontendMasters] Advanced Creative Coding with WebGL & Shaders​

[FrontendMasters] Advanced Creative Coding with WebGL & Shaders

Advanced Creative Coding with WebGL & Shaders 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.

Advanced Creative Coding with WebGL & Shaders​

  • Introduction Matt DesLauriers summarizes the instruments and platforms wanted for the course, and explains that some npm packages used within the course are written in GLSL.
  • WebGL, GLSL & Three.js Overview Matt explains what WebGL, GLSL, and three.js are and the way they apply to rendering graphics for software program.
  • WebGL Examples Matt surveys totally different WebGL examples achieved by numerous artists and technologists.
  • Course Code & Setup canvas-sketch Matt provides an summary of the repositories, guides, and instruments used for 3D renderings all through the course.
  • canvas-sketch Overview & Settings Matt provides recommendation on troubleshooting canvas-sketch, explains canvas-sketch's major objects that decide a undertaking's visible attributes, and demonstrates configure and save a picture file utilizing the canvas-sketch rendering within the browser.

Three.js Intro​

  • Coordinate Methods Matt explains how coordinate techniques are the idea for working in WebGL, covers the significance of coordinates in relation to an origin level, and the way it will have an effect on the general results of a 3D undertaking.
  • Geometry, Supplies & Mesh Matt explains how coordinates and shade attributes are outlined within the three.js library, and the way the library is used to create 2D, 3D and 4D coordinates.
  • Place & Scene Matt demonstrates methods to place, rotate, and scale three.js meshes by utilizing a number of built-in features, and place the meshes in a scenegraph container that may maintain a number of meshes, lights, and different 3D objects.
  • Three.js Setup Matt describes how the native canvas-sketch file is organized, and surveys the kinds of geometries and supplies accessible on three.js to assist measure and discover a visible match for a canvas-sketch undertaking.

Creating a Scene​

  • Making use of Pictures to Spheres Matt demonstrates map a sphere by making use of an earth picture file to a texture, and explains how totally different mesh varieties may help improve a visible.
  • Grouping & Hierarchy Matt provides an animated orbit to the scene by creating an anchor that makes use of grouping and hierarchy to make the moon orbit across the earth sphere.
  • Lighting & Materials Texture Matt introduces lighting so as to add the visible impact of a solar inside the scene and explains modify, place, shade, and scale gentle inside the scene.
  • Gentle & Grid Helper Matt demonstrates apply texture mapping to a sphere utilizing an equirectangular PNG of the Earth, explains how totally different supplies can be utilized to debug a scene, and provides animation to the undertaking began within the earlier part.
  • Items & Scale Matt demonstrates add a property to a selected group of objects inside a scene, and explains add items to realistically scale distance.
  • GPGPU for Computation Matt introduces GPGPU and the way GPGPU algorithms are used to create visible and non-visual results with shaders inside a scene.
  • Gentle & Scene Wrap Up Matt explains that absolutely understanding geometries and their properties helps optimize a scene's potential, and opens up an instance exhibiting how a number of lights work together with a cloth.
  • Texture Mapping Matt covers the idea of equirectangular textures and the way they're helpful in mapping objects in a scene, and introduces kinds of maps that assist debug how gentle and different properties will have an effect on the feel of an object's mapping.


  • Customized Geometry Matt demonstrates construct a triangle geometry from scratch utilizing Geometry. In three.js, Geometry is a perform that shops attributes like vertex positions and shade.
  • Buffer Geometry Matt explains manually outline a quad, or two triangles, inside buffers utilizing BufferGeometry. BufferGeometry is a perform that shops vertex positions, indices, normals, colours, UVs, and customized attributes to use to a mesh.


  • Shadertoy Matt introduces Shadertoy, a platform to construct, share, and find out about shaders. Shadertoy is an instance of taking shaders to the restrict of their capabilities by creating total 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 decide the screen-space place of particular vertices of a mesh, making a 3D impact inside a 2D screen-space.
  • Fundamental GLSL Fragment Shader Matt explains how a primary fragment shader is constructed to find out a single pixel, or fragment, throughout the floor of a face.
  • Customized Shader Setup Matt creates a brand new sketch utilizing the command line, demonstrates change a sphere geometry to a field geometry, provides extensions to the code editor for syntax highlighting of shader features, and provides shade to the fragment shader.
  • Customized Gradient Shader Matt creates a vertex shader that interacts with the fragment shader to be able to create a gradient on a field geometry utilizing various. Various helps move texture coordinates between shaders.
  • Passing Knowledge into Shaders Matt demonstrates move JavaScript information into each fragment and vertex shaders utilizing uniforms. Uniforms are world GLSL variables which might be handed to shader applications.
  • Texture Coordinates Matt demonstrates how vUv values are utilized in texture mapping, rendering the x and y texture coordinates to create the gradient on a field geometry.
  • Instance Shader Inspiration Matt explains, impressed by the work of artist Yayoi Kusama, create a sphere with circles on its floor utilizing shaders.
  • Round Masks Sample College students are instructed so as to add a recursive circle masks sample with animation to a shader inside the field geometry.
  • Shade Interpolation with combine Matt provides shade to a shader by utilizing a built-in perform referred to as combine.
  • Translating Masks onto a Sphere Matt demonstrates change the field geometry right into a sphere, and modifies the masks sample to have equirectangular properties to make the circles on the masks extra round.
  • Mapping UV Coordinates on Shapes Matt demonstrates how UV coordinates are structured amongst totally different built-in geometries, and describes the dimensions of texture coordinates.
  • Including GLSL Noise Matt installs the npm package deal glsl-noise to make use of GLSL, and creates random sized circles. GLSL is a C-like language tailor-made for graphical use.
  • GLSL Noise Matt explains the mathematics behind GLSL noise by utilizing an instance of wave features and their frequency, amplitude, and section, that apply a perform returning random values.

Advanced Geometry​

  • Icosahedron Geometry Matt introduces an answer to mapping points with evenly putting circles onto a sphere referred to as icosahedron geometry. The icosehedron form has evenly spaced vertices to make use of as values to place the circles inside the masks.
  • Drawing Circles onto an Icosahedron Matt demonstrates flip the wireframe spheres evenly spaced on the sphere geometry into flat circles.
  • Utilizing a Shader as a Texture Matt demonstrates an alternate method to including flat circles onto a sphere geometry by including shader textures as a substitute of particular person circle geometries.
  • Rim Lighting Matt demonstrates add a rim lighting impact to geometries by including a snippet of code that modifies the fragment shader to have a lighting impact.
  • Antialiasing with GLSL Matt explains visually easy out edges in a fraction shader by utilizing the anti-alias smoothstep utility perform supplied by the package deal glsl-aastep, and allow the perform utilizing the usual derivatives extension within the shader materials.
  • Exporting Animations in canvas-sketch Matt demonstrates export animations utilizing the canvas-sketch browser performance.
  • Customized Attributes Demo Matt shares an instance of customized attributes that use buffer geometry, and permit extra shader-specific complexity.

Wrapping Up​

  • Q&A Matt solutions extra questions concerning the course materials, and reiterates that there are numerous methods to create a selected impact inside WebGL.
  • Wrapping Up Matt wraps up the course, and offers sources demonstrating other ways to deploy WebGL graphics as native purposes for iOS.
First release
Last update
0.00 star(s) 0 ratings

More resources from PIRATE

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock