Recommend a rendering engine that is more convenient to write native webgpu

[ruofeng618]

You can pay attention to GEngine, the engine provides a Model class that can be used for basic rendering packaging, very flexible and easy to use

import { Model } from "@gengine-js/gengine";
const init = async () => {
    const adapter = await navigator.gpu.requestAdapter();
    const device = await adapter.requestDevice();
    const canvas = document.getElementById("app");
    const context = canvas.getContext("webgpu");

    const devicePixelRatio = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * devicePixelRatio;
    canvas.height = canvas.clientHeight * devicePixelRatio;
    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
    context.configure({
        device,
        format: presentationFormat,
        alphaMode: "premultiplied"
    });
    const depthTexture = device.createTexture({
        size: [canvas.width, canvas.height],
        format: "depth24plus",
        usage: GPUTextureUsage.RENDER_ATTACHMENT
    });
    const renderPassDescriptor = {
        colorAttachments: [
            {
                view: undefined, // Assigned later

                clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
                loadOp: "clear",
                storeOp: "store"
            }
        ],
        depthStencilAttachment: {
            view: depthTexture.createView(),

            depthClearValue: 1.0,
            depthLoadOp: "clear",
            depthStoreOp: "store"
        }
    };
    const triangle = new Model({
        shaderId: "triangle", //must and only
        frag: `
            @fragment
            fn main() -> @location(0) vec4<f32> {
              return vec4(1.0, 0.0, 0.0, 1.0);
            }
           `,
        vert: `
            @vertex fn main( @builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
                var pos = array<vec2<f32>, 3>(
                  vec2(0.0, 0.5),
                  vec2(-0.5, -0.5),
                  vec2(0.5, -0.5)
                );

                return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
              }
           `,
        renderState: {
            primitive: {
                topology: "triangle-list"
            },
            targets: [
                {
                    format: presentationFormat
                }
            ],
            depthStencil: {
                depthWriteEnabled: true,
                depthCompare: "less",
                format: "depth24plus"
            }
        },
        draw: {
            count: 6,
            instanceCount: 1
        }
    });
    function animate() {
        requestAnimationFrame(animate);
        renderPassDescriptor.colorAttachments[0].view = context.getCurrentTexture().createView();
        const commandEncoder = device.createCommandEncoder();
        const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
        triangle.render({ device, passEncoder });
        passEncoder.end();
        device.queue.submit([commandEncoder.finish()]);
    }
    animate();
};
init();

[kainino0x]

Thanks for posting the recommendation, nice work on the engine! This repository exists as samples of raw WebGPU usage, so we won't use it here - but maybe a few folks will see your recommendation from this issue!

[ruofeng618]

Thanks for posting the recommendation, nice work on the engine! This repository exists as samples of raw WebGPU usage, so we won't use it here - but maybe a few folks will see your recommendation from this issue! thank you