{"id":14977027,"url":"https://github.com/ustymukhman/vite-plugin-glsl","last_synced_at":"2025-05-16T04:04:18.058Z","repository":{"id":41378194,"uuid":"371776599","full_name":"UstymUkhman/vite-plugin-glsl","owner":"UstymUkhman","description":":spider_web: Import, inline (and minify) GLSL/WGSL shader files :electric_plug:","archived":false,"fork":false,"pushed_at":"2025-04-17T20:48:09.000Z","size":199,"stargazers_count":357,"open_issues_count":0,"forks_count":26,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-16T04:04:17.158Z","etag":null,"topics":["babylonjs","glsl","glsl-shaders","lygia","plugin","shaders","threejs","vite","vite-plugin","vitejs","webgl","webgl-shaders","webgpu","webgpu-shaders","wgsl","wgsl-shaders"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-glsl","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UstymUkhman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-28T17:40:25.000Z","updated_at":"2025-05-09T01:09:08.000Z","dependencies_parsed_at":"2024-01-07T18:04:47.573Z","dependency_job_id":"44154657-af99-4690-93ea-5aff7b841b5c","html_url":"https://github.com/UstymUkhman/vite-plugin-glsl","commit_stats":{"total_commits":55,"total_committers":8,"mean_commits":6.875,"dds":"0.38181818181818183","last_synced_commit":"20078756670032d1c63b25a49230b52be3ba2591"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UstymUkhman%2Fvite-plugin-glsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UstymUkhman%2Fvite-plugin-glsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UstymUkhman%2Fvite-plugin-glsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UstymUkhman%2Fvite-plugin-glsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UstymUkhman","download_url":"https://codeload.github.com/UstymUkhman/vite-plugin-glsl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babylonjs","glsl","glsl-shaders","lygia","plugin","shaders","threejs","vite","vite-plugin","vitejs","webgl","webgl-shaders","webgpu","webgpu-shaders","wgsl","wgsl-shaders"],"created_at":"2024-09-24T13:54:54.431Z","updated_at":"2025-05-16T04:04:18.037Z","avatar_url":"https://github.com/UstymUkhman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite Plugin GLSL #\n\n\u003e Import, inline (and minify) GLSL/WGSL shader files\n\n![npm](https://img.shields.io/npm/dt/vite-plugin-glsl?style=flat-square)\n![GitHub package.json version](https://img.shields.io/github/package-json/v/UstymUkhman/vite-plugin-glsl?color=brightgreen\u0026style=flat-square)\n![GitHub](https://img.shields.io/github/license/UstymUkhman/vite-plugin-glsl?color=brightgreen\u0026style=flat-square)\n\n_Inspired by [threejs-glsl-loader](https://github.com/MONOGRID/threejs-glsl-loader) and [vite-plugin-string](https://github.com/aweikalee/vite-plugin-string), compatible with [Babylon.js](https://www.babylonjs.com/), [three.js](https://threejs.org/) and [lygia](https://lygia.xyz/)._\n\n## Installation ##\n\n```sh\nnpm i vite-plugin-glsl --save-dev\n# or\nyarn add vite-plugin-glsl --dev\n# or\npnpm add -D vite-plugin-glsl\n# or\nbun add vite-plugin-glsl --dev\n```\n\n## Usage ##\n\n```js\n// vite.config.js\nimport glsl from 'vite-plugin-glsl';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [glsl()]\n});\n```\n\n### With TypeScript ###\n\nAdd extension declarations to your [`types`](https://www.typescriptlang.org/tsconfig#types) in `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"vite-plugin-glsl/ext\"\n    ]\n  }\n}\n```\n\nor as a [package dependency directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) to your global types:\n\n```ts\n/// \u003creference types=\"vite-plugin-glsl/ext\" /\u003e\n```\n\n## Default Options ##\n\n```js\nglsl({\n  include: [                      // Glob pattern, or array of glob patterns to import\n    '**/*.glsl', '**/*.wgsl',\n    '**/*.vert', '**/*.frag',\n    '**/*.vs', '**/*.fs'\n  ],\n  exclude: undefined,             // Glob pattern, or array of glob patterns to ignore\n  warnDuplicatedImports: true,    // Warn if the same chunk was imported multiple times\n  removeDuplicatedImports: false, // Automatically remove an already imported chunk\n  defaultExtension: 'glsl',       // Shader suffix when no extension is specified\n  minify: false,                  // Minify/optimize output shader code\n  watch: true,                    // Recompile shader on change\n  root: '/'                       // Directory for root imports\n})\n```\n\n## Example ##\n\n```\nroot\n├── src/\n│   ├── glsl/\n│   │   ├── chunk0.frag\n│   │   ├── chunk3.frag\n│   │   ├── main.frag\n│   │   ├── main.vert\n│   │   └── utils/\n│   │       ├── chunk1.glsl\n│   │       └── chunk2.frag\n│   └── main.js\n├── vite.config.js\n└── package.json\n```\n\n```js\n// main.js\nimport fragment from './glsl/main.frag';\n```\n\n```glsl\n// main.frag\n#version 300 es\n\n#ifndef GL_FRAGMENT_PRECISION_HIGH\n  precision mediump float;\n#else\n  precision highp float;\n#endif\n\nout vec4 fragColor;\n\n#include chunk0.frag;\n\nvoid main (void) {\n  fragColor = chunkFn();\n}\n```\n\n```glsl\n// chunk0.frag\n\n// \".glsl\" extension will be added automatically:\n#include utils/chunk1;\n\nvec4 chunkFn () {\n  return vec4(chunkRGB(), 1.0);\n}\n```\n\n```glsl\n// utils/chunk1.glsl\n\n#include chunk2.frag;\n#include ../chunk3.frag;\n\nvec3 chunkRGB () {\n  return vec3(chunkRed(), chunkGreen(), 0.0);\n}\n```\n\n```glsl\n// utils/chunk2.frag\n\nfloat chunkRed () {\n  return 0.0;\n}\n```\n\n```glsl\n// chunk3.frag\n\nfloat chunkGreen () {\n  return 0.8;\n}\n```\n\nWill result in:\n\n```glsl\n// main.frag\n#version 300 es\n\n#ifndef GL_FRAGMENT_PRECISION_HIGH\n  precision mediump float;\n#else\n  precision highp float;\n#endif\n\nout vec4 fragColor;\n\nfloat chunkRed () {\n  return 0.0;\n}\n\nfloat chunkGreen () {\n  return 0.8;\n}\n\nvec3 chunkRGB () {\n  return vec3(chunkRed(), chunkGreen(), 0.0);\n}\n\nvec4 chunkFn () {\n  return vec4(chunkRGB(), 1.0);\n}\n\nvoid main (void) {\n  fragColor = chunkFn();\n}\n```\n\n## Change Log ##\n\n- Starting from `v1.4.0` `compress` option was renamed to `minify` and now it allows a promise callback.\n\n- Starting from `v1.3.2` this plugin allows to automatically remove already imported chunks with the `removeDuplicatedImports` option set to `true`.\n\n- Starting from `v1.3.1` this plugin is fully compatible with `vite^6.0.0`.\n\n- Starting from `v1.3.0` this plugin will not remove comments starting with `///`, unless `compress` option is set to `true`.\n\n- Starting from `v1.2.0` this plugin is fully compatible with `vite^5.0.0`.\n\n- Starting from `v1.1.1` this plugin has a complete TypeScript support. Check \"Usage\" \u003e \"With TypeScript\" for more info.\n\n- Starting from `v1.0.0` this plugin is fully compatible with `vite^4.0.0`.\n\n- Starting from `v0.5.4` this plugin supports custom `compress` callback function to optimize output shader length after all shader chunks have been included.\n\n- Starting from `v0.5.0` this plugin supports shaders hot reloading when `watch` option is set to `true`.\n\n- Starting from `v0.4.0` this plugin supports chunk imports from project root and `root` option to override the default root directory.\n\n- Starting from `v0.3.0` this plugin is pure [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). Consider updating your project to an ESM module by adding `\"type\": \"module\"` in your `package.json` or consult [this](https://github.com/UstymUkhman/vite-plugin-glsl/issues/16) issue for possible workarounds.\n\n- Starting from `v0.2.2` this plugin supports `compress` option to optimize output shader length. You might consider setting this to `true` in production environment.\n\n- Starting from `v0.2.0` this plugin uses a config object as a single argument to `glsl` function and allows to disable import warnings with the `warnDuplicatedImports` param set to `false`.\n\n- Starting from `v0.1.5` this plugin warns about duplicated chunks imports and throws an error when a recursive loop occurres.\n\n- Starting from `v0.1.2` this plugin generates sourcemaps using vite esbuild when the `sourcemap` [option](https://github.com/UstymUkhman/vite-plugin-glsl/blob/main/vite.config.js#L5) is set to `true`.\n\n- Starting from `v0.1.0` this plugin supports WebGPU shaders with `.wgsl` extension.\n\n- Starting from `v0.0.9` this plugin supports optional semicolons at the end of `#include` statements.\n\n- Starting from `v0.0.7` this plugin supports optional single and double quotation marks around file names.\n\n### Note: ###\n\nWhen used with [three.js](https://github.com/mrdoob/three.js) r0.99 and higher, it's possible to include shader chunks as specified in the [documentation](https://threejs.org/docs/index.html?q=Shader#api/en/materials/ShaderMaterial), those imports will be ignored by `vite-plugin-glsl` since they are handled internally by the library itself:\n\n```glsl\n#include \u003ccommon\u003e\n\nvec3 randVec3 (const in vec2 uv) {\n  return vec3(\n    rand(uv * 0.1), rand(uv * 2.5), rand(uv)\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fustymukhman%2Fvite-plugin-glsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fustymukhman%2Fvite-plugin-glsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fustymukhman%2Fvite-plugin-glsl/lists"}