This serves as a boilerplate for creating WebGL-based applications using Vite and TypeScript. You can view the template built and deployed at https://nmattia.github.io/quad-shader/.
Whether you're just getting started with WebGL or looking for a quick way to bootstrap your shader projects, this template should serve as a solid foundation. The built site is about 15KB (uncompressed, excl. the favicon).
First install the dependencies (Vite & TypeScript):
npm ciTo start the development server with hot-reloading:
npm run devYour project should now be running at http://localhost:5173. Open the URL in your browser to see the template in action. Any changes you make to the shaders or TypeScript files will automatically reload the page.
To build the project for production:
npm run buildThe production-ready files will be output to the dist directory. You can
deploy these files to any static site hosting service.
The GitHub Actions workflow defined in
.github/workflows/ci.yml automates the deployment to
GitHub Pages. Make sure you have GitHub Pages
enabled for your repository (Settings -> Pages -> Source -> GitHub Actions)
quad-shader/
├── frag.glsl # Fragment shader (where animation is defined)
├── index.html # Vite entry point & main page
├── index.ts # Demo app/microsite entrypoint
└── src
└── index.ts # TypeScript module setting up WebGL
This template includes a basic vertex shader setting up a quad (4 vertices) that
the fragment shader draws on. The fragment shader (frag.glsl) includes an
animation that you can remove or tweak to see how your changes affect
what is shown on the screen.
This template comes pre-configured with Prettier for consistent code formatting. You can run the following commands to format your code:
npm run formatThis project is licensed under the MIT License. You are free to use, modify, and distribute this template in your own projects.
If you have any questions or need further assistance, feel free to reach out via the issues tab on GitHub.