Keith Clark, a web developer, publishes CSS experiments such as a 3D engine, a first-person demo, and pure CSS parallax.
HN commenters point to his CSS 3D FPS and parallax demos as early, clever work, and call him a clever guy.
> Can you imagine rewriting a modern web browser engine to use GPU-accelerated text rendering?
It is tricky, but I thought they already (partly) do that. https://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ (2014):
“If an element is promoted to the GPU in current versions of Chrome, Safari or Opera then you lose subpixel antialiasing and text is rendered using the greyscale method”
So, what’s missing? Given that comment, at least part of the step from UTF-8 string to bitmap can be done on the GPU, can’t it?
I was talking about HTML5 demos posted on HN. Like this one that DOES use CSS:
http://www.keithclark.co.uk/labs/css3-fps-new/
Granted, it's a terrible abuse of a CSS, but it's also a perfect example of how I'm supposed to be wowed by a buggy HTML5 demo my PC could render better in every way 15 years ago.
And no one has answered my question yet. What benefit does HTML5 bring me as a gamer? Why are HTML5 games better than native games in my steam library, especially considering DSL is my only option for Internet here?
> when 3D elements are part of the HTML standard.
They already are. CSS Transforms can already be configured to happen in a full, proper 3D space.
Every polygon of this demo is an HTML element, and yet it is fully and completely three-dimensional: https://keithclark.co.uk/labs/css-fps/
One would just need a browser in VisionOS that supports displaying these elements in actual 3D rather than projected onto the 2D surface of the webpage...
To me it looks like speed is one of the major advantages. JavaScript speed is only one thing. There is also render speed. E.g. this runs totally smoothly (with a bit of flickering (z order problems?)) in Chrome: http://keithclark.co.uk/labs/css-fps/nojs/
In Firefox it seems to have something between 1 and 5 fps and is totally glitched out.
JavaScript speed is not what needs to be worked on currently. Render speed is.
My first reaction when I saw the title was "oh, not this again", but this looks neat and the CSS source, surprisingly clean!
I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes.
You might like this one: https://keithclark.co.uk/labs/css-fps/desktop/
A parallax effect has also long been possible with CSS 3D transforms. Here's a demo,[0][1] from the same person who made that CSS 3D FPS a while ago.[2]
[0]: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/demo3-webkit-overflow-fix/
[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-websites/
[2]: https://www.keithclark.co.uk/labs/css-fps/