Skip to content

Commit

Permalink
Merge pull request #88 from shun-iwasawa/kimitachi
Browse files Browse the repository at this point in the history 
A new case of introduction: The Boy and the Heron
  • Loading branch information
@shun-iwasawa
shun-iwasawa authored Sep 4, 2023
2 parents b0d19d3 + 5edeec4 commit b41fc94
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 0 deletions.
8 changes: 8 additions & 0 deletions css/usecase.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,14 @@
.usecase_WorksIntro_Introduction p {
font-size: 16px;
}
.usecase_WorksIntro_Introduction ul{
font-size: 14px;
margin: 1em 0;
padding-left: 40px;
}
.usecase_WorksIntro_Introduction li{
list-style: disc;
}

/** embed YouTube's iframe ***/

Expand Down
8 changes: 8 additions & 0 deletions e/css/usecase.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,14 @@
.usecase_WorksIntro_Introduction p {
font-size: 16px;
}
.usecase_WorksIntro_Introduction ul{
font-size: 14px;
margin: 1em 0;
padding-left: 40px;
}
.usecase_WorksIntro_Introduction li{
list-style: disc;
}

/** embed YouTube's iframe ***/

Expand Down
78 changes: 78 additions & 0 deletions e/usecase.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,10 +336,88 @@ <h1>
<li class="usecase_AgeList_AgeDetail">
<a href="#2021year">2021</a>
</li>
<li class="usecase_AgeList_AgeDetail">
<a href="#2023year">2023</a>
</li>
</ul>
</nav>
<article>
<div class="usecase_ProductAgeContent_Container">
<h1 id="2023year" class="usecase_productAgeContent_Title">2023</h1>

<section class="usecase_Works_Container">
<div class="usecase_Works_Title">
<h2>The Boy and the Heron</h2>
<p>Released：2023 /
<span><a href="https://www.ghibli.jp/info/013702/" target="_blank">"The Boy and the Heron" page in Studio Ghibli Website (in Japanese)</a></span>
</p>
</div>
<div class="usecase_WorksDetail_Container">
<div class="usecase_WorksIntro_Container">

<div class="usecase_WorksIntro_ImageGrid">
<div class="usecase_WorksIntro_ImageCell" style="--width:60%">
<div class="usecase_WorksIntro_Image">
<img src="../img/2023_1_kimitachi_1.jpg" alt="">
</div>
</div>
</div>
<div class="usecase_WorksIntro_Introduction">
<p>OpenToonz is based on "Toonz Ghibli Edition," an in-house customized version of Toonz that Studio Ghibli has used for many years for digital workflow of their production.
Since Toonz and GTS have been the core of the production process in the past, OpenToonz and GTS were also widely used in the production of "The Boy and the Heron".<br>
IwaWarper, which was first developed for the production of "When Marnie Was There" (2014), was also further improved for this film and was used in many scenes.
</p>
<p>
In the key & inbetween animation process, OpenToonz was used for pencil testing.<br>
In the ink & paint process, GTS was used for scanning all animation drawings, and OpenToonz was used for color designing and coloring all characters.<br>
In the CG process, IwaWarper was used for "ハリコミ" (Harikomi, to paste-up), which is the warping of the painted textures to match the contours of the hand-drawn objects. The results can be seen in many of the scenes, especially in the latter half of the film.<br>
During the digital composition process, all scenes were composed and rendered with OpenToonz. New visual effects such as GlareFx, FloorBumpFx, and the FlowFx series* were developed for this film.
</p>
<p>
Additionally, a new HDR rendering features have been developed for screening in Dolby Cinema.
All of these new effects and new features have been included in OpenToonz V1.7 and newer versions.
</p>
<br>
<p>
(*) </p>
<ul>
<li>GlareFx :
An effect to reproduce radial streaks of light appear around a bright light source. It simulates the diffraction of light from the shape of the optical filter.</li>
<li>FloorBumpFx :
An effect that makes the floor surface bumpy and uneven as if in three dimensions, from a hand-painted background image and a height reference image; three-dimensional bumpiness can be controlled on OpenToonz without involving 3D software. </li>
<li>FlowFx series :
An effect that generates a dirt appearance like the one made by "特効" (TOKKOU, a special effect staff), using a drawn diagonal line as a reference image for the direction of the touch. It is possible to create brush strokes that include hand-drawn randomness while following the character's movement.</li>
</ul>
</div>
</div>
<div class="usecase_WorksInfo_Container">
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">Production company</h3>
<div class="usecase_WorksInfoDetail_Content">
<p class="usecase_WorksInfoDetail_ExternalLink">
<a href="https://www.ghibli.jp/" target="_blank">Studio Ghibli</a>
</p>
</div>
</div>
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">Staff</h3>
<div class="usecase_WorksInfoDetail_Content">
<ul class="usecase_Staff_Container">
<li>Director, Screenplay and Original Story / Hayao Miyazaki</li>
</ul>
</div>
</div>
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">Copyright</h3>
<div class="usecase_WorksInfoDetail_Content">
<p>&copy;2023 Studio Ghibli
</p>
</div>
</div>
</div>
</div>
</section>

