Home > Posts > Browser 3D Series > Hello World

Hello World - Browser 3D Series

							A collage of images of projects using ThreeJS, 
							taken from the main page of the ThreeJS website.
When I see 3D in browsers, I find it to be a kind of clunky experience. The concept is there, so is the code, and the design, but it feels less interactive due to the sheer amount of processing required for the modern 3D pipeline.

My theory is that it could be possible to get a decent frame rate and user experience on different devices for browser-rendered 3D graphics, by simplifying things.

A screenshot from the original crash bandicoot
Old machines use lower resolutions, don’t do anti-aliasing, have less polys, and use basic materials and lighting with low resolution textures. I’ve seen similar being done in “retro” games being made in Godot to replicate the PS1-style graphics. It provides a nice aesthetic, as well as introducing some fun constraints to work with to make stuff look good.
Image of CSS code to render scaling for a canvas
Fiddling with shaders and whatnot isn’t necessary, we can use a normal 3D rendering library, render an HTML Canvas at, say, a quarter size of the screen, then scale it up to full screen using CSS filters.
A hello world example using a spinning cube is all that’s needed to see the proof of concept, this is the starting point, from where I will build the rest of the app.