A WebGPU Application written in TypeScript to visualize global temperature over time utilizing: jQuery, jQueryUI and Webpack.
The compiled website is placed inside the dist directory. You may just start index.html.
UHides/Shows the UI
The application is developed using the npm-Manager, so before you code you need to install Node.js. To download the required packages execute the following command:
npm install
That should be it. You can build the application by executing:
npm run dev
To generate a production build you may use npm run prod. If you wanna have hot-reload of your typescript and shader-files execute the watch script by calling: npm run watch.
My recommendation is to code with Microsoft Visual Code and the following extensions:
- WGSL: Code-Highlighting for Shader-Files
- Live Server: Comes with a live reload feature. Paired with
npm run watchperfect for quick development. Additional tip: Set the following properties:
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Users\\Vorto\\AppData\\Local\\Google\\Chrome SxS\\Application\\chrome.exe",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.root": "/dist"
You can find the settings file with: File->Preferences->Settings->Workspace->Extensions->Live Server Config->Edit in Settings json. The second line has to point to your version of Chrome Canary.