Personal Project: HDRI Website

Mobile Web, Responsive Design, three.js, Storytelling


I'm building a website to learn more about web technologies. I started 2 years ago, collecting photos and creating my own 360 HDRI spheres for use in games and rendering. At the same time, I began learning three.js off and on. I am into camping, hiking, canoeing, and going places where I can find adventure. This website will chronicle some of those adventures, and share them in an immersive, fun way.

I plan to expand to additional types of assets and experiences in the future- scanned 3d models from locations, webvr implementation via A-frame.


Image of HDRI Capture Gear

To capture HDRI Spheres, I take dozens of pictures at distinct angles, from a special triod head (Nodal Ninja).



Image of PTGUI Software

I use PTGUI to take all of the images and stitch them into an HDRI. This process can be very time consuming if the photos don't properly align, or my lighting was off.



Example stitched panorama

Each image is taken 3-12 times at each location, depending on the level of quality I'm going for. The camera is set to adjust for different exposures at each shot. The resulting panorama looks like this.



Current mobile prototype

Protoype site with hardcoded product entries, no database, and hardcoded three.js



Initial Wireframes

Initial wireframes of the site. I decided to really be able to showcase the work and emphasize the immersive storytelling aspect, this design would not work.



Initial Wireframes

Revised mockup and current direction of the project.