Source code now available: https://github.com/thi-ng/umbrella/tree/develop/examples/shader-graph

In this offline session we're building a procedural texture shader graph mini-framework from scratch, learn about writing shaders directly in TypeScript, compose and reuse existing shader functions and automatically transpile them to different GLSL flavours, use framebuffers (FBOs) to combine procedural textures and then - finally - use a scenegraph hierarchy to display final results and build a basic interactive UI based on mouse gestures...

Much of this setup could be massively simplified (with existing tooling) if the dependencies between the various shaders would only have to be static/hardcoded. However, I want to introduce some reactivity into this system (in a follow up session) and only re-compute individual shader nodes when needed and this session covers the ground work for that...

Notable packages used in this session:

• https://thi.ng/webgl
• https://thi.ng/shader-ast
• https://thi.ng/shader-ast-glsl
• https://thi.ng/shader-ast-stdlib
• https://thi.ng/scenegraph
• https://thi.ng/rstream-gestures

If you like this video and the want to support the further development of these projects, please consider becoming a Patreon and Github Sponsor:

• https://www.patreon.com/thing_umbrella
• https://github.com/sponsors/postspectacular

As usual, I'd recommend watching the video at 1.2-1.5x speed... Late night coding, talking and thinking ahead at the same time is not easy! :)