webgl-chess

Final project for HCI 557: Computer Graphics and Geometric Modeling at Iowa State University. http://nathanfriend.io/webgl-chess

Features

• Utilizes Stockfish Chess AI (in the form of stockfish-js) to generate chess moves for both players client-side
  • Before you ask 😄: no, you can't move the pieces yourself! This level of interactivity was beyond the scope of this class project. This is next on my to-do list if I get bored or inspired.
• Full camera navigation using mouse (click + drag and scroll wheel), keyboard (arrow keys and - and +), and mobile gestures (drag to pan, pinch to zoom, two-finger rotate)
• Supports standard chess play - castling, substitution, check, etc.
• Written in vanilla WebGL - no wrapping or abstraction libraries used.

Presentation Video

View my presentation here: https://youtu.be/8QwYRF_P11U. My PowerPoint slides for this presentation are located in this repository as HCI557FinalProject.pptx.

Grading Rubric

Based on the grading rubric provided in class, this project is worth the full 15 points from the following categories:

• Modeling: 3 points for complex objects
• Light: 4 points for combined, colored light on all surfaces
  • The colored lights are subtle, but if you zoom in closely on a piece, you should be able to see a slight red and blue glare reflecting off the pieces and the board.
• Appearance: 2 points for basic texturing
• Navigation/Interaction: 3 points for navigation with the keyboard and mouse (and mobile gestures!)
• Keyframe Animation: 3 points for triggered animations
  • Animations are triggered in response to the chess engine's decisions

Total: 15 points

Options

The following options are configurable through URL parameters (i.e., http://nathanfriend.io/webgl-chess/#/3d?showMetrics=true):

• msBetweenTurns=1000 sets the number of milliseconds to wait between turns. The default is 2000.
• moveHistory=... allows the game to start part-way through a game by providing the history of previous moves. The value of this parameter should be a URL-encoded array of move strings.
  • Here's an example of starting a game shortly before a substitution
• stockfishLog=true turns on verbose console loging for all interactions with the Stockfish engine
• showMetrics=true adds a framerate graph overlay to the corner of the screen

Technology

This project is built with the following technologies:

• Vanilla WebGL for scene rendering
• stockfish-js for chess AI, which utilizes Web Workers
• chess-js for move validation/piece placement and movement/check detection/etc.
• Hammer.js for mobile gesture support
• Sylvester for vector/matrix utilities
• stats.js for WebGL/JavaScript statistics graphs
• Robert Penner's Easing Functions for animation easing
• Angular 1 and Angular Material for UI interaction
• TypeScript, SASS, Gulp, Webpack, Yarn
• Modernizr for browser feature detection

Building/Running

• Install node.js and yarn
• Run yarn at the root of this repository
• Run yarn build
• Set up a local webserver to serve the build directory

Developing

• Use gulp build:watch to watch for file changes and rebuild automatically
• Use gulp test or gulp test:watch to run unit tests
• Use the included Yoeman generator to scaffold out new Angular components for this application. Instructions on how to use this generator can be found in the generator's README.

Browser Support

Browser support for this project is limited by the use of two essential technologies: Web Workers and WebGL. This project should run in the following browsers:

• IE 11
• Edge
• Chrome
• Safari
• Firefox

Note that this project has not been thoroughly tested in browsers other than Chrome. For best results, use Chrome.

Sources

ChessJS was built with a lot of help. A big thanks to following sources:

• Chess piece .obj's from http://blender.freemovies.co.uk/modelling-making-a-chess-set/
• Table model from http://www.turbosquid.com/FullPreview/Index.cfm/ID/167072
• Wood textures from http://www.myfreetextures.com/ and http://bgfons.com/download/1582
• Green background from http://www.zingerbug.com/background.php?MyFile=green_parchment_paper_wallpaper_texture_seamless.php&ID=C732.php
• "Chess" font for chess icons in 2D mode from http://www.dafont.com/chess.font

Tools

Here's what I used to make webgl-chess:

• Visual Studio Code for editing
• Fira Code as a coding font
• Blender and Gimp for object modeling and texture mapping/editing