text: (window.webpackJsonp=window.webpackJsonp||[]).push([[66],{484:function(n,e,o){"use strict";o.r(e),e.default="const canvas = document.querySelector('#canvas');\ncanvas.width = canvas.height = 50;\ncanvas.style = 'width:500px;height:500px';\nconst adapter = await navigator.gpu.requestAdapter();\nconst device = await adapter.requestDevice();\n\n\nconst vs = `\n    struct VertexOutput {\n        [[builtin(position)]] position : vec4<f32>;\n    };\n\n    [[stage(vertex)]]\n    fn main() ->  VertexOutput {\n        var output : VertexOutput;\n        output.position = vec4<f32>(-0.5, 0.5, 0.0, 1.0);\n        return output;\n    }\n`;\n\nconst fs = `\n    [[block]] struct Uniforms {\n      color : vec4<f32>;\n    };\n    [[binding(0), group(0)]] var<uniform> uniforms : Uniforms;\n\n    [[stage(fragment)]]\n    fn main() -> [[location(0)]] vec4<f32> {\n      return uniforms.color;\n    }\n`;\n\nconst context = canvas.getContext('webgpu');\n\nconst swapChainFormat = 'bgra8unorm';\n\nconst swapChain = context.configure({\n    device,\n    format: swapChainFormat,\n});\n\nconst uniformsBindGroupLayout = device.createBindGroupLayout({\n    entries: [{\n        binding: 0,\n        visibility: GPUShaderStage.FRAGMENT,\n        buffer: {}\n    }]\n});\n\nconst uniformBufferSize = 4 * 4;\n\nconst uniformBuffer = device.createBuffer({\n    size: uniformBufferSize,\n    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n});\n\nconst uniformBindGroup = device.createBindGroup({\n    layout: uniformsBindGroupLayout,\n    entries: [{\n        binding: 0,\n        resource: {\n            buffer: uniformBuffer,\n        },\n    }],\n});\n\nconst pipelineLayout = device.createPipelineLayout({ \n    bindGroupLayouts: [uniformsBindGroupLayout] \n});\nconst pipeline = device.createRenderPipeline({\n    layout: pipelineLayout,\n    vertex: {\n        module: device.createShaderModule({\n            code: vs\n        }),\n        entryPoint: 'main'\n    },\n    fragment: {\n        module: device.createShaderModule({\n            code: fs\n        }),\n        entryPoint: 'main',\n        targets:[{\n            format: swapChainFormat\n        }]\n    },\n    primitive:{\n        topology: 'point-list'\n    },\n});\n\nconst color = new Float32Array(4);\nfunction randomColor(){\n    color[0] = Math.random();\n    color[1] = Math.random();\n    color[2] = Math.random();\n    color[3] = 1;\n}\n\nfunction render() {\n    randomColor();\n    device.queue.writeBuffer(uniformBuffer, 0, color);\n\n    const commandEncoder = device.createCommandEncoder({});\n    const textureView = context.getCurrentTexture().createView();\n\n    const renderPassDescriptor = {\n        colorAttachments: [{\n            view: textureView,\n            loadValue: {\n                r: 0,\n                g: 0,\n                b: 0,\n                a: 1\n            },\n        }],\n    };\n\n    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n    passEncoder.setPipeline(pipeline);\n    passEncoder.setBindGroup(0, uniformBindGroup);\n    passEncoder.draw(1, 1, 0, 0);\n    passEncoder.endPass();\n\n    device.queue.submit([commandEncoder.finish()]);\n}\n\nconst ticker = new Hilo3d.Ticker(60);\nticker.start();\nticker.addTick({\n    tick(){\n        render();\n    }\n});"}}]);