{"id":25284,"library":"esbuild-glsl","title":"esbuild-plugin-webgl","description":"ESBuild plugin to load WebGL shaders from .glsl files, enabling direct import of GLSL shader code into JavaScript or TypeScript projects. Current stable version is 0.0.3 (released Jan 2025). Actively maintained with TypeScript support and shader minification. Differentiators: lightweight, integrates with esbuild and tsup, and compresses shader source for smaller bundles. Designed for WebGL, WebGPU, and Three.js projects needing separate shader files.","status":"active","version":"0.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/react18-tools/esbuild-plugin-webgl","tags":["javascript","ESBuild","WebGL","WebGL shaders","WebGL loader","GLSL","shader","ESBuild plugin","loaders","typescript"],"install":[{"cmd":"npm install esbuild-glsl","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-glsl","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-glsl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – plugin only works with esbuild build tool.","package":"esbuild","optional":false}],"imports":[{"note":"Package is ESM-only; CommonJS require will throw error.","wrong":"const webglPlugin = require('esbuild-plugin-webgl')","symbol":"webglPlugin","correct":"import { webglPlugin } from 'esbuild-plugin-webgl'"},{"note":"ShaderSource is a TypeScript type export; use import type for correct tree-shaking.","wrong":"import { ShaderSource } from 'esbuild-plugin-webgl'","symbol":"ShaderSource","correct":"import type { ShaderSource } from 'esbuild-plugin-webgl'"}],"quickstart":{"code":"// quickstart.ts\nimport { webglPlugin } from 'esbuild-plugin-webgl';\nimport { build } from 'esbuild';\n\nbuild({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/out.js',\n  plugins: [webglPlugin()],\n}).catch(() => process.exit(1));\n\n// src/shaders/vertex.glsl\n// attribute vec4 a_position;\n// void main() { gl_Position = a_position; }\n\n// src/index.ts\nimport vertexShader from './shaders/vertex.glsl';\nimport fragmentShader from './shaders/fragment.glsl';\n\nconst canvas = document.getElementById('canvas') as HTMLCanvasElement;\nconst gl = canvas.getContext('webgl') as WebGLRenderingContext;\n\nconst program = gl.createProgram();\nconst vShader = gl.createShader(gl.VERTEX_SHADER);\ngl.shaderSource(vShader, vertexShader);\ngl.compileShader(vShader);\n\nconst fShader = gl.createShader(gl.FRAGMENT_SHADER);\ngl.shaderSource(fShader, fragmentShader);\ngl.compileShader(fShader);\n\ngl.attachShader(program, vShader);\ngl.attachShader(program, fShader);\ngl.linkProgram(program);\ngl.useProgram(program);","lang":"typescript","description":"Shows esbuild configuration with webglPlugin, then imports .glsl files and compiles them into a WebGL program."},"warnings":[{"fix":"Ensure shader files have .glsl extension; rename or configure esbuild to load other extensions.","message":"Plugin expects .glsl extension; importing other file types will not work and may silently fail.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use external GLSL linter in your build pipeline to catch syntax errors.","message":"Shaders are treated as strings; no validation of GLSL syntax is performed by the plugin.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add a global declaration file (e.g., shims.d.ts) with: declare module '*.glsl' { const value: string; export default value; }","message":"Plugin adds no type declarations for imported .glsl modules; TypeScript may complain about missing types.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install esbuild-plugin-webgl' and ensure package name is correct.","cause":"Package not installed or misspelled.","error":"Cannot find module 'esbuild-plugin-webgl'"},{"fix":"Use import { webglPlugin } from 'esbuild-plugin-webgl' instead of require().","cause":"Using CommonJS require to import the plugin.","error":"This module is ESM-only. It cannot be used with 'require'."},{"fix":"Add plugins: [webglPlugin()] to your esbuild.build() call.","cause":"Plugin not registered in esbuild plugins array.","error":"Could not resolve './shader.glsl'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}