We usually write about what we learn,
so hopefully you can learn too!
Trim... What? Tile... Who?
First things first, what is a tileable texture?
A tileable texture, also known as a seamless texture, is a texture that can be repeated across a mesh without the borders being noticeable to the person looking at it.
As you can see, I can expand or make it smaller as much as I want without it giving away a clear visual indication of a seam between the repetitions.
This is the same example with a non-tielable texture. Much worse, right?
The more you tile it or repeat it, the more apparent the repetition is. Tileable textures work best when mixed with other tileables via vertex painting or height blends to mask those landmarks that make us go: "Aha! There's the pattern!"
Trim textures, also known as a trimsheets, are textures composed of multiple mini textures, tileable or not, something similar to an atlas or tileset (for those of you who remember working on RPG Maker :D).
What's it useful for?
Reducing the time for texturing of a general area and keeping it consistent. Imagine a temple from the Uncharted franchise or God Of War 2018: there needs to be cohesion and connectivity between all the ornaments and motives throughout a building.
Trim textures are specially useful for PBR (Physically Based Rendering), where you don't care if there are overlaps in the UVs of the final model. Repurposing trim textures is a super fast and relaible way to create texture variation and use it in different ways. For example, the same trim can be used for texturing props or for texturing the whole building.
Pics by Polygon Academy (Tim Simpson) (https://www.polygon-academy.com/, https://twitter.com/polygon_academy & https://www.youtube.com/channel/UCGXr6E_g91ue1rfhA9j4TLA)
This texturing method relies a lot on how you unwrap your mesh and how the trim texture is laid out. you can either start planning the textures first before modelling, or the other way around. We'll need to plan it either way, because both affect the next step.
Let's reuse the textures from the exterior of the Tomb Chaser pyramid to make a simple column that could be reused in the interiors. This is the current Trim Texture used to beautify the whole exterior. Yes, it's all a single material!
So let's make a column divided in sections and you'll see how fast you can change the design once we have our geometry there, just by switchting the UVs around.
This is going to be our column. As you can see, it has many differentiated sections that are going to be assigned to different sections of the texture. Let's cut those sections in the UVs, right where they change from section from section.
See how cylinders are unwrapped in linear fashion? This is key for taking advantage of our texture space and patterns throughout the model.
After this we can begin modifying the UVs to fit into the preexisting "sections" of the Trim Texture.
And once that's done, creating variations of this is really, really easy. We just need to move the UV Shells around to other Trim sections!
We can create variations with the same geometry and the same texture, just by modifying the UVs of the mesh. We can also make a variation of the texture and it'll automatically apply to the already UV'd mesh with different colours/patterns as long as you leave the pattern separation consistent
I hope you learned something new today! See you around :)
#01 First of all, understanding your platform: DCL
When developing for a specific platform, you get the advantage of knowing what can and what cannot be done. This way you can get an idea of what you were thinking of doing won't get along with the engine at first sight and start thinking workarounds for the first production expected-unexpected troubles to get the same visible results.
Decentraland (DCL from now on) is an online 3D-powered-platform that aims to create a vivid digital world as a life sim owned by its users, ruled by a few (apparently) technical constrains and backed by blockchain technology. I must add that the platform engine is still in development and can change as the final first release of the platform is made. Although its documentation is scarce when explaining how to work with 3D scenarios and is not well told how the engine works, artists can take a huge hint on how their creations will look or behave in scene by knowing that Decentraland runs in its core Unity.
Their "publishing-tech-constrains" are online to take a general boundary, >>Link<<, but overall there is one thing that Unity loves when rendering your scene: keep it as simple as possible and drawcall reduced at maximum.
Don't panic if your scene has an incredibly amount of theoretical drawcalls, DCL will end rendering your stuff but making it easier for the engine will reduce the time your creation appears on screen.
So what are the tech highlights in DCL:
DCL doesn't work with common 3D file extensions (.fbx .obj ...) instead uses its own file extension .gtlf where all data is stored and compressed for the engine to place in scene.
Useful DCL official docs for this issue:
#02 Blending DCL boundaries, atlas packaging
At first sight it may seem that DCL is quite restrictive with the amount and size of textures permited but through reutilization, reconversion and a little bit of creativity you can achieve great results and at the same time not use a lot of textures.
For example we have this spooky tower composed by a notable amount of triangles but using only 2 textures for the whole appearence, achieving nice looking results.
The key in this type of projects is to work with Atlas and reusable-tileable textures. Even small textures can make a difference in your scenes.
One atlas texture was designed for all the "ground" and the dirt elements such as the rocky stairs and the wasted garden. The other texture was designed for all the house elements. It is important to keep the textures as neutral looking as posible to avoid repetition to be noticed.
In multiple cases by folding the UV geometry you can place the whole model within the atlas and get the desired results.
Furthermore even hosting the geometry projections in a really reduced UV area can be valid as a result. Texels are quite important here, so keep in mind to give a major space to uvs that will be seen closer than the ones that cant be barely visible.
The building of course shares other materials with other props among the scenario, materials representing bare metal, gold or even rock are shared and non-exclusive from an area of the environment.
#03 VFX for a non-VFX platform
Visual effects are a ̶p̶a̶i̶n̶ ̶i̶n̶ ̶t̶h̶e̶ ̶a̶s̶s̶ troubling and sometimes messy issue, commonly avoided when developing just because the engine is not used to it. Even a simple AO or Bloom can ruin your frame rate in a low platform (or even in the high ones) and DCL doesnt support any (but bloom) **so here is when you put on your creative-mood-hat and you get to work with some useful workarounds for Volumetric Lighting, Ambient Occlusion and Bloom.
Luckily DCL enabled recently the emissive channel from the Standard Shader and with this feature they introduced the Bloom post-effect. Bloom is handled with the Intensity value in the emissive channel, as you increase the Intensity value, the bloom gets bigger and brighter.
For the rest of post effects we will have to do an easy workaround. We created a set of materials that were going to help us in the journey of embellishing our scenario.
For example, in the environment we decided to place some AO in a white building as the scene lighting killed all perspective or sense of geometry occlusion/collision.
Another achievment in the scenario was to fake volumetric lighting, being rendered softly but giving the room the approach we were looking for. In this case we used the emissive bloom mixed with a fade to transparent material.
As you can see, the effect is barely noticeable but appreciated in the graphical context and composition. Bloom can be a double side effect, giving you the opportunity to turn your composition into something stunning or basically ruining it.
#04 Thinking outside the box
The only way to achieve higher results than expected is to understand the basics of what are you doing.
Matching a sequence of UI buttons to get supposed results leads only to unexpected crashes. Getting to know whats happening behind the frame will help you create workarounds once the technical problems and visual bugs appear, because you know they will.
There is a thing when working with high technical constrains that leads to reuse and think constantly about multi-purpose asset creation. Turn a rock into a brick, make the brick be a door, the door now will be a window, later a broken beam on the ceiling and so on.
Composing a whole scenario with a 512 pixels square texture is harsh, but you don't need high texture detail or mesh tessellation to get good results. In the end the composition and graphical coherence is what defines a good environment. There are a bunch of good looking games of all type of genre and art direction because they rely on visual coherence and strong technical understanding of constrains and how to surpass them adapting your project ideas to the platform.
Although the post is heavily oriented towards the production of an environment in the Decentraland platform, all this tips can be easily used when developing for mobile or other platforms that make us artists struggle with different constrains to reach our graphic goals.
Until next time, au revoir!
I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
#00 - Scratching the main concepts for VFX
This is one of the trickiest parts to make in Decentraland, since the engine don't allow the use of particles or any kind of post effect.
In order to tackle this, we have to decompose which effects we want to create, and decompose them in their basic parts to be able to recreate them with the means we have at our disposal.
At the end of the process we had a list of effects, that we could do mixing three main concepts, that are animation, transparency planes and the basic shapes.
We learned that this simple concepts mixed allowed us to recreate a variety of effects, that looked difficult to achieve without the help of the particle system or effects.
For each effect we implemented these concepts, for example for the fire on the we created a gradient to create a transparency map, then to do the twinkle we animate so planes in the animation tab on Unity.
The animatons aren't too complex, just animations of scale, rotation and position. And surprisingly got a variety of effects. In this article I want to show some of them. Since the procces is really similar, so I'm not going to dwell in the process of how we did them.
#01 Post Effects in Decentraland
Art Stations (goto)
Tomb Chaser (goto)
Momus Collection (goto)
One of the main problems we found is that you can't animate texture in the decentraland engine. So in order to create this effect we put several layers one of top of the other.
And of the top layers we put transparent texture of flow of the river, finally we animate the scale from 0 to 1 on loop to create the illusion of flowing river.
In here we created the opposite effect of the light by creating a dark gradient in a transparency map, we can create a dark ambient on the exterior.
South Transit System (goto)
To create the effect of trail on the train, is like we create the planes of lighting. However this time we put the plane on the tracks to bring a gleam effect.
These were some of the effects that we used on the scenes we developed on Decentraland, using the principles we knew worked on the platform, and twist them to improve our scenes and give them an extra, as you know the devil is on the details.
Bones and Rigging
The good thing about this method, it's that you can do it and don't pass for Unity to put it in Decentraland. However, Unity allows you to check how the model will look in Decentraland, more or less.
In this you rigg your models in your prefered 3D software, and export it, if you decide not to use Unity, you can export the GLTF format using Blender or babylon plugin for Maya.
If you export it from Unity, there's a few more steps to follow if you want it to work perfectly:
1. Export you model in .FBX format with the selected keyframes you want export the model with. The recomendable thing is to export all the animations separated (iddle, running...) and them import them into Unity.
2. If it's imported correctly it will appear like the image bellow on the inspector.
3. Now we will create an animator, this is what will control that the animation works correctly, it can be configured in several ways and program different clips on one mesh, but in this case we are just going to set one. For that we drag the clip into the animator window.
4. Finally, we put the model into the scene and on the parent, then we add the animator we just created and a skinned mesh renderer with the model or one of the parts of the mesh. Everything else has to be a son of this object to work.
Lynx in Decentraland
Animate on Unity
The method explained before, I believe it works very well when we want to animate complex models or organic ones to create NPC's or Wild life.
However for simpler objects I prefer to animate them in Unity, with the help of the animation window.
To do that we have to follow these steps:
1. Divide de model in how many parts you want them, and organize them acordingly (parent, sons...).
2. Set the model in Unity and click on the animation tab with the parent selected, to create an animator and a clip.
3. Once created we can add keys to create the animation, by clicking the red button you activate the recording button and every transform you make to the object will be recorded.
In this example we added the properties of position of the parent; rotation for the son and scale for grandson. To add a propertie right click on the property and select add key. Later I'm going to remove the key from the parent because if I left it that would completely break the animation and move it to other places in the scene.
4. Animate your objects, with this method you can't animate textures, only the position, rotation and scale.
5. You can control the flow of the animation with the curves, if you want to make constant select the points, right click and set both tangents in linear.
6. Then click the export button and it should appear correctly, like I said I removed the animation from the parent to avoid problems when you upload it to Decentraland.
Precautions and Warnings
Although it's quite a complex process, and can be quite frustrating when you start with it. But if you get to learn how to work with this you can create complex and beautiful animations, such as the ones of the transit system.
elevator on the south transit (/goto -68,-117)
In this article I will not talk about modeling workflows, because there is not need to follow a specific one. But there are certain limits that has to be taken into account.
When creating a scene for Decentraland, the first thing you have to do is think how big is going to be. Depending on the number of lands that you are going to use, the limits change.
For example for each Land you add, you increase the limit in 10.000 tris. To see how this changes fast and without making calculations, you can check the excel in this link:
Another important thing is to create a terrain that serves you as a reference or where the props will be.
For this you can create a plane, (since it's only 2 tris). And set it like this; one land is a square of 16x16 meters so if you want to build a scene of 2x12 lands, you will need to create a plane of 32x192 meters.
Last but not less important, if you want to use the height parameter create a cube with the same height to use as a reference.
Creating the props
Obviously, the tips given before only work if you have a number of Lands of your disposition of Decentraland. If you just want to create just the props I will recommend create the assets as if you only have one land. That way you can create later more complex scenes.
Textures and Materials
Depending on the size of the land, you also have limits on the number on images and materials. That's one of the reasons why in Decentraland predominate the use of flat colours. However one of the things you can do is create tileable textures, and trim textures that can be reused. Saving the non reusable textures for the special model (AKA the unique ones: sculptures...).
The MAX size of the textures is 512x512 and the smallest 1x1.
About the materials, at the moment decentraland takes standard materials and PBR, you can add different maps to them, like:
For more information on the materials, and which maps can you use, check:
If you want to check the composition of the scene or how the assets look in the Decentraland renderer. Important note; is the same of Unity but you can change the lights. So, in order to check it, you have to export the models in GLTF or GLB format. But better if you use GLB.
To export the models, you can use Blender or the plugin of Babylon in Maya. If you use the Maya plugin remeber to hide the models that do you not want to export, becasuse if not, it will export everything in a single file.
Another important note, if you want to create the colliders inside your 3D software you can do it, you just have to remember to name it _collider, and don't assign to ANY material, leave the deafult material.
If your scene contains no animations you can export the scene directly the scene to Decentraland from here.
If you want to create more complex scenes, there is a plugin in Unity that directly exports your scene in Decentraland. This plugin is interesting because it marks you the limits of the scene you are creating, not like any other plugins. So you can import your animations, models and textures, creating the scene in Unity.
The 20th of February Decentraland was launched. For the ones who do not know, Decentraland is a virtual world backed by the Ethereum blockchain where its community owns the shape and purpose of their LANDs, creating an innovative and a dynamic relationship between landowners and visitors. With this premise, the sky is the limit.
For this workflow, we work with a Unity plug-in that you can find at GitHub [https://github.com/fairwood/DecentralandUnityPlugin/]. This plugin allows you to work natively from Unity, compose and create all the scenarios without heavy coding.
Also you need to install the DCL sdk and use Node.js to deploy local scenes. https://docs.decentraland.org/getting-started/installation-guide/
#00 Creating the project
Unpack the .zip from the GitHub plugin and duplicate the "Unity Project" in order to use it as your own new scenario for Decentraland. Open the project with Unity minimum 2018 version.
#01 Creating an export path
Now it's time to do the first deploy.
Choose a DCL Project Path in the Standard Export option. I recommend creating a folder in the root of the project, previous to the Assets folder. This way you will take your exports with the project and keep all the files in the same place.
Click "Init Project" to set the basic DCL libraries and wait to the npm to finish.
This command places the basic SDK but not the LAND info nor the files of the scene. This will be exported with the command "Export".
You will know the command has ended the task
once the window changes the name to cmd.exe
Now the project export path has been prepared is time to export the GTLF files.
Click on the Export button and wait for a Log to rise in the Unity Console.
If you want to local deploy your export, you can do it by using the Node.js editor
Locate your export folder and run the command "dcl start"
Wait for the command to finish and a tab should be opened in your browser.
And here you are! Your very first local deploy.
From this point, you can work as if it was Unity vanila when applying materials, importing new meshes and doing your very own compositions. Just keep in mind to use meshes instead of empty groups because the GTLFs are about meshes and wont export correctly to your scene otherwise.
I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
For a week and a half I had to work in a vertical slice of an Escape Room building it from the ground up, while focusing on simple mechanics with even more simple input controls and a low poly aesthetic to fit among Decentraland's smallest parcels limitations.
I had the pleasure to work with Laura Usón as an Artist, Javier Diez as a Level Designer (go give them a follow, they're both great) and some other friends of Polygonal Mind as testers, who made sure the level of difficulty of the puzzles stayed consistent throughout the experience.
I can't stress enough how important having a fresh pair of eyes is, specially after working a few days on something to get rid of your tunnel vision; grab some friends from all the backgrounds (hardcore gamers, mobile gamers, casual gamers, non gamers...) and make them play your stuff!
First things first, what's an Escape Room?
If you haven't been living under a rock, you probably already know this. But for the people out there who still don't know about the existence of these fun group experiences, an escape room is a themed timed challenge where with the help of other people you try to solve all the puzzles necessary in order to get out of that room before the timer goes off, usually lasting around 60 minutes. There are of many types: more logical, more physical, with actors, military themed, zombie lab themed, and so on.
Beating the designer's blank page block
Level Design and iteration
After deciding what kind of puzzles we were going to use, we proceeded doing a simple block out for level design. Personally I prefer to do it in 3D and then test whether is it good or not by test and iteration, but this time the team decided to do an overview on paper first, and then translate it to a 3d block out.
Once that was out of the way, we made a list of the props that would be needed for the room, in order so Laura and I could work at the same pace, she made the models and texturing, and I took care of the sounds, puzzles and coding.
I started using the FPS Controller from the Standard Packages from Unity. I tweaked it to disable jumping and camera bob and then began with the puzzle experimentation.
Here's a video of how the sound slider puzzles looked in the beginning (they were wall levers, and the controls were click + drag instead of just left click or right click):
Here is a video comparison where you can see the progress on the sound puzzle.
I went through a couple of iterations, where the sliders were still levers but a lot smaller than the wall ones in the first video, and they weren't attached to the radio, but this confused players.
Ultimately, the players associate the sliders with sound, and it's a lot easier to understand that higher frequency sounds go up, and lower frequency sounds go down. This wouldn't have been able to get fixed without play testing.
Every puzzle I went through the same iteration process just showed above:
The cherry on the top
All the team made a great effort to make this project work in a short period of time, we used Unity because it seems to be what Decentraland is going to end up using. Most of the post processing tweaks we added won't be available to be used in DLC anytime soon, but still we wanted this small demo to shine.
I had a blast working with skilled peers and although I usually work as a 3D artist, I love doing some coding and SFX work from time to time.
Small challenges with tight deadlines push you out of the comfort zone, and make you focus on what's important, making it work and shipping it on time. You cannot get lost on polishing or get stuck into improving your code, if it works, just move on to the next thing on the list.
This was an awesome experience and I'd be pleased to do more stuff like this in the future!
Soon we'll be releasing a link to download and play the Escape Room :)
Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team.
Passionate about videogames, vivid tutorial drinker and cat lover.
A little bit about the project
Now that we know more about this virtual world, we can officially start.
Breaking down the project.
The Aetherian Block Museum is an ambitious project and to have a better control over the development sprints we divided it all in 3 different stages.
- The structure
This would be the over all shape and feel of the building, and included everything that cannot be moved or duplicated inside the scene, to have a real life example, this would be the job of an architect.
We define as props anything that can be duplicated in the scene and doesn't belong to the structure, a bench, a painting or a vending machine would be a prop, in real life, this would be the work of an interior designer.
- Animations and final polishing
After everything is done we will invest some extra time giving life to the scene with animations and interactions. In conclusion, the job of an in real life wizard.
Since this project it is still in development, on this post we're going to focus on the structure.
A Basic outline
When working on a Decentraland building project, is important to note that there are technical limitations everywhere, on size, on polycount, textures,... it all depends on the extend of the terrain you are going to build on.
Knowing this, when I have size limitations I usually start creating a cube that has the maximum size and use it as a visual reference to know where is the limit.
Learn from the Masters, Gather References
Never understimate the power of the references, for getting a general idea about what we want to transmit or the look we want to achieve.
I like to start by entering Pinterest and look for some references, in this case cyberpunk style, since this district does not have yet an exact design, I looked into the most "iconic technological futures", movies and videogames, like Blade Runner, Tron, Rune and Ghost in the Shell were some of the major references on this project.
Also, one thing that I tend to do, is gather different images that have some detail that I like, and I think that could fit in the project, regardless the overall style, this way I can mix new ideas into it.
Block the Idea out!
Once we have some ideas about what we want, it’s time to make some visual MVP (Minimum Viable Product), at Polygonal Mind we call this blockouts, with them you can see the overall shape of the building helping you visualize the final product, in this case of the museum. Generally, in this stage, the ideal thing is to make at least 3 totally different variations, so we can experiment with different shapes and ideas and see which one could be the most feasible.
In this case, three buildings were done, each one with a different shape, so that in the end we can reach the most pleasant form while taking advantage of the maximum size.
Seeing that the pretended design is technological, I added some emissive lights. Here the contrasting colours help visually how these lights could work.
After this first stage, we decided to post the results on the Decentraland and Aetherian Discord servers to gather some feedback.
The devil is on the Details
Once we have chosen the most viable option, in this case the chosen one was the second option, we pass on the details, on the first stages of the modelling, I tend not to worry about the number of the polygons, and I just look for the overall shape.
On this stage however I remade some of the pieces of the model, that way I can create drawings on the model far more controlled way. A good example of this are the exhibition floors.
If there is a feeling, there is a style
As I explained before, Decentraland is divided in various districts, each one with its own style, this building is destined to the cyberpunk district. However this style can encompass a lot of different feelings.
So in this project we could test different color palettes. One similar to the aesthetic of tron, another more dark and grim and the last one more natural.
As I mentioned in other articles, Adobe Kuler is a great tool for this, you can search or create your own palettes that can fit your project very quickly.
Again, we made 3 different variations and went to the DCL and Aetherian Discord servers to gather some community feedback.
Once we have the basic colors we can pass onto detailing the textures using the colors that have been selected, in this case the dark palette was the chosen one.
This was a basic outline for my process when it comes to create buildings for Decentraland, though depending of its needs this can change slightly, For example for organic objects I tend to use Zbrush.
Nevertheless, never forget the musts. Reference, Blockout and Detail.
See you in the next case study :)
Laura Usón is a 3D artist working at Polygonal Mind's in-house team.