Skip to content

Instantly share code, notes, and snippets.

@davo

davo/troubleshooting_shaders.md

Last active October 19, 2022 19:55
Show Gist options
  • Save davo/0e88795a8df8eb062f6649ac550e80bb to your computer and use it in GitHub Desktop.
Save davo/0e88795a8df8eb062f6649ac550e80bb to your computer and use it in GitHub Desktop.
Download ZIP
Using Lygia shaders with web technologies
Raw
troubleshooting_shaders.md

Shaders: fetching / parsing strategies on web based REPLs

  • vite-glsl: Using this Vite plugin to import local dependencies, or load inline shaders. Github Repo by Ustym Ukhman.

  • glslfy: Node module based, combined with babel-parse-glsl allows to inject shaders with dependencies declared on the package.json. Commonly used in three.js & react-three-fiber. Github Repo part of the Stack.gl project.

  • glslify-loader: glslify loader module for webpack. Commonly used with React-based frameworks like Next.js. Github Repo.

  • html script: via scrip tag with x-script attribute. Common among old three.js articles. Demo: Minimal three.js shader example by Kyle McDonald.

  • lygia as a service: using a script to parse the local /lygia dependencies and directly load them from lygia.xyz. By PGV.

Lygia, Examples in the wild

  • P5.js by PGV, Demo
  • Observable, Demo
  • Three.js by PGV + Akella, Github Repo
  • Codepen [soon]
  • Codesandbox - Three.js [soon]
  • Codesandbox - React Three Fiber [soon]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment