SuperHi FM

Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
Up to 50% off if you buy two or more of our courses! Discount automatically applied
CatalogCart AboutSign in

SuperHi

Shaders for the Web

Cryptoquartz
Chapter 09

Cryptoquartz

Make your own rock! We'll be diving into vertex shaders in this project to make a customizable surface that our users can control to make their own digital art, then save it as their own image!

Links + downloads

Videos

Lesson 01

Welcome to Cryptoquartz

Lesson 02

HTML + CSS setup

Lesson 03

Adding a scene with Three.js

Lesson 04

Adding a sphere geometry

Lesson 05

Setting up vertex and fragment shaders

Lesson 06

Changing the vertex shaders

Lesson 07

Adding FBM to our vertices

Lesson 08

Adding time and seed uniforms

Lesson 09

Adding slider uniforms

Lesson 10

Adding color based on varyings

Lesson 11

Ambient and diffuse lighting

Lesson 12

Adding a struct

Lesson 13

Adding in sliders for lighting

Lesson 14

Adding in new normals with dFdx and dFdy

Lesson 15

Changing to HSV colors

Lesson 16

Mixing two colors

Lesson 17

Creating some noise

Lesson 18

Adding saturation, brightness and gradient mix uniforms

Lesson 19

Better blending with step and smoothstep

Lesson 20

Adding rotation with vertex shaders

Lesson 21

Window resizing

Lesson 22

Click to download as an image

Lesson 23

Adding mouse movement to the lighting

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

Cloth Studios

Next: Chapter 10

Cloth Studios

Jellyfish

Back: Chapter 08

Jellyfish

Feeling stuck?

Don’t worry, we are here to help you with:

  • Speedy help from one of our team members
  • Detailed, relevant solutions
  • Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

EmailDiscord