Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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.
  • 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:

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:

Tools

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

About

Final project for HCI 557: Computer Graphics and Geometric Modeling at Iowa State University

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.