Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGLやCanvasを使ったデータ可視化コンテンツ開発/nikkei-tech-talk5-3

 WebGLやCanvasを使ったデータ可視化コンテンツ開発/nikkei-tech-talk5-3

2023/03/23開催のNIKKEI Tech Talk #5メディア企業のデータ可視化開発 の発表資料です #nikkei_tech_talk
「WebGLやCanvasを使ったデータ可視化コンテンツ開発」というタイトルで東條さんが発表しました。
https://nikkei.connpass.com/event/275521/

More Decks by 日本経済新聞社 エンジニア採用事務局

Other Decks in Technology

Transcript

  1. 制作フロー タスク 担当者 データの前処理 記者 or エンジニア デザイン デザイナー HTML,

    CSS の実装 デザイナー or エンジニア JavaScript の実装 エンジニア #nikkei_tech_talk 6
  2. フロントエンドでのデータ可視化に使う技術 技術 ライブラリ例 形式 長所 SVG D3.js ベクター シンプルな図形の描画 Canvas

    p5.js ラスター 高度な 2D グラフィックスの描画 WebGL Three.js ラスター 高度な 3D グラフィックスの描画 #nikkei_tech_talk 7
  3. WebGL 高度な 3D グラフィックスの描画に適して いる GPU で演算を処理することで Canvas よ りも高度な表現ができる

    WebGL API を簡単に利用できるライブラ リとして Three.js がある #nikkei_tech_talk 10
  4. 地球を覆う小型衛星 3 万基 3D で描く新時代 衛星データベースの軌道データをもとに、 約 9000 基の 2022

    年 12 月時点の位置を 地球の周りに可視化 1959 年以降の衛星数の増加を時系列のア ニメーションで表現 軌道の種類で 4 つに色分け #nikkei_tech_talk 13
  5. Two-Line Element (TLE) 衛星軌道のデータ形式 衛星の名前、国際識別番号、軌道情報などが格納されている TLE データを処理できる Python ライブラリを使い、 2022

    年 12 月時点で打ち上 げられている衛星の高度、緯度、経度を算出 TLE データの例: NOAA 14 1 23455U 94089A 97320.90946019 .00000140 00000-0 10191-3 0 2621 2 23455 99.0090 272.6745 0008546 223.1686 136.8816 14.11711747148495 http://celestrak.org/NORAD/documentation/tle-fmt.php #nikkei_tech_talk 17
  6. マテリアル 3D オブジェクトの外観を定義する 色、テクスチャ、反射率、透明度などの情 報をもつ 地球の画像をテクスチャに指定することで 地球の見た目になる const loader =

    new TextureLoader(); const texture = loader. load( 'earth.jpeg'); const material = new MeshPhongMaterial({ map: texture, shininess: 10, }); #nikkei_tech_talk 23
  7. 雲の球体オブジェクトを作成 球体のジオメトリに雲のテクスチャを貼り付け る const geometry = new SphereGeometry( 1.01); const

    loader = new TextureLoader(); const texture = loader. load( 'cloud.jpeg'); const material = new MeshPhongMaterial({ map: texture, color: 0xffffff, }); #nikkei_tech_talk 26
  8. 透過させる 地球の球体オブジェクトと重ね合わせられるよ うに透過させる const material = new MeshPhongMaterial({ map: texture,

    shininess: 10, transparent: true, opacity: 0.2, side: DoubleSide, color: 0xffffff, }); #nikkei_tech_talk 27
  9. 衛星(パーティクル)のジオメトリ BufferGeometry (幾何学形状の属性を格納す るジオメトリ)に [ 衛星1 のx 座標, 衛星1 のy

    座標, 衛星1 のz 座標, 衛星2 のx 座標, 衛星2 のy 座標, 衛星2 のz 座標, ...] といった衛星の座標の 1 次元配列を登録する const geometry = new BufferGeometry(); geometry. setAttribute( 'position', new BufferAttribute( new Float32Array(vertices), 3) ); #nikkei_tech_talk 30
  10. スクロール量に応じて角度の変数を定義 スクロール 0% = 角度 0° スクロール 50% = 角度

    180° スクロール 100% = 角度 360°(= 0°) 定義した角度をもとに、三角関数を使ってカメラの位置 (x, y, z) を算出 const rotation = 2 * Math. PI * scrollProgress; camera. position. set( radius * Math. cos(rotation), radius * Math. cos(rotation), radius * Math. sin(rotation) ); camera. lookAt( 0, 0, 0); #nikkei_tech_talk 34
  11. ノード 種別で色分けして表示 アカウント 種別 A 政府系 B 拡散工作用 C 反政府

    ... ... ※ 種別は記者がアカウントの投稿内容を確認 して分類 #nikkei_tech_talk 42
  12. ノード 投稿が閲覧された回数で大きさを変える アカウント 種別 閲覧数 ... A 政府系 2000 ...

    B 拡散工作用 500 ... C 反政府 300 ... ... ... ... ... #nikkei_tech_talk 43
  13. p5.js の基本 setup : 最初に 1 度だけ実行 draw : 毎フレーム繰り返し実行

    function setup() { createCanvas( 400, 400); } function draw() { background( '#000'); ellipse( 200, 200, 50, 50); } #nikkei_tech_talk 46
  14. ノードを描画する fill : 塗りの色を指定 ellipse : 円を描画 function draw() {

    // ... fill( '#ff3333'); ellipse( 100, 200, 50, 50); fill( '#00c2ff'); ellipse( 300, 200, 50, 50); } #nikkei_tech_talk 47
  15. エッジを描画する stroke : 線の色を指定 line : 線を描画 function draw() {

    // ... stroke( '#fff'); line( 100, 200, 300, 200); } #nikkei_tech_talk 48
  16. 色をグラデーションさせる p5.js では色をグラデーションできないので、 生の Canvas API ( createLinearGradient ) を

    使う function draw() { // ... const gradient = drawingContext. createLinearGradient( 100, 200, 300, 200); gradient. addColorStop( 0, '#ff3333'); gradient. addColorStop( 1, '#00c2ff'); drawingContext. strokeStyle = gradient; line( 100, 200, 300, 200); } #nikkei_tech_talk 49
  17. スクロールアニメーション スクロール量に応じてエッジを伸ばす ノードの位置をベクトルで表し、始点と終 点のノード位置をスクロール進捗率で補間 することでエッジの先端の位置を求める function draw() { // ...

    const nodeFrom = createVector( 100, 200); const nodeTo = createVector( 300, 200); const edgeFrom = nodeFrom; const edgeTo = p5. Vector. lerp(nodeFrom, nodeTo, progress); line(edgeFrom. x, edgeFrom. y, edgeTo. x, edgeTo. y); } #nikkei_tech_talk 50
  18. Three.js や p5.js のいいところ コミュニティが大規模で活用事例が充実している OpenProcessing: https://openprocessing.org/ three.js examples: https://threejs.org/examples/

    WebGL や Canvas の API を抽象化し簡単に扱えるようにすることで、低い学習 コストで高度な表現を実現 企画をすばやくコンテンツ化するうえでは重要 一方で、より高度で自由な表現をするには低レイヤーの理解や数学力が必要 #nikkei_tech_talk 52
  19. まとめ シンプルなチャートだけでなく WebGL や Canvas を使った データ可視化コンテンツも つくっています 技術 長所

    SVG シンプルな図形 Canvas 2D グラフィック WebGL 3D グラフィック #nikkei_tech_talk 53