points/examples_tutorial/index.html at master · Absulit/points · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>

<head>
    <title>POINTS Quick Setup</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>

    <script type="importmap">
        {
            "imports": {
                "points": "https://cdn.jsdelivr.net/npm/@absulit/points/build/points.min.js"
            }
        }
    </script>

    <script type="module">
        // import the `Points` class
        import Points, { RenderPass } from 'points';

        // reference the canvas in the constructor
        const points = new Points('canvas');

        // create your render pass with three shaders as follow
        const renderPass =
            new RenderPass(/*wgsl*/`
                /**
                 * VertexIn
                 * position: vec4f,
                 * color: vec4f,
                 * uv: vec2f,
                 * normal: vec3f,
                 * id: u32,       // mesh id
                 * vertexIndex: u32,
                 * instanceIndex: u32,
                 */
                @vertex
                fn main(in:VertexIn) -> FragmentIn {
                    return defaultVertexBody(in.position, in.color, in.uv, in.normal);
                }`,
                /*wgsl*/`
                /**
                 * VertexIn
                 * position: vec4f,
                 * color: vec4f,
                 * uv: vec2f,
                 * ratio: vec2f,  // relation between params.screen.x and params.screen.y
                 * uvr: vec2f,    // uv with aspect ratio corrected
                 * mouse: vec2f,
                 * normal: vec3f,
                 * id: u32,       // mesh or instance id
                 * barycentrics: vec3f,
                 */
                @fragment
                fn main(in:FragmentIn) -> @location(0) vec4f {
                    return vec4f(in.uvr, 0, 1);
                }
                `,
                /*wgsl*/`
                // ComputeIn
                // @builtin(global_invocation_id) GID: vec3u,
                // @builtin(workgroup_id)  in.WID: vec3u,
                // @builtin(local_invocation_id) LID: vec3u
                @compute @workgroup_size(8,8,1)
                fn main(in:ComputeIn) {
                    let time = params.time;
                }
                `,
            )


        // call the POINTS init method and then the update method
        await points.init([renderPass]);
        // call `points.update()` methods to render a new frame
        points.update(update)

        function update() {
            // update uniforms, etc
        }
    </script>

</body>

</html>