📄️ Create the Server
A Voxelize server is a very powerful HTTP based web server that handles most of the heavy-lifting you see in a Voxelize app, such as world terrain generation and meshing. These tasks are done on the server-side in a multi-threaded fashion, so that we can ensure the best user experience on the client-side.
📄️ Register Blocks
A voxel world contains tens of millions of blocks, with each block having its own properties and different ways of rendering. Thus, after creating a server, we should register the block types that are used across this server.
📄️ Create a World
With a server and two blocks, we are ready to create our first world.
📄️ Chunk Generation
In this chapter, we learn about how to populate blocks into empty chunks, in parallel.
📄️ Create the Client
Now that we have a running server, it's time for us to create our client.
📄️ Voxelize Networking
In order to connect our frontend client to the backend Rust server, we need to create a network manager in Voxelize. The network manager handles all the ins and outs of the network packets. For example, the VOXELIZE.World requests for chunks on the server side, but you will need the network manager to send/receive these chunk data to and from the server.
📄️ Initialize the World
Upon connecting to the server, the voxelize world receives a INIT packet since it's registered onto the network. We need to use that packet and initialize the world so that world.isInitialized would be true.
📄️ Apply Textures
The next step that we will be taking is to apply textures to the blocks. Right now, the block textures are all question marks since we haven't applied any textures yet. We will be using the following four textures under public/blocks. The reason why grass_side.png is blurry is because it's actually only 8 pixels in dimension.
📄️ Player Control
Since Voxelize is built with ThreeJS, any camera controller would theoretically work perfectly. Voxelize does provide developers a well-rounded physics-based controller to walk run and jump around the voxel world, which is the VOXELIZE.RigidControls. RigidControls actually uses the ThreeJS PointerLockControls internally.
📄️ Debug Voxelize
It is fairly easy to use the built-in voxelize debug UI. All you have to do is:
📄️ Update Voxels
In order to update voxels, we need to cast a ray from the camera to the voxel world and figure out which voxel the player is looking at. Luckily, there is a very fast algorithm to do so here.
📄️ Set Perspectives
Me personally, I really like to play games in 3rd person's perspective. So, let's quickly add perspective switching to our app by pressing "c".
📄️ Multiplayer
Voxelize uses websockets under the hood, and multiplayer functionality is actually already built into the engine. You can implement the client-side multiplayer by simply using VOXELIZE.Peers.