8 ms·
WebGL 2 Interactive GPU Cloth Simulation
- cornedor 9y agoThis demo runs with +/- 1fps on my late 2016 macbook pro. Do others have the same performance?
- kowdermeister 9y ago60fps with my Dell Inspiron 15
- epaga 9y agoSame here on 15" tMBP, yep.
- xyclos 9y agoSame. Mid 2015 with AMD Radeon R9 M370X 2048 MB, 16 GB of ram and Core i7
- have_faith 9y agoDitto, chrome on high specced recent MBP
- mattdesl 9y agoAre you running Safari?
- throwaway2016a 9y agoNot Op but I doubt it. I tried Safari and it gave me an error that my browser doesn't support WebGL 2. Chrome works fine.
- cornedor 9y agoI tried Chrome and Firefox. Other WebGL2 demoes ran very smooth.
- speps 9y agoWelcome to "interactive" as defined in the computer graphics academia... It would fail if it was titled "realtime" but this isn't.
- martimoose 9y agoMacbook pro mid 2012, 60fps
- tgb 9y agoRuns well on my laptop. Windows 10 + Chrome and it's probably using my integrated GPUsince the Nvidia one never kicks in with Chrome.
- mr_luc 9y ago60fps on an early 2014 macbook Air. Which is surprising.
- gpm 9y agoAbout 5 ms/frame, i.e. 200fps except that it caps at 60, on a i5-7200U (integrated graphics) laptop, firefox, linux.
- dr_zoidberg 9y agoAbout 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.
- tsherif 9y agoIt 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.
- madeofpalk 9y agoIt runs smoothly (30+fps?) on my MacBook Pro (Retina, 13-inch, Early 2015).
- doodpants 9y agoPardon the stupid question, but how do I determine the frame rate that it's running at?
- roter 9y agoIn Firefox, hit F12 to open Web Developer, click on Performance, and click Start Recording Performance.
- throwaway2016a 9y ago50+ FPS on my Mid 2012 MBP. Using Chrome and OS X 10.12.5
- kossae 9y agoSame here on Chrome and Firefox MBP2015 Retina
- dnzm 9y agoReasonably steady 50-60+ FPS on my Asus laptop with Nvidia 920m under Fedora (with the proper Nvidia driver).
- lmcd 9y agoYep, around 1fps on a 2017 15" MacBook Pro. I'm seeing similar issues with some of my own WebGL work on this new machine :(
- Diederich 9y agoI'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.
- JonathonW 9y agoI 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.
- pixelHD 9y agoSame on my late 2016 macbook pro/Chrome 59.
- sbarre 9y agoMid-2014 Macbook Pro with Intel Iris Pro and it runs pretty smoothly..
- microcolonel 9y agoI'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.
- deathanatos 9y agoI'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 http://i.imgur.com/JIBfGt7.png
- bitL 9y agoI am glad WebGL2 added transform feedback, it makes all mass-spring systems so much easier to compute.
- pjmlp 9y agoI would be nice if they added geometry shaders as well, but I guess we get to use native code instead, as usual.
- tsherif 9y agoTransform 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.
- amelius 9y agoWhat are the challenges in writing such a system? 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?
- tsherif 9y agoThe 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. Here are the two primary references I used: https://viscomp.alexandra.dk/?p=147 https://viscomp.alexandra.dk/?p=147 http://http.download.nvidia.com/developer/presentations/2005/SIGGRAPH/ClothSimulationOnTheGPU.pdf http://http.download.nvidia.com/developer/presentations/2005...
- olewhalehunter 9y agohttps://en.wikipedia.org/wiki/Verlet_integration https://en.wikipedia.org/wiki/Verlet_integration
- mrspeaker 9y agoWow, 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?
- krona 9y agoThe biggest change in WebGL2 is probably the shader language from 100 to 300 es. I found this document instructive: https://webgl2fundamentals.org/webgl/lessons/webgl1-to-webgl2.html https://webgl2fundamentals.org/webgl/lessons/webgl1-to-webgl...
- pjmlp 9y agoYes, WebGL 2 shaders are OpenGL ES 3.x ones, which have some breaking changes in regards to version 2.0. http://www.shaderific.com/blog/2014/3/13/tutorial-how-to-update-a-shader-for-opengl-es-30 http://www.shaderific.com/blog/2014/3/13/tutorial-how-to-upd...
- iMark 9y agoThat browsers can do this sort of things still feels like magic to me. I remember when just getting a DOM element to animate smoothly was a challenge...
- tsherif 9y agoTotally! And it's still crazy to me that you can just send out a link to share this kind of thing with people.
- virgil_disgr4ce 9y agoSame. I just think of all the people in the 80s and 90s who more or less said this was impossible ;)
- pjmlp 9y agoNah we had VRML instead.
- chrisbennet 9y agoI get "This example requires WebGL 2 which is unavailable on this system." System: 2017 Dell XPS 15 with NVidia 1050, NVidia driver Version 373.06, Chrome browser, Windows 10 Home 64 bit.
- mastax 9y agoSee what this says: http://webglreport.com/?v=2 http://webglreport.com/?v=2
- bkane521 9y agoSame system but with Win10 pro and driver version 382.53 works for me
- chrisbennet 9y agoOK, I installed a latest version of Chrome and updated the NVidia driver to 382.53 but that didn't fix it. I tried Microsoft Edge browser, same message. Thoughts?
- jordache 9y agohorribly slow.. like 1 fps on 2016 MBP + Chrome
- the8472 9y agoIt self-intersects. https://i.imgur.com/EgrwOj0.jpg https://i.imgur.com/EgrwOj0.jpg
- tsherif 9y agoYeah, for sure. Not doing any self-collision detection. If you know of any good references for how to that on the GPU, I'll give it a shot.
- liveoneggs 9y agohttp://caniuse.com/#search=webgl2 http://caniuse.com/#search=webgl2
- leeoniya 9y agoalso (non-webgl) http://subprotocol.com/system/cloth.html http://subprotocol.com/system/cloth.html lib: https://github.com/subprotocol/verlet-js https://github.com/subprotocol/verlet-js
- jacquesm 9y ago6.2 ms/frame i7, gtx1080ti
- deleted 9y ago[deleted]
- pjmlp 9y agoApparently on Android I get an error about EXT_color_buffer_float not being available.
- santaclaus 9y agoPretty cool! 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?
- matt4077 9y agoI'm pretty sure that's deliberate. If you replicate this in the real world, it's just over too fast.
- santaclaus 9y agoI 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.
- tsherif 9y agoYeah, 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. 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/cloth.html#L64-L66 https://github.com/tsherif/picogl.js/blob/master/examples/cl... and the simulation parameters here: https://github.com/tsherif/picogl.js/blob/master/examples/cloth.html#L334 https://github.com/tsherif/picogl.js/blob/master/examples/cl...
- harrygeez 9y agoRuns smoothly on Chrome on my S8. Can't believe this. Cloth looks weird though