https://github.com/shrekshao/webgpu-typescript-starter

A boilerplate to start your simple WebGPU project using vite and vanilla typescript
https://github.com/shrekshao/webgpu-typescript-starter

boilerplate tweakpane typescript vite webgpu

Last synced: 3 months ago
JSON representation

A boilerplate to start your simple WebGPU project using vite and vanilla typescript

• Host: GitHub
• URL: https://github.com/shrekshao/webgpu-typescript-starter
• Owner: shrekshao
• License: unlicense
• Created: 2023-04-20T21:43:52.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-05T19:30:36.000Z (6 months ago)
• Last Synced: 2024-08-05T22:50:43.814Z (6 months ago)
• Topics: boilerplate, tweakpane, typescript, vite, webgpu
• Language: TypeScript
• Homepage:
• Size: 10.7 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WebGPU Typescript Starter

The boilerplate to help you quickly start building your simple WebGPU web page. You might find it useful if you want to focus on WebGPU development or not familiar with front end stuff.

## Getting started

```sh

npm install

```

### Develop

```sh

npm run dev

```

### Build

```sh

npm run build

```

The built site goes into `dist/`.

Your static assets (e.g. textures, models) can go into `public/`, which will be copied directly when built.

## Descriptions

Dependencies used, and why they are used

- [Vite](https://github.com/vitejs/vite)

  - Frontend tooling to make development and deployment easier.

  - Modified on top of the [vanilla-ts](https://vitejs.dev/guide/#trying-vite-online) setup.

  - Use [vite-raw-plugin](https://www.npmjs.com/package/vite-raw-plugin) to import spearate WGSL shader files.

- [Typescript](https://www.typescriptlang.org/docs/)

  - Compared to Javascript, the typings can help avoid a lot of common bugs. `tsc` is integrated in Vite so no more overhead for using typescript.

  - [@webgpu/types](https://www.npmjs.com/package/@webgpu/types): types for WebGPU API.

- [wgpu-matrix](https://github.com/greggman/wgpu-matrix): 3D math library for WebGPU.

- [tweakpane](https://cocopon.github.io/tweakpane/) the new dat.GUI thing.

  - [@tweakpane/core](https://www.npmjs.com/package/@tweakpane/core) for typescript support.

You can write your shader in separate `.wgsl` file and import as plain string

```typescript

import triangleVertWGSL from './shaders/triangle.vert.wgsl';

```