Prologue

I will say, this project was born out of a strange, confusing, and quite frankly stressful time. My job description was very much up in the air, and and there was even uncertainty around this entire project. Unfortunately, this project never saw the light of day, but I have been searching hard drives all over the office to find this one and I finally found it! I just wanted to post it because I still really love the idea, and I will probably try and revisit the concept and try it on a special page here on mattjones.tech.

Assignment

The ask for this project was to create a web page that really engaged visitors and explained the concept of baptism along with various beliefs about baptism that were applicable to the church. Admittedly, a largely vague assignment with plenty of room for interpretation. So instead of creating a typical page design with images, I decided to take it up a notch.

Concept

The existing site was built on WordPress. The idea was to simulate a water splash in 3D, “freeze” the water in time, create some text blocks in and around the different areas of the splash, and animate a camera to stop at each of the text blocks. Once the splash and camera animation were created and in place, the objects, animations, and materials would then be imported into a ThreeJS scene. Once it’s imported to ThreeJS, the appropriate tweaks would be made to make the render look similar to what I had in Blender, then just animate the camera along a path based on scroll direction. Once that was complete, just paste that code block onto a WordPress page and you’re done!

As you can see from the video above, I was able to simulate the water, block out some dummy text, and get the camera animations in place for a proof of concept. The next step would have been getting approval from the client, but unfortunately, the project was dropped before it could progress to the next stage. However, I’d love to just take this project all the way to completion just to see if it is even possible. In all honesty, this is a workflow I’ve never executed in a real world scenario, but conceptually, I can imagine all the technical bits coming together fairly seamlessly.

Thoughts on Design

Looking back on this rushed design, if I were to reattempt this project, I would probably design a completely vertical experience. This would more closely mimic the actual movement of being baptized, and give opportunities to stop at each stage of submersion and rise for explanatory blocks of text. A vertical design could also have a great opportunity to shine on mobile screens as well.

Emphasis on Flexibility and Ease of Use

The only thing I can anticipate rethinking would be the implementation of the text blocks themselves. “Real” HTML text blocks (“real” as in “easily editable”) would be extremely beneficial here, as it would meet the almost guaranteed need to modify the text later. And when you’re rendering a 3D world, live, right in the view port anyway, it makes sense to just implement live rendered, and easily editable text as opposed to Blender text objects converted to mesh for rendering in the page.