-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.ts
60 lines (50 loc) · 1.38 KB
/
main.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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,
// make sure to use the WebGPU renderer
preference: "webgpu",
});
globalThis.__PIXI_APP__ = app;
document.body.appendChild(app.canvas);
const geometry = new Geometry({
attributes: {
// 4 points in 2D
aPosition: [-400, -400, 400, -400, 400, 400, -400, 400],
// 4 points in 2D, specifying the UV coordinates
aUvs: [-1, -1, 1, -1, 1, 1, -1, 1],
},
// 2 triangles from aPosition
indexBuffer: [0, 1, 2, 0, 2, 3],
});
const gpu = {
vertex: {
// vertex function name in the shader
entryPoint: "vert_main",
source: fractalShader,
},
fragment: {
// fragment function name in the shader
entryPoint: "frag_main",
source: fractalShader,
},
};
const shader = Shader.from({
// empty for WebGL
gl: undefined,
gpu,
});
const mesh = new Mesh({
geometry,
shader,
});
mesh.position.set(window.innerWidth / 2, window.innerHeight / 2);
window.addEventListener("resize", () => {
app.renderer.resize(window.innerWidth, window.innerHeight);
mesh.position.set(window.innerWidth / 2, window.innerHeight / 2);
});
app.stage.addChild(mesh);
};
window.onload = main;