Responses by Claudio Guglieri, creative/art direction, Martin Shibuya, 3-D artist, Mauricio Dal Fabbro, 3-D/tech artist, Eduard Prats Molner, WebGL development, Federico Molina, marketing and Eric Schallock, copywriting
Background: Our biggest goal for the new site was to communicate what Decentraland is as quickly and clearly as possible. With the recent major release of our developer SDK, the upcoming release of the Builder, the imminent Creator Contest and the rapid progress our engineers were making with the client, we were putting a lot of focus in many different areas. We needed to speak both to artists and developers, and crypto-enthusiasts and gamers.
Highlights: The whole purpose of the site was to introduce users to the world of Decentraland, excite developers to join the platform and ultimately increase awareness around it. We initially present the notion of an open world that you can make on your own, developed in WebGL. After laying down the core features of the platform, we introduce the builder and the marketplace, and we show the latest updates of the team working on it.
Challenges: Performance! We were constrained by some limitations of WebGL, so we had to fake a lot of things—a lot of distant geometry is optimized to “camera view” only. Also, all the static geometry (trees, ground, rocks) is unlit, so we have to bake all the lighting and AO to a diffuse map for each group of static objects and match that to the WebGL engine lighting so the dynamic objects match the lighting and shadows of the baked ones.
Favorite details: The collaboration across timezones, across disciplines and the talent of each individual made the process enjoyable and enabled us to push the aesthetic and storytelling of the site. In terms of WebGL, we’re happy with the procedural layers of grass as well as the custom core engine developed for the big static landscape layer. We also had to be careful to keep the poly count low in order to create a performant and compelling environment that still worked fluidly in desktop and mobile web browsers; we did a great job finding that perfect balance between the quality and number of models used.
Time constraints: Some of the elements like the navigation of the site and the full responsive approach had to be downgraded from the original proposal. In terms of 3-D, some of the original ideas had to be a little compromised and simplified given the timeframe. However, the core concept is intact and there are a lot of well-finished details that we are very proud of.
Navigational structure: The first thing that comes to mind is definitely the 3-D environment that you find yourself in when you first visit the site. Claudio, Shibu, Edu and Mauricio did a stellar job with this—you feel as though you’re actually opening your eyes to a whole new reality. That’s just as much a part of the navigation as anything on the rest of the site. We wanted to conjure up a sense of awe and aspiration.
Technical features: 3-D components of the site were developed using threejs library and custom GLSL shaders. For the last 3-D scene with the robots and objects, we used Cannonjs library for the physics simulation. We used GLTF for most of the animations.
Anything new: It was the first time we used Cannonjs library for physics stimulation. It was also the first time dealing with GLTF animations in threejs. Also, working with GLTFs for all the geometry and animations was pretty new; it has some constraints compared to other formats, but overall it’s easy to work with.
Alternative approach: Given the type of project in terms of WebGL & 3-D, we’d have created a workflow for testing assets from the beginning and not halfway through production. It would have saved a lot of time just sending assets back and forth and given a lot more freedom to the 3-D artists to try stuff directly on the browser.