shader-lab
A powerful toolkit to create, stack, and animate shaders.
File Explorer
Download Latest Version (.zip)- no-anchor-element.grit
- no-relative-parent-imports.grit
- no-unnecessary-forwardref.grit
- README.md
- config.json
- media-load-retry.md
- README.md
- remote-asset-references.md
- xmcp-0-8.md
- canary.yml
- ci.yml
- release.yml
- call_graph.json
- languages.json
- extensions.json
- settings.json
- config.json
- generate-reference-data.ts
- bridge.ts
- proxy.ts
- shader-reference-data.ts
- shader-reference.ts
- shader-api.ts
- add-layer.ts
- add-media-layer.ts
- describe-layer-type.ts
- duplicate-layer.ts
- get-custom-shader.ts
- get-layer.ts
- get-project-state.ts
- get-shader-api-reference.ts
- list-layer-types.ts
- remove-layers.ts
- rename-layer.ts
- reorder-layer.ts
- reset-layer-params.ts
- screenshot.ts
- select-layer.ts
- set-layer-visibility.ts
- update-layer-params.ts
- update-layer.ts
- write-custom-shader.ts
- package.json
- README.md
- tsconfig.json
- xmcp-env.d.ts
- xmcp.config.ts
- BasementGrotesqueVF.woff2
- Geist-Mono.woff2
- Geist-Sans-VF.woff2
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 5.svg
- 6.svg
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 5.svg
- 6.svg
- blue-noise.png
- fonts.css
- fix-esm-specifiers.mjs
- prepare-dist.mjs
- three-tsl.d.ts
- three-webgpu.d.ts
- runtime.ts
- types.ts
- utils.ts
- shared.ts
- distance-transform.ts
- tonemapping.ts
- common.ts
- curl-noise-3d.ts
- curl-noise-4d.ts
- fbm.ts
- perlin-noise-3d.ts
- ridge-noise.ts
- simplex-noise-3d.ts
- simplex-noise-4d.ts
- turbulence.ts
- value-noise-3d.ts
- voronoi-noise-3d.ts
- bloom-edge-pattern.ts
- bloom.ts
- canvas-weave-pattern.ts
- grain-texture-pattern.ts
- repeating-pattern.ts
- atan2.ts
- complex-conj.ts
- complex-cos.ts
- complex-div.ts
- complex-log.ts
- complex-mobius.ts
- complex-mul.ts
- complex-pow.ts
- complex-sin.ts
- complex-sqrt.ts
- complex-tan.ts
- complex-to-polar.ts
- hyperbolic.ts
- index.ts
- rotate.ts
- screen-aspect-uv.ts
- sd-box-2d.ts
- sd-box-3d.ts
- sd-diamond.ts
- sd-rhombus.ts
- sd-sphere.ts
- smax.ts
- smin.ts
- cosine-palette.ts
- ascii-atlas.ts
- ascii-pass.ts
- asset-url.ts
- blend-modes.ts
- blob-label-atlas.ts
- blob-tracking-inner-effects.ts
- blob-tracking-pass.ts
- blob-tracking-tracker.ts
- bloom-pass.ts
- chromatic-aberration-pass.ts
- circuit-bent-pass.ts
- contracts.ts
- create-headless-renderer.ts
- create-webgpu-renderer.ts
- crt-pass.ts
- custom-shader-pass.ts
- custom-shader-runtime.ts
- directional-blur-pass.ts
- displacement-map-pass.ts
- dither-textures.ts
- dithering-pass.ts
- dual-filter-bloom.ts
- edge-detect-pass.ts
- fluid-pass.ts
- fluted-glass-pass.ts
- gradient-pass.ts
- grid-render-pass.ts
- halftone-pass.ts
- ink-pass.ts
- live-pass.ts
- magnify-lens-pass.ts
- media-pass.ts
- media-texture.ts
- particle-grid-pass.ts
- pass-node.ts
- pattern-atlas.ts
- pattern-pass.ts
- pipeline-manager.ts
- pixel-sorting-pass.ts
- pixel-trail-pass.ts
- pixelation-pass.ts
- plotter-pass.ts
- posterize-pass.ts
- slice-pass.ts
- smear-pass.ts
- text-fonts.ts
- text-pass.ts
- threshold-pass.ts
- voxel-pass.ts
- editor.ts
- easings.ts
- index.ts
- runtime-clock.ts
- runtime-frame.ts
- shader-lab-canvas-source.ts
- shader-lab-composition.tsx
- shader-lab-postprocessing-source.ts
- shader-lab-texture-source.ts
- timeline.ts
- types.ts
- use-shader-lab-canvas-source.ts
- use-shader-lab-postprocessing-source.ts
- use-shader-lab-texture-source.ts
- use-shader-lab-texture.ts
- use-shader-lab.ts
- CHANGELOG.md
- package.json
- README.md
- tsconfig.build.json
- tsconfig.json
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 5.svg
- 6.svg
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 1.svg
- 2.svg
- 3.svg
- 4.svg
- 5.svg
- 6.svg
- ascii.webp
- blob-tracking.webp
- chromatic-aberration.webp
- circuit-bent.webp
- crt.webp
- directional-blur.webp
- displacement-map.webp
- dithering.webp
- edge-detect.webp
- fluted-glass.webp
- halftone.webp
- ink.webp
- particle-grid.webp
- pattern.webp
- pixel-sorting.webp
- pixelation.webp
- plotter.webp
- posterize.webp
- progressive-blur.webp
- slice.webp
- threshold.webp
- voxel.webp
- Adhesion-Regular.woff2
- B-Mecha-Regular.woff2
- Blob-Regular.woff2
- BasementGrotesqueVF.woff2
- Bunker-Regular.woff2
- Caniche-VF.woff2
- Carpenter-Regular.woff2
- Curia-Regular.woff2
- FFFlauta-100.woff2
- FFFlauta-200.woff2
- FFFlauta-300.woff2
- FFFlauta-400.woff2
- Geist-Mono.woff2
- Geist-Sans-VF.woff2
- Numero-Regular.woff2
- Trovador-Regular.woff2
- Xer0-Regular.woff2
- aura.mp4
- aura.ogg
- blue-noise.png
- crt-mask.png
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- page.tsx
- opengraph-image.tsx
- page.tsx
- opengraph-image.tsx
- page.tsx
- page.tsx
- page.tsx
- favicon.ico
- global-error.tsx
- globals.css
- layout.tsx
- not-found.tsx
- opengraph-image.png
- page.tsx
- robots.ts
- sitemap.ts
- twitter-image.png
- auth-complete-handoff.tsx
- auth-menu.tsx
- author-avatar.tsx
- author-link.tsx
- community-modal.tsx
- delete-scene-control.tsx
- draft-card.tsx
- drafts-grid.tsx
- empty-state.tsx
- like-button.tsx
- my-scenes-grid.tsx
- open-in-editor.tsx
- profile-header.tsx
- profile-owner-actions.tsx
- profile-panel.tsx
- public-scene-card.tsx
- public-scene-effect-filter.tsx
- public-scene-grid.tsx
- publish-dialog.tsx
- remix-credit.tsx
- report-control.tsx
- scene-card.tsx
- scene-detail.tsx
- scene-empty-state.tsx
- scene-grid.ts
- scene-load-more.tsx
- scene-tag.tsx
- shader-consent-dialog.tsx
- share-scene-button.tsx
- user-settings-dialog.tsx
- audio-envelope-backdrop.tsx
- agent-bridge-mount.tsx
- agent-connect-panel.tsx
- audio-link-button.tsx
- audio-source-control.tsx
- audio-spectrum-display.tsx
- autosave-mount.tsx
- blob-inner-effect-section.tsx
- curve-editor.tsx
- draft-save-mount.tsx
- editor-canvas-viewport.tsx
- editor-export-dialog.tsx
- editor-shortcuts.tsx
- editor-timeline-overlay.tsx
- editor-topbar.tsx
- floating-desktop-panel.tsx
- layer-picker.tsx
- layer-sidebar.tsx
- mobile-editor-dock.tsx
- properties-sidebar-content.tsx
- properties-sidebar-fields.tsx
- properties-sidebar-measure.tsx
- properties-sidebar-utils.ts
- properties-sidebar.tsx
- scene-config-content.tsx
- use-bottom-offset-above-timeline.ts
- use-mobile-canvas-fit.ts
- shader-lab-page.tsx
- index.tsx
- index.tsx
- link.tsx
- variants.ts
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- link.tsx
- variants.ts
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- index.tsx
- editor-export-dialog.module.css
- runtime.ts
- types.ts
- use-audio-monitor.ts
- use-band-value-element.ts
- use-displayed-timeline-time.ts
- use-editor-renderer.ts
- client.ts
- commands.ts
- compile-events.ts
- frame-pump.ts
- protocol.ts
- screenshot.ts
- index.ts
- minimal.ts
- shader-lab-sounds.ts
- client.ts
- server.ts
- sign-in.ts
- trace.ts
- inner-effects.ts
- tracker.ts
- bot-check.ts
- bot-protected-routes.ts
- cache-tags.ts
- config.ts
- engagement.ts
- env.ts
- handle-rename.ts
- handle.ts
- language.ts
- lineage.ts
- merge-scenes.ts
- moderation.ts
- profile.ts
- profiles.ts
- public-profiles.ts
- public-scenes.ts
- publish-client.ts
- publish.ts
- r2.ts
- report-reasons.ts
- scene-cursor.ts
- scene-effect-filter.ts
- scene-links.ts
- scenes.ts
- upload-limits.ts
- use-community-unread.ts
- use-scene-pages.ts
- index.ts
- schema.ts
- analysis-protocol.ts
- analysis.worker.ts
- analyze-client.ts
- bands.ts
- decode.ts
- envelope-lookup.ts
- envelope.ts
- export-audio.ts
- fft.ts
- link-defaults.ts
- links.ts
- live-band-driver.ts
- modulate.ts
- spectrogram.ts
- spectrum-path.ts
- assets.ts
- bus.ts
- idb.ts
- limits.ts
- record.ts
- resume.ts
- scheduler.ts
- store.ts
- suppress.ts
- triggers.ts
- layer-catalog.ts
- layer-registry.ts
- shared.ts
- evaluate.ts
- binding-key.ts
- composition.ts
- crt-ab-harness.ts
- default-project.json
- default-project.ts
- draft-save-bus.ts
- export.ts
- fluid-interaction-recorder.ts
- history.ts
- is-editable-target.ts
- layers.ts
- live-video-recorder.ts
- media-file.ts
- parameter-schema.ts
- preview-render-lock.ts
- project-file.ts
- remote-asset.ts
- requested-scene-slug.ts
- shader-export-snippet.ts
- shader-export.ts
- text-fonts.ts
- timeline-duration.ts
- video-export-encoder.ts
- view-transform.ts
- distance-transform.ts
- app.ts
- cn.ts
- color-curves.ts
- easing-curve.ts
- easings.ts
- fonts.ts
- format-number.ts
- plural.ts
- read-env.ts
- renderer-boot.ts
- sentry-sampling.ts
- webgpu-diagnostics.ts
- tonemapping.ts
- common.ts
- curl-noise-3d.ts
- curl-noise-4d.ts
- fbm.ts
- perlin-noise-3d.ts
- ridge-noise.ts
- simplex-noise-3d.ts
- simplex-noise-4d.ts
- turbulence.ts
- value-noise-3d.ts
- voronoi-noise-3d.ts
- bloom-edge-pattern.ts
- bloom.ts
- canvas-weave-pattern.ts
- grain-texture-pattern.ts
- repeating-pattern.ts
- atan2.ts
- complex-conj.ts
- complex-cos.ts
- complex-div.ts
- complex-log.ts
- complex-mobius.ts
- complex-mul.ts
- complex-pow.ts
- complex-sin.ts
- complex-sqrt.ts
- complex-tan.ts
- complex-to-polar.ts
- hyperbolic.ts
- index.ts
- rotate.ts
- screen-aspect-uv.ts
- sd-box-2d.ts
- sd-box-3d.ts
- sd-diamond.ts
- sd-rhombus.ts
- sd-sphere.ts
- smax.ts
- smin.ts
- cosine-palette.ts
- ascii-atlas.ts
- ascii-pass.ts
- blend-modes.ts
- blob-label-atlas.ts
- blob-tracking-pass.ts
- bloom-pass.ts
- chromatic-aberration-pass.ts
- circuit-bent-pass.ts
- contracts.ts
- create-webgpu-renderer.ts
- crt-pass.ts
- custom-shader-pass.ts
- custom-shader-runtime.ts
- directional-blur-pass.ts
- displacement-map-pass.ts
- dither-textures.ts
- dithering-pass.ts
- dual-filter-bloom.ts
- edge-detect-pass.ts
- fluid-pass.ts
- fluted-glass-pass.ts
- gradient-pass.ts
- grid-render-pass.ts
- halftone-pass.ts
- ink-pass.ts
- layer-media-error.ts
- live-pass.ts
- magnify-lens-pass.ts
- media-pass.ts
- media-texture.ts
- particle-grid-pass.ts
- pass-failure.ts
- pass-node-factory.ts
- pass-node.ts
- pattern-atlas.ts
- pattern-pass.ts
- pipeline-manager.ts
- pixel-sorting-pass.ts
- pixel-trail-pass.ts
- pixelation-pass.ts
- plotter-pass.ts
- posterize-pass.ts
- project-clock.ts
- scene-post-process.ts
- slice-pass.ts
- smear-pass.ts
- text-pass.ts
- threshold-pass.ts
- voxel-pass.ts
- agent-bridge-store.ts
- asset-store.ts
- audio-store.ts
- draft-store.ts
- editor-store.ts
- history-store.ts
- index.ts
- layer-store.ts
- metrics-store.ts
- remix-origin-store.ts
- sound-store.ts
- timeline-store.ts
- assets.d.ts
- basementstudio-shader-lab.d.ts
- css.d.ts
- editor.ts
- react.d.ts
- three-tsl.d.ts
- three-webgpu.d.ts
- instrumentation-client.ts
- instrumentation.ts
- middleware.ts
- .editorconfig
- .env.example
- .gitattributes
- .gitignore
- .mcp.json
- .tldrignore
- biome.json
- bun.lock
- drizzle.config.ts
- LICENSE.md
- next.config.ts
- package.json
- postcss.config.mjs
- README.md
- tsconfig.json
# Installation Guide
1. Get the code
git clone https://github.com/basementstudio/shader-lab
Downloads the entire project code from GitHub to your computer.
cd shader-lab
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install @basementstudio/shader-lab three
Downloads and installs the libraries listed in package.json.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
Pulled directly from this repo's README.
// repository documentation
Was this content helpful?
(0 ratings)