Building Blocks of 3D

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 🎉

See you in the next one 👋