Advanced Creative Coding with WebGL & Shaders

4 hours, 17 minutes CC
Advanced Creative Coding with WebGL & Shaders

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
Close

What They're Saying

Really good explanations here! I would recommend to anyone who's learning 3D web development.
Nataliia Frank
Nataliia Frank
nataliiafrank

Course Details

Published: April 21, 2020

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

Three.js Intro

Section Duration: 20 minutes

Creating a Scene

Section Duration: 34 minutes

Geometry

Section Duration: 16 minutes
  • 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

Section Duration: 1 hour, 27 minutes

Advanced Geometry

Section Duration: 48 minutes

Wrapping Up

Section Duration: 10 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Start a 7-Day Free Trial