-
-
Notifications
You must be signed in to change notification settings - Fork 151
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(examples): add webgl-float-fbo example
- Loading branch information
1 parent
01b7a47
commit 814dd0a
Showing
10 changed files
with
228 additions
and
10 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # webgl-float-fbo | ||
|
|
||
|  | ||
|
|
||
| [Live demo](http://demo.thi.ng/umbrella/webgl-float-fbo/) | ||
|
|
||
| Basic demonstration of | ||
| [thi.ng/webgl](https://github.com/thi-ng/umbrella/tree/develop/packages/webgl) | ||
| multi-pass shader pipeline to draw (and accumulate traces of) a randomly | ||
| deforming polyline to a floating point offscreen buffer (FBO) before showing it | ||
| in the main canvas. | ||
|
|
||
| Please refer to the [example build | ||
| instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) | ||
| on the wiki. | ||
|
|
||
| ## Authors | ||
|
|
||
| - Karsten Schmidt | ||
|
|
||
| ## License | ||
|
|
||
| © 2022 Karsten Schmidt // Apache Software License 2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link | ||
| rel="icon" | ||
| href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>' | ||
| /> | ||
| <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>webgl-float-fbo · @thi.ng/umbrella</title> | ||
| <link href="https://unpkg.com/tachyons@4/css/tachyons.min.css" rel="stylesheet"> | ||
| <style> | ||
| </style> | ||
| </head> | ||
| <body class="sans-serif"> | ||
| <div id="app"></div> | ||
| <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-float-fbo">Source code</a></div> | ||
| <script type="module" src="/src/index.ts"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
| "name": "@example/webgl-float-fbo", | ||
| "version": "0.0.1", | ||
| "private": true, | ||
| "description": "TODO", | ||
| "repository": "https://github.com/thi-ng/umbrella", | ||
| "author": "Karsten Schmidt <k+npm@thi.ng>", | ||
| "license": "Apache-2.0", | ||
| "scripts": { | ||
| "start": "vite --open", | ||
| "build": "tsc && vite build --base='./'", | ||
| "preview": "vite preview --host --open" | ||
| }, | ||
| "devDependencies": { | ||
| "typescript": "^4.7.4", | ||
| "vite": "^3.0.4" | ||
| }, | ||
| "dependencies": { | ||
| "@thi.ng/colored-noise": "workspace:^", | ||
| "@thi.ng/logger": "workspace:^", | ||
| "@thi.ng/transducers": "workspace:^", | ||
| "@thi.ng/vectors": "workspace:^", | ||
| "@thi.ng/webgl": "workspace:^" | ||
| }, | ||
| "browser": { | ||
| "process": false | ||
| }, | ||
| "thi.ng": { | ||
| "readme": true, | ||
| "screenshot": "examples/webgl-float-fbo.jpg" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import { red } from "@thi.ng/colored-noise"; | ||
| import { ConsoleLogger } from "@thi.ng/logger"; | ||
| import { mapcat, normRange, repeatedly } from "@thi.ng/transducers"; | ||
| import { Vec2 } from "@thi.ng/vectors"; | ||
| import { | ||
| BLEND_NORMAL, | ||
| defMultiPass, | ||
| DrawMode, | ||
| glCanvas, | ||
| setLogger, | ||
| TextureFormat, | ||
| } from "@thi.ng/webgl"; | ||
|
|
||
| // configure logger to view generated shaders in console | ||
| setLogger(new ConsoleLogger("webgl")); | ||
|
|
||
| // config | ||
| const NUM_POINTS = 16; | ||
| const VEL_GAIN = 0.005; | ||
| const VEL_BIAS = 0.05 * VEL_GAIN; | ||
|
|
||
| // buffer to store point coordinates | ||
| // (all coordinates are in [-1,-1] .. [1,1] space) | ||
| const POSITIONS = new Float32Array([ | ||
| ...mapcat((x) => [x * 2 - 1, -1], normRange(NUM_POINTS - 1)), | ||
| ]); | ||
| // create memory mapped 2D vectors from buffer (i.e. modifying the coordinates | ||
| // of these vectors, automatically updates the above array at the corresponding | ||
| // indices) | ||
| // this isn't strictly necessary, but simplifies updating these points/buffer! | ||
| const POINTS = Vec2.mapBuffer(POSITIONS); | ||
|
|
||
| // pre-create a noise generator for each vertex | ||
| const VELOCITIES = [...repeatedly(() => red(32, VEL_GAIN), NUM_POINTS)]; | ||
|
|
||
| // create WebGL canvas | ||
| const { gl } = glCanvas({ | ||
| width: 512, | ||
| height: 512, | ||
| autoScale: false, | ||
| parent: document.body, | ||
| version: 2, | ||
| }); | ||
|
|
||
| // define multipass shader pipeline: | ||
| // 1st pass: render the geometry (polyline) to an offscreen buffer/texture | ||
| // 2nd pass: merely copy the offscreen texture to the main canvas | ||
| const pipeline = defMultiPass({ | ||
| gl, | ||
| width: gl.drawingBufferWidth, | ||
| height: gl.drawingBufferHeight, | ||
| // pre-declare/specify textures | ||
| textures: { | ||
| // use floating point texture format for offscreen | ||
| stage1: { format: TextureFormat.RGBA32F }, | ||
| }, | ||
| passes: [ | ||
| // 1st shader pass | ||
| { | ||
| // define modelspec & buffer(s) for polyline geometry | ||
| model: { | ||
| attribs: { | ||
| // only using 2D points, hence size=2 | ||
| position: { data: POSITIONS, size: 2 }, | ||
| }, | ||
| num: NUM_POINTS, | ||
| mode: DrawMode.LINE_STRIP, | ||
| }, | ||
| // shader pair | ||
| vs: `void main() { gl_Position = vec4(position, 0., 1.); }`, | ||
| fs: `void main() { output0 = color; }`, | ||
| // input textures (here none) | ||
| inputs: [], | ||
| // declare output textures | ||
| outputs: ["stage1"], | ||
| // custom shader attributes (MUST be same as defined above in `model`) | ||
| attribs: { | ||
| position: "vec2", | ||
| }, | ||
| // custom shader uniforms | ||
| // (here we're drawing with a very faint white, only 0.5% alpha) | ||
| uniforms: { | ||
| color: ["vec4", [1, 1, 1, 0.005]], | ||
| }, | ||
| // GL state flags/config | ||
| state: { | ||
| blend: true, | ||
| blendFn: BLEND_NORMAL, | ||
| }, | ||
| }, | ||
| // 2nd shader pass | ||
| { | ||
| // copy texture to main draw buffer | ||
| fs: `void main() { fragColor = texelFetch(input0, ivec2(gl_FragCoord.xy), 0); }`, | ||
| // use offscreen tex as input | ||
| inputs: ["stage1"], | ||
| // no outputs defined, means writing result to main | ||
| outputs: [], | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| // pre-fill the offscreen texture with background color | ||
| pipeline.fbos[0].bind(); | ||
| gl.clearColor(0, 0, 0, 1); | ||
| gl.clear(gl.COLOR_BUFFER_BIT); | ||
| pipeline.fbos[0].unbind(); | ||
|
|
||
| const update = () => { | ||
| // update y-position of vertices using their noise generators | ||
| POINTS.forEach((p, i) => (p.y += VELOCITIES[i].next().value! + VEL_BIAS)); | ||
| // update corresponding WebGL buffer | ||
| pipeline.models[0].attribs.position.buffer!.set(POSITIONS); | ||
| // execute pipeline | ||
| pipeline.update(); | ||
| // retrigger | ||
| requestAnimationFrame(update); | ||
| }; | ||
|
|
||
| update(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "include": ["src/**/*"], | ||
| "compilerOptions": { | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters