Over the last few days, I've been working on some experiments with rendering motion blur effect. I wanted to simulate it correctly, and see how it looks like.

I ended up converting my C++/OpenGL demo to HTML5/JavaScript/WebGL, so it's pretty easy to share. If you have a modern WebGL-capable browser (Chrome, Firefox), you can try it out.

Motion Blur WebGL Demo

I've made a blog post about some 120 Hz vs. 60 Hz findings I've made. Now I understand why Crysis felt like it ran at high FPS when in fact I was only getting 30 FPS with motion blur effect on.

Basically, there are two paths to displaying smoother motion. Either render at higher frame rate with instant exposure frames, or simulate motion blur to compensate for lower frame rate.

Comments/questions/discussion are welcome, if anyone else out there cares about these low-level topics hehe. Sorry about the twitter/blog plugs, I suppose I could've just copied and pasted everything here, but that was more work.

Cool stuff. I found the blog post really interesting, looking forward to more.

I've been wiggling my mouse around the screen for a few minutes now. Top job

I've been wiggling my mouse around the screen for a few minutes now. Top job

That's a first-rate job on motion blur, congratulations.

Nice one mate, good to see a fellow webgl programmer
I take exception to this though

"The examples are abundant. Take movies. At 24 frames per second, the motion looks acceptably smooth."[/quote]
check any film where they have a tracking shot, eg semi fast pan over the landscape, 24fps film still looks crap. Same with a lot of fast action esp if the camera is moving.
IIRC the hobbit films are gonna be shot at 48fps which should reducing the fx somewhat. Im expecting when they come out & everyone goes wow why does that look so much better than current films (48vs24) its gonna become the next standard, the problem is the vast majority of theatres are not equiped for 48fps

Tried it FF7 (with noscript disabled), just got a blank screen

tried it in latest opera and got a "could not initialise webgl " message

Tried it FF7 (with noscript disabled), just got a blank screen

tried it in latest opera and got a "could not initialise webgl " message

I had a similar experience with Firefox, worked great in chrome though! Cool little demo.

[size=2]Thanks guys, your feedback is very encouraging.

That's a first-rate job on motion blur, congratulations.

Thanks. All I did was simulate how the effect occurs in reality (for each pixel, calculate the exposure time for each colour, add them up). Of course, our displays are not perfect, so if you want to get closer to displaying what the eye sees in real life, you'd really have to take into account the properties of the LCD/CRT display at hand and adjust what you render accordingly. Nevertheless, the current naive version looks acceptable enough, and is much better than without any motion blur.

Nice one mate, good to see a fellow webgl programmer
I take exception to this though

Hehe, thanks, this was actually my first time using WebGL. I just wanted to make my simple demo more demo-able in 2011 where people avoid running untrusted executables hehe.

Oh, I completely agree with you on your second point. I just wanted to keep my blog post short. Yes, 24 fps is probably good enough for semi-static scenes of people walking or talking. But as soon as you have some fast paced action or panning scenes, 24 is not nearly enough.

I think WebGL is supported, but not enabled by default in Firefox (Safari, too). You'd have to enable it somewhere in the options. Chrome has it on by default (probably not great for security, but that's their decision).