Glacier Retreat& Pacific Salmon
This scrollytelling (scroll-based) visual journalism piece highlights how glacier retreat can both positively and negatively affect salmon ecosystems by altering hydrology, sediment transport, and water temperature.
.webp)
about & goals
Pacific salmon populations are facing numerous challenges due to a combination of environmental changes, overfishing, and habitat degradation. Climate change, in particular, has led to rising water temperatures and altered river flows, which stress salmon during critical life stages such as spawning and migration.
Additionally, glacier retreat has modified their habitats, with some areas experiencing reduced water flows and increased sedimentation, impacting the availability and quality of spawning grounds. Pollution and the construction of dams have further fragmented their habitats, limiting their ability to migrate. Efforts are ongoing to mitigate these impacts through conservation measures, habitat restoration, and stricter fishing regulations to support the sustainability of salmon populations..
%20(1).gif)
%20(1).gif)
tl;dr: A interactive article that highlights the importance of understanding the changes for effective salmon conservation and management, particularly in the face of rapid glacier loss due to climate change.
To start reading, simply keep scrolling the rendered site below and experience this immersive article:
Video Demo
Process: Diving into the currents
Research & Ideation
%20(1)%20(1).webp)
%20(2).webp)
%20(1).webp)
Given the extensive length of the original research paper, we started by distilling the key elements to form the basis of our article. tl;dr: The research outlines four phases (pictured, below) and after rounds of storyboarding (pictured, above), we decided to concentrate on phase 2 and 3 which are considered the most intensive. This approach was chosen to align the article with the average human attention span and to account for time and technical constraints.
Phase 2: As glaciers retreat up valley, they reveal new river systems and lakes, creating diverse habitats that enhance salmon productivity. However, high sediment loads and unstable channels pose initial challenges.
This phase showcases the formation of new habitats and the adaptability of salmon to these rapidly changing environments.
Phase 3: Here, glaciers have receded to higher elevations, no longer creating new habitats but significantly influencing downstream ecosystems. Increased channel stability, moderated water temperatures, and evolving biotic influences support more stable and productive salmon habitats.
This phase highlights the interplay between declining glacier influence and the maturation of salmon ecosystems.
The First Prototype
In the initial version, we familiarized ourselves with React Three Fiber (R3F) by experimenting with camera movement, making the fish follow the camera as its child component. The salmon environment was modeled with 3ds Max which was then imported to our project , and the water's texture was created by adapting a code from this sandbox. Initially, determining the precise XYZ coordinates for the camera proved challenging, but eventually, we improved our ability to estimate these values to achieve the desired movement.
The first version of the 3d environment using R3F
The first version of the 3d environment using R3F
.webp)
.webp)
Further Iterations & Finalization
As our project progressed, we received suggestions to enhance the water's realism, leading us to adjust its color to a more turquoise hue. Taking into account other moving parts of this project we decided to separate the fish from the camera, allowing it to move independently. Additionally, we introduced fog to the environment, creating a depth of field effect. As users scroll, the fog gradually clears, revealing more objects in the background.
Furthermore, we started exploring ways to swap between models as the user scrolls. This feature is crucial, especially when depicting the life cycle of the salmon. Once a certain stage is reached, we plan to switch from a model of an adult salmon to that of a spawning adult (in red) to signify its readiness to spawn.
Once the project began to come together, we added highlights for the mainstem and side channel of the salmon environment and further adjust the camera movement. At this stage, we are ready to HTML and CSS for the textual elements of our article. In addition to coding the 2D intro text and ending of the article, we wanted the in-scene texts to be in a box, and the text changes as you scroll.
preview of the final result
Retrospective:
.webp)
.webp)
.webp)
