{"id":17967523,"url":"https://github.com/YunYouJun/unplugin-glsl","last_synced_at":"2025-03-25T08:31:19.875Z","repository":{"id":211844292,"uuid":"704855774","full_name":"YunYouJun/unplugin-glsl","owner":"YunYouJun","description":"🔌 Import, inline (and compress) GLSL shader files","archived":false,"fork":false,"pushed_at":"2023-12-15T08:15:15.000Z","size":527,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T15:49:07.281Z","etag":null,"topics":["glsl","shaders","unplugin","vite","webgl"],"latest_commit_sha":null,"homepage":"https://unplugin-glsl.pages.dev","language":"TypeScript","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/YunYouJun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["YunYouJun"]}},"created_at":"2023-10-14T09:58:18.000Z","updated_at":"2024-05-20T08:08:26.000Z","dependencies_parsed_at":"2023-12-14T15:29:18.594Z","dependency_job_id":"8a391592-302e-461b-b297-94f2519ba952","html_url":"https://github.com/YunYouJun/unplugin-glsl","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"36ae9f951462cf6da52dbadbd97e07b33e819fdf"},"previous_names":["yunyoujun/unplugin-glsl"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YunYouJun%2Funplugin-glsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YunYouJun%2Funplugin-glsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YunYouJun%2Funplugin-glsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YunYouJun%2Funplugin-glsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YunYouJun","download_url":"https://codeload.github.com/YunYouJun/unplugin-glsl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245335725,"owners_count":20598552,"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":["glsl","shaders","unplugin","vite","webgl"],"created_at":"2024-10-29T14:09:03.413Z","updated_at":"2025-03-25T08:31:19.838Z","avatar_url":"https://github.com/YunYouJun.png","language":"TypeScript","readme":"# unplugin-glsl\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-glsl)](https://www.npmjs.com/package/unplugin-glsl)\n\nImport, inline (and compress) `GLSL` shader files, compatible with [Vite](https://vitejs.dev/), [Rollup](\nhttps://rollupjs.org/guide/en/), [Webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/) and [Rspack](https://www.rspack.dev/) by [unplugin](https://github.com/unjs/unplugin).\n\n\u003e `@import` will be converted to `#include`.\n\n## Example\n\n[Demo](https://unplugin-glsl.pages.dev/)\n\n```glsl\nprecision highp float;\n\n#include /glsl/chunk0.frag;\n\nout highp vec4 fragColor;\n\nvoid main (void) {\n  fragColor = chunkFn();\n}\n\n@import ./import/imported.glsl;\n```\n\n## Usage\n\n```bash\npnpm add unplugin-glsl\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```ts\nglsl({\n  include: [ // Glob pattern, or array of glob patterns to import\n    '**/*.glsl',\n    '**/*.wgsl',\n    '**/*.vert',\n    '**/*.frag',\n    '**/*.vs',\n    '**/*.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  defaultExtension: 'glsl', // Shader suffix when no extension is specified\n  compress: false, // Compress output shader code\n  watch: true, // Recompile shader on change\n  root: '/' // Directory for root imports\n})\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport GLSL from 'unplugin-glsl/vite'\n\nexport default defineConfig({\n  plugins: [\n    GLSL({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport GLSL from 'unplugin-glsl/rollup'\n\nexport default {\n  plugins: [\n    GLSL({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nconst glsl = require('unplugin-glsl/webpack').default\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    glsl({ /* options */ })\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    ['unplugin-glsl/nuxt', { /* options */ }],\n  ],\n})\n```\n\n\u003e This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport GLSL from 'unplugin-glsl/esbuild'\n\nbuild({\n  plugins: [GLSL()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Why unplugin-glsl?\n\nWe need `@import` in [webpack-glsl-loader](https://www.npmjs.com/package/webpack-glsl-loader#imports), which is not supported in [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl).\n\nAnd uniform performance across different build tools.\n\n- See [Closed | feat: Added support for @import](https://github.com/UstymUkhman/vite-plugin-glsl/pull/45)\n\n## Dev\n\n- Install: `pnpm i`\n- Dev: `pnpm run dev`\n- Release: `pnpm run release`\n\n## Ref\n\n- [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl)\n- [webpack-glsl-loader](https://www.npmjs.com/package/webpack-glsl-loader)\n- [glslify](https://github.com/glslify/glslify)\n","funding_links":["https://github.com/sponsors/YunYouJun"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYunYouJun%2Funplugin-glsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYunYouJun%2Funplugin-glsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYunYouJun%2Funplugin-glsl/lists"}