Particle flow renderer

[tschaub]

This adds a new layer type for rendering velocity fields. The implementation is inspired by and borrows from the excellent description of the technique described by Vladimir Agafonkin for building a wind map.

The wind example shows the new "flow" layer (final names TBD). The layer takes a style object similar to the other WebGL layers, and the example demonstrates a linear color ramp using the new speed expression. The source for the flow layer is a data tile layer where pixel values are assumed to represent x and y velocities, and the layer renders particles moving through the velocity field. The example still does quite a bit of work to smoothly interpolate the coarse resolution input data. I haven't yet decided how much flexibility we should provide in terms of input data types and expressions for converting input data to velocities.

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-14491--ol-site.netlify.app/.

[jahow]

Impressive work!! I had pretty much the same idea, using style expressions to compute the velocity field. Other parameters could be used, e.g. to customize the particle colors, lifetime, density etc.

I was also hoping to look more seriously into using WebGL 2, specifically because of the limitations mentioned in Vladimir's blog post:

A new GL feature called compute shaders (in OpenGL ES 3.1 and equivalent WebGL 2.0 specifications) allows you to run shader code on arbitrary data (without any rendering). Unfortunately, support for the new specifications across browsers and mobile devices is marginal, and so we’re left with only one practical option: textures.

The flow particles use case might very well be the "killer app" for taking this bridge.

Thanks for sharing!

[Tomcariello]

Following up on your comment from 14485, here are some links to sample data that we are looking to implement in our application. These geoJSON files reflect our current approach to the data structure; we can re-format if required/preferred.

There are a number of files which represent different swaths (each swath represents a different time - there is more info in the readme). Each file is in directory https://nasa-gibs.github.io/gibs-web-examples/data/vector-samples/ascat/

ascat_20200101_005400_metopb_37810_eps_o_250_3202_ovw.l2.json
ascat_20200101_023600_metopb_37811_eps_o_250_3202_ovw.l2.json
ascat_20200101_041800_metopb_37812_eps_o_250_3202_ovw.l2.json
ascat_20200101_060000_metopb_37813_eps_o_250_3202_ovw.l2.json
ascat_20200101_073900_metopb_37814_eps_o_250_3202_ovw.l2.json
ascat_20200101_092100_metopb_37815_eps_o_250_3202_ovw.l2.json
ascat_20200101_110300_metopb_37816_eps_o_250_3202_ovw.l2.json
ascat_20200101_124500_metopb_37817_eps_o_250_3202_ovw.l2.json
ascat_20200101_142700_metopb_37818_eps_o_250_3202_ovw.l2.json
ascat_20200101_160600_metopb_37819_eps_o_250_3202_ovw.l2.json
ascat_20200101_174800_metopb_37820_eps_o_250_3202_ovw.l2.json
ascat_20200101_193000_metopb_37821_eps_o_250_3202_ovw.l2.json
ascat_20200101_211200_metopb_37822_eps_o_250_3202_ovw.l2.json
ascat_20200101_225100_metopb_37823_eps_o_250_3202_ovw.l2.json

Please let me know if you have any questions/feedback or if there is anything that I can do to assist in this effort. Very excited to see where this goes! Thanks!