Learning Three.js for WebGL rendering, and how to implement a multiplayer game.

What it does

A Multiplayer game that is loaded by going to the website. The first player on is the scrum master and leader of the game, and specifies the world, including one with a procedurally generated maze that is generated on the server and send to all the clients, and also where the screen is, as well as the Jira URL. After the game loads, the leader can go to boards and sprints, and view issues that he can send to the screen in the game. Others can join the game on the same world and then view the screen as well, and shoot at it, creating paint splatters, for issue statuses and estimations.

How we built it

Client build on React with Three.js using WebGL rendering to render the screen and world, and the backend just built on Node, using Websockets to maintain communication. The Jira communication is built using the REST API.

Challenges we ran into

How to render both 3D WebGL elements and a 2D HTML element in the 3D world with occlusion and transformation to the camera. Using Websockets for real time fast communication between server and clients and then rendering this into the game. Rendering a procedurally generated maze. Also figuring out Jira's REST API to retrieve boards/sprints/issues and then also update fields on an issue.

Accomplishments that we're proud of

The rendering of a full 3D world that is moved around in the first-person while still maintaining 60FPS, and then the server is running at 50ms intervals, essentially 20 ticks a second, to send the game state to all the clients. Then also getting the CSS 2D Element to render with the WebGL 3D renderer and being able to use this to display data to all the clients.

What we learned

Learned how to use Three.js, and general WebGL concepts, and how to use the Jira REST API. Further continued learning of React, and how to use Websockets.

What's next for Multiplayer Browser Game for Standups or Grooming Sessions

Expanding out the game, more worlds, more character models, and other customization options. Also adding more gameplay mechanics, perhaps some competitive mode where the players can either attack each other or time things like the maze completion. Also for the leader to see who shot what splatter and have more Jira interactions, perhaps make the screen also more a general display too for the leader to send other things to everyone. Unfortunately, looks like I didn't fully read out the requirements for this Hackathon, so will be using Forge to build this out with the React rendering but using the API through Forge.

Share this project: