Coffeehouse Thread

10 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Feedback on a HTML5 graphics development

Back to Forum: Coffeehouse
  • User profile image
    Deltakosh

    I wrote an article that walks through the creation of a graphic based application using HTML5 and JavaScript making use of various HTML5 features such as canvas, local storage, and multi device support.

    You can find it here:

    http://bit.ly/oAaXwo

    Hope you like it!

     

  • User profile image
    CaRDiaK

    Well done and thanks for sharing! Smiley 

    We can only see a short distance ahead, but we can see plenty there that needs to be done.
    Last modified
  • User profile image
    Maddus Mattus

    will read it later on Smiley

    thanks!

  • User profile image
    magicalclick

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

    Leaving WM on 5/2018 if no apps, no dedicated billboards where I drive, no Store name.
    Last modified
  • User profile image
    Harlequin

    "graceful degradation"

    Wish we could teach this to clients Smiley

  • User profile image
    spivonious

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

  • User profile image
    sysrpl

    @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

  • User profile image
    Richard.Hein

    @Deltakosh:  I liked it.  Thanks for sharing. Big Smile

  • User profile image
    Cream​Filling512

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

  • User profile image
    sysrpl

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

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.