5.2K Views
September 13, 23
スライド概要
2023年9月11日に開催されたAfter iOSDC Japan 2023で天気・災害サービスiOSエンジニアの冨田が発表した、LT資料です。
風レーダーの開発の裏側や工夫について、説明させていただきました。
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
⾵レーダーを⽀える技術 ヤフー株式会社 メディア統括本部開発1本部 冨⽥悠⽃ ©2023 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 2
アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 3
⾃⼰紹介 冨田 悠斗 (Yuto Tomita) ヤフー株式会社メディア統括本部 iOSエンジニア X(旧Twitter): @tommy̲̲yj 2022年新卒入社 最近のお仕事: •Yahoo!防災速報 アプリ(iOS) •Yahoo! JAPAN アプリ(iOS) •Yahoo!天気 アプリ(iOS) ©2023 Yahoo Japan Corporation All rights reserved. 4
最近関わったお仕事 ©2023 Yahoo Japan Corporation All rights reserved. 5
アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 6
⾵レーダーとは ©2023 Yahoo Japan Corporation All rights reserved. 7
線の 目 ア ニ ジ エン 風レーダーのすごいところ ©2023 Yahoo Japan Corporation All rights reserved. 8
⾵レーダーのすごいところ •世界中の風の動きを地図にオーバーレイして表示 •背景の風の強さのグラデーション(風速分布図)、風の動き(粒子) ともにオンデバイスで描画処理 •読み込み時間も1秒程度 •基本60fpsで描画 ©2023 Yahoo Japan Corporation All rights reserved. 9
アジェンダ 1. ⾃⼰紹介 2. ⾵レーダーとは 3. ⾵レーダーを⽀えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 10
天気サービスの各レーダーの仕組み 各種UIコンポーネント •ナビゲーションバー •ボトムシート カスタムレイヤー/ RasterLayer •雨雲、風情報、台風情報など (略図) ©2023 Yahoo Japan Corporation All rights reserved. https://www.mapbox.com 11
⾵レーダーと既存のレーダーの違い 雨雲レーダー 風レーダー •重ねているレイヤー •重ねているレイヤー •風速分布図 •雨雲情報 •粒子描画 •アニメーションの有無 •アニメーションの有無 •なし •あり(粒子の動き) ©2023 Yahoo Japan Corporation All rights reserved. 12
⾵レーダーを⽀える技術 Metal Appleが提供する、ローレベルなグラフィックAPI Appleが提供するチップに最適化されており、 高いパフォーマンスを出すことができる。 ©2023 Yahoo Japan Corporation All rights reserved. https://developer.apple.com/jp/metal/ 13
GPUに近い低レイヤーAPI🤔 難しそう🥺 ©2023 Yahoo Japan Corporation All rights reserved. 14
実は結構簡単に書けます! ©2023 Yahoo Japan Corporation All rights reserved. 15
Metalのコード (Shader)
#include <metal_stdlib>
using namespace metal;
vertex float4 vertex_main(constant float3 *vertices
[[buffer(0)]], uint vertexID [[vertex_id]]) {
return float4(vertices[vertexID], 1.0);
}
// 描画する色を指定
fragment float4 fragment_main() {
return float4(1.0, 0.0, 0.0, 1.0);
}
©2023 Yahoo Japan Corporation All rights reserved.
16
Metalのコード (呼び出し側) (前略) let vertices: [Float] = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ] commandEncoder?.setVertexBytes(vertices, length: vertices.count * MemoryLayout<Float>.size, index: 0) commandEncoder?.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3) commandEncoder?.endEncoding() commandBuffer?.present(drawable) commandBuffer?.commit() ©2023 Yahoo Japan Corporation All rights reserved. 17
Metalのすごいところ •2014年時点で、OpenGLの10倍のパフォーマンス •iPhoneに搭載されているAシリーズチップやMacに 搭載されているMシリーズチップのGPUを最大限活かせる ©2023 Yahoo Japan Corporation All rights reserved. 参考: WWDC2014 18
Metalを使った、風レーダーの描画の仕方 ©2023 Yahoo Japan Corporation All rights reserved. 19
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 20
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 21
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 22
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 23
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 24
⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 25
⾵レーダーの描画(⾵速分布図編) ・ ・ ・ ・ ・ ・ Metalが補完 (略図) ©2023 Yahoo Japan Corporation All rights reserved. 26
業務でMetalを使う障害 ©2023 Yahoo Japan Corporation All rights reserved. 27
社内で使用しているアプリが少なく、 保守運用できるエンジニアが少ない ©2023 Yahoo Japan Corporation All rights reserved. 28
ヤフーでのMetal運⽤⽅針 Metalの使用は最低限にする •風レーダーの描画周りでのみMetalを使用する •計算などはMetalを使わず、Swiftで行う 担当エンジニアが変わっても、 低い学習コストで運用をすることができる ©2023 Yahoo Japan Corporation All rights reserved. 29
⾵レーダの負荷対策と⼯夫 •BEサーバーと端末に風情報をキャッシュする •リクエストパターンが最小限になるようし、 キャッシュが効きやすくなるように設計 •BEからは風のメタ情報のみを受け取り、端末で風速ベクトルなどを計算 •情報の受け渡しが最低限になり、通信量が減る •1つ後の時間の情報をPre-fetchする •異なるFPSでも同じように見えるように、粒子の移動距離を調整 ©2023 Yahoo Japan Corporation All rights reserved. 30
アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 31
風レーダーはYahoo!天気アプリで 使用できます!! ぜひダウンロードしてください🙇 ©2023 Yahoo Japan Corporation All rights reserved.
Yahoo! JAPANアプリ (iOS)でも 風レーダー機能が追加予定です! (Android版はすでに公開済み) ©2023 Yahoo Japan Corporation All rights reserved.
©2023 Yahoo Japan Corporation All rights reserved.