Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nmattia/webgl-shader-template
Boilerplate for creating WebGL-based applications using Vite and TypeScript
https://github.com/nmattia/webgl-shader-template
creativecoding typescript vite web webgl
Last synced: 18 days ago
JSON representation
Boilerplate for creating WebGL-based applications using Vite and TypeScript
- Host: GitHub
- URL: https://github.com/nmattia/webgl-shader-template
- Owner: nmattia
- License: mit
- Created: 2024-08-09T07:47:04.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T08:42:46.000Z (3 months ago)
- Last Synced: 2024-10-11T23:36:46.159Z (about 1 month ago)
- Topics: creativecoding, typescript, vite, web, webgl
- Language: TypeScript
- Homepage: https://nmattia.github.io/webgl-shader-template/
- Size: 109 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WebGL Shader Template
This serves as a boilerplate for creating WebGL-based applications using
[Vite](https://vitejs.dev/) and [TypeScript](https://www.typescriptlang.org/).
You can view the template built and deployed at
[https://nmattia.github.io/webgl-starter-template/](https://nmattia.github.io/webgl-shader-template/).
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, plus the favicon).
## Getting Started
### Development
First install the dependencies (Vite & TypeScript):
```bash
npm ci
```
To start the development server with hot-reloading:
```bash
npm run dev
```
Your project should now be running at [http://localhost:5173](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.
### Building for Production
To build the project for production:
```bash
npm run build
```
The production-ready files will be output to the `dist` directory. You can
deploy these files to any static site hosting service.
#### Deploying with GitHub Pages
The [GitHub Actions](https://github.com/features/actions) workflow defined in
`.github/workflows/ci.yml` automates the deployment to
[GitHub Pages](https://pages.github.com/). Make sure you have GitHub Pages
enabled for your repository (Settings -> Pages -> Source -> GitHub Actions)
### Project Structure
```
webgl-shader-template/
├── index.html # Vite entry point & main page
├── public # Static assets
└── src
├── main.ts # Main TypeScript file setting up WebGL
├── frag.glsl # Fragment shader (where animation is defined)
└── vert.glsl # Vertex shader (setting up the vertices)
```
### Customizing Shaders
Shaders are stored in the `src/` directory and have a `.glsl` extension. This
template includes a basic vertex shader setting up 4 vertices that the fragment
shader draws on. The fragment shader includes an animation that you can remove
or tweak to see how your changes affect what is shown on the screen.
### Prettier
This template comes pre-configured with Prettier for consistent code
formatting. You can run the following commands to format your code:
```bash
npm run format
```
### License
This project is licensed under the [MIT License](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.