12 replies to this topic

[shurcool]

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.

[mrbastard]

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

[boolean]

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

[BeanDog]

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

[zedz]

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

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

[ChaosEngine]

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

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

[Dancin_Fool]

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.

[shurcool]

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.

[shurcool]

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

[Antheus]

Nice one.

Firefox problems come from DOM issues (canvas size defaults to 0,0) and document.width is undefined... Since I'm in no mood to figure out which incantation to call, the following hard-codes the dimensions in very inelegant manner.

	<canvas id="webgl-canvas" style="border: none;" width="800" height="600"></canvas>

function webGLStart() {
  	try {
		var canvas = document.getElementById("webgl-canvas");
		//canvas.width = document.width;
		//canvas.height = document.height;
		canvas.width = 800;
		canvas.height = 600;

Also, the squareVertexPositionBuffer is not defined, so I fixed it like this:

var triangleVertexPositionBuffer;
	var squareVertexPositionBuffer;

	function initBuffers() {
		triangleVertexPositionBuffer = gl.createBuffer();
		squareVertexPositionBuffer = gl.createBuffer();
	}

Works with no problem in FF after that. IMHO, it looks better than in chrome, the blur seems smoother, but it's purely subjective.

[zedz]

niceone Antheus
yes it didnt work for me in FF also, webgl is enabled by default I believe

a couple of errors from firebug (I dont know if this is the cause of why it doesnt run)

WebGL: enableVertexAttribArray: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.chrome://firebug/content/blank.gif gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); Motion...st.html (line 342)WebGL: VertexAttribPointer: invalid element sizechrome://firebug/content/blank.gif gl.vertexAttribPointer(shaderProgram...fer.itemSize, gl.FLOAT, false, 0, 0); Motion...st.html (line 454)

no probs viewing the page in chrome, which I use for webgl stuff anyways (faster & 4xAA vs FF's 1xAA) plus I like chromes debugging etc better

@ChaosEngine I dont think opera supports webgl its just FF,chrome and safari (only on mac I think)

you might wanna try my latest webgl game, chrome only latest version chrome14 I think supports sound
game

[benryves]

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

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.

There are two factors here; the frame rate, and how evenly each frame is displayed. Unfortunately, 60Hz is a common refresh rate and that is incapable of displaying 24fps content smoothly - one frame is shown for 2 refreshes, the next for 3, the next for 2 and so on. This causes unpleasant motion judder in pans (incidentally, PAL regions don't have this issue - they speed up the source material to 25fps and show each frame for two refreshes on 50Hz displays). Set your monitor to refresh at an exact multiple of 24 (I use 72Hz) and 24fps content looks a lot better than it does at 60Hz.

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

Opera have been experimenting with 3D in the browser for a while but have never put the results in a main release, only in the experimental Labs builds. Unfortunately, shurcool's demo doesn't work in the labs build either, so I haven't been able to play with it yet.

[shurcool]

I've fixed some of the JavaScript bugs related to setting up the canvas size, so the demo works in Firefox too now (at least in 7.0.1).