init example

.gitattributes

@@ -0,0 +1,2 @@
+
+yarn.lock -diff linguist-generated

.github/workflows/upload.yaml

@@ -0,0 +1,36 @@
+name: Upload
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: 'yarn'
+
+    - name: "build"
+      run: "yarn && yarn vite build --base=./"
+
+    - name: Deploy to server
+      id: deploy
+      uses: Pendect/[email protected]
+      env:
+        DEPLOY_KEY: ${{secrets.rsync_private_key}}
+      with:
+        flags: '-avzr --progress'
+        options: ''
+        ssh_options: ''
+        src: 'dist/*'
+        dest: '[email protected]:/web-assets/repo/${{ github.repository }}'
+
+    - name: Display status from deploy
+      run: echo "${{ steps.deploy.outputs.status }}"

.gitignore

@@ -0,0 +1,4 @@
+
+js-out/
+node_modules/
+dist/

README.md

@@ -0,0 +1,14 @@
+## Minimal example for WebGPU in PIXI.js
+
+Based on: https://pixijs.com/8.x/examples/mesh-and-shaders/triangle-color
+
+```bash
+yarn
+yarn vite
+```
+
+Online demo https://r.tiye.me/minimal-xyz/minimal-pixi-webgpu
+
+### Licence
+
+MIT

fractal.wgsl

@@ -0,0 +1,61 @@
+struct GlobalUniforms {
+  projectionMatrix: mat3x3<f32>,
+  worldTransformMatrix: mat3x3<f32>,
+  worldColorAlpha: vec4<f32>,
+  uResolution: vec2<f32>,
+}
+
+struct LocalUniforms {
+  uTransformMatrix: mat3x3<f32>,
+ uColor: vec4<f32>,
+ uRound: f32,
+}
+
+@group(0) @binding(0) var<uniform> globalUniforms : GlobalUniforms;
+@group(1) @binding(0) var<uniform> localUniforms : LocalUniforms;
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(1) aUvs: vec2<f32>,
+}
+
+@vertex
+fn vert_main(
+  @location(0) aPosition: vec2<f32>,
+  @location(1) aUvs: vec2<f32>,
+) -> VertexOutput {
+  var mvp = globalUniforms.projectionMatrix * globalUniforms.worldTransformMatrix * localUniforms.uTransformMatrix;
+
+  let screen_position = vec4<f32>(mvp * vec3<f32>(aPosition, 1.0), 1.0);
+  return VertexOutput(screen_position, aUvs);
+}
+
+fn cmpxmul(a: vec2<f32>, b: vec2<f32>) -> vec2<f32> {
+  return vec2<f32>(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);
+}
+
+@fragment
+fn frag_main(input: VertexOutput) -> @location(0) vec4<f32> {
+
+  let uv = input.aUvs;
+  let base = vec2<f32>(0.0, 0.0);
+  let zoom = 1.0;
+  let offset_x = 0.14;
+  let offset_y = 0.6;
+
+  var z = uv - base * 0.4 / zoom;
+  var escaped = false;
+  for (var i = 0; i < 100; i = i + 1) {
+    z = cmpxmul(z, z) + vec2f(offset_x, offset_y);
+    if length(z) > 10000.0 {
+      escaped = true;
+      break;
+    }
+  }
+
+  if escaped {
+    return vec4<f32>(0.0, 0.0, 0.5, 1.0);
+  }
+
+  return vec4<f32>(1.0, 0.8, 0.6, 1.0);
+}

index.html

@@ -0,0 +1,9 @@
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script type="module" src="./main.ts"></script>
+

main.ts

@@ -0,0 +1,47 @@
+import { Application, Geometry, Shader, Mesh } from "pixi.js";
+import fractalShader from "./fractal.wgsl?raw";
+
+let main = async () => {
+  const app = new Application();
+  await app.init({
+    resizeTo: window,
+    preference: "webgpu",
+  });
+
+  document.body.appendChild(app.canvas);
+
+  const geometry = new Geometry({
+    attributes: {
+      aPosition: [-400, -400, 400, -400, 400, 400, -400, 400],
+      aUvs: [-1, -1, 1, -1, 1, 1, -1, 1],
+    },
+    indexBuffer: [0, 1, 2, 0, 2, 3],
+  });
+
+  const gpu = {
+    vertex: {
+      entryPoint: "vert_main",
+      source: fractalShader,
+    },
+    fragment: {
+      entryPoint: "frag_main",
+      source: fractalShader,
+    },
+  };
+
+  const shader = Shader.from({
+    gl: undefined,
+    gpu,
+  });
+
+  const triangle = new Mesh({
+    geometry,
+    shader,
+  });
+
+  triangle.position.set(400, 300);
+
+  app.stage.addChild(triangle);
+};
+
+window.onload = main;

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "pixi.js": "^8.0.5"
+  },
+  "devDependencies": {
+    "vite": "^5.2.8"
+  }
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["vite/client"]
+  }
+}