andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add hot reload

Browse source
This commit is contained in:
Andras Schmelczer 2023-04-15 14:47:02 +01:00
parent 9349a57781
commit 9cf8f73e18
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
17 changed files with 18538 additions and 1185 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
**/*.js

29
.eslintrc.json Normal file
View file

@ -0,0 +1,29 @@
{
"root": true,
"env": {
"browser": true,
"es2020": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": ["unused-imports", "@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error",
"no-unused-vars": "off",
"unused-imports/no-unused-imports-ts": "error",
"@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/ban-ts-comment": "off"
}
}

2
.gitignore vendored
View file

@ -41,5 +41,3 @@ temp
*.js
*.map
!webpack.*
dist

14
.prettierrc
View file

@ -1,6 +1,10 @@
{
"trailingComma": "none",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
"trailingComma": "es5",
"printWidth": 90,
"tabWidth": 2,
"singleQuote": true,
"endOfLine": "lf",
"importOrder": ["^[./]", ".*", ".scss$"],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true
}

37
README.md
View file

@ -10,46 +10,9 @@ A WebGPU repo you can use to get started with your own renderer.
## Setup
First install:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en/)
- A Text Editor such as [Visual Studio Code](https://code.visualstudio.com/).
Then type the following in any terminal your such as [VS Code's Integrated Terminal](https://code.visualstudio.com/docs/editor/integrated-terminal).
```bash
# 🐑 Clone the repo
git clone https://github.com/alaingalvan/webgpu-seed
# 💿 go inside the folder
cd webgpu-seed
# 🔨 Start installing dependencies, building, and running at localhost:8080
npm start
```
> Refer to [this blog post on designing web libraries and apps](https://alain.xyz/blog/designing-a-web-app) for more details on Node.js, packages, etc.
## Project Layout
As your project becomes more complex, you'll want to separate files and organize your application to something more akin to a game or renderer, check out this post on [game engine architecture](https://alain.xyz/blog/game-engine-architecture) and this one on [real time renderer architecture](https://alain.xyz/blog/realtime-renderer-architectures) for more details.
```bash
├─ 📂 node_modules/ # 👶 Dependencies
│ ├─ 📁 gl-matrix # ➕ Linear Algebra
│ └─ 📁 ... # 🕚 Other Dependencies (TypeScript, Webpack, etc.)
├─ 📂 src/ # 🌟 Source Files
│ ├─ 📄 index.html # 📇 Main HTML file
│ └─ 📄 renderer.ts # 🔺 Triangle Renderer
├─ 📄 .gitignore # 👁️ Ignore certain files in git repo
├─ 📄 package.json # 📦 Node Package File
├─ 📄 license.md # ⚖️ Your License (Unlicense)
└─ 📃readme.md # 📖 Read Me!
```
[license-img]: https://img.shields.io/:license-unlicense-blue.svg?style=flat-square
[license-url]: https://unlicense.org/

15
definitions.d.ts vendored
View file

@ -1 +1,14 @@
declare module '*.wgsl';
declare module '*.wgsl' {
const content: string;
export default content;
}
declare module '*.svg' {
const content: string;
export default content;
}
declare module '*.html' {
const content: string;
export default content;
}

2
dist/index.html vendored Normal file
View file

File diff suppressed because one or more lines are too long

28
index.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>WebGPU Hello Triangle</title>
<style>
html,
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
background: #000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<canvas id="gfx"></canvas>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

18831
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

44
package.json
View file

@ -4,10 +4,11 @@
"description": "🔺 A simple hello triangle example introducing WebGPU.",
"main": "dist/main.js",
"scripts": {
"start": "npm i && npm run build && npm run dev",
"dev": "http-server",
"build": "cross-env NODE_ENV=production ts-node webpack.ts"
},
"start": "webpack serve --open --mode development",
"lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.(ts|scss|json|html)\"",
"build": "webpack --mode production",
"update": "ncu"
},
"repository": {
"type": "git",
"url": "git+https://github.com/alaingalvan/webgpu-seed.git"
@ -27,15 +28,32 @@
},
"homepage": "https://github.com/alaingalvan/webgpu-seed#readme",
"devDependencies": {
"@types/node": "^18.11.x",
"@webgpu/types": "^0.1.26",
"clean-webpack-plugin": "^4.0.x",
"cross-env": "^7.0.x",
"http-server": "^14.1.x",
"ts-loader": "^9.4.x",
"ts-node": "^10.9.x",
"typescript": "^4.9.x",
"webpack": "^5.75.x"
"@webgpu/types": "^0.1.30",
"@trivago/prettier-plugin-sort-imports": "^3.3.0",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"css-loader": "^6.7.1",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-unused-imports": "^2.0.0",
"html-webpack-plugin": "^5.5.0",
"inline-source-webpack-plugin": "^2.0.1",
"mini-css-extract-plugin": "^2.6.1",
"npm-check-updates": "^16.3.2",
"prettier": "^2.7.1",
"resolve-url-loader": "^5.0.0",
"responsive-loader": "^3.1.1",
"sass": "^1.55.0",
"sass-loader": "^13.0.2",
"sharp": "^0.31.0",
"string-replace-loader": "^3.1.0",
"svg-inline-loader": "^0.8.2",
"terser-webpack-plugin": "^5.3.6",
"ts-loader": "^9.4.1",
"typescript": "^4.8.3",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"gl-matrix": "^3.4.3"

38
src/index.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta property="og:title" content="WebGPU | Andras Schmelczer" />
<meta property="og:description" content="Discover my projects." />
<meta property="og:url" content="https://schmelczer.dev" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1920" />
<meta property="og:image" content="https://schmelczer.dev/og-image.jpg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta
name="description"
content="I'm Andras Schmelczer, and this is my portfolio. Discover some of my projects. I'm passionate about solving challenging problems and designing large-scale systems, especially in the context of machine learning."
/>
<meta
name="viewport"
content="width=device-width,initial-scale=1,viewport-fit=cover"
/>
<meta name="theme-color" content="#b7455e" />
<title>WebGPU | Andras Schmelczer</title>
<link inline inline-asset="index.css" inline-asset-delete />
</head>
<body>
<noscript>JavaScript is required for this website.</noscript>
<canvas></canvas>
<script inline inline-asset="index.js" inline-asset-delete></script>
</body>
</html>

15
src/index.scss Normal file
View file

@ -0,0 +1,15 @@
html,
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
background: #000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

3
src/main.ts → src/index.ts
View file

@ -1,6 +1,7 @@
import './index.scss';
import Renderer from './renderer';
const canvas = document.getElementById('gfx') as HTMLCanvasElement;
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
canvas.width = canvas.height = 640;
const renderer = new Renderer(canvas);
renderer.start();

452
src/renderer.ts
View file

@ -1,257 +1,227 @@
import vertShaderCode from './shaders/triangle.vert.wgsl';
import fragShaderCode from './shaders/triangle.frag.wgsl';
import vertShaderCode from './shaders/triangle.vert.wgsl';
const positions = new Float32Array([
1.0, -1.0, 0.0, -1.0, -1.0, 0.0, 0.0, 1.0, 0.0
]);
const colors = new Float32Array([
1.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
1.0
]);
const positions = new Float32Array([1.0, -1.0, 0.0, -1.0, -1.0, 0.0, 0.0, 1.0, 0.0]);
const colors = new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 0.0, 1.0]);
const indices = new Uint16Array([0, 1, 2]);
export default class Renderer {
canvas: HTMLCanvasElement;
canvas: HTMLCanvasElement;
adapter: GPUAdapter;
device: GPUDevice;
queue: GPUQueue;
adapter: GPUAdapter;
device: GPUDevice;
queue: GPUQueue;
context: GPUCanvasContext;
colorTexture: GPUTexture;
colorTextureView: GPUTextureView;
depthTexture: GPUTexture;
depthTextureView: GPUTextureView;
context: GPUCanvasContext;
colorTexture: GPUTexture;
colorTextureView: GPUTextureView;
depthTexture: GPUTexture;
depthTextureView: GPUTextureView;
positionBuffer: GPUBuffer;
colorBuffer: GPUBuffer;
indexBuffer: GPUBuffer;
vertModule: GPUShaderModule;
fragModule: GPUShaderModule;
pipeline: GPURenderPipeline;
positionBuffer: GPUBuffer;
colorBuffer: GPUBuffer;
indexBuffer: GPUBuffer;
vertModule: GPUShaderModule;
fragModule: GPUShaderModule;
pipeline: GPURenderPipeline;
commandEncoder: GPUCommandEncoder;
passEncoder: GPURenderPassEncoder;
commandEncoder: GPUCommandEncoder;
passEncoder: GPURenderPassEncoder;
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
}
async start() {
if (await this.initializeAPI()) {
this.resizeBackings();
await this.initializeResources();
this.render();
}
}
async initializeAPI(): Promise<boolean> {
try {
const entry: GPU = navigator.gpu;
if (!entry) {
return false;
}
this.adapter = await entry.requestAdapter();
this.device = await this.adapter.requestDevice();
this.queue = this.device.queue;
} catch (e) {
console.error(e);
return false;
}
async start() {
if (await this.initializeAPI()) {
this.resizeBackings();
await this.initializeResources();
this.render();
}
}
return true;
}
async initializeAPI(): Promise<boolean> {
try {
const entry: GPU = navigator.gpu;
if (!entry) {
return false;
}
this.adapter = await entry.requestAdapter();
this.device = await this.adapter.requestDevice();
this.queue = this.device.queue;
} catch (e) {
console.error(e);
return false;
}
return true;
}
async initializeResources() {
const createBuffer = (
arr: Float32Array | Uint16Array,
usage: number
) => {
// 📏 Align to 4 bytes (thanks @chrimsonite)
let desc = {
size: (arr.byteLength + 3) & ~3,
usage,
mappedAtCreation: true
};
let buffer = this.device.createBuffer(desc);
const writeArray =
arr instanceof Uint16Array
? new Uint16Array(buffer.getMappedRange())
: new Float32Array(buffer.getMappedRange());
writeArray.set(arr);
buffer.unmap();
return buffer;
};
this.positionBuffer = createBuffer(positions, GPUBufferUsage.VERTEX);
this.colorBuffer = createBuffer(colors, GPUBufferUsage.VERTEX);
this.indexBuffer = createBuffer(indices, GPUBufferUsage.INDEX);
const vsmDesc = {
code: vertShaderCode
};
this.vertModule = this.device.createShaderModule(vsmDesc);
const fsmDesc = {
code: fragShaderCode
};
this.fragModule = this.device.createShaderModule(fsmDesc);
const positionAttribDesc: GPUVertexAttribute = {
shaderLocation: 0, // [[location(0)]]
offset: 0,
format: 'float32x3'
};
const colorAttribDesc: GPUVertexAttribute = {
shaderLocation: 1, // [[location(1)]]
offset: 0,
format: 'float32x3'
};
const positionBufferDesc: GPUVertexBufferLayout = {
attributes: [positionAttribDesc],
arrayStride: 4 * 3, // sizeof(float) * 3
stepMode: 'vertex'
};
const colorBufferDesc: GPUVertexBufferLayout = {
attributes: [colorAttribDesc],
arrayStride: 4 * 3, // sizeof(float) * 3
stepMode: 'vertex'
};
const depthStencil: GPUDepthStencilState = {
depthWriteEnabled: true,
depthCompare: 'less',
format: 'depth24plus-stencil8'
};
const pipelineLayoutDesc = { bindGroupLayouts: [] };
const layout = this.device.createPipelineLayout(pipelineLayoutDesc);
const vertex: GPUVertexState = {
module: this.vertModule,
entryPoint: 'main',
buffers: [positionBufferDesc, colorBufferDesc]
};
const colorState: GPUColorTargetState = {
format: 'bgra8unorm'
};
const fragment: GPUFragmentState = {
module: this.fragModule,
entryPoint: 'main',
targets: [colorState]
};
const primitive: GPUPrimitiveState = {
frontFace: 'cw',
cullMode: 'none',
topology: 'triangle-list'
};
const pipelineDesc: GPURenderPipelineDescriptor = {
layout,
vertex,
fragment,
primitive,
depthStencil
};
this.pipeline = this.device.createRenderPipeline(pipelineDesc);
}
resizeBackings() {
if (!this.context) {
this.context = this.canvas.getContext('webgpu');
const canvasConfig: GPUCanvasConfiguration = {
device: this.device,
format: 'bgra8unorm',
usage:
GPUTextureUsage.RENDER_ATTACHMENT |
GPUTextureUsage.COPY_SRC,
alphaMode: 'opaque'
};
this.context.configure(canvasConfig);
}
const depthTextureDesc: GPUTextureDescriptor = {
size: [this.canvas.width, this.canvas.height, 1],
dimension: '2d',
format: 'depth24plus-stencil8',
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
};
this.depthTexture = this.device.createTexture(depthTextureDesc);
this.depthTextureView = this.depthTexture.createView();
}
encodeCommands() {
let colorAttachment: GPURenderPassColorAttachment = {
view: this.colorTextureView,
clearValue: { r: 0, g: 0, b: 0, a: 1 },
loadOp: 'clear',
storeOp: 'store'
};
const depthAttachment: GPURenderPassDepthStencilAttachment = {
view: this.depthTextureView,
depthClearValue: 1,
depthLoadOp: 'clear',
depthStoreOp: 'store',
stencilClearValue: 0,
stencilLoadOp: 'clear',
stencilStoreOp: 'store'
};
const renderPassDesc: GPURenderPassDescriptor = {
colorAttachments: [colorAttachment],
depthStencilAttachment: depthAttachment
};
this.commandEncoder = this.device.createCommandEncoder();
// 🖌️ Encode drawing commands
this.passEncoder = this.commandEncoder.beginRenderPass(renderPassDesc);
this.passEncoder.setPipeline(this.pipeline);
this.passEncoder.setViewport(
0,
0,
this.canvas.width,
this.canvas.height,
0,
1
);
this.passEncoder.setScissorRect(
0,
0,
this.canvas.width,
this.canvas.height
);
this.passEncoder.setVertexBuffer(0, this.positionBuffer);
this.passEncoder.setVertexBuffer(1, this.colorBuffer);
this.passEncoder.setIndexBuffer(this.indexBuffer, 'uint16');
this.passEncoder.drawIndexed(3, 1);
this.passEncoder.end();
this.queue.submit([this.commandEncoder.finish()]);
}
render = () => {
this.colorTexture = this.context.getCurrentTexture();
this.colorTextureView = this.colorTexture.createView();
this.encodeCommands();
requestAnimationFrame(this.render);
async initializeResources() {
const createBuffer = (arr: Float32Array | Uint16Array, usage: number) => {
// 📏 Align to 4 bytes (thanks @chrimsonite)
const desc = {
size: (arr.byteLength + 3) & ~3,
usage,
mappedAtCreation: true,
};
const buffer = this.device.createBuffer(desc);
const writeArray =
arr instanceof Uint16Array
? new Uint16Array(buffer.getMappedRange())
: new Float32Array(buffer.getMappedRange());
writeArray.set(arr);
buffer.unmap();
return buffer;
};
this.positionBuffer = createBuffer(positions, GPUBufferUsage.VERTEX);
this.colorBuffer = createBuffer(colors, GPUBufferUsage.VERTEX);
this.indexBuffer = createBuffer(indices, GPUBufferUsage.INDEX);
const vsmDesc = {
code: vertShaderCode,
};
this.vertModule = this.device.createShaderModule(vsmDesc);
const fsmDesc = {
code: fragShaderCode,
};
this.fragModule = this.device.createShaderModule(fsmDesc);
const positionAttribDesc: GPUVertexAttribute = {
shaderLocation: 0, // [[location(0)]]
offset: 0,
format: 'float32x3',
};
const colorAttribDesc: GPUVertexAttribute = {
shaderLocation: 1, // [[location(1)]]
offset: 0,
format: 'float32x3',
};
const positionBufferDesc: GPUVertexBufferLayout = {
attributes: [positionAttribDesc],
arrayStride: 4 * 3, // sizeof(float) * 3
stepMode: 'vertex',
};
const colorBufferDesc: GPUVertexBufferLayout = {
attributes: [colorAttribDesc],
arrayStride: 4 * 3, // sizeof(float) * 3
stepMode: 'vertex',
};
const depthStencil: GPUDepthStencilState = {
depthWriteEnabled: true,
depthCompare: 'less',
format: 'depth24plus-stencil8',
};
const pipelineLayoutDesc = { bindGroupLayouts: [] };
const layout = this.device.createPipelineLayout(pipelineLayoutDesc);
const vertex: GPUVertexState = {
module: this.vertModule,
entryPoint: 'main',
buffers: [positionBufferDesc, colorBufferDesc],
};
const colorState: GPUColorTargetState = {
format: 'bgra8unorm',
};
const fragment: GPUFragmentState = {
module: this.fragModule,
entryPoint: 'main',
targets: [colorState],
};
const primitive: GPUPrimitiveState = {
frontFace: 'cw',
cullMode: 'none',
topology: 'triangle-list',
};
const pipelineDesc: GPURenderPipelineDescriptor = {
layout,
vertex,
fragment,
primitive,
depthStencil,
};
this.pipeline = this.device.createRenderPipeline(pipelineDesc);
}
resizeBackings() {
if (!this.context) {
this.context = this.canvas.getContext('webgpu') as any;
const canvasConfig: GPUCanvasConfiguration = {
device: this.device,
format: 'bgra8unorm',
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
alphaMode: 'opaque',
};
this.context.configure(canvasConfig);
}
const depthTextureDesc: GPUTextureDescriptor = {
size: [this.canvas.width, this.canvas.height, 1],
dimension: '2d',
format: 'depth24plus-stencil8',
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
};
this.depthTexture = this.device.createTexture(depthTextureDesc);
this.depthTextureView = this.depthTexture.createView();
}
encodeCommands() {
const colorAttachment: GPURenderPassColorAttachment = {
view: this.colorTextureView,
clearValue: { r: 0, g: 0, b: 0, a: 1 },
loadOp: 'clear',
storeOp: 'store',
};
const depthAttachment: GPURenderPassDepthStencilAttachment = {
view: this.depthTextureView,
depthClearValue: 1,
depthLoadOp: 'clear',
depthStoreOp: 'store',
stencilClearValue: 0,
stencilLoadOp: 'clear',
stencilStoreOp: 'store',
};
const renderPassDesc: GPURenderPassDescriptor = {
colorAttachments: [colorAttachment],
depthStencilAttachment: depthAttachment,
};
this.commandEncoder = this.device.createCommandEncoder();
this.passEncoder = this.commandEncoder.beginRenderPass(renderPassDesc);
this.passEncoder.setPipeline(this.pipeline);
this.passEncoder.setViewport(0, 0, this.canvas.width, this.canvas.height, 0, 1);
this.passEncoder.setScissorRect(0, 0, this.canvas.width, this.canvas.height);
this.passEncoder.setVertexBuffer(0, this.positionBuffer);
this.passEncoder.setVertexBuffer(1, this.colorBuffer);
this.passEncoder.setIndexBuffer(this.indexBuffer, 'uint16');
this.passEncoder.drawIndexed(3, 1);
this.passEncoder.end();
this.queue.submit([this.commandEncoder.finish()]);
}
render = () => {
this.colorTexture = this.context.getCurrentTexture();
this.colorTextureView = this.colorTexture.createView();
this.encodeCommands();
requestAnimationFrame(this.render);
};
}

10
tsconfig.json
View file

@ -21,17 +21,13 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": false,
"sourceMap": false,
"sourceMap": true,
"strictNullChecks": false,
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"include": [
"definitions.d.ts",
"src/**/*",
"node_modules/@webgpu/types/**/*"
],
"include": ["definitions.d.ts", "src/**/*", "node_modules/@webgpu/types/**/*"],
"compileOnSave": false,
"buildOnSave": false
}
}

