MaterialX Playground is a set of tools for in-browser interactive visualization of the standard node library, preview materials in real-time 3D, and build node graphs visually, all without installing anything. Everything runs 100% client-side: no server, no account, no data leaves your browser. Shaders are generated and compiled live in your browser through the MaterialX WebAssembly modules.
This is an independent community project. It is not affiliated with, endorsed by, or sponsored by the MaterialX project, the Academy Software Foundation, or the Linux Foundation. In case of any discrepancy, the MaterialX specification is the definitive source of truth. See Trademarks below.
Built on the MaterialX v1.39.5 WebAssembly modules (core and shader generation).
A searchable, browsable reference for the entire MaterialX standard node library.
- Every standard node, organized by library (
stdlib,pbrlib,bxdf, and more) and group (npr,pbr, etc.). - Per-signature documentation. Nodes with multiple type signatures are shown individually, so you see exactly the inputs, outputs, and defaults of the variant you are searching for.
- Port tables generated directly from the node definitions (names, types, defaults, descriptions), with prose pulled from the MaterialX specification where available and reconstructed from the
nodedefs where it isn't. - Live 3D preview of each node, with editable parameters so you can see how inputs affect the result in real time.
- Implementation-target matrix showing which render targets (GLSL, ESSL, MSL, Slang, OSL, MDL) each node supports, including coverage inherited through target inheritance (e.g. MSL/Slang/ESSL falling back to the GLSL implementation), distinguished from explicit per-target overrides.
- Shareable permalinks. Every node has its own URL (
index.html#/<library>/<group>/<node>), so you can link straight to a specific node's docs. - Export and hand-off. Export any node (with your edited values) as a
.mtlxdocument, or send it straight into the Node Graph Editor.
Load and inspect MaterialX materials in 3D.
- Image-based lighting from a built-in HDR environment (always on). A toggle shows or hides that environment as the visible backdrop; the lighting itself is unaffected either way.
- Drag-and-drop loading. Drop a
.mtlxdocument anywhere on the page, on its own or together with loose textures, a folder of textures, or a.zip. Textures are matched by relative path, with a UV-checker fallback for anything unresolved. - Interactive viewport with orbit (drag) and zoom (wheel/pinch), an optional turntable rotation, selectable preview geometry (shaderball / sphere / cube), a material picker when a document defines several, a save-PNG-preview button, and fullscreen.
- Send to editor to keep working on the current material in the Node Graph Editor.
Build MaterialX node graphs visually.
- Drag-and-drop graph editing built on React Flow, with an add-node search (filterable by type) and automatic wiring.
- Quick insert from a wire. Drag a connection from any port and release it over empty canvas to pick a compatible node, pre-filtered and wired up automatically.
- Nested nodegraphs. Enter and edit nodegraph scopes with breadcrumb navigation back out, and group the current selection into a new nodegraph in one step.
- Undo/redo across edits, including structural ones.
- Live 3D preview of the selected node or output, with a pin option to freeze the preview on a specific node while you work elsewhere.
- Copy/paste that preserves the relative arrangement of a group of nodes.
- One-click automatic layout of the current graph.
- Document colorspace picker, setting the fallback colorspace for inputs that don't author their own.
- Non-destructive disconnects. Removing a connection or deleting an upstream node restores the input's previous literal value where possible, and falls back to the definition default otherwise.
- Document view to inspect the generated MaterialX XML with syntax highlighting, and copy it.
- Validate the current document and see errors and warnings.
- Import/export
.mtlx, including materials handed off from the docs previewer or the Material Viewer.
There is no build step. The app is plain static files plus CDN-hosted libraries, so you just need to serve the folder over HTTP (opening index.html directly via file:// won't work, because the app fetches its .jsx, WASM, and library files). You'll need a WebGL2-capable browser, and internet access at runtime since the third-party libraries load from public CDNs.
Any static file server works, for example:
# Python 3
python -m http.server 8000
# or Node
npx serve .Then open http://localhost:8000/.
The app is a hash-routed single page:
| View | URL |
|---|---|
| Home | index.html (or #!home) |
| Node Library & Documentation | index.html#!docs (deep links: #/<library>/<group>/<node>) |
| Material Viewer | index.html#!viewer |
| Node Graph Editor | index.html#!graph |
Verbose console output is off by default. Two opt-in flags can be set in the browser console (reload afterwards):
localStorage.setItem('mtlxDebugShaders', '1'); // log generated GLSL, uniforms, and preview documents
localStorage.setItem('mtlxPerfLog', '1'); // log graph-editor timing (scope builds, layout, previews)Remove the keys (localStorage.removeItem(...)) and reload to turn them off again.
libraries/ vendors the MaterialX standard library (stdlib, pbrlib, bxdf, cmlib, lights, nprlib, targets), which the WASM loads to resolve node definitions, implementations, and target inheritance.
- MaterialX (WebAssembly build: core + GenShader)
- React 18 (UMD) + Babel Standalone (in-browser JSX)
- three.js for the 3D previews
- React Flow for the node graph editor, with dagre for automatic layout
- Tailwind CSS (CDN) for styling
- KaTeX for math in the docs, highlight.js for XML highlighting, JSZip for zipped texture sets
Currently, all third-party libraries, except MaterialX, are loaded from public CDNs at runtime.
Issues and pull requests are welcome. Please file bugs and feature requests via the issue tracker.
Released under the Apache License 2.0. The MaterialX standard libraries vendored under libraries/ are © the Academy Software Foundation and its contributors, also under the Apache License 2.0.
MaterialX™ is a trademark of the Academy Software Foundation, a project of the Linux Foundation. All other trademarks are the property of their respective owners.
References to MaterialX in this project are nominative and descriptive only, used to identify the technology this tool works with. This project is not affiliated with, endorsed by, or sponsored by the MaterialX project, the Academy Software Foundation, or the Linux Foundation. This project does not use the MaterialX logo, and nothing here should be read as implying any official status. Where this document and any policy published by the Academy Software Foundation differ, the Foundation's policy governs.