toxi, 11 months ago

Realtime #WebGL #DEM visualization/editor using http://shadergraph.thi.ng

This web-based shader graph editor started in 2020 and is in urgent need to be developed further (i.e. to support loading & saving of projects, #GLSL & #WGSL export). The tool is really more about visual algebra and prototyping in general and so isn't specifically aimed at DEM visualizations, but it provides several useful operators to facilitate such (at least for pre-viz purposes and/or to create custom aesthetics). For example, there're generators for ambient occlusion maps, normal maps, bump mapping, elevation-based color gradients etc. Altogether, there're 36 customizable generators & operators, some also animated. Images (up to 4K res) can be imported via drag & drop. Currently only supports JPG/PNG, GeoTIFF will have to be pre-converted for now. If there's interest, I can record a quick video walkthrough of the tool...

The editor & all shader operators are written in #TypeScript, with the latter being transpiled to GLSL via https://thi.ng/shader-ast.

The attached screenshots show some of the graphs/workflows I've used to produce visualizations & artwork for prints. You can (maybe, who can say these days?) also find more examples (incl. videos) on my old Twitter:

https://twitter.com/search?q=from%3A%40thing_umbrella+shadergraph&f=live

2/3

Screenshot of the editor showing a grayscale heightmap image and 7 operator nodes (processing stages) to create a 3D shaded visualization with ambient occlusion (local shadows).
Screenshot of the editor showing a grayscale heightmap image and 7 operator nodes (processing stages) to create a 3D shaded visualization with ambient occlusion (local shadows).
Similar to the previous images, but here the visualization also uses an elevation-based 4-stop color gradient to produce a colored terrain with a different result aesthetic.