Spatial Computing Campus: The GameDay Experience

Executive Summary

The spatial campus of The Academic Boardroom envisions an online scholarly society as a never-ending physical place in 3D, usable directly in a web browser, avoiding lengthy, scrollable feeds. It is created based on Three.js and React Three Fiber technologies, helping users walk virtually through the quad, enjoy breathtaking night and daytime variety, and interact with more than 100 students without the need to download an app.

In the focus of attention is a wearable stadium “Gameday” powered by Rapier 3D (WASM), which allows users to play in real-time 7 vs 7 football, basketball, and soccer against artificial intelligence opponents, which creates the impression of real ball physics instead of pre-planned simulations of movements. A FastAPI/MongoDB structure that contains WebSocket technology enables users to see real users in the form of ghosts and make an impact on the playing processes.

The Spatial Campus proves that spatial computer demonstration can provide the research society with two things: the thrill of being physically present in institutions and virtual access to the benefits of the internet.

The Vision

The internet has, for most of the previous decade, been comprised largely of feeds: rectangular blocks of text and images scrolled vertically in isolation. This type of structure has enabled countless ideas to be spread from point to point, but nothing at all for the creation of actual intellectual communities. Think tanks are not feeds; colleges are not feeds; meetings aren’t feeds. These are places with hallways, benches, whiteboards, and all the happy ephemerals that only happen with people in the same physical space.

The Academic Boardroom Spatial Campus results from a very simple question: what if the next layer of the Internet is less like Twitter and more like a college quad? What if research, debate, and even community were not limited to 280 characters but took place in an actual physical space?

Our Spatial Campus is such an answer to the dilemma of learning. It exists as a constant, browser-based 3D quad—no download, no app store, and no headset is needed. Members will be able to walk between rooms, meet each other as avatars, and listen to the bell reminding them of the hour and, in due time, attend live debates in the boardroom itself. The stone paths, the oak grove, the founders’ fountain, and the four buildings forming the quad are designed to make the abstract idea of “the academic community” become a tangible place.

This is not gamification for the sake of gamification. It is a well-thought-out attempt at using spatial computing—the ability to create a common 3D space in a tab of a browser—just like social networks provide a location for communication to take place. The goal of the Campus is to merge traditional institutions of research, with their gravity, with modern web-based communities that have not yet succeeded in forming a proper physical space.

The Technical Foundation

The Spatial Campus is, at its core, an application built primarily on WebGL using Three.js in combination with the @react-three/fiber reconciler and @react-three/drei. This decision is purposeful in the sense that the app is fully compatible with all modern browsers and that it can integrate into the React framework and use its tools for state management, routing, and user interface.

The environment contains many instances. Trees, benches, lampposts, paved walkway tiles, and over 100 virtual community members walking around the quad are created using the InstancedMesh primitive of Three.js library. This solution considerably reduces GPU consumption to the point that hundreds of objects can be drawn using very few instructions.

The time of day plays quite an important role. The DynamicSky and DynamicLighting work together to create a convincing transition from day to twilight to night, and the virtual community members follow this attempt to implement a realistic image. During the day, 100 of the community members walk the main paths of the quad, while this number drops to around 50 at night. In that case, the hour is announced with a bell; the Sports Arena is illuminated by four powerful projectors once the sun sets.

WebXR is connected via @react-three/xr. Devices that support WebXR, including the Quest, Vision Pro, and Pico, can access Campus via the VR button located in the HUD. Quad will then switch to a stereoscopic view of the same scene graph. This illustrates the possibilities brought about by the open and browser-native metaverse: one world accessible through numerous portals.

Mobile is crucial. The same virtual joystick powered by NippleJS is present on devices with course pointers for movement on the quad. Another control panel with a joystick; a context-aware FIRE button changing its label between SHOOT, KICK, SNAP/THROW, CATCH, and TACKLE; and role chips, which the user clicks on using one tap, allows players to play a 7-on-7 offensive series on their phones. Thus, one URL opened on a laptop with WASD keys, a phone with a thumb, or a headset with hand tracking implies the same game environment in which the user can interact with friends.

