Live site: pure-art.co
Category: 3D Environment | Product Demo | WebGL Experience
Year: 2025
Location: Sweden
Project Video Preview
Overview
ModernStillness is a cinematic, interactive 3D environment designed specifically for Tommre, a Swedish company specializing in modular outdoor fireplaces.
The project allows users to explore an atmospheric autumn garden, interact with dynamic UI popups, and experience Tommre’s fireplace collection through real-time simulations — including ambient lighting, fire effects, and animated particles.
It serves as a visual prototype for a potential future platform that brings together all of Tommre’s products in one immersive experience.
Pure Art Studio — pure-art.co
by Nour
*
- Features
-
Unified LoadingManager to preload all assets (GLB, HDR, textures) with a single Start button after loading.
-
Intro video sequence with Skip logic.
-
Fire simulation using emissive glow, video texture, and synchronized sound.
-
Leaves system: GPU-efficient
InstancedMeshwith physics (wind, lifespan, fade-out). -
Dust particles with smooth floating motion and bounding box logic.
-
Dynamic Popups UI with scrollable panels and contextual sections (About / Models / Pulses).
-
Adaptive performance manager (pixelRatio & FPS control).
-
Ambient audio with loop and mute toggle.
- Technologies
Three.js – 3D rendering, GLTF loader, materials, particles
GSAP – Intro animation and UI transitions
DaVinci Resolve – Cinematic video editing
Softimage XSI + 3ds Max + Corona – Asset modeling, baking, texture creation
Figma – UI/UX planning and prototype
Vanilla JS – No build tools needed
- Technical Stack
-
GLB models with optimized baked textures (AO, roughness, emissive).
-
Uses
MeshStandardMaterialwith high-quality maps (4096–8192 px). -
HDRI (1K) + baked shadows for realism and performance.
-
Compressed textures using Shutter Encoder and manual mipmap tuning.
-
Lightweight loading — no React, Webpack, or external bundlers.
- My Role
-
Lead Developer: Three.js scene setup, logic splitting, loading & performance tuning.
-
3D Artist: Created, baked, and optimized assets with consistent PBR workflow.
-
UX Designer: Built popup navigation, intro logic, and fallback handling for low-end devices.
Challenges
Building ModernStillness was a balance between cinematic quality and real-time performance.
The main challenge was integrating multiple heavy assets — high-resolution baked textures, GLB models, HDR lighting, and particle systems — without using any build tools or frameworks.
We had to design a unified loading flow (with LoadingManager) that preloads all assets, triggers the intro video seamlessly, and transitions to the interactive scene smoothly.
Another challenge was achieving natural motion for dust and leaves using InstancedMesh while keeping the frame rate stable across both desktop and mobile GPUs.
Finally, we implemented a custom adaptive performance manager that dynamically adjusts pixel ratio and render quality to maintain a cinematic look under variable device loads.
Technical Notes
The environment uses GLTF models with baked textures (AO, roughness, emissive) and a hybrid lighting setup — baked shadows combined with HDR-based ambient lighting.
Particle systems (dust & leaves) are fully procedural and optimized using InstancedMesh and custom update loops.
All textures are compressed and mipmapped for maximum sharpness with minimal GPU cost.
Scene management and loading are handled entirely in Three.js (no build tools), focusing on performance balance between cinematic visuals and smooth playback on desktop and mobile.
By Nour Tinawi — Pure Art Studio
pure-art.co
— she’s friendly and surprisingly loves cheese 