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

Slide 1

Slide 1 text

WebGL や Canvas を使ったデータ可視化コンテンツ開発日本経済新聞社編集データビジュアルセンター東條晃博 #nikkei_tech_talk 1

Slide 2

Slide 2 text

自己紹介東條晃博 (Akihiro Tojo) 編集データビジュアルセンター主にビジュアルコンテンツ制作 2020 年新卒入社趣味: 映画館、美術館、読書 #nikkei_tech_talk 2

Slide 3

Slide 3 text

#nikkei_tech_talk 3

Slide 4

Slide 4 text

WebGL や Canvas を使ったビジュアルコンテンツもつくっています #nikkei_tech_talk 4

Slide 5

Slide 5 text

発表内容 1. フロントエンドでのデータ可視化に使う技術 2. WebGL (Three.js) を使ったコンテンツ事例 3. Canvas (p5.js) を使ったコンテンツ事例 #nikkei_tech_talk 5

Slide 6

Slide 6 text

制作フロータスク担当者データの前処理記者 or エンジニアデザインデザイナー HTML, CSS の実装デザイナー or エンジニア JavaScript の実装エンジニア #nikkei_tech_talk 6

Slide 7

Slide 7 text

フロントエンドでのデータ可視化に使う技術技術ライブラリ例形式長所 SVG D3.js ベクターシンプルな図形の描画 Canvas p5.js ラスター高度な 2D グラフィックスの描画 WebGL Three.js ラスター高度な 3D グラフィックスの描画 #nikkei_tech_talk 7

Slide 8

Slide 8 text

SVG シンプルな図形の描画に適している CSS で色などの見た目を変えられるため、デザイナーとの連携がとりやすいパスの多い複雑な図形を描画すると重くなる SVG 要素をデータドリブンに操作できるライブラリとして D3.js がある #nikkei_tech_talk 8

Slide 9

Slide 9 text

Canvas 高度な 2D グラフィックスの描画に適している図形をラスターとして扱うことで SVG よりも高度な表現ができる Canvas API を簡単に利用できるライブラリとして p5.js がある #nikkei_tech_talk 9

Slide 10

Slide 10 text

WebGL 高度な 3D グラフィックスの描画に適している GPU で演算を処理することで Canvas よりも高度な表現ができる WebGL API を簡単に利用できるライブラリとして Three.js がある #nikkei_tech_talk 10

Slide 11

Slide 11 text

WebGL (Three.js) を使ったコンテンツ事例 #nikkei_tech_talk 11

Slide 12

Slide 12 text

地球を覆う小型衛星 3 万基 3D で描く新時代英語版 https://asia.nikkei.com/static/vdata/ infographics/how-smallsats- revolutionize-our-future/ 日本語版 https://vdata.nikkei.com/newsgraph ics/how-smallsats-revolutionize- our-future/ #nikkei_tech_talk 12

Slide 13

Slide 13 text

地球を覆う小型衛星 3 万基 3D で描く新時代衛星データベースの軌道データをもとに、約 9000 基の 2022 年 12 月時点の位置を地球の周りに可視化 1959 年以降の衛星数の増加を時系列のアニメーションで表現軌道の種類で 4 つに色分け #nikkei_tech_talk 13

Slide 14

Slide 14 text

#nikkei_tech_talk 14

Slide 15

Slide 15 text

#nikkei_tech_talk 15

Slide 16

Slide 16 text

データの前処理 #nikkei_tech_talk 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

座標変換高度, 緯度, 経度（＝距離＋2 つの角度）で表されている衛星の座標を x, y, z （＝直交する3 つの軸）に変換 #nikkei_tech_talk 18

Slide 19

Slide 19 text

Three.js で地球を表示する #nikkei_tech_talk 19

Slide 20

Slide 20 text

Three.js の基本ジオメトリ: 3D オブジェクトの形状マテリアル: 3D オブジェクトの外観シーン: 3D オブジェクトを配置する空間 #nikkei_tech_talk 20

Slide 21

Slide 21 text

ジオメトリ 3D オブジェクトの形状を定義する基本形状（直方体や球体など）のジオメトリは Three.js で最初から用意されている SphereGeometry で球体を表示できる球体を地球の見た目にするために、次ページの地球の画像を表面に貼り付ける const geometry = new SphereGeometry( 1); #nikkei_tech_talk 21

Slide 22

Slide 22 text

#nikkei_tech_talk 22

Slide 23

Slide 23 text

マテリアル 3D オブジェクトの外観を定義する色、テクスチャ、反射率、透明度などの情報をもつ地球の画像をテクスチャに指定することで地球の見た目になる const loader = new TextureLoader(); const texture = loader. load( 'earth.jpeg'); const material = new MeshPhongMaterial({ map: texture, shininess: 10, }); #nikkei_tech_talk 23

Slide 24

Slide 24 text

ライト 3D シーン内のオブジェクトの明るさ、影、反射などを制御する点光源、平行光源、環境光など種類がある位置、色、強度、減衰などのパラメーターで見え方を調整できる const pointLight = new PointLight( 0x333ee, 10); const ambientLight = new AmbientLight( 0x3333ee, 4); #nikkei_tech_talk 24

Slide 25

Slide 25 text

もう少しリアルに見せる #nikkei_tech_talk 25

Slide 26

Slide 26 text

雲の球体オブジェクトを作成球体のジオメトリに雲のテクスチャを貼り付ける 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

Slide 27

Slide 27 text

