優れた運航性や機動力をWebGLを用いてダイナミックに表現

川崎重工「BK117」は、米エアバス社と共同開発した初の国産中型双発ヘリコプターです。その優れた運航・安全性能により、警察・消防・報道・救急医療など幅広い分野で社会に貢献しています。本コンテンツでは、開発者のインタビューや機能・歴史などを紹介するとともに、製品の特徴である運航性能や機動力を視覚的にダイナミックにみせたいと考え、WebGLでの3D表現にて制作しました。

client
Kawasaki Heavy Industries, Ltd.
WE DELIVERD
UI Design, Art Direction, 3DCG, Front-end Implementation 

アートディレクション

川崎重工のVIシステムである斜度60°のグリッドを用いると同時に、ジオメトリックな背景を配置し、緻密に構築された同製品を補強する表現をしています。また、本コンテンツは1ページで構成されているため、自ずとページの長さがネックになってくると予想されました。この課題を解決する施策として、ページの序・中・終盤のエリアに3D表現という視覚的な「見せ場」をつくり、単調な見え方に終始しないよう心がけています。

開発について

3DModel,Animation,Textureの制作は、Cinema4D, Blenderを用いて制作、実装はTypeScriptを用いWebGL LibraryにはThree.jsを使用しました。また、中盤の3Dコンテンツエリアには「飽きさせない演出」の一つとして「ジャイロセンサ」を使用しインタラクティブなパノラマコンテンツを実装しました。  (※SP版ページのみ)

デバイスごとの最適化に向けて

本コンテンツでは、シンプルな内部構造を保持しつつ、デバイスごとに3DCGがスムーズにアニメーションするよう試行錯誤しました。デバイスのスペック向上とともに、今回のような「対象を魅力的に見せるための3D表現」の需要は今後も高まってくることが予想されます。アカリではこの分野においても、研究・開発を行なっていきます。