https://github.com/asherjingkongchen/typescript-webgpu-helloworld
A simple "Hello World" example using TypeScript and WebGPU. This project demonstrates the basic setup for a WebGPU application, resulting in a canvas cleared to a HotPink color.
https://github.com/asherjingkongchen/typescript-webgpu-helloworld
agent ai awesome cline coding crap crypto example gpu graphics human joke lightweight lol loser meme vibe vibecoding web webgpu
Last synced: 3 months ago
JSON representation
A simple "Hello World" example using TypeScript and WebGPU. This project demonstrates the basic setup for a WebGPU application, resulting in a canvas cleared to a HotPink color.
- Host: GitHub
- URL: https://github.com/asherjingkongchen/typescript-webgpu-helloworld
- Owner: AsherJingkongChen
- Created: 2025-05-28T09:26:46.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-05-28T10:39:58.000Z (4 months ago)
- Last Synced: 2025-06-26T14:01:59.675Z (3 months ago)
- Topics: agent, ai, awesome, cline, coding, crap, crypto, example, gpu, graphics, human, joke, lightweight, lol, loser, meme, vibe, vibecoding, web, webgpu
- Language: TypeScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeScript WebGPU Hello World
Hint: Open ./cline_tip-en_US.md or ./cline_tip-zh_TW.md for more details.
A simple "Hello World" example using TypeScript and WebGPU. This project demonstrates the basic setup for a WebGPU application, resulting in a canvas cleared to a HotPink color.
## Project Goal
The primary goal is to establish a minimal WebGPU application written in TypeScript that provides a clear visual indication of successful WebGPU initialization and operation (e.g., a colored canvas).
## Key Features
* **TypeScript:** The project is written entirely in TypeScript.
* **WebGPU:** Utilizes the WebGPU API for rendering.
* **Minimal Setup:** Focuses on the bare essentials to get WebGPU running:
* WebGPU initialization and device acquisition.
* Canvas setup for presentation.
* Clearing the canvas to a single color (HotPink).
* Does **not** include complex shaders, buffers, or rendering pipelines for this initial version.
* **Output:** A simple HTML page (`index.html`) that runs the compiled TypeScript code.
## Local Setup and Running Instructions
To set up and run this project locally:
1. **Clone the repository:**
```bash
git clone https://github.com/AsherJingkongChen/typescript-webgpu-helloworld.git
cd typescript-webgpu-helloworld
```
2. **Install dependencies:**
```bash
npm install
```
3. **Build the project (compile TypeScript):**
```bash
npm run build
```
This will compile the TypeScript files from `src/` into the `dist/` directory.
4. **Serve the project using a local HTTP server:**
Due to browser security restrictions (CORS policy) when using `file:///` protocol with JavaScript modules and WebGPU, you need to serve `index.html` via a local HTTP server.
A simple way to do this is using `npx serve` (requires Node.js/npm):
```bash
npx serve
```
This will typically start a server at `http://localhost:3000`.
Alternatively, you can use other methods like Python's built-in HTTP server:
* For Python 3: `python -m http.server` (usually serves at `http://localhost:8000`)
* For Python 2: `python -m SimpleHTTPServer`
5. **Open in browser:**
Open the URL provided by your local HTTP server (e.g., `http://localhost:3000`) in a WebGPU-compatible browser. You should see a canvas filled with a HotPink color.
## Screenshot
