Repo for LinkedIn Tutorial series - Creating 3D render engines on the Web for Real-time rendering of any dataset from Vector tiles, 3D maps to city-scale 3D meshes, point clouds & Gaussian Splats.

More than building a Render engine from scratch, this series is to help you understand the Core components / First principles of a Render engine so you can build your own Render engine pipelines for any application end-to-end!

🧊 If you're interested in learning more about building Render Engines, Star ⭐️ / Follow this repository. I'll be updating this page starting from the next post in the series!!

1. Creating a Web based 3D Viewer from Scratch (not so much, we'll be using libraries as this is not the focus of this series)
2. Integrating a minimal GLTF asset viewer
3. Building a Point cloud viewer that can stream and render large city-scale point clouds
4. Building a 3D tiles viewer that can stream and render huge 3D textured meshes
5. Building a 3D Gaussian Splat viewer that can render 3D Gaussian splats (generated by either Luma AI or Polycam)

For each of these steps, we will follow a step-by-step process of using the First principles approach to take each decision, from architectural to spatial data structures, rendering, cloud storage etc.

Could be Point Cloud(LAS/PLY..) format, Textured 3D mesh (OBJ/FBX..), Elevation Maps (TIFF) etc.

Could be exporter of any 3D application like Blender, Maya etc. or converter libraries for specific Data structures, File formats.

Examples: File Formats - PLY, glTF, USD, SPLAT Data Structures - Potree (Octree based DS for Point clouds), 3D tiles (Tile based DS for 3D Meshed)

Could be Cloud Storage Solutions like AWS S3, GCP Storage etc. or Self-hosted (This is not mentioned in the diagram)

Could be CDN or cloud storage endpoints. Streaming support in this stage could be essential for On-Demand rendering using Byte Fetching (for large-scale Point clouds, 3D tiles or Geo Raster rendering).

This preparation may include storage endpoint access, file read, decompression, loading data into geometry etc. Libraries like three.js offer Loader libraries for well-known data formats.

Could be Three.js, BabylonJS - 3D libraries that provide an abstraction layer to Web Graphics APIs like WebGL, WebGPU. In desktop applications, there are lower level APIs such as Metal, Vulkan, DirectX etc. You could choose to build your own renderer from scratch using any of the Graphics APIs mentioned above. But we would not be exploring about that in this series. Rather we will be using Three.js as the core library on which we build our Render engine.

We haven't spoken too much in detail about the rendering of 3D Gaussian Splats. But we'll get into that soon, once we start coding the sample viewers one by one.

More updates/ Actual code coming soon!