Polygon Shredder(clicktorelease.com)
clicktorelease.com
Polygon Shredder
https://www.clicktorelease.com/code/polygon-shredder/
31 comments
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
Also, choosing an odd number of polys to be rendered creates frankenpolys: https://www.clicktorelease.com/code/polygon-shredder/#33
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)
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)
> "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.
I thought Firefox supported WebGL. That's sad. So basically, this is Chromium-desktop-only.
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?
What version of Firefox, OS, GPU, etc. are you using?
> (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.
Well, those stats are wrong, because a lot more than 1% of browsers are on mobile platforms with no WebGL support.
Technically, they're wrong because the stats are collected by trackers in sites about WebGL, so there's a bias towards having complete WebGL implementations.
Of course there are more than 1% browsers that support, but we're talking about implementations, not devices. You can can have an old iPhone running iOS pre8 and it won't run WebGL, but one can say that iOS does support WebGL now.
The actual implementation stats are here http://caniuse.com/#search=webgl
Of course there are more than 1% browsers that support, but we're talking about implementations, not devices. You can can have an old iPhone running iOS pre8 and it won't run WebGL, but one can say that iOS does support WebGL now.
The actual implementation stats are here http://caniuse.com/#search=webgl
Right.
So firefox is a class, and there are instances of that class running. Most instances are running on mobile devices, so it really makes sense to say that only a small minority of browsers are capable of running WebGL.
So firefox is a class, and there are instances of that class running. Most instances are running on mobile devices, so it really makes sense to say that only a small minority of browsers are capable of running WebGL.
Well, regarding that small minority...
WebGL was enabled on Android on KitKat, and according to starts, that's 70,8% of installations (http://developer.android.com/about/dashboards/index.html)
WebGL was enabled on iOS on 8, and that's 93% of installations (https://developer.apple.com/support/app-store/)
I'd say most of mobile browsers can run WebGL, it's just that the experiences are not designed for mobile platforms (this Polygon Shredder, for instance, it does work on mobile, it's just too slow to be good, but I can probably make it work)
Other experiences like https://www.clicktorelease.com/code/cruciform/ or https://www.clicktorelease.com/code/xmas-virus/ are supported and do work as expected.
You're right that there's a lot of phones that are too underpowered to run WebGL experiences, but the browsers themselves do support it perfectly.
WebGL was enabled on Android on KitKat, and according to starts, that's 70,8% of installations (http://developer.android.com/about/dashboards/index.html)
WebGL was enabled on iOS on 8, and that's 93% of installations (https://developer.apple.com/support/app-store/)
I'd say most of mobile browsers can run WebGL, it's just that the experiences are not designed for mobile platforms (this Polygon Shredder, for instance, it does work on mobile, it's just too slow to be good, but I can probably make it work)
Other experiences like https://www.clicktorelease.com/code/cruciform/ or https://www.clicktorelease.com/code/xmas-virus/ are supported and do work as expected.
You're right that there's a lot of phones that are too underpowered to run WebGL experiences, but the browsers themselves do support it perfectly.
Firefox 44.0, ArchLinux (linux-4.4), Intel HD5000. Since you asked, I also tried on another machine with an NVIDIA 750Ti.
Not working for me either, running Firefox dev edition, version 46 on Windows 10.
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.
Actually, seems to be fixed in Nightly (47.0a1 (2016-02-07)) already. Cool!
Works in both Firefox and Edge for me.
TIL I learned my laptop has a fan.
[for cooling off CPU taxed with rendering confetti]
[for cooling off CPU taxed with rendering confetti]
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]
This is neat! And a caveat: the "INSANE" mode caused my 2010 MBP to lock up.
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!
Hard locked my old Mac Mini.
Had to reboot. Not your fault, but maybe add some limits.
Had to reboot my modern day souped up mac.
Funny how simple it is to freeze a system....
Caveat or.. AWESOME?!
My WebGL- and math-fu suck :( I would not have been able to make anything like this.
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/
I didn't mean they were non-existant, just that it was nowhere near up to this level.
There's a bit of a write-up coming up!
[deleted]
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!
This is great work, looking forward to your write-up!
Impressive, and the moon was a nice, stylish touch :).
[NSFCpu]
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