152 lines
14 KiB
HTML
152 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Patatotapopata – Ailyaut's blog</title>
|
||
<link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
|
||
<link rel="stylesheet" href="../../style.css" />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<meta property="og:title" content="Patatotapopata – Ailyaut's blog" />
|
||
<meta property="og:type" content="blog" />
|
||
<meta property="og:url" content="https://ailyaut.com/" />
|
||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||
<meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
|
||
<meta property="og:locale" content="en_US" />
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div id="header_box">
|
||
<div>
|
||
<a href="../../index.html" id="header_title">Ailyaut's blog</a>
|
||
</div>
|
||
<nav id="header_nav">
|
||
<a href="../../blog.html" class="nav_button">Blog</a>
|
||
<a href="../../gallery.html" class="nav_button">Gallery</a>
|
||
<a href="../../projects.html" class="nav_button_active">Projects</a>
|
||
<a href="../../about.html" class="nav_button">About</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 60%;">
|
||
<h1>Patatotapopata</h1>
|
||
<p>A 30 seconds 3D animated short film about choice, freedom and death.<br>
|
||
This short film was my end of bachelor project.</p>
|
||
<p class="italic light">'A young girl jumps off a building, but is given the opportunity to reevaluate her decision by seeing her own future.
|
||
She then finds herself transported to the end of time, where she must face the spirit of Jean-Paul Sartre.'
|
||
</p>
|
||
<iframe style="aspect-ratio: 16/9; border-radius: 1em;" src="https://www.youtube-nocookie.com/embed/BWbewoul1n8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||
<h2>Requirements</h2>
|
||
<p>This short film was my end of bachelor project.<br>
|
||
The assignment was to create a 40 seconds short film on the following subject:</p>
|
||
<p class="italic">“A messenger goes back in time to look for…”</p>
|
||
<p>The short film needed to have a maximum of one character and one environment, and every step had to be done by the student (no pre-made rig, animation, environment, …) </p>
|
||
<h2>Table of contents</h2>
|
||
<ul>
|
||
<li><a href="#charadesign">Character design</a></li>
|
||
<li><a href="#storyboard">Storyboard</a></li>
|
||
<li><a href="#animatic">Animatic</a></li>
|
||
<li><a href="#environment">Environment design</a></li>
|
||
<li><a href="#3d">3D sculpt & retopology</a></li>
|
||
<li><a href="#rigging">Rigging</a></li>
|
||
<li><a href="#animation">Animating, texturing, lighting, rendering, compositing</a></li>
|
||
<li><a href="#conclusion">Conclusion</a></li>
|
||
</ul>
|
||
<h2 id="charadesign">Character design</h2>
|
||
<p>It is not usual to start with character design.<br>
|
||
The truth is, when the subject was announced I just sketched a character in 30 minutes which I quite liked. I didn’t even have any story back then.<br>
|
||
I was inspired by Little Witch Academia’s designs at the time and I originally wanted to animate a short-film in the same energetic style, with a lot of exaggerated movements, speed distortions and so on.
|
||
That’s not really what happened in the end, but fortunately, my character fit perfectly into the depressing atmosphere of the final story. </p>
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_character_concept.webp" title="Character concept" alt="A rough black and white drawing of a young gothic girl with pale skin, long black hair with bangs, a black tutu, black and white striped tights and black boots. She also has cross earrings and ear piercings. She is seen from the left side, almost turning her back, but her head is turned towards the viewer and her eyes are looking to the right." />
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_turn_a_pose.webp" title="Character turn in A-pose" alt="Four black and white drawings of the girl from the previous image, seen from the back, front, three-quarter and side." />
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_hairstyles.webp" title="Hairstyle tests" alt="Four black and white drawings of the girl from the previous image, each with a different hairstyle. The first has long hair and bangs, the second has space buns, the third has short pigtails, and the fourth has long, low braided pigtails in the style of Wednesday Addams." />
|
||
<p class="italic">I tried different hairstyles because the teachers were concerned that long hair would be too difficult to animate. I went with the long hair anyway.</p>
|
||
<h2 id="storyboard">Storyboard</h2>
|
||
<p>The story and shots came to me in a daydream during a cloudy, depressing day.<br>
|
||
At first, the teachers were afraid that my project was too ambitious: I had several environments, multiple characters in a way, and my main character had long hair which was difficult to animate. But I was convinced that I could do it, so nothing was changed.<br>
|
||
Even though not all the shots were kept as they were in the final cut, the short film remains fairly faithful to the original idea. </p>
|
||
<p>Here is an overview of the 7 pages of the storyboard, in which we can clearly see the different steps with the colors being used: </p>
|
||
<img style="margin-bottom: 1em;" src="media/patatotapopata_storyboard_full.webp" title="Storyboard" alt="Seven pages of storyboard. The shots are almost all the same as the ones in the movie." />
|
||
<p>Here you can read the full storyboard in detail (in french)</p>
|
||
<p><a target="_blank" href="media/patatotapopata_storyboard.pdf">Read as PDF</a></p>
|
||
<h2 id="animatic">Animatic</h2>
|
||
<p>After the storyboard was done, I needed to turn it into an animatic to make sure the timing was good and the shots flowed well.</p>
|
||
<iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/486123369?h=0bb881ef44" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||
<h2 id="environment">Environment design</h2>
|
||
<p>The biggest challenge of this project was without a doubt the city. I tried a lot of different methods, including testing with MASH on Maya, or building sets with blueprints on Unreal Engine.<br>
|
||
In the end I decided on a much more clever solution! </p>
|
||
<div class="row" style="gap: 1em;">
|
||
<div class="column" style="--custom_width: calc(50% - 0.5em)">
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_mash_city.png" title="MASH city attempt" alt="A 3D landscape with very low detail blue/gray buildings under a dark gray sky. All buildings are the same, but their height is different to give an impression of variety." />
|
||
<p class="italic" style="text-align: center;">An attempt on Maya with MASH</p>
|
||
</div>
|
||
<div class="column" style="--custom_width: calc(50% - 0.5em);">
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_unreal_city.png" title="Unreal Engine city attempt" alt="A 3D landscape of low detail buildings with different colors. There are lots of kinds of buildings, but the rendering is not very realistic." />
|
||
<p class="italic" style="text-align: center;">an attempt on Unreal Engine</p>
|
||
</div>
|
||
</div>
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_blender_city.webp" title="Blender city attempt" alt="A 3D view of six different realistic-looking buildings." />
|
||
<p class="italic" style="text-align: center;">The solution I opted for in the end</p>
|
||
<p>The buildings seen up close are simple cubes with textured facade pictures, on which I extruded the windows and gave them a reflective texture. Then I stacked a few of them and scattered them in the background in a way that looks realistic. </p>
|
||
<p>As for the wide shot of the city in the introduction… it’s all Google Maps !<br>
|
||
I captured my screen as I scrolled through the Tokyo metropolis in 3D view, then reproduced the mood of my film with compositing. </p>
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_city_before_after.webp" title="Compositing before/after" alt="A wide aerial view of Tokyo, as if taken from a helicopter. It's actually a 3D view from Google Maps. The image is cut in two. On the left, the city appears to be sunny, the sky is bright and blue and the colors are vivid. On the right, the colors are sad and gray, the sky is greenish, and the atmosphere is depressing." />
|
||
<p class="italic" style="text-align: center;">before compositing / after compositing</p>
|
||
<h2 id="3d">3D Sculpt & Retopology</h2>
|
||
<p>The character was sculpted on Zbrush and retopologized in Maya (because it would be impossible to work with otherwise!) </p>
|
||
<img style="border-radius: 1em; margin-bottom: 1em;" src="media/patatotapopata_retopology.webp" title="Retopology before/after" alt="A 3D view showing two versions of the girl character. On the left, the model is not very detailed and the 3D structure is messy. On the right, the model is much more detailed and the 3D structure is clear." />
|
||
<h2 id="rigging">Rigging</h2>
|
||
<p>The rigging demo starts at 1:14</p>
|
||
<iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/815290865#t=1m14s" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||
<h2 id="animation">Animating, texturing, lighting, rendering, compositing</h2>
|
||
<p>For the animation, I did it on Maya because it is where I did my rigging, and then I exported it to Blender for the next steps. </p>
|
||
<p>For the textures, I used the Texture Paint feature of Blender to roughly see how it would look like on my UV projection, then I refined the drawing on Clip Studio Paint. And for the lighting and compositing, I did a breakdown of two different shots in my demo reel starting from 0:55 </p>
|
||
<p>The rendering was done on Blender using Cycles with OptiX denoising. </p>
|
||
<iframe style="aspect-ratio: 16/9; border-radius: 1em; margin-bottom: 1em;" src="https://player.vimeo.com/video/815290865#t=0m55s" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||
<h2 id="conclusion">Conclusion</h2>
|
||
<p>Making a short film was a dream come true, and Patatotapopata was my first.<br>
|
||
Being able to do each step myself was a great way to realize the difficulties and challenges faced at each position if it was a team effort.<br>
|
||
By the way, I would love to do another one as a team next time! </p>
|
||
</div>
|
||
<div class="column" style="--custom_width: 30%;">
|
||
<img style="border-radius: 1em;" src="thumb.png"/>
|
||
<h3 style="margin-bottom: 0.5em;">My role</h3>
|
||
<p style="margin-bottom: 0;">Scenario, storyboard, character & environment design, animatic, 3D modeling, rigging, 3D animation, textures, lighting, rendering, compositing, editing.</p>
|
||
<h3>Software used</h3>
|
||
<p>Maya, ZBrush, Blender, Clip Studio Paint, Unreal Engine (not used in the final project)</p>
|
||
</div>
|
||
</div>
|
||
<div class="spacer" style="--size: 2em"></div>
|
||
<a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
|
||
</main>
|
||
|
||
<footer>
|
||
<div id="footer_box">
|
||
<div class="footer_item">
|
||
<p>Copyright © 2025 Ailyaut</p>
|
||
</div>
|
||
<div class="footer_item">
|
||
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
|
||
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
|
||
0.02g of CO₂/view
|
||
</p>
|
||
</a>
|
||
</div>
|
||
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
|
||
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
|
||
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
|
||
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
|
||
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
|
||
<a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|