COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2015
4
NOV
CATEGORY:
深掘りWORKS
WebGLとは?SONICJAMエンジニアインタビュー!

お世話になっております!!


初投稿SONICJAMディレクターの遠藤でございます。


何を投稿しようか考えましたが、私自身がもともと実装者でしたので、今回は実装のお話として、近年露出度が高まっているあの技術"WebGL"に注目。
「WebGLとは?」「WebGLでどんな事ができるのか?」を、弊社の制作実績を元にエンジニア3名にインタビューしました!


まずご紹介するWebGL実績は


>「絢香 Special Contents GOING THE RAINBOW ROAD」


絢香 Special Contents GOING THE RAINBOW ROAD



実装担当者は弊社エンジニア:池田亮さん(あだ名:池ちゃん)です!


エンジニア:池田亮


遠藤:お疲れ様です!こちらのコンテンツでは実際どの辺にWebGLを使用したのでしょうか?


池田:こちらのコンテンツは、Webブラウザでプレイできるインタラクティブゲームの仕組みになっているのですが、主にゲーム内の3Dグラフィックの再現、エフェクト効果全般に使用しています。
ライフゲージ等のUIについてはHTMLとCSSで表現しています。


遠藤:なるほどー!WebGLといえば、ブラウザでの3D表現ですね。


池田:そうですね、簡単に言いますと、HTML5のcanvas要素へOpenGL のES 2.0 に従ったAPIを導入することにより、Webへ3Dグラフィックを取り入れる事ができます。


遠藤:あまり簡単そうではないですね...
では今回のWebGLの使用について、工夫した点や難しかった点を教えてください。


池田:今回はスマートフォンにも対応との要件で、WebGLはiOSならバージョン8以上のsafariブラウザには対応しているのですが、Androidはまだ対応基準が明確ではなく、Chromeブラウザでしたら機種によっては動作しました。
なので「PC」 → 「iOS」 → 「Android」の順に演出効果をカットして減らしていき負荷を軽減して調整したことですね。
PCブラウザだとInternet Explorer11やChrome、firefox、safariブラウザの最新版などでしたら問題ないです。


池田:あとは、ゲームのステージが全7ステージあるのですが、7ステージ分の3Dデータともなるとデータの量が膨大になり、ブラウザでの読み込みに長い時間がかかってしまうので、なるべくストレスを軽減させるために、各ステージクリアの合間にデータを読み込んだり、ゲームプレイ中の裏側で読み込んだりなどの調整をおこないました。


遠藤:なるほど、実は見えないところでの実装工夫が多いですね〜勉強になります!!
池ちゃんありがとうございました!


遠藤:では次にご紹介させていただくのは


>「共同通信デジタル」


共同通信デジタル


実装担当者は弊社エンジニア:長谷川巧さん(あだ名:タッくん)です!

長谷川巧


長谷川:こちらのサイトでは、トップページにインフォグラフィックスを用いたスペシャルコンテンツがあります。そのグラフなどの演出部分に、WebGLを使用しています。


遠藤:この「ENTER」を押した先のギューンとグラフが伸びる演出ですねー!!
WebGL使用にあたり工夫した点を教えてもらえますでしょうか。


長谷川:まずは、ニュースの内容をクライアントサイドで更新して運用できるように、外部テキストデータ(JSONデータ)化し、それを読み込ませてアニメーション内へ反映される仕組みを制作した点ですかね。


長谷川:次に、グラフの推移などにインパクトを与えたかったので、ダイナミックに見えるようにカメラワークを調整しました。
また、多数のアニメーションもひとつひとつ作りこみました。
あとは、WebGLで文字を表現するちょっと手間のかかる処理を汎用化できる仕組みの制作や、負荷軽減にも気を使いましたね。


遠藤: WebGL上でのテキスト表現処理に手間がかかるんですね〜運用面を考えての汎用化の仕組みも興味深いですね!あとはやはり負荷軽減への対策はつきものなのですね〜。
ありがとうございました!!!


インタビュー3人目は今回Blog用に初のWebGL実装を実験的におこなってみたという


弊社エンジニア:山下雄平さん(あだ名:山P)さんに実装についての感想を聞いてみたいと思います!


山下雄平


遠藤:山Pさん、お疲れ様です!早速ですが今回の実験結果を見せてください。


山下:はい、下の「start」ボタンをクリックすると見られます。



start



ポチッ


遠藤:おおおおおおおおおおおおお!!!!
大量のSONICJAMロゴが降ってきます!!


山下:これは、three.jsを使い3D描画にチャレンジしてみました。


山下:three.jsはJavascriptからWebGLを使用するためのライブラリの1つです。
three.js本体に良質なサンプルが大量に格納されていますので効率よく学習するのにおすすめでした。


>three.js - Javascript 3D library

遠藤:3D表現は光の当て方などでキラキラして見えて素敵ですねー!


山下:僕はFlashの知識が無かったので、
・シーン
・Camera
・Light
の考え方はとても新鮮でした。
Cameraの種類と、Lightの種類だけでも、色々な見せ方ができるので、是非このBlogを読んでいただいた方も試してみてはいかがでしょうか。


遠藤:平面だけではない新しいWebコンテンツの考え方が広がりますね!!!
以上弊社実績のご紹介と共に弊社エンジニア3名に「WebGL」についてインタビューしました。



WebGLコンテンツ制作のお問い合わせをお待ちしております!!




今回ご紹介させていただいた池田、長谷川の2名は
「SONICJAM DEVELOPERZ BLOG」で、自主制作などのWebGLにちなんだ開発記事を投稿しておりますのでこちらもお見逃しなく!!


▼ 池田投稿記事:


池田制作:トップページメインビジュアル


>「Maker Faire Tokyo 2015でSONICJAM R&Dチームとして参加しました!」
水のタッチセンサーを使用した動くクラゲをWebGLで再現。


>「球体デモ」
300個くらいの球体で描画していて、WebGLをより直感的に扱えるJavaScriptライブラリThree.jsを使用。


▼長谷川投稿記事:


>「WebGLで全天球」
全天球コンテンツ(写真・動画)をブラウザ上で再現。


>「Three.jsでトゥーンシェーディング」
アニメのキャラクターが登場するようなゲームでよく使用される表現をWebGLで再現。

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.