<h1 id="2021year" class="usecase_productAgeContent_Title">2021</h1>
<section class="usecase_Works_Container">
<div class="usecase_Works_Title">
Expand Down
Binary file added img/2023_1_kimitachi_1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions usecase.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,10 +336,89 @@ <h1>
<li class="usecase_AgeList_AgeDetail">
<a href="#2021year">2021年</a>
</li>
<li class="usecase_AgeList_AgeDetail">
<a href="#2023year">2023年</a>
</li>
</ul>
</nav>
<article>
<div class="usecase_ProductAgeContent_Container">

<h1 id="2023year" class="usecase_productAgeContent_Title">2023年</h1>

<section class="usecase_Works_Container">
<div class="usecase_Works_Title">
<h2>君たちはどう生きるか</h2>
<p>公開：2023年 /
<span><a href="https://www.ghibli.jp/works/kimitachi/" target="_blank">「君たちはどう生きるか」：スタジオジブリホームページ</a></span>
</p>
</div>
<div class="usecase_WorksDetail_Container">
<div class="usecase_WorksIntro_Container">

<div class="usecase_WorksIntro_ImageGrid">
<div class="usecase_WorksIntro_ImageCell" style="--width:60%">
<div class="usecase_WorksIntro_Image">
<img src="./img/2023_1_kimitachi_1.jpg" alt="">
</div>
</div>
</div>
<div class="usecase_WorksIntro_Introduction">
<p>OpenToonzは、スタジオジブリが長年デジタル制作に用いていたToonzのインハウス・カスタマイズ版「Toonz Ghibli Edition」が基になっています。
これまでもToonzとGTSを軸とした制作を行ってきたため、「君たちはどう生きるか」の制作現場でもOpenToonzとGTSが広く活用されました。
また、「思い出のマーニー」（2014年）の制作で初めて開発されたIwaWarperも、今作のためにさらなる改良が行われ、多くの場面で用いられました。
</p>
<p>
作画工程では、ペンシルテストにOpenToonzが用いられました。<br>
仕上げ工程では、すべてのカットのスキャンにGTSが用いられ、すべてのカットの色彩設計と彩色にOpenToonzが用いられました。<br>
CG工程では、作画の輪郭に合わせて背景美術素材をゆがめて動かす「ハリコミ」にIwaWarperが使われました。特に作品の後半部分の多くのカットでその成果を見ることができます。<br>
撮影工程において、すべてのカットはOpenToonzで撮影されました。本作のために、GlareFx、FloorBumpFx、FlowFxシリーズ（※）などのビジュアルエフェクトが新たに開発されました。<br>
</p>
<p>
また、ドルビーシネマ版での上映のために、HDR映像のレンダリング機能が新たに開発されました。
これらの新エフェクトと新機能は、V1.7以降のOpenToonzに全て盛り込まれています。
</p>
<br>
<p>
※</p>
<ul>
<li>GlareFx …
眩しい光源の周りに見える放射状の光の筋を再現するためのエフェクト。フィルタの形状からから光の回折をシミュレートします。</li>
<li>FloorBumpFx …
手描きで描かれた背景画と高さの参照画像から、3Dのように床面を凹凸させるエフェクト。3Dソフトを介することなく、立体的な凹凸をOpenToonz上で制御することができます。</li>
<li>FlowFxシリーズ …
作画で描かれた斜線をタッチの向きの参照画像として、特効のような汚れのタッチを生成するエフェクト。キャラクターの動きに沿わせながら、手描きのランダムさを含んだ特効を作ることができます。</li>
</ul>
</div>
</div>
<div class="usecase_WorksInfo_Container">
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">制作会社</h3>
<div class="usecase_WorksInfoDetail_Content">
<p class="usecase_WorksInfoDetail_ExternalLink">
<a href="https://www.ghibli.jp/" target="_blank">スタジオジブリ</a>
</p>
</div>
</div>
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">スタッフ</h3>
<div class="usecase_WorksInfoDetail_Content">
<ul class="usecase_Staff_Container">
<li>原作・脚本・監督／宮﨑駿</li>
</ul>
</div>
</div>
<div class="usecase_WorksInfoDetail_Container">
<h3 class="usecase_WorksInfoDetail_Title">コピーライト</h3>
<div class="usecase_WorksInfoDetail_Content">
<p>&copy;2023 Studio Ghibli
</p>
</div>
</div>
</div>
</div>
</section>

<h1 id="2021year" class="usecase_productAgeContent_Title">2021年</h1>

<section class="usecase_Works_Container">
Expand Down

0 comments on commit b41fc94

Please sign in to comment.