To get started with developing in a Real Time 3D environment, we must first understand how it differs from Non-Real Time 3D Development.
Non-Real Time 3D allows users to watch but they are unable to interact with the content. The rendering is done during production and the final product is a video or image file.
On the other hand, Real-Time 3D allows users to see and interact with 3D images or scenes, such as in video games or websites, that appear to be moving in real time. This, therefore, means that the rendering process takes place on the user’s device.
3D Rendering
3D Rendering refers to the process of converting 3D models into 2D images or animation on screen. In the same way that your camera takes a photo of real life moments and produces 2D images/video, the 3D renderer captures the virtual 3D scene and transforms it to 2D for us to view on screen.
Graphics Processing Unit (GPU)
All modern computers come equipped with a GPU and it is designed for parallel processing, the GPU is used in a wide range of applications, including graphics and video rendering.
Open Graphics Library (OpenGL)
OpenGL acts as the bridge between software that need 3D rendering and the GPU. OpenGL is a cross-language, cross-platform application programming interface for rendering 2D and 3D vector graphics.
Web Graphics Library (WebGL)
For 3D web development, we have WebGL (Short for Web Graphics Library) which was created based on OpenGL. WebGL is compatible with most web browsers and It uses the HTML5 canvas element and is accessed using Document Object Model (DOM) interfaces.
ThreeJS
Now, for coding the frontend, we use the JavaScript library and API, ThreeJS. Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage. It uses WebGL to draw 3D.
To begin setting up your 3D space, we start with setting up a renderer, a scene and a camera.
The renderer is one of the most fundamental parts of 3D development. It takes the scene and camera then draws the 3D space as a 2D output to the HTML canvas.