軌跡を、点群で描く
WebGPU で GPS ログを可視化する

<Trackpoint>
  <Time>2026-07-15T06:43:51+09:00</Time>
  <Position>
    <LatitudeDegrees>35.639818</LatitudeDegrees>
    <LongitudeDegrees>139.740607</LongitudeDegrees>
  </Position>
  <AltitudeMeters>6.11</AltitudeMeters>
  <DistanceMeters>0.0</DistanceMeters>
  <HeartRateBpm><Value>101</Value></HeartRateBpm>
</Trackpoint>

// 緯度経度：最小値からの差を 1e-6 度単位の整数に（約0.11m精度）
la = Math.round((lat - la0) * 1e6);

// さらに前の点との差分をとる
d[i] = v[i] - v[i-1];

// 結果：ほとんどの値が -50〜50 の範囲に収まる
[2438,5032,61,101,0, -6,-10,0,0,42, 0,0,0,5,-42, ...]

let la=0, lo=0, al=0, hr=0, sp=0;
for (let i=0; i<n; i++) {
  la += d[i*5]; lo += d[i*5+1]; al += d[i*5+2];
  hr += d[i*5+3]; sp += d[i*5+4];
  pts[i] = { lat: la0 + la/1e6, lon: lo0 + lo/1e6,
             alt: al/10, hr: hr, spd: sp/10 };
}

元の値    35.63738
float32   35.63737869262695   ← 誤差 0.146 m

// 隣り合う表現可能な値の間隔
最小刻み  0.425 m            ← この粒度でしか表せない

// ✗ 緯度経度のまま float32 にする
lat = new Float32Array(n);   // 刻み 0.4m

// ○ 差分をとってから float32 へ
lat = new Float64Array(n);   // CPU 側は倍精度
x   = (lon[i] - lon0) * mPerLon;   // メートルへ
gpuBuf[i] = x;                      // ここで初めて f32

struct Uniforms {
  view   : vec4<f32>,   // 中心x, 中心y, ズーム, アスペクト
  params : vec4<f32>,   // 点サイズ, 色モード, 進捗, 総点数
};
@group(0) @binding(0) var<uniform> U : Uniforms;

// 各点の属性（storage buffer）
@group(0) @binding(1) var<storage, read> pts : array<vec4<f32>>;
@group(0) @binding(2) var<storage, read> att : array<vec4<f32>>;

@vertex
fn vs(@builtin(vertex_index) vi : u32,
      @builtin(instance_index) ii : u32) -> VSOut {
  // 四角形の4隅（トライアングルストリップ）
  let corner = array<vec2<f32>,4>(
    vec2(-1.0,-1.0), vec2(1.0,-1.0),
    vec2(-1.0, 1.0), vec2(1.0, 1.0));

  let p = pts[ii];                    // この点の位置
  let c = corner[vi];
  ...
}

blend: {
  color: { srcFactor: 'src-alpha',
           dstFactor: 'one',        // 加算
           operation: 'add' },
  alpha: { srcFactor: 'one',
           dstFactor: 'one', operation: 'add' },
}