Project Real World (The Construct)

Project Real World, also known as The Construct, is an MMORPG platform that theoretically supports an infinite map size. The core aim of this project is to run and scale the entire platform using only JavaScript.

Client-Side Structure

The client-side system is built entirely with plain JavaScript and is divided into two primary components:

ThreeJS (WebGL): Handles a canvas for 3D animations, managing the "RPG" aspect of the game.
JavaScript Worker (Threads): Manages socket connections, handling the "MMO" side of the platform.

Server-Side Structure

On the server-side, two primary components work together:

A Socket server for managing player connections and online services.
A Web server for storing and serving terrain objects and managing user accounts.

Why ThreeJS?

ThreeJS is a modern JavaScript-based OpenGL library. It can be easily imported into the project via NPM and works seamlessly with JavaScript. It uses WebGL (essentially OpenGL in a browser) to perform 2D and 3D rendering.

Why Workers?

Using ThreeJS and Socket.io together requires separate threads, known as workers in JavaScript. Without workers, these two resource-intensive processes would block each other:

ThreeJS: Updates the screen’s rendering 60 times per second.
Socket.io: Maintains a continuous connection for online interactions.

By using workers, these processes operate independently and efficiently.

How Does the "Infinite Map" Work?

Theoretically, The Construct map is infinitely large. However, it actually consists of only 9 main areas. These areas and the objects within them are dynamically updated based on player movements, creating the illusion of an infinite world.

The following diagrams explain how this system functions:

Diagram 1: How Online Scaling Works (Socket Scaling)

Each square in the diagram corresponds to one Area. From a top-down perspective, the camera captures only a small portion of these areas. For demonstration purposes, a hypothetical distant view of the grid is shown:

Each square opens a separate channel on a dedicated socket server.
A player connects to 9 channels at a time: the one they are currently in and the surrounding 8. This allows them to receive data about nearby players’ movements and public messages.
ThreeJS only renders and considers the positions of players in the central area. Movements in other areas are ignored for rendering, optimizing performance for both client and server.

Diagram 2: How the Infinite Map Works (ThreeJS Scaling)

When a player crosses the boundary of an area, everything rendered in ThreeJS shifts in the opposite direction.

Here’s how it works step-by-step:

Suppose the player moves to the right and enters the next area.
The leftmost 3 areas are deleted along with their objects.
The player’s object and all other objects are shifted one area to the left. This effectively resets the player’s position to the center of the 3D environment (0,0).
New objects for the areas on the right are fetched from the server and rendered in the required positions.
The player is disconnected from old socket channels and connected to new ones.

This method creates an illusion of movement while keeping the player’s position fixed, optimizing rendering and server communication. The area transitions can be observed in the bottom-left corner of the video provided.

Demo Video

In the video, a user first logs in with the name "player" and moves across the map by left-clicking with the mouse. Pressing the "C" key creates a new random object, which is both rendered on the map and saved via the web server. Later, a second user logs in with the name "player2" from another browser tab, follows the cubes created by the first user, and approaches their position. Area transitions can be tracked from the platform information panel in the bottom-left corner.

Future Plans

Use a Google Maps-like API to synchronize the infinite map scale with a real-world map.
Develop an interface to allow players to create more detailed structures using cubes.