Animations & Models

Completion Date:

Isometric Viking Hut

Exploring 3D isometric rooms, vector textures, and Viking themes for a University assignment

Software

Autodesk Maya LT, Blender, Unity

Affinity Designer, Adobe Illustrator, Trello

The objective of this university project was to design a 3D Viking-themed isometric room that uses vector-based texture in a hand-painted style. The project’s primary focus was designing the vector textures and isometric elements, but close attention was also given to the 3D models and the room’s lighting. To achieve this, inspiration was drawn from the intricate huts, shields and overall style in the How to Train Your Dragon series. What sets this project’s isometric element apart is that the room takes the shape of a Viking hut rather than the traditional cube seen in most artwork. The final outcome was a real-time rendering in Unity that applied an almost cartoon style, resulting in an impressive scene that showcased the vector designs.

Vector graphics are an ideal choice for designing textures for 3D models, particularly when creating a cartoon look. Vectors are lines and shapes created using mathematical equations that can be scaled up or down without losing quality or resolution. This makes them ideal for creating textures as they maintain a high level of detail and sharpness, although they are usually not used in this way. Vector textures are also much smaller in file size than traditional raster images, making them more efficient to work with and less demanding on system resources which is important when rendering in real time.

This project successfully explored the potential of vector graphics for designing appealing 3D scenes. The use of real-time rendering in Unity was essential to achieving the desired results, allowing for on-the-fly design changes and experimentation with lighting and shading options. Despite facing challenges such as mastering Unity’s High Definition Render Pipeline and cloth simulation in Maya, the final outcome effectively showcased the project’s goals. Through careful attention to detail and focus on achieving the project’s objectives, a visually striking and functional scene was created that demonstrated the benefits of utilising vector graphics in 3D design.

... Overall mood board that illustrates the atmosphere for the project

To create an inventive design, the project began with a thorough preparation phase, including a mood board with reference images from various sources to gather inspiration and ideas. Three main categories were identified, including Isometric Rooms, Viking Style, and Vector Textures. Isometric Room artwork with simplistic art styles was collected, and a few that broke away from the cube room standard. One notable example was Polygon Runway's isometric Viking hut, which provided insight into how the room could be laid out and what elements could be included. Many of the Viking Style references were clearly inspired by How to Train Your Dragon too, as they maintained a consistent and appealing art style. To plan the vector textures, a selection of seamless tileable vector textures was gathered to analyse the use of simple colours to create detailed patterns and shapes. Additionally, a previously designed wooden vector texture from an older university project was used to compare the last attempt at a vector style to this new direction. These preparatory steps were essential for the project as they allowed for a clear understanding of the desired style and direction before beginning the development process.

During the preparation phase of this project, an organised approach was taken to ensure progress was tracked and project elements were cleanly arranged. Trello, a planning tool that employs a Kanban project management methodology, was utilised to manage all aspects of the project. The project board was populated with cards for each model asset, and each card contained a priority label, checklist and goal date, which served as a due date when the model was in development. This approach allowed each model asset to be tracked and completed systematically, creating a road map that helped estimate the total project duration. With this methodology in place, the project design was broken down into manageable tasks, allowing for more efficient and effective work.

The final stage of preparation for the Viking hut involved creating a quick blockout layout of the hut using an iterative process. This step was critical in bringing together all the models and assets listed on the Trello board to visualise them in a single scene. By doing so, it became apparent which areas were empty and needed filling, leading to more accurate and focused additions to the Trello board. It also gave a rough approximation of the space and overall layout of the Viking hut, allowing for experimentation with different arrangements. Additionally, creating a blockout of the hut made it easier to determine the size and proportions of each model, providing a preview of what the final composition might look like.

... Initial Trello board with priority labels, checklist, goal dates, and due dates

The final stage of preparation for the Viking hut involved creating a quick blockout layout of the hut using an iterative process. This step was critical in bringing together all the models and assets listed on the Trello board to visualise them in a single scene. By doing so, it became apparent which areas were empty and needed filling, leading to more accurate and focused additions to the Trello board. It also gave a rough approximation of the space and overall layout of the Viking hut, allowing for experimentation with different arrangements. Additionally, creating a blockout of the hut made it easier to determine the size and proportions of each model, providing a preview of what the final composition might look like.

