SDK Highlight: Building an Underwater Landscape

It’s been three weeks since we announced the alpha release of the Decentraland SDK
and we’re already starting to see it put to action in some novel and exciting ways by our developer community. We’ve loved all of the screenshots, videos, and demos that are beginning to appear on social media.
The alpha SDK is the very first stepping stone to making the metaverse a reality, so it’s exciting to watch the community grow and put these tools to use.

We know that not everyone has the time to seek out all of these creations, so we’ve decided to start highlighting a few scenes that we feel are particularly ambitious or creative.
We hope that showcasing some of this new content will inspire you to roll up your sleeves and dig into our developer tools.

Bringing a marine shoal to life
The first project we want to highlight actually comes from two members of the Decentraland team, Juan Cazala and Martin Shibuya! Juan works on our dApps team, which is responsible for building all of Decentraland’s Ethereum-based tools, like our Marketplace. Martin is Decentraland’s Art Director — you’ll find his work featured on most of our blog posts.

After we first released the SDK, we held a little internal hackathon so that other members of the team could play around with the new tool. Juan teamed up with Martin to build an awesome, dynamic underwater themed scene.

Technical approach
The state of the scene (often referred to as a “game-state” in game development) is maintained on a multiplayer server using the multi-user sample code included with the SDK. By rendering the game-state on a server like this, and broadcasting the state to each client connected to the parcel, Juan was able to guarantee that multiple users would see the same fish (or shark) in the same location.

To make the scene multiplayer, Juan first created a regular WebSocket Server. Then for each incoming WebSocket connection, he created a new WebSocket Transport (which is included with the metaverse-api) and instantiated a new RemoteScene passing that transport to each viewer’s browser:

The fish swim together in a school according to a flocking algorithm that Juan wrote, with one outlier (the shark) that chases all of the little fish around. He simply imported this as an npm package:

In order to keep things as efficient as possible, Juan decided to render the scene once, cache that state, and then send that cached state to each client. This ensures that the scene isn’t rendered unnecessarily, and guarantees that each client sees the same state of the scene:

Creating models and adding textures

You can use most traditional modeling tools, like Maya, to create models for use with the SDK, but Martin stuck with Blender which is an extremely powerful, open source tool.

Martin first created all of his models in Blender, laying them out as they would appear in the final scene. He then began texturing each model. We often get questions about the optimal size for textures — for this little shoal scene, Martin was able to texture everything using a single 512x512 tile containing just a few color gradients!

Martin used a single 512x512 pixel texture for the entire scene.

Martin used a processed call UV unwrapping, which is basically unfolding a 3D model into a 2D plane. This makes it easy to map a 2D texture to the model. Each point in the grey shapes below corresponds to a vertex of a model, and each line corresponds to an edge. You can read more about unwrapping models in Blender’s documentation.

By using UV unwrapping, Martin mapped each model to a different gradient.

Martin used Blender to map each unwrapped model to a different portion of his texture. This gave him the creative flexibility to use a variety of colors and gradients, without having to create multiple, large textures.

Finally, he exported all of the models as .gltf object files (but we’re considering the use of .glb files in the future).

If you aren’t a 3D artist or modeler (or you don’t know one you can collaborate with) there are still loads of resources for finding open source, reusable models that you can import into your scenes. A great place to start is Sketchfab.

Try it out yourself!
You can download and run Juan and Martin’s underwater scene yourself! Make sure that you’ve downloaded and installed the SDK by running:

npm install -g decentraland

Next, you can clone Juan’s repository for this scene by running:

git clone https://github.com/cazala/decentraland-shoal-scene

You’ll have to move to the new directory for the shoal scene by running:

cd decentraland-shoal-scene

In order to run the shoal scene, you have to install and build the server:

Finally, open a new terminal window (making sure to leave your server running in your original terminal window), navigate back to your root directory, and run:

That’s it! You can explore the entire repo, with all of Juan’s source code, by visiting his GitHub repo.
Stay tuned for some more featured content soon, and happy building!

Get started with the SDK!

Stay in touch with us, and learn more about Decentraland, through:

Our Discord
our mailing list
Follow us on Twitter
our subreddit

This is an official Decentraland account.
The original published article can be found here on our Medium blog