Shriram Balaji
Shriram Balaji's Blog

Shriram Balaji's Blog

Building Blocks of 3D

Building Blocks of 3D

A Web Developer's Introduction to 3D

Shriram Balaji's photo
Shriram Balaji
·Dec 30, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Building blocks of 3D
  • ◻️ Geometry
  • Material ⬛
  • 🔲 Mesh
  • 💡 Light
  • 🎥 Camera

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

fakurian-design-PpgY7sjpf_0-unsplash 1.png

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.

Cartesian Coordinates.png

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 ⬛

Material.png

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

mesh-bg.png

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.

Polygon-Mesh-Parts(1).png

💡 Light

lights-bg.png

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

pexels-pixabay-414781 1.png

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 👋

 
Share this