Hey all! I’ve recently picked back up some work I started a year ago on creating interactive first-person scenes with Three.JS. Things are finally getting to a point where I’m willing to show them off a little, and I think some people here might find the technical implementation side interesting as well.
I’ve been building a sort of light-weight game engine, partly by piecing together existing libraries and partly from scratch. This is partly to help myself learn about game development and 3D programming from the bottom up, but also to explore some ideas that I feel are unexplored in the browser-based 3D space.
Some of the stuff I’ve put together so far for this project includes:
- A custom shader extending Three.JS’s
MeshPhysicalMaterialwith additions such as hex tile-breaking, triplanar mapping, fine-grained per-material lighting controls, and more
- An extensive post-processing pipeline with volumetric screen-space godrays, depth pre-pass optimization, ambient occlusion, and more using the pmndrs/postprocessing library
- Collision detection using Ammo.JS (Bullet physics engine compiled to WebAssembly)
- 4K PBR textures synthesized with Stable Diffusion and some tools I developed
- Worlds + terrain modeled in blender and exported to glTF
I recorded a video going over the tools and techniques I used to create one of the new levels I created:
I tried to give an overview of the main components and workflows I use to build these levels and the engine itself. I’m hoping to create more videos in the future going into detail on individual things and other levels as well.
You can play the level shown in the video here: https://3d.ameo.design/smoke.html
Note that this will NOT work on mobile devices; the controls only support mouse/keyboard currently.
There’s an additional connected level which I didn’t show off in the video that reachable from this one as well, if you can reach it!
Here are links to some of the resources I made use of to build it (these are also in the YouTube video description):
pmndrs postprocess library which I extensively use: GitHub - pmndrs/postprocessing: A post processing library for three.js.
My post about how I generate 4K PBR textures using stable diffusion: Generating 4K PBR Textures Using Stable Diffusion XL :: Casey Primozic's Notes
^ has links to the automatic1111 stable diffusion web UI I use, the AI PBR map generator tool I use, and my seamless texture stitcher tool
Fabrice Neyret’s hex tiling shader demo: Shader - Shadertoy BETA
Thanks for checking out the project! As I mentioned, it’s all open source and I’m more than happy to answer any questions about it as well.
I’ve done my best to iron out showstopping bugs, but there’s certainly some stuff left over. This is all very work-in-progress, but that being said I’m happy to receive any feedback of issue reports you might run into.