diff --git a/assets/examples/shadergraph-twitter-01.jpg b/assets/examples/shadergraph-twitter-01.jpg new file mode 100644 index 0000000000..c1969fb26c Binary files /dev/null and b/assets/examples/shadergraph-twitter-01.jpg differ diff --git a/assets/examples/shadergraph-twitter-02.jpg b/assets/examples/shadergraph-twitter-02.jpg new file mode 100644 index 0000000000..2a955413d5 Binary files /dev/null and b/assets/examples/shadergraph-twitter-02.jpg differ diff --git a/assets/examples/shadergraph-twitter-03.jpg b/assets/examples/shadergraph-twitter-03.jpg new file mode 100644 index 0000000000..fde47e76af Binary files /dev/null and b/assets/examples/shadergraph-twitter-03.jpg differ diff --git a/assets/examples/shadergraph-twitter-04.jpg b/assets/examples/shadergraph-twitter-04.jpg new file mode 100644 index 0000000000..10aecc15d2 Binary files /dev/null and b/assets/examples/shadergraph-twitter-04.jpg differ diff --git a/assets/examples/shadergraph-twitter-05.jpg b/assets/examples/shadergraph-twitter-05.jpg new file mode 100644 index 0000000000..e4a60cb0d9 Binary files /dev/null and b/assets/examples/shadergraph-twitter-05.jpg differ diff --git a/assets/examples/shadergraph-twitter-06.jpg b/assets/examples/shadergraph-twitter-06.jpg new file mode 100644 index 0000000000..981d52e410 Binary files /dev/null and b/assets/examples/shadergraph-twitter-06.jpg differ diff --git a/assets/examples/shadergraph-twitter-07.jpg b/assets/examples/shadergraph-twitter-07.jpg new file mode 100644 index 0000000000..7c3ecc8c5a Binary files /dev/null and b/assets/examples/shadergraph-twitter-07.jpg differ diff --git a/packages/shader-ast/README.md b/packages/shader-ast/README.md index 2d789cd5f0..28f9bec795 100644 --- a/packages/shader-ast/README.md +++ b/packages/shader-ast/README.md @@ -12,6 +12,11 @@ This project is part of the - [About](#about) - [Standard library of common, higher level operations](#standard-library-of-common-higher-level-operations) - [Benefits](#benefits) + - [Shadergraph playground](#shadergraph-playground) + - [Rose](#rose) + - [DEM visualization](#dem-visualization) + - [Animated radar swipe](#animated-radar-swipe) + - [Pattern tessellations](#pattern-tessellations) - [Prior art / influences](#prior-art--influences) - [Future goals](#future-goals) - [Status](#status) @@ -54,6 +59,10 @@ This project is part of the DSL to define shader code in TypeScript and cross-compile to GLSL, JS and other targets. +(**A 2h 40m long video tutorial (live stream) introducing this package: [Building a shader graph editor (WebGL, shader AST transpiler, UI)](https://www.youtube.com/watch?v=hEC_qbUXDo8)**) + +--- + ![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/shader-ast/shader-ast-01.jpg) Example shader running in plain JS & Canvas 2D context, @@ -127,6 +136,36 @@ package](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast-std chains, no extra plugins needed - small run time & file size overhead (depending on output target impl) +### Shadergraph playground + +During one of the thi.ng live streams in 2020 I started [building a shader graph editor](https://www.youtube.com/watch?v=hEC_qbUXDo8) which I subsequently developed further and which is online at: [shadergraph.thi.ng](https://shadergraph.thi.ng). All shader ops are entirely based on functionality provided by shader-ast and its support packages. + +Some small example projects documented as short clips: + +#### Rose + +[![rose](../../assets/examples/shadergraph-twitter-01.jpg)](https://twitter.com/thing_umbrella/status/1294240300714676224)
+[Final version](https://twitter.com/thing_umbrella/status/1294276813087223811) + +#### DEM visualization + +[![screenshot](../../assets/examples/shadergraph-twitter-05.jpg)](https://twitter.com/thing_umbrella/status/1297311020336197632) + +[![screenshot](../../assets/examples/shadergraph-twitter-02.jpg)](https://twitter.com/thing_umbrella/status/1297935421914132481) + +#### Animated radar swipe + +[![radar](../../assets/examples/shadergraph-twitter-07.jpg)](https://twitter.com/toxi/status/1513278436378304515) + +#### Pattern tessellations + +[![tessellation](../../assets/examples/shadergraph-twitter-06.jpg)](https://twitter.com/thing_umbrella/status/1290571474852511744) + +[![screenshot](../../assets/examples/shadergraph-twitter-03.jpg)](https://twitter.com/thing_umbrella/status/1292860207110991873) + +##### Bump mapping +[![screenshot](../../assets/examples/shadergraph-twitter-04.jpg)](https://twitter.com/thing_umbrella/status/1293286949357326337) + ### Prior art / influences - [Hypergiant](http://alex-charlton.com/posts/Prototype_to_polish_Making_games_in_CHICKEN_Scheme_with_Hypergiant) @@ -146,10 +185,10 @@ status. The TL;DR list... - [ ] struct support - [ ] uniform blocks - [ ] more code gens (JS ✅, WASM, WHLSL, OpenCL, Houdini VEX (WIP)) -- [ ] JS runtime improvements / features (non-GPU / vanilla JS shader execution) +- [x] JS runtime improvements / features (non-GPU / vanilla JS shader execution) - [ ] Integration w/ a GLSL parser (new or existing) -- [ ] AST transformations (optimizers, e.g. [constant - folding ✅](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast/src/optimize.ts)) +- [x] AST transformations (dead code elimination, optimizers, e.g. [constant + folding](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast/src/optimize.ts)) ## Status diff --git a/packages/shader-ast/tpl.readme.md b/packages/shader-ast/tpl.readme.md index 72da3e8e00..dd61aa2417 100644 --- a/packages/shader-ast/tpl.readme.md +++ b/packages/shader-ast/tpl.readme.md @@ -6,6 +6,10 @@ {{pkg.description}} +(**A 2h 40m long video tutorial (live stream) introducing this package: [Building a shader graph editor (WebGL, shader AST transpiler, UI)](https://www.youtube.com/watch?v=hEC_qbUXDo8)**) + +--- + ![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/shader-ast/shader-ast-01.jpg) Example shader running in plain JS & Canvas 2D context, @@ -79,6 +83,36 @@ package](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast-std chains, no extra plugins needed - small run time & file size overhead (depending on output target impl) +### Shadergraph playground + +During one of the thi.ng live streams in 2020 I started [building a shader graph editor](https://www.youtube.com/watch?v=hEC_qbUXDo8) which I subsequently developed further and which is online at: [shadergraph.thi.ng](https://shadergraph.thi.ng). All shader ops are entirely based on functionality provided by shader-ast and its support packages. + +Some small example projects documented as short clips: + +#### Rose + +[![rose](../../assets/examples/shadergraph-twitter-01.jpg)](https://twitter.com/thing_umbrella/status/1294240300714676224)
+[Final version](https://twitter.com/thing_umbrella/status/1294276813087223811) + +#### DEM visualization + +[![screenshot](../../assets/examples/shadergraph-twitter-05.jpg)](https://twitter.com/thing_umbrella/status/1297311020336197632) + +[![screenshot](../../assets/examples/shadergraph-twitter-02.jpg)](https://twitter.com/thing_umbrella/status/1297935421914132481) + +#### Animated radar swipe + +[![radar](../../assets/examples/shadergraph-twitter-07.jpg)](https://twitter.com/toxi/status/1513278436378304515) + +#### Pattern tessellations + +[![tessellation](../../assets/examples/shadergraph-twitter-06.jpg)](https://twitter.com/thing_umbrella/status/1290571474852511744) + +[![screenshot](../../assets/examples/shadergraph-twitter-03.jpg)](https://twitter.com/thing_umbrella/status/1292860207110991873) + +##### Bump mapping +[![screenshot](../../assets/examples/shadergraph-twitter-04.jpg)](https://twitter.com/thing_umbrella/status/1293286949357326337) + ### Prior art / influences - [Hypergiant](http://alex-charlton.com/posts/Prototype_to_polish_Making_games_in_CHICKEN_Scheme_with_Hypergiant) @@ -98,10 +132,10 @@ status. The TL;DR list... - [ ] struct support - [ ] uniform blocks - [ ] more code gens (JS ✅, WASM, WHLSL, OpenCL, Houdini VEX (WIP)) -- [ ] JS runtime improvements / features (non-GPU / vanilla JS shader execution) +- [x] JS runtime improvements / features (non-GPU / vanilla JS shader execution) - [ ] Integration w/ a GLSL parser (new or existing) -- [ ] AST transformations (optimizers, e.g. [constant - folding ✅](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast/src/optimize.ts)) +- [x] AST transformations (dead code elimination, optimizers, e.g. [constant + folding](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast/src/optimize.ts)) {{meta.status}}