⾵レーダーを⽀える技術 #af_iosdc

4.5K Views

September 13, 23

スライド概要

2023年9月11日に開催されたAfter iOSDC Japan 2023で天気・災害サービスiOSエンジニアの冨田が発表した、LT資料です。
風レーダーの開発の裏側や工夫について、説明させていただきました。

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

⾵レーダーを⽀える技術 ヤフー株式会社 メディア統括本部開発1本部 冨⽥悠⽃ ©2023 Yahoo Japan Corporation All rights reserved.

2.

アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 2

3.

アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 3

4.

⾃⼰紹介 冨田 悠斗 (Yuto Tomita) ヤフー株式会社メディア統括本部 iOSエンジニア X(旧Twitter): @tommy̲̲yj 2022年新卒入社 最近のお仕事: •Yahoo!防災速報 アプリ(iOS) •Yahoo! JAPAN アプリ(iOS) •Yahoo!天気 アプリ(iOS) ©2023 Yahoo Japan Corporation All rights reserved. 4

5.

最近関わったお仕事 ©2023 Yahoo Japan Corporation All rights reserved. 5

6.

アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 6

7.

⾵レーダーとは ©2023 Yahoo Japan Corporation All rights reserved. 7

8.

線の 目 ア ニ ジ エン 風レーダーのすごいところ ©2023 Yahoo Japan Corporation All rights reserved. 8

9.

⾵レーダーのすごいところ •世界中の風の動きを地図にオーバーレイして表示 •背景の風の強さのグラデーション(風速分布図)、風の動き(粒子) ともにオンデバイスで描画処理 •読み込み時間も1秒程度 •基本60fpsで描画 ©2023 Yahoo Japan Corporation All rights reserved. 9

10.

アジェンダ 1. ⾃⼰紹介 2. ⾵レーダーとは 3. ⾵レーダーを⽀えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 10

11.

天気サービスの各レーダーの仕組み 各種UIコンポーネント •ナビゲーションバー •ボトムシート カスタムレイヤー/ RasterLayer •雨雲、風情報、台風情報など (略図) ©2023 Yahoo Japan Corporation All rights reserved. https://www.mapbox.com 11

12.

⾵レーダーと既存のレーダーの違い 雨雲レーダー 風レーダー •重ねているレイヤー •重ねているレイヤー •風速分布図 •雨雲情報 •粒子描画 •アニメーションの有無 •アニメーションの有無 •なし •あり(粒子の動き) ©2023 Yahoo Japan Corporation All rights reserved. 12

13.

⾵レーダーを⽀える技術 Metal Appleが提供する、ローレベルなグラフィックAPI Appleが提供するチップに最適化されており、 高いパフォーマンスを出すことができる。 ©2023 Yahoo Japan Corporation All rights reserved. https://developer.apple.com/jp/metal/ 13

14.

GPUに近い低レイヤーAPI🤔 難しそう🥺 ©2023 Yahoo Japan Corporation All rights reserved. 14

15.

実は結構簡単に書けます! ©2023 Yahoo Japan Corporation All rights reserved. 15

16.
[beta]
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

17.

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

18.

Metalのすごいところ •2014年時点で、OpenGLの10倍のパフォーマンス •iPhoneに搭載されているAシリーズチップやMacに 搭載されているMシリーズチップのGPUを最大限活かせる ©2023 Yahoo Japan Corporation All rights reserved. 参考: WWDC2014 18

19.

Metalを使った、風レーダーの描画の仕方 ©2023 Yahoo Japan Corporation All rights reserved. 19

20.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 20

21.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 21

22.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 22

23.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 23

24.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ (略図) 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 24

25.

⾵レーダーの描画(粒⼦描画編) 粒⼦を描画する ↓ ⼀つ前のフレームの透明度を下げる ↓ 少し動かした粒⼦を重ねる ↓ 画⾯に表⽰ ©2023 Yahoo Japan Corporation All rights reserved. 25

26.

⾵レーダーの描画(⾵速分布図編) ・ ・ ・ ・ ・ ・ Metalが補完 (略図) ©2023 Yahoo Japan Corporation All rights reserved. 26

27.

業務でMetalを使う障害 ©2023 Yahoo Japan Corporation All rights reserved. 27

28.

社内で使用しているアプリが少なく、 保守運用できるエンジニアが少ない ©2023 Yahoo Japan Corporation All rights reserved. 28

29.

ヤフーでのMetal運⽤⽅針 Metalの使用は最低限にする •風レーダーの描画周りでのみMetalを使用する •計算などはMetalを使わず、Swiftで行う 担当エンジニアが変わっても、 低い学習コストで運用をすることができる ©2023 Yahoo Japan Corporation All rights reserved. 29

30.

⾵レーダの負荷対策と⼯夫 •BEサーバーと端末に風情報をキャッシュする •リクエストパターンが最小限になるようし、 キャッシュが効きやすくなるように設計 •BEからは風のメタ情報のみを受け取り、端末で風速ベクトルなどを計算 •情報の受け渡しが最低限になり、通信量が減る •1つ後の時間の情報をPre-fetchする •異なるFPSでも同じように見えるように、粒子の移動距離を調整 ©2023 Yahoo Japan Corporation All rights reserved. 30

31.

アジェンダ 1. 自己紹介 2. 風レーダーとは 3. 風レーダーを支えている技術 4. 終わりに ©2023 Yahoo Japan Corporation All rights reserved. 31

32.

風レーダーはYahoo!天気アプリで 使用できます!! ぜひダウンロードしてください🙇 ©2023 Yahoo Japan Corporation All rights reserved.

33.

Yahoo! JAPANアプリ (iOS)でも 風レーダー機能が追加予定です! (Android版はすでに公開済み) ©2023 Yahoo Japan Corporation All rights reserved.

34.

©2023 Yahoo Japan Corporation All rights reserved.