miniGPU/dev.html at main · mizy/miniGPU · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>WebGPU triangle</title>
</head>

<body>
  <h1>WebGPU triangle</h1>
  <canvas id="gpuCanvas" width="800" height="600"></canvas>
  <script type="module">
    import { MiniGPU, Scene, MeshEntity } from './dist/index.js';
    const app = new MiniGPU({
      canvas: document.getElementById('gpuCanvas'),
    })
    await app.init();
    const shaderText = `
      @group(0) @binding(0) var<uniform> color: vec4f;

      @vertex
      fn vertexMain(@location(0) pos: vec2f) ->
        @builtin(position) vec4f {
        return vec4f(pos, 0, 1);
      }

      @fragment
      fn fragmentMain() -> @location(0) vec4f {
        return color;
      }
    `;
    const entity = new MeshEntity(app)
    entity.mesh.setData({
      vertexs: new Float32Array([
        0.8, -0.8,
        -0.8, 0.8,
        0.8, 0.8,
        -0.8, -0.8,
      ]),
      indices: new Uint32Array([0, 1, 2, 0, 1, 3])
    })
    entity.material.setData({
      shaderText,
      topology: 'triangle-list',
      uniforms: new Float32Array([1.0, 0.0, 0.0, 1.0])
    })
    app.scene.addChild(entity);
    app.renderer.render();
  </script>
</body>

</html>