Hello! I’ve been trying out React Three Fiber and three.js and it’s a whole new world to me. I also started learning to use blender, so I wanted share some initial learnings about 3D.
For a web developer, the building blocks would be HTML, CSS and JS. But when building in 3D, there are other things that are vital to understand.
Building blocks of 3D
- ◻️ Geometry
- ⬛ Material
- 💡Light
- 🎥 Camera
- 🔲 Mesh ( Geometry ◻️ + ⬛ Material )
◻️ Geometry
Geometry deals with the “shape” and “size” of objects. For eg. a cube, a sphere etc. These objects can be placed in 3D space along the X, Y and Z axes.
Here’s a diagram from early grad school math class.
Every point along each axes is called a “co-ordinate”. In 3D space, an object’s position is denoted using it’s (x, y, z) coordinates.
⬛ Material
The appearance of a 3D object is described using a “Material”. It is what you layer on top of a 3D object, to control the way the object appears when rendered.
It behaves much the way a material does in the real world - whether that’s the way light interacts with its surface, or traits like color, texture, transparency and reflectivity.
A whole set of properties interact to give a material a specific set of visual attributes, so that you can see that than an object is soft like leather, or that it is clear and transparent and bouncing light around - like glass or crystal.
The appearance of an object a.k.a Material ⬛ is described using programs called “Shaders”. Gamers might have come across “Shader Packs” in their lingo.
A Shader Program describes traits (think color, position etc.,) of:
- Vertex
- Pixel / Fragment
Shaders are written in a C-Like languages like HLSL or GLSL (OpenGL Shading Language) and are hence compatible with WebGL. There are other alternatives that either output GLSL and provide a better alternative in a much more widely used language. For eg. libraries like rust-gpu enable writing more type-safe shaders in Rust.
🔲 Mesh
A Mesh or a polygon mesh is defined as a collection of vertices, edges and faces that defines the shape of an object. In 3D Modeling software like Blender or R3F a Mesh can be thought of as a combination of Geometry and Material that can be placed in 3D Space.
💡 Light
Light plays an important role in 3D because there’s no way to properly distinguish a 2D object from 3D without light.
Two basic types of light sources
- Ambient Light ❇️
- Point Light 🔦
Ambient Light ❇️ makes all objects lit evenly without casting any shadows.
Point Light 🔦 is a directional light source that casts shadows. This is what gives the “3D effect” to an object placed in 3D space when viewed in a 2D screen.
🎥 Camera
The Camera acts as a window into the 3D world. The Renderer ✨ looks through the camera and restricts itself to render what is visible through the camera lens / viewport.
I’ll keep this blog updated as I dive more into 3D. That’s all for now, and Happy new year 2022!
Also here’s my first blender artwork 🎉
I decided to remake the logo of "The Internals" meetup by @_syadav in blender, partially because it's a nice group with some stellar talks and partially because I wanted to make something with a simple cube 😅
See you in the next one 👋