Responses by Granyon.

Background: In 2021, archeologists with SEARCH and TRC Companies were contracted by GAI Consultants to excavate ten archeological sites in the Permian Basin, a region across modern-day New Mexico and Texas. The results of the excavation and laboratory analyses help answer research questions about the people who lived in the Permian Basin. This website is intended to share the teams’ research results and stories from the past that can be interpreted from the findings. We intended to design and create a purely online museum where visitors could experience the stories, findings and sites as they would in a physical museum.

Design core: The site’s design reflects the New Mexico and Texas areas. The earthen red colors create a design with layers like you see when digging into the ground. The intention was to tell about the archeological process and come as close to the findings as possible, and we could do that with interactive 3-D in WebGL.

Challenges: The many videos and 3-D models in WebGL. We needed both the different sites and artifacts 3-D-scanned in high-res. Striking the right balance between details and performance became a task. Also, we worked a lot on making the mobile experience nearly as good as the big screens.

Time constraints: The time was suitable, so we would say that it was more our own high design-quality demands that proved challenging.

New lessons: We spent a lot of time finding the right look and feel. But the WebGL work had a more prominent role than just showing off a nice effect. In this case, we needed to present accurate data and find the balance between details and performance. This project gave us a lot of experience with 3-D artifacts with a high level of detail.

Navigation structure: Ground Media worked on the overall structure and wireframes. The idea was to let the front page resemble a museum hall where visitors could get a feel for the different things they can experience and the “rooms” they can enter. The artifacts can be explored in one area, but they were also connected to the sites. So, depending on your way into the museum, you can learn different things. If you start with the sites, you will understand what artifacts are found and the overall process of the archeologists. This way, visitors get a glimpse into the size and complexity of this project.

Special navigational features: The project overview combines a WebGL map and the process’s description. This way, we create a link to the geographical area.

The artifacts are crucial because they prove that people lived in this area many years ago. We wanted to make it possible for visitors and professional researchers to get access to the artifacts as though they were holding them in their hands.

Usually, visitors wouldn’t have access to the archeological sites but will only see the result of the work—the artifacts. In this case, we could bring visitors right next to the archeologists. People can zoom in on the sites and see all the details from the place combined with video content. We could tell and show a story about the process and work.

Technology: We used a combination of Webflow, WebGL and three.js with GSAP for the animations. All 3-D models were GLTF with a DRACO compression to make them lightweight. Specifically for the timeline, we used GSAP ScrollTrigger to manipulate the camera progression on scroll. Lines were created using the three.js raycaster at a specific x-axis position, which we combined with a three.meshline.