tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

draw.html (3022B)

      1 <!doctype html>
      2 <html class="reftest-wait">
      3  <head>
      4    <meta charset="utf-8" />
      5  </head>
      6  <body>
      7    <canvas id="canvas" width=512 height=512></canvas>
      8  </body>
      9  <script>
     10    (async function() {
     11      try {
     12        var triangleVertWGSL = `@vertex
     13        fn main(
     14          @builtin(vertex_index) VertexIndex : u32
     15        ) -> @builtin(position) vec4f {
     16          var pos = array<vec2f, 3>(
     17            vec2(0.0, 0.5),
     18            vec2(-0.5, -0.5),
     19            vec2(0.5, -0.5)
     20          );
     21 
     22          return vec4f(pos[VertexIndex], 0.0, 1.0);
     23        }
     24        `;
     25 
     26        var redFragWGSL = `@fragment
     27        fn main() -> @location(0) vec4f {
     28          return vec4(1.0, 0.0, 0.0, 1.0);
     29        }`;
     30 
     31        const canvas = document.querySelector('canvas');
     32        const adapter = await navigator.gpu?.requestAdapter({ });
     33        const device = await adapter?.requestDevice();
     34        const context = canvas.getContext('webgpu');
     35        const devicePixelRatio = window.devicePixelRatio;
     36        canvas.width = canvas.clientWidth * devicePixelRatio;
     37        canvas.height = canvas.clientHeight * devicePixelRatio;
     38        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
     39        context.configure({
     40            device,
     41            format: presentationFormat,
     42        });
     43        const pipeline = device.createRenderPipeline({
     44            layout: 'auto',
     45            vertex: {
     46                module: device.createShaderModule({
     47                    code: triangleVertWGSL,
     48                }),
     49            },
     50            fragment: {
     51                module: device.createShaderModule({
     52                    code: redFragWGSL,
     53                }),
     54                targets: [
     55                    {
     56                        format: presentationFormat,
     57                    },
     58                ],
     59            },
     60            primitive: {
     61                topology: 'triangle-list',
     62            },
     63        });
     64 
     65        const textureView = context.getCurrentTexture().createView();
     66        const renderPassDescriptor = {
     67            colorAttachments: [
     68                {
     69                    view: textureView,
     70                    clearValue: [0, 0, 0, 1],
     71                    loadOp: 'clear',
     72                    storeOp: 'store',
     73                },
     74            ],
     75        };
     76        const commandEncoder = device.createCommandEncoder();
     77        const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     78        passEncoder.setPipeline(pipeline);
     79        passEncoder.draw(3);
     80        passEncoder.end();
     81        device.queue.submit([commandEncoder.finish()]);
     82        await device.queue.onSubmittedWorkDone();
     83        requestAnimationFrame(() => {
     84          requestAnimationFrame(() => document.documentElement.className = '');
     85        });
     86      } catch (error) {
     87        console.error(error);
     88        document.getElementById('canvas').style.display = 'none';
     89        document.body.append(error.toString());
     90        document.documentElement.className = '';
     91      }
     92    })();
     93  </script>
     94 </html>