First-Person Game Engine Overview + Level Demo

Showcase
1

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.

A screenshot of the "smoke" level. Shows intense orange fog, floating fractal structures composed out of large dark cubes with stone-like texturing and patterns, and four orange/yellow lights glowing in the distance supported by long poles. A screenshot of the "smoke" level. Shows intense orange fog, floating fractal structures composed out of large dark cubes with stone-like texturing and patterns, and four orange/yellow lights glowing in the distance supported by long poles.
A screenshot of one of the 3D sketches I created as a part of this project. A golden arch made out of a metallic-rocky material stands on a concrete plinth. It sits in what looks like a sort of shrine with curved stone arches. There is a cobblestone floor and stone walls. The graphics are remiscent of PS2 games or similar style. A screenshot of the cave level. Shows dark rocky cave with stalagmites in the foreground. The walls are smooth and look igneous, sort of like a lava tube. The background shows an orange glow behind a passage in the cave.

Some of the stuff I’ve put together so far for this project includes:

  • A custom shader extending Three.JS’s MeshPhysicalMaterial with 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):

All of my source code: GitHub - Ameobea/sketches-3d: Experiments and demos of 3D game-like things. Mostly using Blender + Three.JS with custom shaders and interactive bits.

three-good-godrays: GitHub - Ameobea/three-good-godrays: Screen-space raymarched godrays for three.js using the pmndrs postprocessing library

n8ao ambient occlusion effect: GitHub - N8python/n8ao: An efficient and visually pleasing implementation of SSAO with an emphasis on temporal stability and artist control.

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

Ammo.JS physics/collision detection library: GitHub - kripken/ammo.js: Direct port of the Bullet physics engine to JavaScript using Emscripten

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.

5 Likes
2

Errors

image
image1920×912 136 KB

3

It looks like your browser doesn’t support Wasm SIMD. That should be supported by all modern browsers; could you tell me what browser + version you’re using?

4

Standard browser Google chrome 116.0.5845.141

5

Extremely odd stuff - I’ve never seen that before. What operating system and CPU architecture are you using, may I ask?

That error seems to come directly from the google chrome code and can happen if your CPU doesn’t support 128-bit SIMD, but I have never heard of any CPU that doesn’t.

Wasm SIMD is used to accelerate some of the numerical computation done by the game. It’s possible to create separate builds that don’t use it, but it’s tedious and I was under the impression that it could be assumed to be available in modern browsers.

6

Windows 10. Another wasm ammo.js works good as always.

7

Yeah I have a custom build of Ammo.JS that enables these modern features and makes some other tweaks and updates for my use case. The pre-built Ammo.JS binaries are extremely old, are very large in file sizee, and run much slower.

Do you happen to know what kind of CPU you have? All Intel and AMD CPUs made since ~2007 should have support for 128-bit SIMD instructions needed for Wasm SIMD.

If you have a more modern CPU than that, there might be some strange configuration situation on your computer or operating system that’s preventing it from being detected or activated.

Thanks for the info, and sorry you’re not able to run the level.

8

amd x4 640 processor

9

Ahh, yeah that would explain it!

I will have to create non-SIMD builds of Ammo.JS as well as some other code I have for the tool. You unfortunately won’t be able to run it for now, though.

Thanks again for helping me get to the bottom of that issue.

10

You are wellcome.

11

I’ve added a new video for the most recent level I’ve built: a semi-procedurally generated cave

Some highlights:

  • Geometry nodes in Blender to deform the cave and make it look more organic and realistic
  • Custom mesh surface sampler with noise to function to place stalagmites/stalagtites
  • Triplanar mapping shader for seamlessly texturing the cave without needing UV maps
  • Realtime music synthesis running in the browser
1 Like
12

Great Job. How many hours have you put in to the first stage and the second stage, which you just posted?

1 Like
13

Thanks for checking it out!

I probably spent ~20 hours on the first stage with the orange lights and godrays, and ~10 on the cave level. That includes much of the time experimenting with ideas and trying stuff out as well as time spent working on the engine itself to support new features - like the triplanar mapping and mesh surface sampler.

The goal is to build up a toolkit to make future development easier and faster. That combined with growth in my personal skill and experience with this stuff is indeed making my progress faster over time.

2 Likes