3D Animation On The 2D Web

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:

Press START to begin touring the 3D maze

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.

Tags: Web 3D


The Quiet State Of SMIL

By Ian Hollidae, 2025/04/04

A couple of days ago, I ran across an unexpected article in my newsreader. The post was about SMIL and the authors surprise that it was still around. To be honest, I was surprised it may still be around.

For those who don't know, SMIL stands for Synchronized Multimedia Integration Language. It was/is a way to create interactive presentations for the web (or whoever implemented the spec). One of the design purposes stated is:

Define an XML-based language that allows authors to write interactive multimedia presentations. Using SMIL 3.0, an author may describe the temporal behavior of a multimedia presentation, associate hyperlinks with media objects and describe the layout of the presentation on a screen.

For a myriad of reasons, SMIL never caught on. It's too bad because I thought it should have been a lot bigger. Bigger than Flash. Bigger than Silverlight. Maybe as big as SVG webwise (SMIL powers SVG animation). Like a lot of others, I thought SMIL had faded away living on only in spirit. I guess the question now is how alive is it?

Tags: Graphics


GIMP 3.0 Is Across The Finish Line

By Ian Hollidae, 2025/03/24

Now that GIMP 3.0 is truly final, the question now is will the supposed UX improvements translate into a wider adoption. Does it really matter at this point? Outside the usual places where you'd expect this to be news, there really hasn't been much buzz. I realize I'm someone who would eventually upgrade to the next version, regardless of whether it was the brand new 3.0 version or merely a 2.11 update, so maybe I'm not the best person to ask the question. But I'm still curious.

For now, here are some reviews by people more qualified at graphics than me:

Tags: Graphics


Boxy Blue

By Ian Hollidae, 2025/03/01

I was on my way to a local rose garden to take pictures and I needed to stop at the store for something. This was spotted in the parking lot. While not a candidate for classic minimalism, a small box on a large open wall seemed like a photographic opportunity.

I took several shots from different angles trying to frame the box (whatever it is) in the best composition. It wasn't until I tilted the camera did things get interesting.

The irony of this shot is that I planned to visit the gardens a week in advance and this was really the only photo that came out of all my effort.

Photo Only

This post is a continuation of the Beginners Photography Project.

Tags: Feature Photos


Plastic Shock

By Ian Hollidae, 2025/02/18

Throughout my texturing project, I've been able to capture a decent number of textures. Most have come from places I expected such as floor and wall tiles, facades and natural settings. In this case, I found a texture in an unlikely spot: a vending machine. It wasn't something that stood out or overwhelmed your senses. It was the subtleness that drew me to it.

The upper left thumbnail is the original photo. Select a thumbnail to see a preview.

I was somewhat surprised to capture anything in this particular case. The machine was outside during the day and sitting on a white concrete sidewalk. Fortunately, it was located under a large canopy but it was still quite bright. I was able to find a small area that was workable (low reflective light, no highlights). However, I couldn't quite tell if there was a backlight turned on inside the machine. During editing, it appears there was one but it made little difference. It may have even added something to the overall capture.

Download the Plastic Shock texture set under Creative Commons (CC BY 4.0).

Tags: Textures


Tour Of Shapes

By Ian Hollidae, 2025/02/05

I've been looking to get more into advanced shapes and controlled navigation in X3D. It's clear that basic shapes will only take you so far and certainly not as far as I'd imagine. Meshes are clearly what's coming in the near future. As for controlled navigation, the free-style form of “City Stroll” didn't exactly provide the best UX. I do think it can work for other scenes.

For this project, since I had a number of shapes already made, I decided to create a gallery. The big question was how to create a navigation system. I decided to provide preset positions, letting the user pick what they wanted to view, and guided the avatar/camera to the spot. It seems to work well.

In the future, I'd like to expand this presentation with more shapes. Maybe add some interactiviity to each of the features as well. Just have to find the time.

 

The "Tour Of Shapes presentation.

Tags: Web 3D


Marble-ish

By Ian Hollidae, 2025/01/27

This is a wall facade taken at an office building lobby. The tiles had a marble-like pattern that didn't have a reflection so I decided this might make a pretty good texture.

Since photo textures rarely get used without some post-processing, simple coloring seemed like a good idea for this particular image. It also adds to the reusability of the image.

The upper left thumbnail is the original photo. Select a thumbnail to see a preview.

So far this texture has only been used in the Tour Of Shapes project but I can see several other uses for the original photo in the future. Whether I stick with coloring or try something new remains to be seen.

Download the Marble-ish texture set under Creative Commons (CC BY 4.0).

Tags: Textures


A Few Texturing Examples

By Ian Hollidae, 2025/01/27

A while back I wrote a post, Shooting for Textures, in which I offered some thoughts about the process of using a camera, as opposed to a generator, to create X3D textures. At the time, I decided not to include examples of what I was doing mainly because it wasn't a tutorial. I've come to believe that was a mistake. So instead of making a large revision of the original post, I'll just make a short post about upcoming texturing examples I intend to share.

The fact of the matter is, texturing is a sub-project of the larger X3D project I'm doing. Texturing clearly has its own set of creative processes to go through in order to even be usable in the larger project. I'll even include a downloadable zip file for anyone who wants to try the textures out.

In the future, maybe I'll post other types of textures such as SVG Path generated patterns, especially if X3D adopts SVG as an image format. For now, we'll see how photos work out.

Tags: Textures


Master Locked

By Ian Hollidae, 2025/01/09

I've found a lot of value in re-evaluating old photos. Some of the benefits are obvious such as finding your mistakes, seeing alternative compositions and realizing you could have used better camera settings. Another benefit I've found is the opportunity to try out editing features you don't often use. That's how I got this photo.

This was taken at a local park in my spare time. It's a concrete structure that's been mostly torn down except for a wall that has an iron gate entrance. For whatever reason, the gate has been chain locked. The shot was simply a one-off practice snap that I didn't give a second look for months. What brought me back to this photo was an editing exercise I was going through. Specifically, the use of lighting presets for Portrait mode in Apple Photos. I never saw much use for them before but this picture made such a leap so I decided to post it.

So I guess there are some uses for lighting presets after all.

Photo Only

This post is a continuation of the Beginners Photography Project.

Tags: Feature Photos


Tumultuous, Part II

By Ian Hollidae, 2024/12/03

This was a photo opportunity that arrived fast and left even faster. It's the front edge of a late afternoon storm. At first, all I could think about was getting home before it hit. But as I was measuring how to beat the storm, this shot appeared directly overhead and thought it was too good to pass up.

In order to capture the shot, I knew I didn't have time to line things up perfectly. So I decided to try and frame the shot with as wide a framing as needed. I would simply crop what I wanted in editing.

On an iPhone, zooming is digital. If you're a (relative) beginner like me, you'll come to realize that it's useless. But one thing I've learned is if you enlarge the ratio setting, you can get a little more coverage of the shot you're trying to take. In this case, I took shots in a ratio setting of 4:3 (default on my iPhone) and 16:9. Both ratios gave me the shot I wanted.

Fortunately, I was able to get off a number of shots because two minutes later the entire sky was covered.

Photo Only

This post is a continuation of the Beginners Photography Project.

Tags: Feature Photos