... Prototype blockout preview of what the final hut could look like, including all the assets listed on the Trello board

The result planned for the Viking hut was an optimised executable Unity build with pre-defined camera angles, flickering lantern lights, and a toggle-able user interface. Custom-coded scripts with user interfaces that clearly explain how to interact with the scene would need to be implemented for camera control and light flickering. Developing a proper application would allow for testing and optimisation on multiple hardware configurations to ensure the real-time render was of high quality. Lastly, this build would allow for easy and accurate rendering that would be a true representation of the real-time rendered scene.

In the early stages of development, careful design choices were made to ensure the project achieved its inventive design. For example, it was decided early on to avoid any references to dragons so as not to draw too many similarities with the inspiration of How to Train Your Dragon. Other design choices included incorporating metal bands and welds to create a consistent style across the different furniture pieces. Although the project used common game design software and tools, there were fewer constraints on polygon count for each 3D model, allowing for more creative freedom in asset design. This flexibility was particularly useful for smaller assets such as the goblet, which was initially modelled in a low-polygon style. Thanks to the higher polygon budget, Maya's OpenSubdiv was used to give it a smoother, more polished appearance that matched the overall aesthetic of the scene. By following these design choices during development, the project developed quickly and effectively.

To develop each model in the scene, it began by gathering reference images to ensure the assets were accurate and had a realistic appearance. One standout asset was the bed model, which combined a modern plank board with Hiccup’s pillow design from the reference images. The headrest included metal band designs and axe cutouts, which added to the overall consistency and style of the scene. Initially, the blanket was intended to be created using Maya's nCloth simulation tool, but this technique proved too stiff and resulted in the blanket sliding off the pillow. To overcome this challenge, Maya's sculpting tools were used to shape the blanket and pillow, resulting in a more natural appearance. This technique allowed for details such as a dented shape in the pillow to indicate where the occupant’s head usually rested, and the blanket's edges could hang over the side of the mattress. Not using the simulation tool resulted in lower polygon counts for the pillow and blanket, leaving more resources for other models that needed more detail.

The hut model was a significant piece of the project due to its size and importance to the overall theme. Its development began with a simple blockout in Maya, which served as a guide for creating the supporting beams of the hut and determining its final shape. However, the most time-consuming aspect was laying out the roofing tiles, which required three unique tile shapes randomly placed to avoid repetition. Each tile also needed manual rotation to follow the curvature of the roof pieces. Fortunately, only the first two rows on either side required individual placement to create different patterns, which were then used in groups of four to populate the rest of the roof. After unwrapping the UVs of the first three roof tiles, a technique using Maya's Replace Object tool helped to quickly replace all of the existing roof tiles with the unwrapped version. However, this method resulted in the replaced tiles being offset and floating above their original position. To resolve this issue, the pivot of the original models was baked before replacing all the tiles, which successfully resolved the problem.

... Early hut model in Maya with the inital two lines of roof tiles individually placed
Viking helmet modelling process

Developing the yak skin rug model stood out as a unique asset due to its distinctive creation process. Unlike the other models, the rug was not created using polygon modelling. Instead, a vector graphic was drawn based on a reference image and then imported into Maya as an EPS. This allowed for the creation of smooth curves in the rug's design, which would have been time-consuming to achieve through traditional polygon modelling methods. The NURB curve generated from the EPS was then converted to a polygon and extruded to add the needed thickness. While this technique resulted in a higher polygon count, it was successful in breaking up the pattern on the hut floor and adding variety to the scene.

Fireplace modelling, scuplting, and texturing processes

After modelling, exporting the UV unwraps as SVG files was crucial for creating accurate shapes for the textures. However, Maya LT lacks a built-in SVG export option and does not support running python scripts like the full version of Maya. To overcome this challenge, the models were exported as FBX files and imported into Blender, which was capable of reading the UVs and exporting them as SVG templates. In Affinity Designer, commercially licensed reference images were used to draw realistic shapes for most of the textures. To save time, the initial metal texture was vectorised using Adobe Illustrator's Image Trace tool, and the resulting colours were used to create an original rust texture. The rest of the colour palettes were chosen using existing colour combinations from a colour guide.