90
webpack.config.js Normal file
View file

@ -0,0 +1,90 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, argv) => ({
devtool: argv.mode === 'development' ? 'inline-source-map' : false,
entry: {
index: './src/index.ts',
},
watchOptions: {
ignored: '**/node_modules',
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
module: true,
},
}),
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new MiniCssExtractPlugin(),
argv.mode === 'production'
? new InlineSourceWebpackPlugin({
compress: true,
})
: null,
new (require('webpack').DefinePlugin)({
__CURRENT_DATE__: Date.now(),
}),
].filter(Boolean),
module: {
rules: [
{
test: /\.svg$/i,
use: 'svg-inline-loader',
},
{
test: /\.wgsl/,
type: 'asset/source',
generator: {
filename: '[name][ext]',
},
},
{
test: /\/no-change\//i,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
},
},
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
sourceMap: true, // required by resolve-url-loader
},
},
],
},
{
test: /\.ts$/,
use: 'ts-loader',
},
],
},
resolve: {
extensions: [
'.ts',
'.js', // required for development
],
},
output: {
clean: true,
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '',
},
});

112
webpack.ts
View file

@ -1,112 +0,0 @@
import webpack from 'webpack';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import path from 'path';
import { argv } from 'process';
let env = process.env['NODE_ENV'];
let isProduction =
(env && env.match(/production/)) ||
argv.reduce((prev, cur) => prev || cur === '--production', false);
let config: webpack.Configuration = {
context: path.join(__dirname, 'src'),
entry: {
app: './main.ts'
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.tsx', 'js'],
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
module: {
rules: [
{
test: /\.ts/,
exclude: /node_modules/,
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
isolatedModules: true
}
}
},
{
test: /\.wgsl/,
type: 'asset/source'
}
]
},
node: false,
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(
isProduction ? 'production' : 'development'
)
}
})
],
optimization: {
minimize: isProduction ? true : false
}
};
/**
* Start Build
*/
const compiler: webpack.Compiler = webpack(config);
if (!argv.reduce((prev, cur) => prev || cur === '--watch', false)) {
compiler.run((err, stats) => {
if (err) return console.error(err);
if (stats.hasErrors()) {
let statsJson = stats.toJson();
console.log(
'❌' + ' · Error · ' + 'webgpu-seed failed to compile:'
);
for (let error of statsJson.errors) {
console.log(error.message);
}
return;
}
console.log(
'✔️️' +
' · Success · ' +
'webgpu-seed' +
(isProduction ? ' (production) ' : ' (development) ') +
'built in ' +
(+stats.endTime - +stats.startTime + ' ms.')
);
});
} else {
compiler.watch({}, (err, stats) => {
if (err) return console.error(err);
if (stats.hasErrors()) {
let statsJson = stats.toJson();
console.log(
'❌' + ' · Error · ' + 'webgpu-seed failed to compile:'
);
for (let error of statsJson.errors) {
console.log(error.message);
}
console.log('\n👀 · Watching for changes... · \n');
return;
}
console.log(
'✔️️' +
' · Success · ' +
'webgpu-seed' +
(isProduction ? ' (production) ' : ' (development) ') +
'built in ' +
(+stats.endTime - +stats.startTime + ' ms.') +
'\n👀 · Watching for changes... · \n'
);
});
}