Feedback on a HTML5 graphics development

Well done and thanks for sharing!  

will read it later on

thanks!

Faved it. Will read it when I have time. Thanks.

"graceful degradation"

Wish we could teach this to clients

Great use of the tech. I especially like having the three image formats to save bandwidth when the detail is not needed.

@Deltakosh: Question ... Does javascript provide a high resolution timer?

I've written a few game engines from scratch, some in C, some in Java, some in Flash. I always follow the same basic model when it comes to animations and interactive graphics. Create a basic class/structure with the following design:

void init() { /* called once, preload essential resources here */ }
void update(double time) { /* updates game/animation state using high resolution time */ }
void render(double time) { /* updates screen graphics using high resolution time */ }

void run()
{
  double time;
  init();
  while (!done)
  {
    time = queryTime();
    update(time); 
    render(time);
  }
}

Time is so important to smooth animations and game state calculations. In native code Windows I use QueryPerformanceCounter()/QueryPerformanceFrequency() to perform the role of queryTime() each game loop and pass the time to update/render. In Java I use System.nanoTime().

What's the equivalent in Javascript? That is, some function like queryTime() which returns a time value with a high degree of accuracy (sub millisecond). From what I've heard the best accuracy you can get in Javascript is ~15ms ... which is horrible for animation.

Curious

@Deltakosh:  I liked it.  Thanks for sharing.

15 hours ago,sysrpl wrote

@Deltakosh: What's the equivalent in Javascript? That is, some function like queryTime() which returns a time value with a high degree of accuracy (sub millisecond). From what I've heard the best accuracy you can get in Javascript is ~15ms ... which is horrible for animation.

It's best to use the requestAnimationFrame() API in JS (when it's available) so everything properly syncs with monitor refresh. Browsers only refresh the screen when they feel like it.  And if you do setInterval() or setTimeout() you'll end up drawing lots of frames that will never be seen.  It's a huge waste.

@CreamFilling512:Well actually it's a two parter ...

1) How to suspend drawing until the next frame ... kind of like SwapBuffers() which blocks until the next refresh cycle if you system and software are configured correctly. This is roughly the approximate equivalent of requestAnimationFrame(). That is releasing the remainder of your time to Windows while waiting for the next frame.

2) Determining the precise time at which your update/render loop continues. This remains unanswered. I don't think Javascript DateTime.now() returns a time which is accurate enough, the granularity is too big (~15ms sometimes more, sometimes less) for smooth animations. I think people are counting frames instead because of this. This is something game/real time graphics developers move away from very quickly after they learn the basics. They want Frame-Rate Independent Animation [1] [2]

So while you answered part 1, how to yield processing until the next frame, the answer to part 2, which is how to get a highly precise time measurement in Javascript, remains unanswered. That and part 2 was what I was really asking about.

[1] http://www.opentk.com/node/150

[2] http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=277421

Edit: Reading the documentation for requestAnimationFrame(), which applies only to some browsers and is not supported in IE, it would seem that the callback includes a parameter passed from the browser. The timestamp callback argument represents a number of milliseconds. This is a step in the right direction, but it's let up to the browser implementors to determine the accuracy of timestamp.