スタジオのウェブサイトを3Dで ウェブデザインは2Dに縛られない: Hybrid Forestは、Cinema 4DとWebGLを使って自社のウェブサイト用に美しい3Dの景観を制作

スウェーデン、ストックホルムに拠点を置くクリエイティブスタジオのHybrid Forestは、VRと360°ビデオ制作のスペシャリストで非常に高度なトピックを扱っており、若いチームに無限のデザインの可能性と自由なクリエイティブを提供している。

最新の技術によってウェブブラウザで3Dグラフィックを表示する方法をテストするため、同チームはWebGL技術を試した。まだ初期段階だが、WebGLグラフィックはグラフィックカードのパワーを使い、ウェブブラウザで3Dグラフィックをレンダリングする。ユーザーは、外部のブラウザプラグインを必要としない。

Hybrid Forestは、自社の専門分野を反映した革新的なウェブサイトを必要だったため、同チームによるWebGLの実験結果を生かした公式企業ウェブサイトを制作した。

デザインに関して、Hybrid Forestのチームはスウェーデンの牧歌的な気質とチームの3Dの魅力をインスピレーションにした。サイトでは、山々に囲まれ、森に佇む典型的なスウェーデンの木造住宅を360°見渡せる美しい景観を見ることができる。よく見ると動くクマも見つけることができる。

シーン全体と全てのアセットは、アーティストのAshley ReedがCinema 4Dを使ってモデリングした。彼は、極力ポリゴン数を抑えたスタイル化されたローポリに仕上げ、エンドユーザーのデバイスが低スペックでもシーンのパフォーマンスが出るように最適化。ポリゴンペンツールは、ジオメトリをすばやく簡単に制作するために欠かせないものだった。ポリゴンリダクションツールは、スカルプト機能で作成されたものの複雑さを解消や山の三角ポリゴン化にも使われた。これにより、WebGLで４角形以上のポリゴンを使うと発生する問題を防ぐことができた。Ashleyは、スムーズタグを削除することでポリゴンの滑らかなシェーディングをなくし、ローポリゴンを強調するようにした。

Cinema 4Dの使いやすさのおかげで、チームはクリエイティブな作業に専念できたと言う。「Cinema 4Dは、モデラーと私、プログラマー同士がいい関係性を保つために完璧なツールでした」（Hybrid Forestのゲームエンジン・ウェブ開発者Daniel Mayor談）

具体的な課題として、Cinema 4Dで作成したアセットをウェブサイトに統合することだった。最初にCinema 4DからOBJでエクスポートし、それをJSONファイルにする特別なツールで保存した。このファイルには、ウェブアプリケーションが読み取れ、それをTherr.jp JavaScritライブラリでウェブサイトに統合するテキストが含まれている。

シーンが完成し、ブラウザのWebGLで走らせた時、チームはブラウザでリアルな影が落ちないという技術的な制約にぶつかった。そのため、彼らはシーン内のすべての影を無効にした。偶然にも、シーンにおけるライトをローポリの光学によるの組み合わせによるシェーディングは、落ちる影を見えた。彼らは、ユーザーのコンピュータの時間によって太陽の位置が変わる隠し機能をつけた。サイトを訪れた時間によって太陽の位置が変わり、昼と夜の照明に切り替わる。

Hybrid Forestのチームによる革新的なウェブサイトのラウンチは成功を収めた。このプロジェクトは、デザイナーのための刺激的なサービスとして発表され、デザインアワードのAWWWARDSにノミネートされた。

Hybrid ForestはCinema 4Dによって感銘を受け、現在このソフトを使用するスタッフが増えている。チームは、定期的にCinema 4Dのワークショップを開催している。3DアーティストのAshley Reedは、Cinema 4Dの使いやすさの大ファンだ。「Cinema 4Dを使った作業は、アイデアの実現に全面的に集中することができるので非常に楽しい」