Shader effect format
Portable
Portable is the open Portable Effects Format for writing Noisedeck-compatible shader effects in any editor, as a definition file plus GLSL and WGSL shaders.
- Free
- MIT license
- GLSL and WGSL
- Bring your own editor
Overview
The Portable Effects Format is an open standard for sharing shader effects across the Noise Factor tools. An effect is a folder with a definition.json file and GLSL or WGSL shader code. Write it in any editor, test it in the included viewer, and package it as a ZIP.
Noisedeck, Polymorphic, Foundry, and Visualize import Portable effects. Imported effects register in the user namespace and work in Polymorphic programs like built-in effects. Effects you create are your own.
Features
-
Minimal package
A definition.json file plus at least one shader directory. A help.md file is optional.
-
Two shader languages
GLSL for WebGL2 and WGSL for WebGPU. An effect with one language runs on that backend.
-
Typed parameters
float, int, boolean, vec2, vec3, and color parameters map to UI controls automatically.
-
Built-in uniforms
The runtime provides resolution, time, frame, and aspect to every shader.
-
Multi-pass effects
List several passes, each with its own inputs and outputs.
-
Starters and filters
Starter effects generate imagery; filter effects transform an input texture.
-
Local viewer
A full-page canvas with controls for each parameter and a WebGL and WebGPU toggle.
-
ZIP packaging
Package an effect with one command and import it in Noisedeck with import effect from zip.
Specifications
| Type | Open file format and reference viewer |
|---|---|
| Files | definition.json, glsl/, wgsl/, optional help.md, packaged as ZIP |
| Shader languages | GLSL ES 3.00 (WebGL2), WGSL (WebGPU) |
| Effect types | Starter and filter. Mixer, 3D, points, and render types are not supported yet. |
| Status | The specification is being finalized and can change. |
| Source | github.com/noisefactorllc/portable |
| License | MIT |
| Price | Free |
Get started
- Clone the Portable repository and copy an example effect.
- Edit
definition.jsonand the shader code in your editor. - Run the viewer with
npm run devand test both backends. - Run
npm run packageand import the ZIP in Noisedeck.
Resources
- Portable Effects Format: specification, examples, and viewer
- Noisedeck Foundry: browser editor for Portable effects
- Noisemaker shader documentation
- Noisemaker: a shader effects pipeline for the open web
Questions
- Which apps can load Portable effects?
- Noisedeck, Polymorphic, Foundry, and Visualize import Portable effect packages.
- Do I need both GLSL and WGSL?
- No. An effect needs at least one. An effect with only GLSL runs on WebGL2, and an effect with only WGSL runs on WebGPU.
- Who owns an effect I write?
- You do. The format is open under the MIT license, and effects you create are your own.