SHOP
FOLIO
ABOUT
HOME

Hi, I'm Caleb Edison.

I am an interdisciplinary 2D and 3D designer who crafts immersive virtual experiences.

ENVIRONMENT STUDY

Rocky Mountain Landscape

OVERVIEW

Project Summary

This is an environment study that I built around Christmas of 2020 in Unreal Engine 4.26. I grew up in rural Montana and have many fond memories of being outdoors, hiking and climbing around on rock formations, so I chose that as the subject matter.

The goal of this project was to polish my overall composition skills and spend as much time as possible building in the Unreal Engine itself, so I used many Quixel Megascan Photogrammetry assets to speed along the workflow. The background mountain range was built out in World Machine, while the remainder is Unreal terrain. After a good deal of color matching in Photoshop I was able to bring out the dry, arid dirt and sandstone feel of the rocky mountains.

REPURPOSE

Parallax Hero Image

I've always loved this sort of 'fake' 3D parallax effect where you take multiple flat layers and have them move at different speeds, similar to a real world diorama. While not part of the original intent of this project, I needed to spruce up my website a bit and decided to see if I could make a hero image featuring this scene.

In web design the term 'parallax' has come to mean 'one background image, usually still or moved at a slower speed'. This sort of effect came into style and became pretty mainstream, almost overused. After a good deal of searching for not-this-parallax-but-that-parallax I came across a few javascript libraries and methods that would let me get away with multiple layers, finally settling on this method of performant parallaxing.

Next, within Unreal I 'chopped' the land into strips by taking multiple screenshots with huge blocks or panels segmenting the scene into each layer, then cleaning up the results a bit in Photoshop. The resulting transparent .PNG files were fairly large, but fortunately I found TinyPNG, a web based tool that downsamples .PNG files suprisingly well, which made load times more acceptible.

Another important thing I learned at the end of this project was to try and test on different browsers and operating systems in person. I had tried out the effect on my 5 year old phone, on the built in browser on an older Samsung TV, and a handful of other places. However, not owning an iPhone or iPad, I asked two people I knew who did (hi mom!) to check it out. "Sure, it looks 3D" they said, so I thought I was set. However, a week or two after going live, I had a friend pull up the site on their iPhone only to find that yes, the parallax effect was indeed 3D, however the layers were in reverse order, and the trees clipping underneath the ground behind them! So if you're on an iDevice and see some blank space at the top I do apologize, and hope to circle back to this one day. And as a result I finally bought my first ever Apple product too, lesson learned! Now... but what can I do with this iPad anyways, other than test how webpages look?