Rendered at 06:27:39 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
jedberg 16 hours ago [-]
This is an awesome achievement, but I can't help but notice that Quake ran smoother on my Pentium-133 PC in the 90s than it runs on my Mac M1 Pro...
poisonfountain 15 hours ago [-]
This engine is not optimised for performance. It's using CSS, after all.
Insanity 15 hours ago [-]
Yeah this is a case of “not the right tool for the job”.
It is awesome though.
jedberg 14 hours ago [-]
Of course, but you'd think after 30 years the compute power should be enough to overcome any lack of optimization. It's a testament to the engineering that went into the original Quake engine.
culi 14 hours ago [-]
Decades of optimizing a toaster to make better toast will not make the toaster any better at making meatloaf
We haven't had a toaster that makes better toast since 1997 (Sunbeam radiant control).
libria 12 hours ago [-]
Is this the right analogy? The product is the same, the appliance is different.
It should be "Decades of inventions from toasters to IOT AI Smart Air Fryers will not make better toast than the original"
But I'd argue the IOT AI Smart Air Fryer should make really good toast. Which is what GP is saying.
matt_kantor 10 hours ago [-]
It'd be like if the IOT AI Smart Air Fryer had a constraint of only being allowed to use friction to create heat.
CSSQuake uses an intentionally-absurd rendering pipeline. It's not surprising that the result is sub-optimal.
(Though I agree that the meatloaf analogy is not very good.)
culi 6 hours ago [-]
I stand by my analogy.
Both a toaster and an oven might benefit from improved electronics but in the end—whether its a toaster from the 60s or a toaster from 3008—you are still using a toaster to make a meatloaf.
CSS is not remotely comparable to a game engine. It's not even a programming language.
14 hours ago [-]
rustystump 13 hours ago [-]
I am on the ground. This is great.
Still, why css is as slow as it is given what tech like imgui can do is a little wild.
harrall 13 hours ago [-]
CSS is a general rendering solution, not something built for rendering 3D games.
And no one has spent any time optimizing 3D transforms to make a game workable because no one would be able to justify the use of their time like that. It wouldn’t even give you brownie points ‘cause most people would just ask “why?”
Akronymus 12 hours ago [-]
Id assume "a fun challenge" could be enough of a reason
amatecha 5 hours ago [-]
Err, strange, what browser? I'm using Firefox on a ThinkPad from 2018 running Linux, and cssquake was running at a smooth 60fps just now (and at 1080p resolution vs the 320x240 or 320x200 someone would likely be running on a P133)
jamal-kumar 13 hours ago [-]
For what it's worth it works like smooth butter under Chrome on an M2, on Safari it's clunky and seems to clip alot
jeroenhd 11 hours ago [-]
Zero issues on Firefox + Linux. Gnome Web is stuttery and weird, though. Must be a WebKit/Safari thing.
jedberg 10 hours ago [-]
Possibly, I did it on Safari. Trying it now on Chrome and it's fine.
DanielHB 15 hours ago [-]
Wait, did Quack run on Pentium-133? I had a Pentium MMX 233mhz and I always assumed it didn't ran well so I never bother to get it.
iamphilrae 14 hours ago [-]
If you had a 3dfx card it would run silky smooth on a Pentium-120 (what I had at the time)! Quake 2 ran pretty well too if I recall.
jklp 6 hours ago [-]
Yep 3dfx was a game changer. Was night and day on my 486 DX4 100 with and without
bluedino 13 hours ago [-]
Bare minimum for it being playable was a 486DX4 100MHz or similar, but with the floating point Quake really wanted a Pentium
Garlef 13 hours ago [-]
I played it on a Pentium with 60mhz - it was allright
MrFurious 10 hours ago [-]
I played quake in 486dx100.
lightedman 14 hours ago [-]
Quake ran on a P75 with 8MB RAM in DOS mode. Not the best but it worked at 320x200.
jedberg 14 hours ago [-]
It must have, because that's what I had in 1996 and I played it.
lizknope 11 hours ago [-]
Ran fine on my Pentium 90 with 16MB RAM
bitwize 6 hours ago [-]
I ran it on a Pentium 60. If you stuck to 320x200 it ran fine.
UltraSane 14 hours ago [-]
Quake ran well on my 100Mhz Pentium.
to11mtm 14 hours ago [-]
Either you had a Voodoo on your P133 or whatever the M1 is doing is having a bad time...
On my 7945HX this is plenty fast.
api 8 hours ago [-]
Quake compiled in C will run insanely fast at 8K full resolution on an M1.
jedberg 7 hours ago [-]
You wouldn’t happen to have a pointer on where to get this version would you?
jonplackett 14 hours ago [-]
I think you’re missing the point
AzzieElbab 18 hours ago [-]
Awesome! Harder to exit than vim.
pgt 13 hours ago [-]
In case you want to view the menu, press Tab. Click outside menu items to resume game.
deskamess 17 hours ago [-]
how did you exit? because nothing seems to be working.
calgoo 17 hours ago [-]
Back button worked for me
ChrisClark 16 hours ago [-]
I pressed escape, then just closed the tab
axus 16 hours ago [-]
I pressed Esc key, click quit. And then closed the browser tab.
badsectoracula 16 hours ago [-]
Impressive. I guess this isn't only the renderer made to use CSS but also a full recreation of the engine and logic right? My guess is because a bunch of things do not behave like the original game, e.g. some buttons need to be shot instead of touched to activate, some secret doors open by touching them instead of being shot, etc.
rofko 10 hours ago [-]
Hi there! Thanks for the report, buttons should work properly now.
Regarding the game logic, the build step has a small JS extractor over QuakeC/progs.dat to generate JSON source facts: states, models, attacks, sounds, etc. The browser runtime is TypeScript and consumes those for Quake-ish gameplay.
15 hours ago [-]
slopinthebag 12 hours ago [-]
No it’s just the renderer. The game itself is Typescript.
jojogeo 17 hours ago [-]
This is the first thing I've seen on the intertubes for a /long/ time which genuinely makes me smile, thank you op.
Checked out https://cssdoom.wtf/ and loved it too, both are far lighter than current affairs. \o/
CSS does the rendering, the game logic is TypeScript.
koolala 2 hours ago [-]
Using the Inspector on it is awesome. You can select each map piece.
divan 18 hours ago [-]
As someone who passionately and ardiently hates prolifiration of this set of _hacks on top of hacks_ called CSS (and CSS/JS/HTML aka Web-stack), I must say this is good and valid use case for CSS. :)
Very cool. I wonder what the limitations are? I see the dog I shot is floating in the air. Is that maybe a CSS thing or is it fixable?
freakynit 17 hours ago [-]
.dog {
display: float;
}
skvmb 16 hours ago [-]
You win! I laughed way too hard at this. Boss man is now giving me the side eye.
amatecha 5 hours ago [-]
Damn, always gotta deal with these accursed z-index issues with CSS ;)
gpderetta 18 hours ago [-]
Nice, but the view keeps clipping out to far ahead of the map (but the character seems to still be in its original position as I can die from monsters). It snaps back in place when I shoot.
edit: both on chromium and firefox, desktop linux.
ulrischa 12 hours ago [-]
Though this is impressive, I think this is something that should not be possible with a declarative styling language
slopinthebag 12 hours ago [-]
Its just using CSS for the rendering, not the game logic.
glerk 12 hours ago [-]
Wow this is really awesome. Really really smooth. It's insane how after 25 years or so my muscle memory is still intact.
jacobgold 15 hours ago [-]
No light theme though?
crimsonnoodle58 16 hours ago [-]
Amazing and impressive use of CSS. But at the same time, makes me appreciate what feat Carmack achieved 30 years ago on early Pentiums.
aggregator-ios 15 hours ago [-]
Wow, this is impressive. 60FPS, MacBook Air M1. I was instantly hooked and so much nostalgia.
jdw64 16 hours ago [-]
I wish I could use CSS this well too
MattCruikshank 16 hours ago [-]
Don't worry, OP still can't center a div.
qingcharles 15 hours ago [-]
I was centering divs just fine, but now they took away Fable and I'm lost.
jdw64 15 hours ago [-]
I think I've finally found something in common between OP and me
stoobs 18 hours ago [-]
Seems like you get stuck on corners and it really doesn't like running up/down slopes, neat though.
elinear 12 hours ago [-]
I noticed my cursor was continuously sliding upward first in Neal.fun's latest canvas multiplayer game and I experienced it here as well. Anyone else see this behavior?
And maybe a skill issue but I was unable to jump out of the slime...
boredemployee 15 hours ago [-]
I still play quake (world) to this day. I just can't quit it.
amatecha 5 hours ago [-]
Hell yeah, I still see it as the optimal arena FPS. The sequels add too much IMO. Quake 1 (QuakeWorld) was such a raw competitive arena shooter that is just pure action, no weird extra mechanics. Pick up items, get some health, shoot people. Q2/Q3 are totally fine too, but I feel like QW really just nailed everything.
My dark reader was on, and half of the map was black, but I played the first level from my memory. Amazing stuff, thank you.
criley2 18 hours ago [-]
Really cool experiment. A lot of jank. It would sometimes rubber band me back, movement was grid aligned in a way that made accessing the secret room challenging, and the whole tab unexpectedly crashed with no error. 5 star would play again
xyproto 12 hours ago [-]
Has science gone too far?
iandanforth 16 hours ago [-]
Crazy, such memories. Thanks!
20 hours ago [-]
joehabeebs 7 hours ago [-]
Really impressive
kiyeonjeon 18 hours ago [-]
how long does it take to develop this game?
rvba 13 hours ago [-]
After leaving the first area to the bridge... was the sky really so close to the ground in the original game, or the old monitors made it look differently?
Also nice achievement...!
Snoopfrogg 16 hours ago [-]
This is dope.
Vaslo 15 hours ago [-]
But can it play Crysis?
alexb_ 17 hours ago [-]
Doesn't work at all for me. I keep jumping around and clipping through objects, can't even leave the first room without being stuck in the doorway to the elevator.
ekaryotic 16 hours ago [-]
have to shoot the elevator buttons in this, in the original you could move into them.
vldszn 11 hours ago [-]
lowkey amazing!
xenophonf 18 hours ago [-]
Every time I click in the window, the menu disappears. I tried both Firefox and Chrome.
rofko 10 hours ago [-]
Thanks for that report! It is hopefully fixed now.
ronbenton 15 hours ago [-]
Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should
If this is what CSS has become, it means at some point its development went the wrong way.
senfiaj 16 hours ago [-]
It still needs JS. It just avoids using canvas and does DOM manipulation + CSS instead.
Rohansi 16 hours ago [-]
The game logic here is running in JS. Only the rendering is handled by HTML and CSS. Is it really wrong that you can do this? All it requires is 3D transformation of elements.
AbraKdabra 7 hours ago [-]
Bro how tf.
This is insane.
buffer_overlord 19 hours ago [-]
is there no sound?
amarant 19 hours ago [-]
Is there a way to produce sound using CSS?
pwdisswordfishq 18 hours ago [-]
@media speech {
body {
cue-before: url(/path/to/sound.ogg);
}
}
It is awesome though.
https://philip.greenspun.com/humor/eecs-difference-explained
It should be "Decades of inventions from toasters to IOT AI Smart Air Fryers will not make better toast than the original"
But I'd argue the IOT AI Smart Air Fryer should make really good toast. Which is what GP is saying.
CSSQuake uses an intentionally-absurd rendering pipeline. It's not surprising that the result is sub-optimal.
(Though I agree that the meatloaf analogy is not very good.)
Both a toaster and an oven might benefit from improved electronics but in the end—whether its a toaster from the 60s or a toaster from 3008—you are still using a toaster to make a meatloaf.
CSS is not remotely comparable to a game engine. It's not even a programming language.
Still, why css is as slow as it is given what tech like imgui can do is a little wild.
And no one has spent any time optimizing 3D transforms to make a game workable because no one would be able to justify the use of their time like that. It wouldn’t even give you brownie points ‘cause most people would just ask “why?”
On my 7945HX this is plenty fast.
Regarding the game logic, the build step has a small JS extractor over QuakeC/progs.dat to generate JSON source facts: states, models, attacks, sounds, etc. The browser runtime is TypeScript and consumes those for Quake-ish gameplay.
Checked out https://cssdoom.wtf/ and loved it too, both are far lighter than current affairs. \o/
https://bsky.app/profile/html5test.com/post/3mok5febchs2g
- https://pantel.is/projects/css3d/
- https://keithclark.co.uk/labs/css-fps/ (the original)
but quake and doom took it to the next level :)
edit: both on chromium and firefox, desktop linux.
And maybe a skill issue but I was unable to jump out of the slime...
Also nice achievement...!
https://en.wikipedia.org/wiki/Trespasser_(video_game
This is insane.