What is your truth?
3D Experience
In the 3D web experience, visitors are drawn into a vortex of misinformation, embarking on a journey through the parallel universe of QAnon's alternative truths. In the light of blurring realities and increasingly perfidious fake news, the question of truth seems to become subjective. By immersing yourself in the three-dimensional audio-visual collage, you will be transported into a world of alternative realities and challenged to question your assumptions. What is your truth?
- Fake News
- 3D Experience
- Generative Coding
- WebGL
Type
Course Project, Collaboration
Roles
Concept, Design, Programming
Technologies
Vue, Three.js, GSAP
Link
Context
In the nine days long Web Extended module during our bachelor studies, we were given the opportunity to develop a web project with complete creative freedom. With the rise of conspiracy theories during the pandemic, we decided to explore the bizarre world of QAnon and dive into the realm of fake news.
Process
We started by researching the topic, watched reports from quitters and immersed ourselves in Telegram chats to gain a better understanding of the functioning and beliefs of the conspiracy theory. Cryptic messages posted online by the enigmatic figure "Q", who is believed to be a high-ranking US government insider, serve as the central driving force of the movement, with followers analysing and dissecting these messages to construct elaborate theories and predictions. We collected text fragments from Q’s posts and explanatory videos from followers in a shared Figma Board, while also creating an inspirational moodboard, paper sketches, and Cinema 4D prototype to develop our visual language.
Design Challenges
The central question of our design process was how to visually convey and spatially represent the intense pull of fake news and the feeling of falling down the rabbit hole. After sketching out different ideas, we settled on creating a three-dimensional fake news universe in form of a spiraling audio-visual collage, where visitors are bombarded with text fragments and videos, creating a sense of information overload.
Technical Challenges
The project was my first larger 3D web project, and I made the ambitious decision to generate the entire scene through code without using a single asset.
This approach allowed us to provide a unique experience for each visitor, but also posed a significant technical challenge as I had to work out algorithms
and mathematical formulas for every single vector point in the scene.
In addition to the visual complexity I faced the challenge of simulating a three-dimensional auditory experience. To accomplish this, I opted for a square
approximation based on distance values, which helped to create a more immersive experience.
Result
The outcome of the project is a website prototype that provides a unique and thought-provoking three-dimensional experience, immersing visitors into a
vortex of QAnon fake news. Each visit to the site is different, as elements from a set of text fragments and videos are randomly selected and positioned
throughout the space.
You can try out the website by following this link:
webextended.netlify.app (Chrome only)
Credits
Concept, Design: Vivien Helbling, Jonas Wolter
Detail Research: Vivien Helbling
CSS Programming: Vivien Helbling
3D Programming: Jonas Wolter
