By
@Sangam
Here it is, my light-weight, fast, 3D Voxel Runner entirely from scratch!HTML,CSS and Three.js (WebGL), zero big game engines involved. My dynamic, fast-ascending scale difficulty, procedurally generated distance-scaling obstacle spawners, AABBCollision detection system and everything with the ultimate 80's Synthwave/Neon theme and it all runs in your browser!
Built a Lightweight, High-Paced 3D Voxel Runner from pure scratch, using nothing but WebGL & Three.js! No heavy game engines, just code, geometry, and some serious Synthwave / Neon vibes.
The most challenging element was getting the procedural obstacle generation script to not randomly insert impossible walls (filling all 3 lanes!) or causing objects to occupy the same Z position (z-fighting/layer sorting hell). Had to rewrite it entirely in order to implement a distance/timer-based row spawner, so there’s always a guaranteed clear road path.
Super psyched on finally being able to write a functioning 3D game loop and seeing a dynamic, scaled-up velocity & AABB Box3 collision system without using Unity or Unreal!
Best thing? It runs entirely in the browser, no download required! Follow the link and give it a run: SPACE to play, A/D keys or Left/Right arrows to lane swap and evade the red glowingblocks! See how high you can go before things gets crazy.
10h 9m 42s logged
Building my Own 3D Engine From Scratch (10 hrs in) This time around I really wanted to get an in-depth feel for how the underlying 3Dmaths and rendering systems worked. I wanted to accomplish this with only raw WeGL and an abstracted layer on top called Three.js instead of pulling in a full game engine framework. So, Ive taken the past 10 hrs and spent time building a bespoke 3D Voxel Runner with nothing but WeGL & Three.js behind itThe math underlying the procedurally generated levels were without a doubt the most challenging of the bunch. Initially I was trying to spawn the levels dynamically based on every single frame but kept running into bugs that caused some of the worlds deadliest impossible walls(blocking all three lanes), some instances of overlap between objects on the same Zaxis and a variety of othersI moved on from that method and focused on using a strict distance/timerbased approach to ensure there was no overlap and each lane was clear to build. I’ve got AABB (Axis-alignedBoundingBox)collsion detection between the player and the obstacles up and running smoothly and an arbitrary increase in gamespeed that gradually ramps the closer you survive!
