https://github.com/r4ai/webgpu-sandbox

https://github.com/r4ai/webgpu-sandbox

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/r4ai/webgpu-sandbox
• Owner: r4ai
• License: cc0-1.0
• Created: 2023-05-11T14:46:18.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-17T12:27:23.000Z (5 months ago)
• Last Synced: 2024-08-17T13:39:31.278Z (5 months ago)
• Language: TypeScript
• Homepage: https://r4ai.github.io/webgpu-sandbox/
• Size: 104 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WebGPU Sandbox 🌐

自分の学習用に作った WebGPU のサンプルコードを置いていく場所。  

余分なライブラリは極力使わず、WebGPU の API のみで実装している。

## Table of Contents

- triangle_2d

- square_2d

- cube_3d

- cube_3d_wgpu_matrix

- cube_3d_texture

- triangle_2d_msaa

## Development

```sh

# Install dependencies

pnpm install

# Run dev server

pnpm dev

# Build

pnpm build

# Preview build

pnpm preview

```

### Requirements

- [pnpm](https://pnpm.io/)

- [Node.js](https://nodejs.org/en/)

### Tech Stack

- [webGPU](https://gpuweb.github.io/gpuweb/) - Graphics API

- [Vite](https://vitejs.dev/) - Build tool

- [TypeScript](https://www.typescriptlang.org/) - Programming language

### 新規ページの作成

1. `pages/` に新しいフォルダを作成する

2. `vite.config.js` の `build.rollupOptions.input.[name]` に、作成したフォルダのパスを追加する。

3. `components/links.html` の `body > ul.page-links` に、作成したページを追加する。

4. `README.md` の最初のとこに、ページの名前を追加する。

## References

- [WebGPU 入門 @emadurandal | Zenn.dev](https://zenn.dev/emadurandal/books/cb6818fd3a1b2e)

- [初めての WebGPU アプリ | Google](https://codelabs.developers.google.com/your-first-webgpu-app?hl=ja#0)

- [Rust wgpu で 3DCG に挑戦する @namn1125 | Qiita](https://qiita.com/namn1125/items/1a5242f6e8bced9c0642)

- [3DCG の基礎知識 Obj ファイルを描画するまで @namn1125 | Qiita](https://qiita.com/namn1125/items/44356be38b55ceb652fb)

- [WebGL の基本 | webglfundamentals.org](https://webglfundamentals.org/webgl/lessons/ja/)