WebGPU中画一个圆

最新推荐文章于 2024-07-29 15:37:55 发布

负七分之四十九

最新推荐文章于 2024-07-29 15:37:55 发布

阅读量218

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/o_OzZZ/article/details/130136872

版权

在这里插入图片描述
0.0 我这里没check环境啊，就当默认有了。刚学习webgpu，有懂哥可以多交流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        WebGPU Circle Example
    </title>
</head>

<body>
    <canvas id="canvas" width="900" height="900"></canvas>

    <script type="module">
        const canvas = document.getElementById("canvas");
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const context = canvas.getContext("webgpu");
        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

        const width = 900;

        const shader = `
            struct Output {
                @builtin(position) Position : vec4<f32>,
                @location(0) coord : vec2<f32>,
            }

            @vertex
            fn vs_main(
               @location(0) pos: vec4<f32>, @location(1) coord: vec2<f32>
            ) -> Output {
                var output: Output;
                output.Position = pos;
                output.coord = coord;
                return output;
            }

            @fragment
            fn fs_main(
                in: Output
            ) -> @location(0) vec4<f32> {
                
                let coord = in.coord;

                let r = dot(coord, coord);

                if (r > 0.95) {
                    discard;
                }

                return vec4<f32>(1.0, 0.0, 0.0, 1.0);
            }
        `

        const CreateGPUBuffer = (device, data, usageFlag = GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST) => {
            const buffer = device.createBuffer({
                size: data.byteLength,
                usage: usageFlag,
                mappedAtCreation: true
            });
            new Float32Array(buffer.getMappedRange()).set(data);
            buffer.unmap();
            return buffer;
        }

        context.configure({
            device: device,
            format: presentationFormat,
            alphaMode: 'opaque', // or 'premultiplied'
        });


        const vertexData = new Float32Array([
            -0.5, -0.5,  
            0.5, -0.5,  
            -0.5,  0.5,  

            -0.5,  0.5,  
            0.5, -0.5,  
            0.5,  0.5,  
        ]);

        const coordData = new Float32Array([
            -1, -1 ,    
            1, -1,    
            -1, 1,    

            -1, 1, 
            1, -1,   
            1, 1,   
        ]);

        const vertexBuffer = CreateGPUBuffer(device, vertexData);
        const coordBuffer = CreateGPUBuffer(device, coordData);
            
        const queue = device.queue;

        const pipeline = device.createRenderPipeline({
            layout:'auto',
            vertex: {
                module: device.createShaderModule({                    
                    code: shader
                }),
                entryPoint: "vs_main",
                buffers:[
                    {
                        arrayStride: 2 * 4,
                        attributes: [{
                            shaderLocation: 0,
                            format: "float32x2",
                            offset: 0
                        }]
                    },
                    {
                        arrayStride: 2 * 4,
                        attributes: [{
                            shaderLocation: 1,
                            format: "float32x2",
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {
                module: device.createShaderModule({                    
                    code: shader
                }),
                entryPoint: "fs_main",
                targets: [
                    {
                        format: presentationFormat
                    }
                ]
            },
            primitive:{
                topology: "triangle-list",
            }
        });

        const commandEncoder = device.createCommandEncoder();
        const textureView = context.getCurrentTexture().createView();
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: textureView,
                clearValue: {r: 0.2, g: 0.247, b: 0.314, a: 1.0}, //background color
                loadOp: 'clear',
                storeOp: 'store'
            }]
        });
        renderPass.setPipeline(pipeline);
        renderPass.setVertexBuffer(0, vertexBuffer);
        renderPass.setVertexBuffer(1, coordBuffer);
        renderPass.draw(6);
        renderPass.end();

        device.queue.submit([commandEncoder.finish()]);
    </script>
</body>

</html>