• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
shurcool

Motion Blur (WebGL) Demo

12 posts in this topic

Cool stuff. I found the blog post really interesting, looking forward to more. [img]http://public.gamedev.net/public/style_emoticons/default/smile.gif[/img]
1

Share this post


Link to post
Share on other sites
I've been wiggling my mouse around the screen for a few minutes now. Top job :D
0

Share this post


Link to post
Share on other sites
I've been wiggling my mouse around the screen for a few minutes now. Top job :D
0

Share this post


Link to post
Nice one mate, good to see a fellow webgl programmer
I take exception to this though
[quote]"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
0

Share this post


Link to post
Share on other sites
[quote name='ChaosEngine' timestamp='1317938974' post='4869908']
Tried it FF7 (with noscript disabled), just got a blank screen

tried it in latest opera and got a "could not initialise webgl :(" message
[/quote]

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

Share this post


Link to post
Share on other sites
[size=2]Thanks guys, your feedback is very encouraging. :)

[size="2"][quote name='BeanDog' timestamp='1317936065' post='4869901']
That's a first-rate job on motion blur, congratulations.
[/quote]
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.[/size]
[size="2"] [/size][/size]
[size="2"][size="2"][quote name='zedz' timestamp='1317938321' post='4869905']
Nice one mate, good to see a fellow webgl programmer
I take exception to this though[/quote]
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.[/size][/size]
[size="2"] [/size]
[size="2"][size="2"]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.[/size][/size]
0

Share this post


Link to post
Share on other sites
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).
0

Share this post


Link to post
Share on other sites
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.

[code]
<canvas id="webgl-canvas" style="border: none;" width="800" height="600"></canvas>
[/code]
[code] function webGLStart() {
try {
var canvas = document.getElementById("webgl-canvas");
//canvas.width = document.width;
//canvas.height = document.height;
canvas.width = 800;
canvas.height = 600;
[/code]
Also, the squareVertexPositionBuffer is not defined, so I fixed it like this:[code] var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;

function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
squareVertexPositionBuffer = gl.createBuffer();
}
[/code]

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

Share this post


Link to post
Share on other sites
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.[img]chrome://firebug/content/blank.gif[/img] gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); Motion...st.html (line 342)WebGL: VertexAttribPointer: invalid element size[img]chrome://firebug/content/blank.gif[/img] 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 [img]http://public.gamedev.net/public/style_images/master/user_popup.png[/img]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
[url="https://chrome.google.com/webstore/detail/npnkicflpnpaaaapcmefgfdmfkdklfnf?ct=author"]game[/url]
0

Share this post


Link to post
Share on other sites
[quote name='zedz' timestamp='1317938321' post='4869905']
Nice one mate, good to see a fellow webgl programmer
I take exception to this though
[quote]"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.[/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.

[quote name='ChaosEngine' timestamp='1317938974' post='4869908']
tried it in latest opera and got a "could not initialise webgl :(" message
[/quote]
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 [url=http://labs.opera.com/news/2011/02/28/]Labs builds[/url]. Unfortunately, shurcool's demo doesn't work in the labs build either, so I haven't been able to play with it yet.
0

Share this post


Link to post
Share on other sites
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).
1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0