Show HN: WebGL Demo in ReasonML | Hacker News Reader

Show HN: WebGL Demo in ReasonML

emnh.github.io

74 pointshvidevold40 comments

Nice! I see that this is directly using WebGL. If anyone’s interested, Reason can also compile to OpenGL and WebGL at the same time through https://github.com/Schmavery/reprocessing. Our community member (same person who made the React inspector, if I may add) shipped a game to web, iOS and Android with it through the same codebase (and is about to ship a second one!): https://github.com/jaredly/gravitron

I work on Reason so I’m biased, but I believe the Reprocessing flappy bird clone live coding session at https://github.com/Schmavery/FlappyBird/blob/master/README.m... was one of the only times where I see folks work on a single codebase in native from scratch, compile _once_ to web, and have everything _truly_ work first shot, during a live demo nonetheless.

It looks like the animation speed is coupled with the framerate, the waves appear normal on my 60hz monitor but move way too fast on my 165hz one. Nice work otherwise though.

This is true. I forgot about it. I added an issue on the repository. Thanks!

I'm getting like 4 fps on Debian 8 Firefox nightly 64-bit. In the latest chrome I get about 10 fps.

I see other people experiencing similar problems.

This speed looks unreasonable ;)

60fps on Firefox Nightly 64-bit here. With Intel graphics card.

What are normal framerates to expect here, with working graphics drivers on a modern laptop with Intel embedded graphics?

I'm asking because I have the suspicion my Firefox is not using hardware acceleration, at least not properly. In my case, it reaches roughly 30 fps.

I'm barely getting 12fps on a 2016 MBP with latest Chrome stable.

Author here. Are you getting any warnings? Does it say it is using WebGL 1 or 2 on the left side? I am getting 60 FPS on Windows Chrome 64 with WebGL 2 on a 5 year old Radeon 7870 and it's mostly idle. I have implemented fallback to WebGL 1 for other platforms than Windows, because there were bugs that I don't have the platforms to test on (I tested on Linux in VMWare, but only WebGL 1 as WebGL2 is blocked on VM), and that path is not very optimized. Still I was getting 60 FPS on Linux Chrome in a VM as well. Firefox in Linux VM was slower though, at 30 FPS or so.

There might still be optimizations I can make and I could add more configuration settings for texture sizes.

How does http://madebyevan.com/webgl-water/ look in comparison? Is it smooth? Most of my water code is copied from his version.

What's your OS and browser?

I am getting only 30 FPS,

Error: WebGL: texImage2D: Conversion requires pixel reformatting.

Firefox 52.6 ESR on Windows 7, on a beefy ThinkPad W541.

I checked the specs comparison at (https://www.videocardbenchmark.net/compare.php?cmp%5B%5D=262...) and it says my card is about 4 times beefier than yours even if it is a year older, so maybe 30 FPS is expected. Thanks for the error report on texImage2D though. I will make an issue on the repo.

For me it's slower on chrome too, FWIW.

you might be affected by this: https://bugs.chromium.org/p/chromium/issues/detail?id=773705

I have an Intel iGPU plus a mobile nvidia GPU -- nvidia drivers take care that most things that don't explicitly ask for the nvidia card (games, machine learning) run on the iGPU to keep power use down. The iGPU is the one on the i5 7200u, and gives 25fps.

For Firefox, go to about:support and scroll down to the graphics section. Also make sure "use hardware acceleration when available" in the performance section of preferences is enabled.

For Chrome, go to chrome:gpu

For any of them, note that Windows may update the GPU driver a bit after startup and it disables GPU acceleration of open browsers until they're restarted.

Thanks for the hint, though I'm facing the issue on Ubuntu only (on Windows, everything seems fine). I think I've made the same investigation before, but to no avail.

HW_COMPOSITING says "unavailable by default: Hardware compositing is disabled", and OPENGL_COMPOSITING something similar. This corresponds with my experience of jumpy scrolling and Youtube making the the fans go berserk.

But apparently, WebGL isn't affected by this and performs okay.

If you use KDE, try disabling compositing with Shift+Alt+F12.

I'm on Unity (and probably Gnome Shell sooner or later).

Same here, I am on a laptop that changes between Intel and NVidia dynamically.

HD4000, Safari on High Sierra => 50fps windowed, 30fps @ 2560x1080

Output:

    Using WebGL ver: 1
    Warning: No color buffer floats. Water will look bad. Try Chrome >= 64.

60fps on Safari/iPhone 7 Plus

> on a modern laptop with Intel embedded graphics

~50 fps (Chrome, Linux, i7 8th gen kaby). but I'm on battery mode and not sure which power saving features are active.

60fps, Intel integrated graphics, Firefox on Linux Mint. WebGL 1.

But the controls/adjustments seem to do nothing?

Anyways, good to see things implemented in ReasonML, currently the whole documentation is a bit of a mess, being split through the Ocaml, Reason, and Bucklescript websites.

I'm not sure what do you need on OCaml's website? stdlib docs in ReasonML syntax is here [1]. IMHO, it makes sense for Bucklescript's documentation stays in Bucklescript website. But I get your point, Bucklescript and ReasonML is often mentioned as a single unit.

[1]: https://reasonml.github.io/api/index.html

Controls work for me in Firefox 58 and Brave on Fedora. Not sure what the issue is there.

Not all the controls do something. I have an issue on the repository to remove unused ones.

IPhone 7 Using WebGL ver: 1 Open ControlsWarning: No color buffer floats. Water will look bad. Try Chrome >= 64.

60 FPS. Looks ok to me but have to zoom to fill the screen with the canvas.

I get 60fps on my phone but after a few seconds all the water leaks out and i am left with a plane. Is that normal?

Edit: using brave 1.0.30 chromium 60

No that's not expected. Probably a bug.

9fps on a 1080 ti! No errors at all

(WebGL2, Chrome 64.0.3282.186 (Official Build) (64-bit))

...and ~50fps on the integrated graphics of i7 mobile 8th gen (oh, and on battery, with power saving features activated). WebGL performance is a weird beast.

That's definitely a bug. Hmm.. I don't know why it would be. Which OS? I would be happy if you could profile the javascript to see what is up with that, but should be on a dev build. Open an issue at https://github.com/emnh/rts-reasonml/issues so we can communicate on it if you are interested. A dev build is at http://emh.lart.no/publish/rts-reasonml-dev1/ .

Restart the whole browser. You probably had the GPU drivers updated while Chrome was running and now it's running in software rendering mode. Check my other comment in this thread for more info. As a WebGL developer I encounter this problem a bit too frequently.

I think this is the answer. I did do a driver update and now, after restart, it works fine! Ugh, what an annoying bug!

60 FPS in Firefox on my 2017 work rMBP. This is really neat.

It works really well if you set the wave height to 100.

Is this supposed to work at all on Chrome mobile?

No I haven't tested on any mobile platforms. It's targeted at desktop.

I see 33 FPS on iPhone 6s with safari

Nice!

But I'm getting like 11fps on my mobile xD

Reply on news.ycombinator.com