Advertisement

Motion Blur (WebGL) Demo

Started by October 06, 2011 05:39 AM
11 comments, last by shurcool 13 years, 1 month ago
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.
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.blank.gif gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); Motion...st.html (line 342)WebGL: VertexAttribPointer: invalid element sizeblank.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 user_popup.pngI 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
Advertisement

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.[/quote]
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.

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

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

This topic is closed to new replies.

Advertisement