Part III: 3D Chess game using HTML5 and CSS3 now available (Windows Store sample)

  • Article

The 3D chess app is a hybrid HTML5 and CSS3 app. The board is animated using CSS3 perspective transforms and hardware-accelerated rotations. CSS3 animations are also used to add, move, capture, and remove chess pieces from the board. Board rotations render all chess pieces on an HTML5 <canvas> overlay, moving these animations off the UI thread (onto the GPU).

The app uses a combination of 3D and 2D technologies to provide 3D effects without the development cost of creating full 3D models, such as you might use if you are writing WebGL or DirectX apps.

Currently, the app is implemented for Windows Store. There is not much Win8-dependent platform code, however, so I may port it to IE in a update in the near future.

Check out the sample here

Here is an illustration showing the chessboard in mid-rotation:


 Goals

The main goal of this app is to simulate playing on a real chess board against an actual person, in which touch-based interaction with the board & chess pieces is preferable to a mouse and feels natural (though a mouse also works). The more specific goals of this app are to demonstrate:

  • 3D perspective-transforms and rotations on the chess board. This uses CSS3 for hardware-accelerated 3D animations.
  • Board rotations using a hybrid of HTML5 and CSS3. During a rotation, the use of HTML5 <canvas> overlay for the chess pieces moves expensive calculations off the UI thread (to the GPU). The pieces are animated using tracking points on the transformed coordinate plane (the chess board, which is itself rotated using CSS3).
  • Adding, moving, capturing, and removing pieces using CSS3.
  • Use of requestAnimationFrame for performance-optimized repaints, also used during board rotations.
  • Resetting/rescaling of board and pieces for changes in display size.
  • Row & column detection.
  • Sound effects (when capturing a piece).
  • Dynamically updating CSS3 @keyframes rules. Importantly, this allows the use of relatively few @keyframes rules to apply to many different pieces with many different values.
  • Consistent handling of app state to support different game modes (Start/Play, Add/Remove, Spin, Reach-thru).

This app does NOT demonstrate:

  • Big Blue style AI (it's a two-player game).

Possible future enhancements:

  • Restricting moves of the chess pieces to legal moves (the simulation is closer to a real chess board, in which you can move pieces wherever you want. The simulation does include capturing pieces, however). Since the app already does row and column detection, enforcement of legal moves is a possible future enhancement.
  • A complete set of chess pieces. Unlike the 3D board, the pieces are 2D artwork that simulate 3D, and I just needed enough pieces to demonstrate all the concepts working. The supported pieces include: all black and white pawns, black and white knights, black and white bishops, and a white queen. (Sorry, no rooks and kings!)
  • Enforcement of player turns. I did not implement support for playing on two different screens at the same time, involving a web service. That is an option for extending the app.
  • Running in a browser outside the context of Windows Store. There is very little WinJS (Win8)-dependent code in this app, but I need to do an additional update to make it available as a Web-only app.
  • Maintenance of app state after termination.

Links to More Info:

Check out the sample here

My other blog posts about the animation technologies (see Part II if you want more an intro to animations):

Tool-related documentation that was helpful:

  • The HTML UI Responsiveness profiler was a critical tool to test the effect of board rotations on CPU and visual throughput. For that documentation, see this topic and the associated Walkthrough.
  • The DOM Explorer was essential for comparing expected element values with actual element values. For more info, go here.
  • To check your own app for memory leaks, use the JavaScript memory analyzer.