Certain textures, like the rusted metal texture, needed to be repeated across multiple assets and thus required a tillable design. Although the wood textures were custom-made for each piece, the rusted metal texture had enough variation that its repeating pattern was not easily noticeable. To save time, the design of the chest was abstracted to communicate its intended purpose more effectively. Rather than a grey metal chest containing valuable coins and gems, changing the casing to gold displayed the riches within without requiring extra models to show it. This was achieved by recolouring the rusted metal texture golden so that it could be applied to the treasure chest, giving it a visually distinctive and more affluent appearance while maintaining the same quality rust shapes.

Goblet texturing process

One of the final touches in completing the project's aesthetic was to add cartoon-like outlines to all the models. Using RealToon, a versatile shader developed by MJQ Studio Works for both URP and HDRP Unity projects, achieved this easily. The setup for RealToon was a straightforward process, involving the creation of new materials using the shader and setting up a post-processing volume with RealToon's outline effect. This allowed for quick and efficient integration of the shader into all the models in the project in a way that complemented the existing design elements rather than overshadowing them. Since the primary focus of the project was on the creation of vector-based textures and the creation of an isometric room, the use of this shader did not compromise its unique design objective.

During the final phase of this project, the focus was on preparing it for a build. This stage involved scripting, which was essential to implement several features to enhance the user experience. To create a more realistic and immersive environment, the range of the point light in the lantern was increased and decreased using a script. This allowed for a flickering effect, which added depth to the atmosphere. Next, nine cameras were set up across the scene to capture different angles of the hut. Using Unity's new Input System package, the primary objective was to allow users to navigate the scene seamlessly using their keyboard keys. A set of input mappings were designed with sensible and intuitive keys to control various aspects of the scene. For instance, the numbers one through nine on both the keyboard and numpad were chosen to switch between cameras. Similarly, the F key was used to toggle the flickering effect, and the H and J keys were used to hide the walls and support beams, respectively. Additionally, the tab and escape keys were assigned to toggle the UI and exit the experience, as these are standard keys used in games and Unity. These scripts provided a seamless and user-friendly way for viewers to explore the project and engage with the real-time design more interactively.

... Final Isometric Viking Hut with UI controls

Overall this project was an outstanding success, meeting all three main objectives of creating an isometric Viking-themed scene that used vector-based textures. The addition of the RealToon shader in Unity greatly assisted in achieving the desired tone and feel of the scene, balancing realistic lighting and reflections with the almost cartoon-like textures. Using a Kanban production methodology, implemented through Trello, helped ensure that the project progressed smoothly and consistently. It allowed for clear visibility into what needed to be done and what remained, promoting a sense of calmness and focus throughout development. Additionally, the motivation gained from seeing completed tasks in the Done list was highly encouraging and helped keep the project on track.

There were a few challenges encountered in the project's development, such as Maya's nCloth simulator was not able to create the bedspread. The solution to use sculpting techniques instead proved to be a valuable learning experience. However, a small flame burn particle effect on top of the lantern candle was not feasible like originally planned due to the intensity of the point light inside the lantern hiding it. Additionally, the thickness of the outline on the hanging chain of the lantern caused some of the details to become hard to notice, but unfortunately, this could not be fixed as the outline thickness could only be set for the entire scene and not individual assets.

This project provided valuable practice at experimenting with minimal shapes and colours to represent natural materials. Additionally, the project has been an inspiration to continue exploring this vector-based art style for future works or animations. Through this project, a greater understanding of unwrapping models and sculpting in Maya was achieved which aided to create realistic smoothness in models. Overall, it has been a fantastic learning experience and a great representation of the creativity that can be achieved using vector textures in 3D models.

Looking towards future projects, there are a few areas that could be improved upon based on the outcomes of this one. One potential change could be to create materials instead of individual textures. In this project, four universal materials were designed to be tillable and used on any model, metal, rusted metal, charcoal, and stone. Whereas the wooden models each had a custom texture tailored to their unique UV layout. Fully utilising this approach of universal materials for all assets would allow for greater reusability of textures and streamline the texturing process for larger-scaled projects. Additionally, a shift in the use of colour palettes could help to create better shadows and highlights. While Unity's lighting was effective for this project, integrating highlights and shadows into the textures of wooden assets would enhance the scene's realism. As with any project, there are always areas for improvement, and these ideas will help elevate future work.

Have a project in mind?

Click below to tell me all about your animation or modelling idea. I can help fulfil your vision.