Final project for HCI 557: Computer Graphics and Geometric Modeling at Iowa State University. http://nathanfriend.io/webgl-chess
- 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.
View my presentation here: https://youtu.be/8QwYRF_P11U. My PowerPoint slides for this presentation are located in this repository as HCI557FinalProject.pptx.
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
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 engineshowMetrics=true
adds a framerate graph overlay to the corner of the screen
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
- 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
- Use
gulp build:watch
to watch for file changes and rebuild automatically - Use
gulp test
orgulp 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 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.
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
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