3D Graphics for Web: Exploring Shaders using GLSL

Or log in to access your purchased courses

3D Graphics for Web: Exploring Shaders using GLSL

Create cutting-edge high-performance graphics for the web with OpenGL Shading Language (GLSL) shaders and explore the limitless creative possibilities of Shadertoy.

OpenGL shaders are a versatile technology that is transforming web design through its wide range of applications, from running video games in web browsers and crafting animations, to editing images, presenting data, and more!

This 2-day in-person workshop is an introduction to coding shaders using GLSL on Shadertoy, a free platform where you can craft, edit, and view GLSL shaders right in your web browser. You’ll also be able to easily integrate or port your shaders into various platforms such as three.js, Processing, p5.js, TouchDesigner, and even Raspberry Pi for seamless creative development.

  • On the first day we’ll cover shaders fundamentals, the basics of GLSL, procedural noise and randomness to create dynamic visuals, and some shapes and patterns to use. 
  • On the second day, we’ll expand upon shapes and patterns before diving into raymarching, a rendering technique which will allow us to generate 3D shapes, fractals, and entire worlds from scratch using only GLSL.

This course is perfect for creative individuals seeking to create visually stunning and highly optimized graphics for the web. Basic programming experience is required.

Course Logistics

Dates: Tuesday, May 23 & Thursday, May 25, 2023

Times: 6-9PM PT

Location: Gray Area / Grand Theater – 2665 Mission St, San Francisco, CA 94110

Cost: $180 for live in-person two-day workshop.

Scholarship: We also offer Diversity Scholarships.
Apply by May 10, 2023.

Experience Level: Intermediate: This course requires basic programming experience.

• Bring a laptop
• Create a Shadertoy account prior to attending the workshop

Additional Information:
• No Refunds or Exchanges.
• View our FAQ here.
• Contact [email protected] with any questions, or workshop ideas!

Educational Goals:
Students will leave this workshop with the ability to use GLSL in Shadertoy to make creative sketches with generative 2D and 3D shapes, and will then be able to share their sketches with their friends!

Workshop Outline

  • Day 1 (2D)
    • Introduce Shadertoy
    • What is a shader?
      • CPU vs GPU
    • Types of shaders
      • Vertex
      • Fragment
      • Compute
    • Doodle walkthrough
      • Shadertoy new project
    • UV space
    • Basic operations
    • Operations
      • Mirroring
      • Sine/Cosine
    • Noise
      • What is noise?
      • Domain warping
    • 2D Shapes
  • Day 2 (3D)
    • Raymarching
    • What is an SDF?
    • 3D Shapes
    • Operations
    • Fractals

About Technologies:
Shadertoy is a free online platform and community for creating, sharing, and exploring shaders, specifically those written using the OpenGL Shading Language (GLSL).

Become a Gray Area Member for early access to our workshops, and 20% off

Gray Area Members enjoy extraordinary access to our interdisciplinary arts & education programs, while supporting our mission to catalyze creative action for social transformation. Get free admission, exclusive content, and more!


Nat is an artist and programmer currently living in the Bay Area. They grew up in California's Mojave Desert before leaving to study Computer Science at Stanford University. They have worked as a creative technologist in XR for several companies, most recently TikTok. Currently, they are taking time off to cultivate their art practice before deciding what to do next. Their work uses simulation, computer graphics, and mixed media to speculate about language, ecology, and identity. They live with a bunch of plants and isopods, and one big mystery snail.