6 ms·

Polygon Shredder

85 points by reimertz 11y ago

whichdan 11y ago
This is neat! And a caveat: the "INSANE" mode caused my 2010 MBP to lock up.
- reimertz 11y ago
  Caveat or.. AWESOME?!
- spite 11y 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 11y ago
    Hard locked my old Mac Mini. Had to reboot. Not your fault, but maybe add some limits.
- stop1234 11y ago
  Had to reboot my modern day souped up mac. Funny how simple it is to freeze a system....
Mithaldu 11y 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 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 https://www.clicktorelease.com/code/polygon-shredder/#33
- spite 11y 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 11y ago
TIL I learned my laptop has a fan. [for cooling off CPU taxed with rendering confetti]
- spite 11y 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.
  - deleted 11y ago
    [deleted]
bd 11y 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/solitaire/ http://alteredqualia.com/tmp/cash/ http://alteredqualia.com/tmp/cash/ http://alteredqualia.com/tmp/mario/ http://alteredqualia.com/tmp/mario/ http://alteredqualia.com/tmp/meeseeks/ http://alteredqualia.com/tmp/meeseeks/ http://zz85.github.io/explorer-crasher/ http://zz85.github.io/explorer-crasher/ http://zz85.github.io/explorer-crasher/fur.html http://zz85.github.io/explorer-crasher/fur.html
- spite 11y ago
  and a fun bunch of variations those were :D
deleted 11y ago
[deleted]
hobarrera 11y 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 11y ago
  Works in both Firefox and Edge for me.
- spite 11y 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/ http://webglstats.com/) What version of Firefox, OS, GPU, etc. are you using?
  - azeirah 11y ago
    Not working for me either, running Firefox dev edition, version 46 on Windows 10.
    - spite 11y ago
      Firefox beta/Aurora/DeveloperEdition... all but stable have a regression on WebGL and reporting missing extensions support, like OES_texture_float. Most of the three.js recent content will probably not work on them.
    - spite 11y ago
      Actually, seems to be fixed in Nightly (47.0a1 (2016-02-07)) already. Cool!
  - dave2000 11y ago
    > (so basically 99% of browsers according to > http://webglstats.com/ http://webglstats.com/) Well, those stats are wrong, because a lot more than 1% of browsers are on mobile platforms with no WebGL support.
moron4hire 11y ago
My WebGL- and math-fu suck :( I would not have been able to make anything like this.
- spite 11y ago
  There's a bit of a write-up coming up!
- onion2k 11y 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/ http://library.ooer.com/2015/11/15/Cube-Ocean/
  - moron4hire 11y ago
    I didn't mean they were non-existant, just that it was nowhere near up to this level.
markbnj 11y ago
Impressive, and the moon was a nice, stylish touch :).
agumonkey 11y ago
[NSFCpu]
icolor 11y 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

85 points by reimertz 11y ago

whichdan 11y ago

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

reimertz 11y ago
Caveat or.. AWESOME?!
spite 11y 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 11y ago
  Hard locked my old Mac Mini. Had to reboot. Not your fault, but maybe add some limits.
stop1234 11y ago
Had to reboot my modern day souped up mac. Funny how simple it is to freeze a system....

Mithaldu 11y 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 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 https://www.clicktorelease.com/code/polygon-shredder/#33

spite 11y 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 11y ago

TIL I learned my laptop has a fan. [for cooling off CPU taxed with rendering confetti]

spite 11y 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.
- deleted 11y ago
  [deleted]

bd 11y 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/solitaire/ http://alteredqualia.com/tmp/cash/ http://alteredqualia.com/tmp/cash/ http://alteredqualia.com/tmp/mario/ http://alteredqualia.com/tmp/mario/ http://alteredqualia.com/tmp/meeseeks/ http://alteredqualia.com/tmp/meeseeks/ http://zz85.github.io/explorer-crasher/ http://zz85.github.io/explorer-crasher/ http://zz85.github.io/explorer-crasher/fur.html http://zz85.github.io/explorer-crasher/fur.html

spite 11y ago
and a fun bunch of variations those were :D

deleted 11y ago

[deleted]

hobarrera 11y 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 11y ago
Works in both Firefox and Edge for me.
spite 11y 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/ http://webglstats.com/) What version of Firefox, OS, GPU, etc. are you using?
- azeirah 11y ago
  Not working for me either, running Firefox dev edition, version 46 on Windows 10.
  - spite 11y ago
    Firefox beta/Aurora/DeveloperEdition... all but stable have a regression on WebGL and reporting missing extensions support, like OES_texture_float. Most of the three.js recent content will probably not work on them.
  - spite 11y ago
    Actually, seems to be fixed in Nightly (47.0a1 (2016-02-07)) already. Cool!
- dave2000 11y ago
  > (so basically 99% of browsers according to > http://webglstats.com/ http://webglstats.com/) Well, those stats are wrong, because a lot more than 1% of browsers are on mobile platforms with no WebGL support.

moron4hire 11y ago

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

spite 11y ago
There's a bit of a write-up coming up!
onion2k 11y 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/ http://library.ooer.com/2015/11/15/Cube-Ocean/
- moron4hire 11y ago
  I didn't mean they were non-existant, just that it was nowhere near up to this level.

markbnj 11y ago

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

agumonkey 11y ago

[NSFCpu]

icolor 11y 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!