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.🔮
This course is going to show you from start finish my creative development process by recreating this interactive online piece: IBC Sound Pillards experiment.
- 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
- IV - Let’s create
- V - Show ya work
- Hosting your piece online
- If you like it, other people might
- Working with designers
- VII - See ya
- What's next ?
Some amazing Blender YouTube chanels
- 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
Source files
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 also has one of the best documentation of any other js library. You can find it here
Shaders documentations and resources
Source files
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 websites
Some great Instagram visual inspiration accounts
Tech inspiration websites
Some great tech inspiration Twitter accounts and Youtube chanels
My favorite project management tools
Source files
Source files
Source files
Source files
Source files
- 17m17s -> Single letter variable names are a bad habit of mine that would be better to avoid 😳
- 29m48s -> Using an
if(x<y)x=ywas kind of lazy but easy to understand. A more GLSL friendly approach would be using aclamp()method. More on that here
Source files
Source files
Source files
Source files
Source files
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent