VMF WebGL Preview

Demo and article by Jakgor471 (My GitHub)

Short project summary below

Construction method:
Load from file:

Anim speed
Fog start
Fog end
FOV
Draw grid
Wireframe (lower FPS)
Show side construction
Show clipping planes

Draw 3D Skybox

Camera tracking

About the project🔍

My fascination with Valve Map Format started around the year 2020, when I was planning on creating an addon for Garry's Mod that would allow importing VMF prefabs into the game and using them as regular props. I've stumbled upon an article by Stefan Hajnoczi and tried following it, to no avail due to lack of mathematical knowledge and intuition on my part.

Years later, shortly after starting the Mathematical analysis and linear algebra course at the university I've decided to revisit this project. I went with a different approach then Hajnoczi's - instead of intersection method I chose clipping method known from Quake. This time I understood every single formula, this way I was able to troubleshoot any problems. As a culmination I wrote an article on that topic, describing in details the entire process - it can be found here.

If it comes to the purpose of this demo I wanted to visualize the process of converting brushes into meshes. Additionaly, this app serves a purpose of a primitive VMF viewer - you can quickly preview and explore a map without Hammer Editor, which is cool!

How to use the demo app📗

By default, a small demo map is loaded.

Controls: mouse drag or arrow keys to look around, WASD to move, Shift - go down, Space - go up.

Construction method - changes how the brushes are being constructed, either by intersection or clipping
Load from file - allows loading a VMF file from your computer
Restart - restarts animation, nothing will be visible, as the brushes are yet to be constructed
Play - plays the animation
Next frame - jumps to a new frame
Skip animation - skips to a fully built map
Skip to solid id - skips to the first frame of a specified solid id (that can be found in a VMF file)
Go to - teleports to a specified brush by it's solid id

AI disclosure🗿

Yes, I've used ChatGPT to prettify the CSS for this project, but only for that. What about dead-giveaway-emoticons? I've placed them manually, I just really like them easthetically. Oh and I've used ChatGPT to verify my cross product while deriving a 3 plane intersection formula. There was a small mistake and I was going crazy trying to find it. All it took was flipping the sign 😑