The backend is based on FastAPI infrastructure and a MongoDB database. A lightweight WebSocket presence hub is at /api/arena/ws . It oversees the quad because it updates the roster every 250 ms and transmits kicks sent between players in the sports arena instead of each user kicking the ball separately. Such an approach supports the success of horizontal scaling of the real-time services since all processes can turn to single-player mode in case of socket disconnection.

The “Gameday” Experience

Our campuses require a venue, an arena, or a recreation center. We have opened up spatial arenas across the campus in the North (for basketball), the South (for football), and the East (for soccer), which can be seen anywhere on the walkway and are able to hold three open-air sports in a single physics environment.

The physics engine that we are using is Rapier 3D, which is operating as WASM in a browser through @dimforge/rapier3d-compat, which is important to mention as it indicates that the ball is not a scripted animation but a rigid body in a physics world with restitution, damping, mass, and a true collision profile. The ball swishes through a basketball net because it collides with the rim, which is the scenario. A soccer ball ricochets off the goal frame thanks to its presence in the physics world. The same goes for a football that travels down the field at low restitution, a high damping profile, which makes it thud instead of bounce.

The focus of the activity is a 7-on-7 version of football. Six players clad in their team colors will run set plays consisting of blocking, slant routes, or go routes. On the other side, there are seven defenders wearing defender jerseys running in an offensive formation to play defense against the ball. The player adopts the role of a quarterback, a wide receiver, a running back, or a cornerback, and the camera view changes to select player avatar. In his capacity as the quarterback, the user will click to pass the ball to the intended target by clicking once again. As the wide receiver or running back, he will use the WASD keys or the mobile stick to dash along the pitch until the quarterback releases the ball in a set rhythm of 4.2 seconds. By starting to run towards the ball, the user will receive it at the moment of its descent from an altitude of 1.5 m so that he can easily score the touchdown. The cornerback must be really close to the ball (within 0.7 m) toward the end of its flight, and he will be able to intercept it.

Basketball and soccer games have similar ground dimensions, and they also employ graded difficulty levels ranging from easy to hard, each giving an advantage to the AI. Apart from that, four robots are chasing the ball, trying to kick it into the user’s goal and, depending on the chosen level of complexity, miscalculating the aim of their kicks. The scoreboard is only a temporary object used during the game.

The design of the game is inspired by the classic Roblox style. The characters are made in a bright palette of colors and have very primitive looks, since it is just a design decision aimed at making the game available for a user who has never seen a 3D game before.

The Virtual Community

A stadium without a crowd is just a hall. So, we built our stadium.

Now let’s frame up the football field, and we will see that on any evening nearly 80 spectators will be sitting in the stands in their seats wearing eight different colors of jerseys, swaying to the idle sine wave. What is important about the crowd is that the two mixed mesh instances are synchronized, one to animate torsos while the other is to animate the arms, to be exact—every time there is a goal, every arm is going to be raised together and for a limited distance of 0.35 m and positioned differently by the angle of 1.1 radians in one clock tick of the timer. The crowd-roar sounds—it is just a filtered white noise with the pitched envelope generated in real-time through the Web Audio API system.

The crowd of up to 150 community members fills the quad—the whole crowd consists of four types of bodily appearances, eight colors of robes, and five kinds of heads. The player can use their own density slider to customize the density of the crowd. Players appear as ghosts that look like the crowd but are highlighted by colors, and their names appear above the heads of all players. And that is the true shared world.

The economy of this universe is clear-cut. The campus is free of any entry fees and can be used to freely play games. What requires paying for is a special identity, which has some restrictions. If you pay $9.99, you will be able to upload your personal avatar (the maximum size of such a file is 30 MB) and to start appearing in the campus in your own avatar. This process uses Google Sign-In technology and verification pass on Stripe’s server. There are no means of unlocking the process from the side of the customer or using storage techniques, as only the company management knows ‘hasPaid’ information, and it is necessary to have both a session cookie and proper information about the checkout to upload a file. The files will get into an object storage system, and it will be ensured that they can be easily accessed from any gadget thanks to the CORS proxy.

This is the whole model of doing business, on purpose. The commons remain free of charge. Although self-expression is charged. This world belongs to the community; however, individuals must pay for what they want to be in this world.

The Spatial Campus is not a game or a website. It is a platform where the research community can operate without any limits.