{"id":13678285,"url":"https://github.com/sakitam-fdd/rsbuild-plugin-glsl","last_synced_at":"2025-04-15T12:28:50.807Z","repository":{"id":251075135,"uuid":"836317552","full_name":"sakitam-fdd/rsbuild-plugin-glsl","owner":"sakitam-fdd","description":"An Rsbuild plugin to import inline (and compress) GLSL shader","archived":false,"fork":false,"pushed_at":"2024-07-31T16:51:31.000Z","size":1247,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T20:11:14.394Z","etag":null,"topics":["glsl","rsbuild","rsbuild-plugin","rspack"],"latest_commit_sha":null,"homepage":"https://blog.sakitam.com/rsbuild-plugin-glsl/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sakitam-fdd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-07-31T15:35:07.000Z","updated_at":"2024-08-01T02:06:04.000Z","dependencies_parsed_at":"2024-07-31T19:51:44.262Z","dependency_job_id":null,"html_url":"https://github.com/sakitam-fdd/rsbuild-plugin-glsl","commit_stats":null,"previous_names":["sakitam-fdd/rsbuild-plugin-glsl"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Frsbuild-plugin-glsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Frsbuild-plugin-glsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Frsbuild-plugin-glsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Frsbuild-plugin-glsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakitam-fdd","download_url":"https://codeload.github.com/sakitam-fdd/rsbuild-plugin-glsl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249071367,"owners_count":21207976,"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","rsbuild","rsbuild-plugin","rspack"],"created_at":"2024-08-02T13:00:51.948Z","updated_at":"2025-04-15T12:28:50.787Z","avatar_url":"https://github.com/sakitam-fdd.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Rsbuild Plugins"],"readme":"# rsbuild-plugin-glsl\n\nrsbuild-plugin-glsl is a Rsbuild plugin to process GLSL shader files.\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/rsbuild-plugin-glsl\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/rsbuild-plugin-glsl?style=flat-square\u0026colorA=444D56\u0026colorB=28A745\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=444D56\u0026colorB=28A745\" alt=\"license\" /\u003e\n\n  \u003ca href=\"https://github.com/sakitam-fdd/rsbuild-plugin-glsl/actions/workflows/ci.yml\" target=\"_blank\"\u003e\n    \u003cimg alt=\"CI\" src=\"https://github.com/sakitam-fdd/rsbuild-plugin-glsl/actions/workflows/ci.yml/badge.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\nInstall:\n\n```bash\nnpm i rsbuild-plugin-glsl -D\n\npnpm i rsbuild-plugin-glsl -D\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\n\nimport UnoCSS from '@unocss/postcss';\nimport { defineConfig } from '@rsbuild/core';\nimport { pluginGlsl } from 'rsbuild-plugin-glsl';\n\nimport { pluginReact } from '@rsbuild/plugin-react';\nimport { pluginLess } from '@rsbuild/plugin-less';\nimport AutoImport from 'unplugin-auto-import/rspack';\nimport { resolve } from 'path';\n\nimport IconsResolver from 'unplugin-icons/resolver';\n\nexport default defineConfig({\n  html: {\n    template: './index.html',\n  },\n  source: {\n    entry: {\n      index: './src/index.tsx',\n    },\n    alias: {\n      '@': resolve(__dirname, './src'),\n    },\n    define: {\n      'process.env.APP_TITLE': JSON.stringify(process.env.APP_TITLE),\n    },\n  },\n  output: {\n    externals: {\n      // 'mapbox-gl': 'mapboxgl',\n    },\n    assetPrefix: '/rsbuild-plugin-glsl/',\n  },\n  plugins: [pluginReact(), pluginLess(), pluginGlsl()],\n  tools: {\n    rspack: {\n      plugins: [\n        AutoImport({\n          // dts: path.resolve(pathSrc, 'typings', 'auto-imports.d.ts'),\n          dts: 'types/auto-imports.d.ts',\n          // dirs: ['./src/hooks'],\n          // Generate corresponding .eslintrc-auto-import.json file.\n          // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals\n          eslintrc: {\n            enabled: true,\n          },\n          imports: [\n            'react',\n            {\n              // 全局使用 _.xxxx()\n              'lodash-es': [\n                // default imports\n                ['*', '_'], // import { * as _ } from 'lodash-es',\n              ],\n            },\n          ],\n          // Auto import functions from UILibrary, e.g. Message, Spin, Loading, MessageBox... (with style)\n          resolvers: [\n            IconsResolver({\n              prefix: 'icon',\n              extension: 'jsx',\n              customCollections: ['custom'],\n            }),\n          ],\n        }),\n      ],\n    },\n    postcss: {\n      postcssOptions: {\n        plugins: [UnoCSS()],\n      },\n    },\n  },\n  server: {\n    proxy: {},\n  },\n});\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      \"rsbuild-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=\"rsbuild-plugin-glsl/ext\" /\u003e\n```\n\n## Options\n\n| Option  | Desc                                  | Type      | Default |\n|---------|---------------------------------------|-----------|---------|\n| root    | Directory for root imports            | `string`  | `/`     |\n| include | Glob pattern, RegExp for include file | `RegExp`  |   `/\\.(glsl|wgsl|vert|frag|vs|fs)$/`      |\n| exclude     | Glob pattern, RegExp for ignore       | `RegExp`  |     `undefined`   |\n| warnDuplicatedImports     | Warn if the same chunk was imported multiple times       | `boolean` | `true`  |\n| compress     | Compress output shader code      | `boolean` | `true`  |\n| defaultExtension     | Shader suffix when no extension is specified      | `string` | `glsl`  |\n\n- Example:\n\n```js\npluginGlsl({\n  include: /\\.(glsl|wgsl|vert|frag|vs|fs)$/,\n  exclude: undefined,\n  warnDuplicatedImports: true,\n  defaultExtension: 'glsl',\n  compress: false,\n  root: '/'\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├── rsbuild.config.ts\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\tprecision mediump float;\n#else\n\tprecision 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\tprecision mediump float;\n#else\n\tprecision 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## Acknowledgments\n\n- https://github.com/UstymUkhman/vite-plugin-glsl\n\n## License\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Frsbuild-plugin-glsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakitam-fdd%2Frsbuild-plugin-glsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Frsbuild-plugin-glsl/lists"}