I tried with Safari after enabling WebGL 2 by using the 'Develop' menu, but even then the demo game me an error, "This example requires extension EXT_color_buffer_float".
About 10 to 15 (very variable) fps on an old i3 3120M (that's Intel HD 4000 GPU I believe, mobile). Windows 10, Firefox beta. But FF has been open for a while and its getting sluggish, maybe if I restart it, the demo would perform a bit better.
It looks like this might be an issue with Apple's AMD driver, since everyone who's having problems seems to be on Mac/AMD setup. I'll look into this when I get my hands on a machine to test on.
I'm running Firefox on Linux on a late 2016 MBP, and it runs quite smoothly. Another commenter said something about drivers for OSX; that seems likely.
I see good performance on a mid-2014 MacBook Pro (with nVidia graphics), and poor performance on a mid-2015 MacBook Pro (with AMD graphics; otherwise identically configured).
So, yeah, looks like some kind of issue with Apple's AMD graphics driver.
I'm getting about 300fps on my Radeon Pro WX 7100 w/ Mesa 17.2 on Linux 4.12-rc6. I don't think it's a hardware architecture thing, probably drivers like others are saying.
I'm also on a late 2016 MBP (I'm not sure how to tell if I have the AMD GPU that others are discussing; About This Mac just says "Intel Iris Graphics 540", but I would think that's the integrated GPU?)
I get okay performance though, but the render looks like someone used the cloth like one of those old punchcards: http://i.imgur.com/JIBfGt7.png
Transform feedback is great, but I'm not actually using it for this because I need access to adjacent positions in the grid. I'm using float textures to store the positions and normals.
Is this a matter of keeping track of forces that work on e.g. a triangular basis element, and doing hit-testing so the triangles cannot move through objects or other triangles?
The basic system is pretty simple: just make sure the points you're tracking on the cloth don't move further than a certain distance away from each other. Doing it on the GPU is a bit tricky because you have to know which constraints you can check in parallel.
Wow, the code for fragment shaders looks quite different than WebGL 1... does anyone know a good reference for seeing what's new or changed? I notice that one of the shaders has `if (texelCoord.x > 0) {...}` are `if` statements handled better in WebGL2?
Anyone know why the cloth looks so stretchy and why gravity looks like it is on the moon? Is it too expensive to run the solver up to a realistic level of inextensibility?
I don't know if that is true -- I'm looking at a flag flapping around out my window and there is tons of interesting dynamics! Think also dresses or other clothing.
Yeah, I was fiddling with the parameters until I found something I kind of liked. A couple of important factors:
1. Stiffness of the cloth depends on the number of particles vs. the number of iterations you do to resolve the constraints (maybe there's a way to speed this up?). So making things stiffer (at the same grid resolution) does take more time.
2. The faster things are moving, the higher the likelihood that that collisions will be missed. You can already see this if you move the ball very quickly, it can pass through the cloth. With higher gravity, I found the cloth would often get pushed through the ball.
62 comments
[ 4.0 ms ] story [ 120 ms ] threadMid 2015 with AMD Radeon R9 M370X 2048 MB, 16 GB of ram and Core i7
Nice to see WebGL performing well on a seemingly old HW.
So, yeah, looks like some kind of issue with Apple's AMD graphics driver.
I get okay performance though, but the render looks like someone used the cloth like one of those old punchcards: http://i.imgur.com/JIBfGt7.png
Is this a matter of keeping track of forces that work on e.g. a triangular basis element, and doing hit-testing so the triangles cannot move through objects or other triangles?
Here are the two primary references I used: https://viscomp.alexandra.dk/?p=147 http://http.download.nvidia.com/developer/presentations/2005...
http://www.shaderific.com/blog/2014/3/13/tutorial-how-to-upd...
I remember when just getting a DOM element to animate smoothly was a challenge...
System: 2017 Dell XPS 15 with NVidia 1050, NVidia driver Version 373.06, Chrome browser, Windows 10 Home 64 bit.
I tried Microsoft Edge browser, same message.
Thoughts?
https://i.imgur.com/EgrwOj0.jpg
lib: https://github.com/subprotocol/verlet-js
Anyone know why the cloth looks so stretchy and why gravity looks like it is on the moon? Is it too expensive to run the solver up to a realistic level of inextensibility?
1. Stiffness of the cloth depends on the number of particles vs. the number of iterations you do to resolve the constraints (maybe there's a way to speed this up?). So making things stiffer (at the same grid resolution) does take more time.
2. The faster things are moving, the higher the likelihood that that collisions will be missed. You can already see this if you move the ball very quickly, it can pass through the cloth. With higher gravity, I found the cloth would often get pushed through the ball.
If you want to fiddle around with it, you can clone and tweak the physics parameters here:https://github.com/tsherif/picogl.js/blob/master/examples/cl... and the simulation parameters here: https://github.com/tsherif/picogl.js/blob/master/examples/cl...