By Ian Hollidae, 2025/04/08

One issue with putting 3D worlds inside a 2D environment is integrating the app into the larger user experience. Given that 3D environments are rather expansive in terms of UX, it's easy to let 3D apps run out of control. My general approach in dealing with 3D is to keep things simple.

But in keeping things simple, I ran across an unexpected problem when it comes to animation. As it turns out, animation within a 3D world doesn't look all that different from animation in a 2D world if the viewer doesn't move or rotate the 3D app. It's the equivalent of a video that has no cuts or motion being no different from a static image. In fact, using a video would be rather pointless.

So what can be done to make 3D animation stand out?

I decided to experiment with one of my older X3D demos. It's a 3D maze where, in the original version, the viewer manually navigates through corridors like any standard maze. One idea was to rework the demo into a 3D non-gaming animation apps. Basically, an app that's more than standard SVG or CSS animation but something less than a full-blown game (I'm still not entirely sure what that looks like but OK).

At first, I automated the entire walk-thru experience. Just push a button and avatar would makes its own way through. This wound up having the feel of an extended animiated GIF.

Another idea was to leave the maze as it was and add a "Where Am I" button that lifted the avatar above the maze space so the viewer could see their location. But this really wasn't any better than a 2D birds-eye view map.

After a number of revisions, I broke the fully automated tour into several sections to try and make the UX more interactive. At the end of each guided section, the user is presented with a brief note about 3D Maze and an opportunity to continue the tour similar to how a setup wizard works on the web. Simple text signs are used for notes but anything, such as images, can be inserted. I left the original maze layout intact, dead-ends and all, but lowered the walls so you can see where everything is.

To move through the demo, press START to begin. Press CONTINUE, when presented, to move forward:

I tried to keep this demo as minimalist as possible. No texturing, no sounds, no distant visuals beyond the operating space. Just take a basic 3D mechanism and demonstrate a possible method of integration. I believe that motion, if done properly, can add the type of animation that standard HTML/SVG/CSS can't provide.

I'm sure there are other ways to maximize the 3D experience on the web which I hope to post in the future. Maybe I'll have time to make a more complex example. For now, I'll continue to focus on simplicity.