Kres 2.0

Description

During the last weeks of April 2025 me and my partner Celeste Sanja Smareglia created an interactive Three.js scene that was exhibited on the 2025 Kres 2.0: Žareč duh digitalne kolektivnosti / The fiery spirit of digital unity exibition in OSMO/ZA, Ljubljana, Slovenia.

Links:
Final Website
Shader Sandbox

Screenshots

Task Description

Celeste was in charge of the art direction and 3D, and my role was developing the interactive website in Three.js and helping with the 3D art. During the course of the project I got familiar with working in Three.js and used my existing knowledge in developing the postprocessing shaders and optimizing objects to perform well on low-end devices. The lighting was baked to make the rendering less resource-intensive. The simulations were created in Houdini and looped with a custom node setup. Everything was exported in glTF format as it is the most widely suported.

Challenges

For the postprocessing I used the Three.js's built-in EffectComposer, which allows for multiple passes of postprocessing effects. I decided not to use the already implemented shaders as they were not suitable for the project. I ended up implementing 6 different effects of which only three were used in the final version of the prject. The effects were:
- ACES shader - converts the working color space into the ACES color space → fixes overexposure and oversaturation
- Grain shader - random noise used to simulate digital grain
- Chromatic Aberration shader - used to simulate the light distortion in a happening in a lens
- Edge Detect shader - used to create object outlines (not used)
- Toon shader - used to reduce the color pallete to create color banding (not used)
- Gaussian Blur shader - used in conjunction with the toon shader to get better results in simulating a cartoon look (not used)

Tools Used

- Three.js: GLSL, Scene Setup, Compositing
- Substance Painter: Texturing
- Blender: Modeling, Lighting, Animation, Baking
- Houdini: Simulation