透過させる地球の球体オブジェクトと重ね合わせられるように透過させる const material = new MeshPhongMaterial({ map: texture, shininess: 10, transparent: true, opacity: 0.2, side: DoubleSide, color: 0xffffff, }); #nikkei_tech_talk 27

Slide 28

Slide 28 text

地球と雲の球体を重ね合わせる完成 #nikkei_tech_talk 28

Slide 29

Slide 29 text

衛星（パーティクル）を描画する #nikkei_tech_talk 29

Slide 30

Slide 30 text

衛星（パーティクル）のジオメトリ 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

Slide 31

Slide 31 text

衛星（パーティクル）のマテリアルシェーダー（3D グラフィックスのレンダリング用のプログラム）で点の大きさや色、透明度などを定義する RawShaderMaterial で点の描画にシェーダーを使うよう指定する const material = new RawShaderMaterial({ vertexShader, fragmentShader, transparent: true, blending: AdditiveBlending, }); #nikkei_tech_talk 31

Slide 32

Slide 32 text

スクロールに応じてカメラを回転させる #nikkei_tech_talk 32

Slide 33

Slide 33 text

#nikkei_tech_talk 33

Slide 34

Slide 34 text

スクロール量に応じて角度の変数を定義スクロール 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

Slide 35

Slide 35 text

Canvas (p5.js) を使ったコンテンツ事例 #nikkei_tech_talk 35

Slide 36

Slide 36 text

ロシア、口実捏造の軌跡英語版 https://asia.nikkei.com/static/vdata/ infographics/russia-fake-news/ 日本語版 https://vdata.nikkei.com/newsgraph ics/russia-fake-news/ #nikkei_tech_talk 36

Slide 37

Slide 37 text

ロシア、口実捏造の軌跡ウクライナ侵攻で拡散された偽情報について、テレグラム（旧ソ連圏で広く使われる SNS）上での拡散の様子をネットワーク図に可視化アカウントの種類（政府系、拡散工作用、反政府など）で色分けアカウントどうしのつながりを時系列のアニメーションで表現 #nikkei_tech_talk 37

Slide 38

Slide 38 text

#nikkei_tech_talk 38

Slide 39

Slide 39 text

#nikkei_tech_talk 39

Slide 40

Slide 40 text

データ収集データ提供サービスの API を利用記者が偽情報の投稿を特定偽情報の投稿を引用・転送した投稿を収集 → その投稿を引用・転送した投稿を収集 → ...... 繰り返し ※ mention = 引用、forward = 転送 #nikkei_tech_talk 40

Slide 41

Slide 41 text

エッジアカウントのペアの配列引用・転送したアカウント引用・転送されたアカウント A B A C ... ... #nikkei_tech_talk 41

Slide 42

Slide 42 text

ノード種別で色分けして表示アカウント種別 A 政府系 B 拡散工作用 C 反政府 ... ... ※ 種別は記者がアカウントの投稿内容を確認して分類 #nikkei_tech_talk 42

Slide 43

Slide 43 text

ノード投稿が閲覧された回数で大きさを変えるアカウント種別閲覧数 ... A 政府系 2000 ... B 拡散工作用 500 ... C 反政府 300 ... ... ... ... ... #nikkei_tech_talk 43

Slide 44

Slide 44 text

グラフ配置の計算ネットワーク可視化ライブラリを使ってノードの座標を計算する言語ライブラリ例 JavaScript d3-force など Python NetworkX など GUI ツール Gephi, Cytoscape など #nikkei_tech_talk 44

Slide 45

Slide 45 text

p5.js でネットワークを描画する #nikkei_tech_talk 45

Slide 46

Slide 46 text

p5.js の基本 setup : 最初に 1 度だけ実行 draw : 毎フレーム繰り返し実行 function setup() { createCanvas( 400, 400); } function draw() { background( '#000'); ellipse( 200, 200, 50, 50); } #nikkei_tech_talk 46

Slide 47

Slide 47 text

ノードを描画する fill : 塗りの色を指定 ellipse : 円を描画 function draw() { // ... fill( '#ff3333'); ellipse( 100, 200, 50, 50); fill( '#00c2ff'); ellipse( 300, 200, 50, 50); } #nikkei_tech_talk 47

Slide 48

Slide 48 text

エッジを描画する stroke : 線の色を指定 line : 線を描画 function draw() { // ... stroke( '#fff'); line( 100, 200, 300, 200); } #nikkei_tech_talk 48

Slide 49

Slide 49 text

色をグラデーションさせる 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

Slide 50

Slide 50 text

スクロールアニメーションスクロール量に応じてエッジを伸ばすノードの位置をベクトルで表し、始点と終点のノード位置をスクロール進捗率で補間することでエッジの先端の位置を求める 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

Slide 51

Slide 51 text

#nikkei_tech_talk 51

Slide 52

Slide 52 text

Three.js や p5.js のいいところコミュニティが大規模で活用事例が充実している OpenProcessing: https://openprocessing.org/ three.js examples: https://threejs.org/examples/ WebGL や Canvas の API を抽象化し簡単に扱えるようにすることで、低い学習コストで高度な表現を実現企画をすばやくコンテンツ化するうえでは重要一方で、より高度で自由な表現をするには低レイヤーの理解や数学力が必要 #nikkei_tech_talk 52

Slide 53

Slide 53 text

まとめシンプルなチャートだけでなく WebGL や Canvas を使ったデータ可視化コンテンツもつくっています技術長所 SVG シンプルな図形 Canvas 2D グラフィック WebGL 3D グラフィック #nikkei_tech_talk 53