Cálculos SIG en el navegador usando gpu.js

Roger Veciana i Rovira

Cálculos SIG en el navegador

Datos vectoriales: turf.js, jsts

Datos raster

geotiff.js + DIY

usando gpu.js

Cálculos raster fácilmente paralelizables

WebGL

GPGPU

usando gpu.js

gpu.js


const gpu = new GPU();

const matMult = gpu.createKernel(function(a, b) {
	var sum = 0;
	for (var i = 0; i < 512; i++) {
		sum += a[this.thread.y][i] * b[i][this.thread.x];
	}
	return sum;
}).setOutput([512, 512]);

const c = matMult(a, b);

gpu.js

  • Funciones matemáticas GLSL, casi idénticas a JavaScript
  • Salida directamente objeto canvas
  • Compatibilidad CPU
  • Software inestable
  • Idea de futuro (WebCLGL, turbo.js, gpgpu.js, etc)

Ejemplo práctico

Regresión multilineal con residuos para el cálculo de temperatura

El cálculo

\[\begin{aligned}temperatura & = \beta_{0} + \beta_{1} * altitud + \beta_{2} * distancia \end{aligned} \]

Fórmula matricial: \[\hat{\beta}=(X^{T}X)^{-1}X^{T}y\\ \hat{y}=X\hat{\beta}\]

numeric.js

Residuos

\[e=y-\hat{y}\]

Interpolación por inverso de la distancia

Operaciones

  • Cálculo de la regresión
  • Valores para cada píxel (GPU 1000x1000 px)
  • Cálculo de los resíduos en las estaciones
  • Interpolación de los resíduos (GPU 1000x1000 px)
  • Valor final de la temperatura (GPU 1000x1000 px)
  • Representar los tres campos calculados (GPU 1000x1000 px)

ejemplo

Tiempos

  • Python: ~50 s
  • Python + Cython: ~4 s
  • GPU.js: ~1 s
  • 1000x1000 píxeles
  • 3 cálculos de matrices
  • 3 capas a representar