Polygon Shredder

https://www.clicktorelease.com/code/polygon-shredder/

by reimertz • 10 years ago

85 29 10 years ago

clicktorelease.com

whichdan• 10 years ago

This is neat! And a caveat: the "INSANE" mode caused my 2010 MBP to lock up.

reimertz• 10 years ago

Caveat or.. AWESOME?!

spite10• 10 years ago

Hence the "insane", it means 2048x2048 base particles. That's over 25 million triangles (or 75 million vertices) per pass, and it's done twice (color and shadow mapping). Also the curl noise is pretty expensive, and 2048x2048 is quite a lot of operations. I think the browser locks before being able to allocate all necessary info, and if it does, probably the GPU can't keep up. Not everyone's card can push that much, but I've seen people getting to 4096!

inDigiNeous• 10 years ago

Hard locked my old Mac Mini. Had to reboot. Not your fault, but maybe add some limits.

stop1234• 10 years ago

Had to reboot my modern day souped up mac. Funny how simple it is to freeze a system....

Mithaldu• 10 years ago

When i opened the page, this started from my playlist and it makes an excellent soundtrack: https://www.youtube.com/watch?v=i_hWIgEqibU

Also, choosing an odd number of polys to be rendered creates frankenpolys: https://www.clicktorelease.com/code/polygon-shredder/#33

spite10• 10 years ago

It is a nice track! I wanted to do something with audio, stretching the cubes, changing their scale, and emitting different number of particles based on some audio analysis. The next experiment ^_^

About the frakenpolys: the hash info doesn't directly say the number of cubes to generate, but the side of the texture that hold the position. So if it is 256, it's a 256x256 RGBA Float32Array, 65536 particles that are then rendered as cubes. For odd numbers, or simply numbers that are not power of two, it doesn't work (well, it works, but the access to different vertices is all garbled and you get all those franken-noodle-cubes)

njharman• 10 years ago

TIL I learned my laptop has a fan.

[for cooling off CPU taxed with rendering confetti]

spite10• 10 years ago

You laptop has a fan, but it was probably spinning to cool down the GPU. This effect is 99.9% running on your graphics card; once everything is setup by the CPU, it's all running in shaders and video memory. Still hot, but just wanted to make clear where the power is being used.

bd• 10 years ago

Cool stuff. We have been having fun with this demo yesterday on Twitter.

Some more variations we came up with:

http://alteredqualia.com/tmp/solitaire/

http://alteredqualia.com/tmp/cash/

http://alteredqualia.com/tmp/mario/

http://alteredqualia.com/tmp/meeseeks/

http://zz85.github.io/explorer-crasher/

http://zz85.github.io/explorer-crasher/fur.html

spite10• 10 years ago

and a fun bunch of variations those were :D

hobarrera2• 10 years ago

"I'm sorry, no fallback for no working WebGL. Also, support for mibile coming soon (?)"

I thought Firefox supported WebGL. That's sad. So basically, this is Chromium-desktop-only.

kozak• 10 years ago

Works in both Firefox and Edge for me.

spite10• 10 years ago

Should work on Chrome, Firefox, Safari, IE, Opera, Edge... any that supports WebGL with OES_standard_derivatives (so basically 99% of browsers according to http://webglstats.com/)

What version of Firefox, OS, GPU, etc. are you using?

azeirah• 10 years ago

Not working for me either, running Firefox dev edition, version 46 on Windows 10.

dave20002• 10 years ago

(so basically 99% of browsers according to http://webglstats.com/)

Well, those stats are wrong, because a lot more than 1% of browsers are on mobile platforms with no WebGL support.

hobarrera2• 10 years ago

Firefox 44.0, ArchLinux (linux-4.4), Intel HD5000. Since you asked, I also tried on another machine with an NVIDIA 750Ti.

moron4hire2• 10 years ago

My WebGL- and math-fu suck :( I would not have been able to make anything like this.

spite10• 10 years ago

There's a bit of a write-up coming up!

onion2k• 10 years ago

That shouldn't stop you. three.js makes webGL really easy to write, and most of the maths can be borrowed from other code. You can do some pretty awesome stuff with only a basic knowledge of JS. It's very rewarding to give it a try. My math-fu sucks but I've still been able to make fun things like http://library.ooer.com/2015/11/15/Cube-Ocean/

moron4hire2• 10 years ago

I didn't mean they were non-existant, just that it was nowhere near up to this level.

markbnj• 10 years ago

Impressive, and the moon was a nice, stylish touch :).

agumonkey• 10 years ago

[NSFCpu]

icolor• 10 years ago

My mem usage jumped from 5.3GB to 7.5GB on insane. I have a 980ti which doesn't seem to do a clean 60fps sadly.

This is great work, looking forward to your write-up!

Polygon Shredder

Related Stories