Merge pull request #5 from JediWattson/modularize

Modularize

.gitignore

@@ -9,11 +9,12 @@
 /coverage
 
 # next.js
-/.next/
-/out/
+/example/.next/
+/example/out/
+/example/node_modules
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -32,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+/example/next-env.d.ts

app/layout.tsx → example/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css'
-import { Source_Sans_Pro } from 'next/font/google'
+import { Source_Sans_3 } from 'next/font/google'
 
-const sourceSansPro = Source_Sans_Pro({
+const sourceSansPro = Source_Sans_3({
   weight: "400",
   subsets: ["latin"],
   display: "swap",

app/page.tsx → example/app/page.tsx

@@ -1,4 +1,4 @@
-import Canvas from "@/components/canvas";
+import Canvas from "../components/canvas"
 
 export default function Home() {
   return (

example/components/canvas.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useRef } from "react";
+import { useRender } from "webgpu-fun";
+import example from "../lib/example";
+
+function Canvas() {    
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    useRender(canvasRef, example())
+    return <canvas ref={canvasRef} tabIndex={0} />
+}
+
+export default Canvas;

example/lib/assets.ts

@@ -0,0 +1,25 @@
+'use client';
+
+// each point contains 3 position values, 3 color values
+const triangeVert = [
+    0.0,  0.0,  0.5, 1.0, 0.0, 0.0,
+    0.0, -0.5, -0.5, 0.0, 1.0, 0.0,
+    0.0,  0.5, -0.5, 0.0, 0.0, 1.0
+]
+
+// each point contains 3 position values, 2 texture pos values
+const quadVert = [
+    -0.5,  0.5, 0.0, 1.0, 0.0,
+    -0.5, -0.5, 0.0, 1.0, 1.0,
+     0.5, -0.5, 0.0, 0.0, 1.0,
+
+     0.5, -0.5, 0.0, 0.0, 1.0,
+     0.5,  0.5, 0.0, 0.0, 0.0,
+    -0.5,  0.5, 0.0, 1.0, 0.0,
+]
+
+import { makeAssetBuffer } from 'webgpu-fun'
+
+const makeTriangle = makeAssetBuffer(triangeVert, 3)
+const makeQuad = makeAssetBuffer(quadVert, 6)
+export { makeQuad, makeTriangle }

example/lib/example.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import { vec3 } from "wgpu-matrix";
+
+import textureShader from "./shaders/texture.wgsl";
+import meshShader from "./shaders/mesh.wgsl";
+
+import { makeQuad, makeTriangle } from "./assets";
+import { updateFloor, updateTriangles } from "./utils";
+
+const floorCount = 40
+const triangleCount = 40;
+
+function makeExampleConfig() {
+    return [
+        { 
+            bufferSize: 64 * (1 + (floorCount*2))**2,
+            texturePipelineOpts: {
+                materialUrl: 'floor.jpeg',
+            },
+            renderPipelineOpts: {
+                shader: textureShader,
+                vertexBufferLayout: [{
+                    arrayStride: 20,
+                    attributes: [
+                        {
+                            shaderLocation: 0,
+                            format: `float32x3`,
+                            offset: 0
+                        },
+                        {
+                            shaderLocation: 1,
+                            format: `float32x2`,
+                            offset: 12
+                        }
+                    ]
+                }],
+            },
+            bufferCb: (device: GPUDevice, buffer: GPUBuffer) => {
+                const floorMesh = makeQuad(device, buffer);
+                const objects = Array(floorCount**2).fill(0).map(
+                    (_, i) => vec3.create(i%floorCount, Math.floor(i/floorCount), -1)
+                );
+                floorMesh.makeObjects(objects);
+                updateFloor(floorMesh);  
+                return floorMesh      
+            } 
+        }, { 
+            bufferSize: 64 * floorCount,
+            renderPipelineOpts: {
+                shader: meshShader,
+                vertexBufferLayout: [{
+                    arrayStride: 24,
+                    attributes: [
+                        {
+                            shaderLocation: 0,
+                            format: `float32x3`,
+                            offset: 0
+                        },
+                        {
+                            shaderLocation: 1,
+                            format: `float32x3`,
+                            offset: 12
+                        }
+                    ]
+                }]
+            }, 
+            bufferCb: (device: GPUDevice, buffer: GPUBuffer) => {
+                const triangleMesh = makeTriangle(device, buffer);
+                const objects = Array(triangleCount).fill(0).map((_, i) =>  vec3.create(2, i, -0.5));
+                triangleMesh.makeObjects(objects);
+                triangleMesh.updateMaterial = updateTriangles;
+                return triangleMesh
+            } 
+        }
+    ]
+}
+
+
+
+export default makeExampleConfig;

example/lib/utils.ts

@@ -0,0 +1,19 @@
+import { mat4 } from "wgpu-matrix";
+
+export function updateFloor(floorTexture) {
+    floorTexture.update(pos => mat4.translation(pos))
+}
+
+let t = 0.0
+export function updateTriangles(triangleMesh) {
+    t += 0.01
+    if (t > 2.0 * Math.PI) {
+        t -= 2.0 * Math.PI;
+    }
+
+    triangleMesh.update(pos => {
+        const model = mat4.create();
+        mat4.translation(pos, model);        
+        return mat4.rotateZ(model, t);
+    });
+}

example/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "webgpu-example",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "next": "^14.0.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "webgpu-fun": "^0.2.19"
+    },
+    "devDependencies": {
+        "@types/node": "20.1.2",
+        "@types/react": "18.2.6",
+        "@types/react-dom": "18.2.4",
+        "eslint": "8.40.0",
+        "eslint-config-next": "13.4.1",
+        "raw-loader": "^4.0.2",
+        "typescript": "^5.3.3"
+    }
+}

example/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "types": ["@webgpu/types"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

example/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.wgsl' {
+    const shader: string;
+    export default shader;
+}