Weisdevice: Crafting a Glitched-Out World Between 2D, 3D, and Sound

On this case research, I’ll stroll you thru the method of making my portfolio web site — from early prototypes and technical experiments to the ultimate glitched-out 3D world that turned Weisdevice. What started as a small private exploration of type, sound, and movement regularly advanced into a mirrored image of my artistic course of: a user-friendly web site that doesn’t confuse guests, but embraces an imperfect, generally chaotic fashion, deeply centered on the intersection of design, know-how, and emotion.

Idea

The 3D world facilities on an imperfect outdated robotic. She’s not very superior and infrequently malfunctions, however retains specializing in her experiments on her lonely island. The venture was impressed by my very own experiences — lengthy intervals spent specializing in what I really like, minimal interplay with different people, and plenty of trial and error. Beneath the technical-style design, there’s a refined feeling of melancholy and confusion, nevertheless it’s additionally about focus, resilience, and a bit of chaos.

Two Deserted Prototypes

Two prototypes had been constructed with a no-code-based device, embedded in a canvas, and managed interactions between the embedded patch and the positioning’s interface via exterior JavaScript capabilities. They explored real-time geometry, particle programs, customized shaders, and complicated node networks, however the design and efficiency fell brief. The experiments had been put aside in favor of Three.js, the place the venture was utterly redesigned and rebuilt with new fashions.

Constructing the Expertise

After amassing audios and numerous 3D mannequin property, the 3D world was designed in Blender and applied on the internet for this portfolio web site in simply two weeks. After that, the method turned long-term: refining the design, including performance, and bettering the code.

Tech Stack:

• HTML
• CSS
• Vanilla JavaScript
• Three.js
• GSAP
• GLSL
• Howler.js

Simulating Actual-Time Mild with Textures and Supplies

There isn’t any real-time lighting on this venture, all lighting is simulated.

• Along with Blender lighting setups used to bake textures for each darkish and light-weight modes, handbook portray was utilized on the baked textures to reinforce the visible results.
• All objects use THREE.MeshBasicMaterial. The gamebody object, nonetheless, makes use of THREE.MeshStandardMaterial, combining the skybox texture as an envMap with its base coloration texture to create a metallic, reflective impact that emphasizes it as the principle character.
• The smokeMaterial modifications the smoke (brought on by overheating of the gameboy object)from white to purple when switching from gentle mode to darkish mode, simulating the impact of the purple streetlight.
• The clouds use THREE.MeshBasicMaterial with an opacity: 0.7, Their baked texture was manually modified — should you look intently, you’ll discover the cloud shadows aren’t fairly logical.

Adaptive Scene Updates for Theme Adjustments

When the theme switches, the CSS applies a unique coloration root, and several other updates happen within the Three.js scene:

• The grid coloration modifications between medium grey and darkish grey.
• The smoke coloration switches between white and purple.
• A collection of baked textures are up to date.
• The scene background coloration is modified.

Glitch-Cartoon Methodology in 2D (CSS)

Varied CSS methods had been examined to simulate post-processing results throughout the two prototypes however had been finally deserted. Unexpectedly, the “wobble” impact was later optimized and utilized to parts like modals and toggle buttons, giving the 2D interface a cohesive, glitchy aesthetic that enhances the 3D world.

.modal, #music-toggle, #theme-toggle, #camera-toggle {
  filter: url(#wobble);
}

See the Pen
Wobble by wehwayne2 (@wehwayne2)
on CodePen.

Glitch-Cartoon Strategies in 3D

To attain minimal loading time, the mannequin was optimized to simply 0.76 MB, and all textures had been intentionally small, with some artistic twists deliberately introduced as glitchy visible parts.

The cartoonish, retro, and barely derelict 3D world was designed, baked, and painted by hand in Blender, then closely compressed for a worn, imperfect look. Two units of three baked textures—for gentle and darkish modes—whole simply 3 MB.

Glitch-Cartoon Strategies on the outdated Monitor

There are 5 textures for the monitor — 4 static photos and one 15-second video texture — with a complete measurement of simply 1.4 MB.

The static picture textures had been created in three steps:

• Created in Photoshop.
• Baked with lighting in Blender.
• Mixed with a chromatic aberration shader and blended throughout every change.

The monitor’s performance was deliberately programmed to be barely unstable — clicks might not all the time reply correctly, reflecting the theme of malfunction.

The video texture is a brief compilation of my very own initiatives. It’s ultra-low decision and pre-made to be audio-reactive in TouchDesigner. The video’s side ratio is deliberately mismatched with the mesh, creating glitchy edges on the left and proper. Horizontal glitches improve the monitor’s retro, worn-out look.

GSAP Animations

Many animations had been applied with GSAP — none had been exported from Blender. These embody:

• DOM animations
• Three intro animations (one on web page enter, two triggered by digital camera switches) to information customers and spotlight interactive objects
• In const render = () => {} : Monitor sluggish rotation and random clouds motion
• 3D Hover and Click on Interactions

Audio Interactions

Sound results had been added to the UI, the Gameboy, and the DJ-Machine utilizing Howler.js to create an audio-interactive expertise. The DJ-Machine doesn’t play the same old clear DJ samples — as an alternative, it delivers a barely chaotic soundscape that matches the venture’s offbeat vibe.

Efficiency Optimization & Responsive Design

The aim of the venture is to create a performant 3D world that works on most gadgets. Along with minimal file sizes, lazy loading, and responsive CSS,

• cancelAnimationFrame(renderReq) is used to pause rendering when the person opens a venture web page within the Work part (after clicking “Extra”).

• Raycasting checks for object interactions at 30 FPS as an alternative of each body

Some Ideas

I’m actually grateful to Codrops for the chance to put in writing this case research — I approached it from a design and technical artwork perspective. This web site was deeply influenced by my background in artistic coding and generative artwork.

Design

I often begin with unformed concepts and form the design as I’m going — very similar to generative artwork, the place even “bugs” can turn out to be options.

Growth

This was undoubtedly a problem for me — my first Three.js web site!

Utilizing AI saved time for locating assets or wanted elements in documentation with out understanding the precise phrases. However I spent quite a lot of time untangling hidden points in my spaghetti-like principal.js, painfully leaping between traces like an ant. It was an necessary lesson in studying to put in writing clear, maintainable code.

You could find the code on GitHub.

Credit

This web site is the ultimate venture of my Grasp’s program in Design, due to Prof. Frank Jacob (design suggestions). Due to Andrew Woan (YouTube tutorial & suggestions), developer Vladimir Nariadov (perfomance suggestions); 3D property by: FuneralClown, Vanya Dzhus, Eh, Yana Melnyk; music by XtremeFreddy and frankum; sound results from Freesound.org. Particular due to Reddit customers within the Three.js and Internet Dev communities for his or her helpful suggestions, which helped enhance UX design and testing.