{"id":1151,"date":"2022-04-30T18:07:00","date_gmt":"2022-04-30T22:07:00","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?p=1151"},"modified":"2022-04-30T18:07:00","modified_gmt":"2022-04-30T22:07:00","slug":"final-project-3d-tile-generator","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/jdboucher\/final-project-3d-tile-generator\/","title":{"rendered":"Final Project: 3D Tile Generator"},"content":{"rendered":"\n

For my final project, I created a set of tiles and a small Unity application to view them in a procedurally generated environment. This application is available on itch.io!
https:\/\/thepiratepup.itch.io\/3d-tile-generator<\/a><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This is what the final product looks like. My goal was to keep a relatively simple workflow creating and texturing the 3D models and to take a deep dive into simple but effective ways to present these. Ultimately I think I was successful, as I learned in-depth information about parts of Unity that I have never explored before, and I feel confident in my ability to make relatively good-looking art in the future while taking a more technical approach to achieve this.<\/p>\n\n\n\n

\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n<\/figure>\n\n\n\n

I started by creating the models in Maya. I had planned to use NURBs modeling tools to create tileable stone walls and floor sections but was recommended to limit the complexity strictly to the texturing. The result was very simple models, using primarily re-scaled cube primitives. I wanted to make sure at least one element of the project was more complex than that, so I created a pillar tile as well. Additionally, I attempted to create a lantern, but it wasn’t turning out how I had hoped so I ended up abandoning that aspect of it.<\/p>\n\n\n\n

\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n<\/figure>\n\n\n\n

Next, I started the procedural generation. I had planned to use code from past projects to implement generation algorithms like Random Walk, Perlin Noise, and Binary Space Partitioning, but the code I had created in the past was not as reusable as I thought it was. To keep things focused on the artistic workflow, I only implemented a coin flip algorithm, randomly determining whether a tile should be filled or empty. Then I run through the generated tile data, and determine what model should be placed at each tile, and how it should be oriented, by looking at whether the neighboring tiles are filled or empty.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I used Unity’s node-based shader tool to texture the models. While the end result only uses a texture map and a normal map, I ended up learning a lot about this process. Which render pipeline you’re using in Unity can have a dramatic effect on certain things like what tools are available, and I feel confident navigating this space in the future. Additionally, I learned how to do cool shader effects like creating a glowing border that grows and shrinks over time. Unfortunately, such effects did not feel like they had a place in the final version of this project.<\/p>\n\n\n\n

\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n<\/figure>\n\n\n\n

The rest of the work done for this project is difficult to capture in pictures, but you can see much of it in action by downloading the project from the link provided above. The application features a pause menu that tweens in and out of existence, which is an effect that I’ve been meaning to learn how to implement for ages. I used a library called LeanTween, which has a plethora of incredible features for tweening via code in Unity. In this menu, you can view a mini-map of the generated environment, re-size, and re-generate the environment. There is a spot to select a different generation method, but I never implemented additional algorithms.<\/p>\n\n\n\n

Additionally, I made use of Post-Processing effects. The render pipeline you’re using in Unity again has a significant impact on this, and I finally understand how to work with post-processing across all of the render pipelines. These are quite subtle, but I think they make the project feel much better. A vignette effect is barely noticeable if you’re not looking for it, and the depth of field effect makes the camera view feel a little more dynamic.<\/p>\n\n\n\n

Speaking of cameras, I learned so much about cameras in unity! My favorite effect that I implemented for this project was the small marching tiles along the top and bottom of the image. These are tiny versions of the 3D tiles that I created, and they exist on the UI! To achieve this, I placed each tile in a row in 3D space in the game. I had an additional camera viewing these, and the camera view is sent to a render texture, which can then be placed on an image in the UI canvas. From there, I made a tiled image effect that scrolls along the top and bottom of the screen, and made the actual 3D version of the tiles spin and bob up and down. I also learned about the camera stack in the universal render pipeline, in addition to creating a dynamically-sized mini-map that views the environment, along with a camera-panning effect that also scales its view with the size of the environment.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I’m very happy with the final result, and I feel like I will be able to take my newly gained knowledge and effectively apply it to every Unity project I work on in the future!<\/p>\n","protected":false},"excerpt":{"rendered":"

For my final project, I created a set of tiles and a small Unity application to view them in a procedurally generated environment. This application is available on itch.io!https:\/\/thepiratepup.itch.io\/3d-tile-generator This is what the final product looks like. My goal was to keep a relatively simple workflow creating and texturing the 3D models and to take… <\/p>\n

Read More<\/a><\/div>\n","protected":false},"author":258,"featured_media":1163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/04\/Tile-Generator-4_30_2022-5_27_56-PM.png","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/comments?post=1151"}],"version-history":[{"count":1,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1151\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/1151\/revisions\/1172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media\/1163"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media?parent=1151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/categories?post=1151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/tags?post=1151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}