feat(examples): add shader-graph example

erik-krogh · Jul 28, 2020 · 48df672 · 48df672
1 parent 6a1b929
commit 48df672
Show file tree

Hide file tree

Showing 11 changed files with 521 additions and 0 deletions.
diff --git a/assets/examples/shader-graph.jpg b/assets/examples/shader-graph.jpg
diff --git a/examples/shader-graph/.gitignore b/examples/shader-graph/.gitignore
@@ -0,0 +1,8 @@
+.cache
+out
+node_modules
+yarn.lock
+*.js
+*.map
+!src/*.d.ts
+!*.config.js
diff --git a/examples/shader-graph/README.md b/examples/shader-graph/README.md
@@ -0,0 +1,32 @@
+# shader-graph
+
+[Live demo](http://demo.thi.ng/umbrella/shader-graph/)
+
+![demo screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-graph.jpg)
+
+Minimal shader graph setup based on [@thi.ng/webgl](https://github.com/thi-ng/umbrella/tree/develop/packages/webgl), [@thi.ng/shader-ast](https://github.com/thi-ng/umbrella/tree/develop/packages/shader-ast) and [@thi.ng/scenegraph](https://github.com/thi-ng/umbrella/tree/develop/packages/scenegraph).
+
+This project was developed from scratch during the [2nd thi.ng livestream on
+Youtube](https://www.youtube.com/watch?v=hEC_qbUXDo8). Please see video for
+further detailed discussion. The only changes made after the recording were some
+updates to the actual 4 shaders.
+
+## Usage
+
+Left click (or touch) on any of the squares to drag them. Right click to rotate.
+When clicking + dragging on empty space, the entire canvas contents will be
+moved / rotated.
+
+## Building
+
+Please also refer to the [example build
+instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions)
+on the wiki.
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2020 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/shader-graph/index.html b/examples/shader-graph/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>shader-graph</title>
+        <link
+            href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+            rel="stylesheet"
+        />
+        <style></style>
+    </head>
+    <body class="sans-serif bg-dark-gray">
+        <div>
+            <a
+                class="link"
+                href="https://github.com/thi-ng/umbrella/tree/develop/examples/shader-graph"
+                >Source code</a
+            >
+        </div>
+        <script type="text/javascript" src="./src/index.ts"></script>
+    </body>
+</html>
diff --git a/examples/shader-graph/package.json b/examples/shader-graph/package.json
@@ -0,0 +1,47 @@
+{
+    "name": "shader-graph",
+    "version": "0.0.1",
+    "description": "Minimal shader graph developed during livestream #2",
+    "repository": "https://github.com/thi-ng/umbrella",
+    "author": "Karsten Schmidt <[email protected]>",
+    "license": "Apache-2.0",
+    "scripts": {
+        "clean": "rm -rf .cache build out",
+        "build": "yarn clean && parcel build index.html -d out --public-url ./ --no-source-maps --no-cache --detailed-report --experimental-scope-hoisting",
+        "build:webpack": "../../node_modules/.bin/webpack --mode production",
+        "start": "parcel index.html -p 8080 --open --no-cache"
+    },
+    "devDependencies": {
+        "parcel-bundler": "^1.12.4",
+        "terser": "^4.8.0",
+        "typescript": "^3.9.5"
+    },
+    "dependencies": {
+        "@thi.ng/api": "latest",
+        "@thi.ng/matrices": "latest",
+        "@thi.ng/rstream": "latest",
+        "@thi.ng/rstream-gestures": "latest",
+        "@thi.ng/scenegraph": "latest",
+        "@thi.ng/shader-ast": "latest",
+        "@thi.ng/shader-ast-glsl": "latest",
+        "@thi.ng/shader-ast-stdlib": "latest",
+        "@thi.ng/vectors": "latest",
+        "@thi.ng/webgl": "latest"
+    },
+    "browserslist": [
+        "last 3 Chrome versions"
+    ],
+    "browser": {
+        "process": false
+    },
+    "thi.ng": {
+        "readme": [
+            "matrices",
+            "rstream-gestures",
+            "scenegraph",
+            "shader-ast",
+            "webgl"
+        ],
+        "screenshot": "examples/shader-graph.jpg"
+    }
+}
diff --git a/examples/shader-graph/src/api.ts b/examples/shader-graph/src/api.ts
@@ -0,0 +1,30 @@
+import { Fn4, IObjectOf } from "@thi.ng/api";
+import { Node2D } from "@thi.ng/scenegraph";
+import { Func, Sym } from "@thi.ng/shader-ast";
+import { GLSLTarget } from "@thi.ng/shader-ast-glsl";
+import { GLSL, GLVec, ModelSpec, Texture } from "@thi.ng/webgl";
+
+export interface AppCtx {
+    width: number;
+    height: number;
+    texSize: number;
+    canvas: HTMLCanvasElement;
+    gl: WebGLRenderingContext;
+    opQuad: ModelSpec;
+    mainQuad: ModelSpec;
+}
+
+export interface OpSpec {
+    main: OpShaderFn;
+    unis: IObjectOf<[GLSL, number | GLVec]>;
+    inputs: Texture[];
+    node: Node2D;
+}
+
+export type OpShaderFn = Fn4<
+    GLSLTarget,
+    IObjectOf<Sym<any>>,
+    IObjectOf<Sym<any>>,
+    IObjectOf<Sym<any>>,
+    (Sym<any> | Func<any>)[]
+>;