検索する地球」のWebGLプログラミングを担当いたしました。www.miraikan.jst.go.jpwww.miraikan.jst.go.jp日本科学未来館の地球ディスプレイに投影させるには、下記のような正距円筒図法で表した2:1の映像を用意する必要があります。Wikipediaこの映像の一部にWebGLが使われており、主に下記のような部分はWebGLで作られています。国、地域毎に分けられた地図のアニメーション地図上にプロットされているアイコンのアニメーションデータに基づいたアイコンの位置、数の調整アイコンの位置によっては正距円筒図法に対応するための歪み補正もうすこし具体的に説明すると、映像素材用に、地図上に検索量データに基づいたアイコンがアニメーションしている4096×2048の連番画像を用意しており、もちろん負荷的にそのサイズではブラウザでまとめに動かないので1フレームずつ4Kサイズのcanvasに描画してはローカルに画像として保存、という処理をしています(1万枚以上あったりするのでこのあたりの処理は全部自動でやってくれるのを作っています)。正距円筒図法に合わせた歪み補正はこんな感じのツールを作って変換してます。(緯度経度を指定するとそれにあわせて歪み補正する)このようにして作った連番画像を最終的に映像チームに渡して調整をしてもらい、地球ディスプレイに投影しています。ブラウザ上で動くものをつくるために使うWebGLですが、このような使い方は非常に珍しく(4Kのcanvasとか画像にして連番画像作るとか)、とてもチャレンジングでいい経験になりました。webインタラクティブ好きとしては新たなWebGLの可能性を見出せたこととても嬉しく思います。この経験を活かせるような案件またやってみたいです。日本科学未来館で実物をご覧下さい。関連記事2018-04-20【仕事】Sunny.sunnny.jp株式会社Sunny.のWebサイトが公開されました。亮(ikeryou)フリーランスのフロントエンドエンジニアインタラクティブな実装や、派手ではないがさりげない演出のあるwebサイトの実装が得意です。お仕事募集しております。メールまたはSNSからお気軽にお問い合わせください。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。