Experimented with an idea for extending HTML/CSS/JS to define 3D scenes, treating a 3D scene as just a depth extension of the DOM model.
This explores a syntax for defining a 3D scene in a web browser (especially for VR), without WebXR boilerplate and handling XR controller inputs as first-class browser events. I'll explore a polyfill to support this on existing WebXR-compliant browsers.
My previous attempt at this idea (back in 2014) didn't go so well. At that point, I hadn't built any VR experiences, and the syntax I came up with wasn't very practical or productive (at creating anything beyond toy-sized scenes). I'm curious to see if I can do better this time, as most of my work since then has been about building VR experiences.
Here's a simple scene which contains a single 3D model, with an optional skybox:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: skybox-procedural();
}
#terrain {
material: unlit;
texture: url("assets/terrain.jpg");
}
</style>
<body>
<model id="terrain" src="assets/terrain.fbx" />
</body>
</html>
The body element represents an infinite bounding volume. The model tag is an extension element, and it is styled using some extended CSS attributes.
Let's customize the skybox and add some linear fog:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:
skybox-procedural(#88aaff, #ddeeff, 0.5, 1.0), /* sky color, base color, atmospheric thickness, exposure */
fog-linear(#cce0ff, #ffffff, 0.0m, 500.0m); /* near color, far color, near distance, far distance */
}
#terrain {
material: unlit;
texture: url("assets/terrain.jpg");
}
</style>
<body>
<model id="terrain" src="assets/terrain.fbx" />
</body>
</html>
We use CSS Background Layers to specify multiple backgrounds (skybox, and then fog) for the body element.
I'd also love to write a toy browser, that supports linking between different webpages without leaving VR. Remember Janus VR (previously Firebox)?
Obviously there are a LOT of open questions, plenty of which probably won't ever have good answers. The main thing is, I want something like this for VR, and the VR experience would be the main priority.