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.
Requirements:
• 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!
