README.md

👨‍💻✨ The fun process of creating lively interactive 3D scenes for the web ✨👨‍💻

An Awwwards Academy course by Marius Ballot🏂

This Git Repository is the documentation and entrypoint for every assets demos and others of the Awwwards academy course: The fun process of creating lively interactive 3D scenes for the web.🔮

A bit about the course

This course is going to show you from start finish my creative development process by recreating this interactive online piece: IBC Sound Pillards experiment.

Course Chapters

• I - A bit of context
  • How this course came to be ?
  • Let's just have some fun creating stuff
• II - Some fundamentals
  • Blender, the basics
  • WebGL with Three.js, the basics
  • Shaders, shaders, shaders...
  • The fascinating and important process of tool building
  • How I roll about getting more skills
• III - Before creating
  • Visual inspiration
  • Technical inspiration
  • Plan of action
• IV - Let’s create
  • Dev environment and workflow overview
  • 3D modeling and layout
  • From Blender to browser
  • Model manipulation
  • Oh yeah, Shaders
  • Audio Reactors
  • Particles
  • GUI and customization
  • Lets add UI
  • Details, details, details…
• V - Show ya work
  • Hosting your piece online
  • If you like it, other people might
  • Working with designers
• VII - See ya
  • What's next ?

---

Chapters' references

Blender the basics

Some amazing Blender YouTube chanels

• Blender Guru
• CG Geek
• FlippedNormals
• Ducky 3D
• CGMatter
• Default Cube

Post editing notes

• 10m14s -> Blender's Evee renderer actually IS a real time renderer
• 10m18s -> Blender's Cycles renderer uses rayscasting for its rendering process giving this "close to reality" lighting conditions. More on raycasting right here

WebGL with Three.js, the basics

Source files

• Three.js Bearbones Boiler plate
• Three.js GLTF imported model example

Having a ginormous comunity, you really have 1000 ways to learn Three.js. Here are some of my favorite places to learn more about this wonderfull library

• Three.js fundamentals
• This old but still relevant youtube series
• Three.js examples library

Three.js also has one of the best documentation of any other js library. You can find it here

Shader, shaders, shaders...

Shaders documentations and resources

• The Book of Shaders
• Pixel Spirit Deck
• Shadertoys
• Shader-tutorial.dev

Source files

• Simple Three.js custom shader setup

The fascinating and important process of tool building

The tools examples referenced in this section

• RAF - A global request animation frame handler
• 📹 Three CamParallax 🚤
• ✨Three.BufferGeometry particle system✨
• ✨ Vue Three Starter ✨

Visual inspiration

Visual inspiration websites

• Pinterest
• Awwwards
• Dribbble

Some great Instagram visual inspiration accounts

• creativecodeart
• shedrawswithcode
• Joshua Davis
• boldtron

Technical inspiration

Tech inspiration websites

• Codrops
• Medium programming

Some great tech inspiration Twitter accounts and Youtube chanels

• Three.js Twitter
• Pavel Boytchev
• Dennys Kuhnert
• Bruno Simon
• Fireship
• Sebastian Lague

Plan of action

My favorite project management tools

• Trello
• Notion

Dev environment and workflow overview

Source files

• Vue Three.js starter

3D modeling and layout

Source files

• P2 - 3D Modeling And Layout Sources

From Blender to browser

Source files

• P3 - From Blender to browser

Model manipulation

Source files

• P4 - Model manipulation

Oh yeah, Shaders

Source files

• P5 - Oh yeah, Shaders

Post editing notes

• 17m17s -> Single letter variable names are a bad habit of mine that would be better to avoid 😳
• 29m48s -> Using an if(x<y)x=y was kind of lazy but easy to understand. A more GLSL friendly approach would be using a clamp() method. More on that here

Audio Reactors

Source files

• P6 - Audio Reactors

Particles

Source files

• P7 - Particles

GUI and customization

Source files

• P8 - GUI and customization

Lets add UI

Source files

• P9 - Lets add UI

Details, details, details…

Source files

• P10 - Details, details, details…

---

A huge thank you

Those who helped behind the scenes

• Niccolo Miranda
• Michael De Laborde
• Adrien Calmesnil
• Sarah Manzaro
• Lola Millot
• Charles Arnould
• Elena Moreac
• Maximilien Dufau
• Karl Justiniano