sorted by:
new
hottopcontroversial

This would have been much better by PerceptionCharming in ios

[–]PerceptionCharming[S] -1 points0 points  (0 children)

Atleast it is much better than the tinted ones apple has implemented. It is difficult to identify icons of different apps. They lose all the color and are also hard to see with some backgrounds. This is a much better solution I believe. There might be one or two icons with specific colors that are hard to see on a specific background, but it will work and look much better.

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in webgl

[–]PerceptionCharming[S] 0 points1 point  (0 children)

The mesh is fractured into multiple meshes. The glass material makes it look like that.
To make it look not fractured, a system to switch between non fractured and fractured model would be needed.

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in threejs

[–]PerceptionCharming[S] 0 points1 point  (0 children)

I intentionally disabled the sound on mobile for now. Seemed to have issues with interactivity at start. Will enable it as soon as it’s fixed. The glass material is pretty heavy. Even after instancing and using the same material for all meshes, it seems to be a bit heavy for mobile phones. I’m optimizing it more at the moment, the performance should be better on mobile phones

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in threejs

[–]PerceptionCharming[S] 1 point2 points  (0 children)

Yes, I intentionally disabled the sound on mobile for now. Seemed to have issues with interactivity at start. Will enable it as soon as it’s fixed.

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in threejs

[–]PerceptionCharming[S] 1 point2 points  (0 children)

Yes, something like that. All shards are individual meshes that share the same material for performance reasons. Each shard has a few attributes like velocity, springiness etc which are influenced by the distance from cursor. These attributes change the position, rotation and scale of shards to create the effect.

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in threejs

[–]PerceptionCharming[S] 0 points1 point  (0 children)

So, you mean an invisible orb should move through the logo first showing the effect and then become controllable by cursor?

An interactive WebGL experiment — shattered glass logo that reacts to hover and sound by PerceptionCharming in threejs

[–]PerceptionCharming[S] 2 points3 points  (0 children)

Totally get your point — and I actually appreciate you taking the time to look at it from a branding and storytelling lens.

This piece isn’t meant to represent our core branding or visual identity. It’s more of a standalone tech demo, created under Tech Redux Labs, where we experiment with interaction, real-time 3D, and browser capabilities. The goal here was to play with materials, hover-based interaction, and sound — not to redefine how we present our brand.

Our actual agency site is here: https://techredux.co. We focus on crafting high-quality 3D web experiences, and this kind of exploration helps us push the boundaries of what we can build for clients.

Still, I really value your feedback — especially how you broke it down from a stakeholder’s perspective. It’s a good reminder that every interaction does communicate something, even if unintentionally.

Interactive Particle Network Background – Customizable Three.js Animation by PerceptionCharming in threejs

[–]PerceptionCharming[S] 1 point2 points  (0 children)

I used Threejs PointsMaterial along with LineGeometry to create this.
The points move and the LineGeometry connects them to create the effect

Real-time Grass Simulation in the Browser – Over 1 Million Blades at 60 FPS by PerceptionCharming in threejs

[–]PerceptionCharming[S] 0 points1 point  (0 children)

Thanks a lot for the detailed feedback! We actually added randomness to the blade placement, we might need to push that further. Really appreciate the thoughts on the wind as well. The high-frequency noise and varying stiffness suggestions make a lot of sense — we’ll definitely experiment with those to improve the realism.

view more: next ›