WebGL 2 Interactive GPU Cloth Simulation | Hacker News Reader

WebGL 2 Interactive GPU Cloth Simulation

tsherif.github.io

84 pointstsherif61 comments

This demo runs with +/- 1fps on my late 2016 macbook pro. Do others have the same performance?

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 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.

Pardon the stupid question, but how do I determine the frame rate that it's running at?

In Firefox, hit F12 to open Web Developer, click on Performance, and click Start Recording Performance.

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

Macbook pro mid 2012, 60fps

About 5 ms/frame, i.e. 200fps except that it caps at 60, on a i5-7200U (integrated graphics) laptop, firefox, linux.

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 runs smoothly (30+fps?) on my MacBook Pro (Retina, 13-inch, Early 2015).

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 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.

Runs well on my laptop. Windows 10 + Chrome and it's probably using my integrated GPUsince the Nvidia one never kicks in with Chrome.

Yep, around 1fps on a 2017 15" MacBook Pro. I'm seeing similar issues with some of my own WebGL work on this new machine :(

Reasonably steady 50-60+ FPS on my Asus laptop with Nvidia 920m under Fedora (with the proper Nvidia driver).

Same here on 15" tMBP, yep.

60fps with my Dell Inspiron 15

Mid-2014 Macbook Pro with Intel Iris Pro and it runs pretty smoothly..

Are you running Safari?

Not 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.

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".

Yep, I got the same thing. I guess support isn't complete yet?

I tried Chrome and Firefox. Other WebGL2 demoes ran very smooth.

50+ FPS on my Mid 2012 MBP. Using Chrome and OS X 10.12.5

60fps on an early 2014 macbook Air. Which is surprising.

Same.

Mid 2015 with AMD Radeon R9 M370X 2048 MB, 16 GB of ram and Core i7

Same on my late 2016 macbook pro/Chrome 59.

Same here on Chrome and Firefox MBP2015 Retina

Welcome to "interactive" as defined in the computer graphics academia... It would fail if it was titled "realtime" but this isn't.

Probably not worth optimizing for something that has 7% market share. It works fine at 60fps on Radeon HD 5750 from 2009 on Linux. /smug

Nice to see WebGL performing well on a seemingly old HW.

For the target demographic (developers?) I would say it's way higher than 7%.

Ditto, chrome on high specced recent MBP

It self-intersects.

https://i.imgur.com/EgrwOj0.jpg

Yeah, 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.

What 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?

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.

Here are the two primary references I used: https://viscomp.alexandra.dk/?p=147 http://http.download.nvidia.com/developer/presentations/2005...

https://en.wikipedia.org/wiki/Verlet_integration

That 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...

Totally! And it's still crazy to me that you can just send out a link to share this kind of thing with people.

Same. I just think of all the people in the 80s and 90s who more or less said this was impossible ;)

Nah we had VRML instead.

also (non-webgl) http://subprotocol.com/system/cloth.html

lib: https://github.com/subprotocol/verlet-js

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?

Yes, 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-upd...

The 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-webgl...

I 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.

See what this says: http://webglreport.com/?v=2

OK, 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?

Same system but with Win10 pro and driver version 382.53 works for me

Pretty 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?

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.

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...

I'm pretty sure that's deliberate. If you replicate this in the real world, it's just over too fast.

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.

http://caniuse.com/#search=webgl2

I am glad WebGL2 added transform feedback, it makes all mass-spring systems so much easier to compute.

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.

I would be nice if they added geometry shaders as well, but I guess we get to use native code instead, as usual.

Runs smoothly on Chrome on my S8. Can't believe this. Cloth looks weird though

Apparently on Android I get an error about EXT_color_buffer_float not being available.

6.2 ms/frame i7, gtx1080ti

horribly slow.. like 1 fps on 2016 MBP + Chrome

Reply on news.ycombinator.com