WebGPU: tint vulkan issue

README.md

WebGPU: tint vulkan issue

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<canvas></canvas>

index.js

const code = `
struct VertexInput {
    @location(0) position: vec4f,
    @location(1) color: vec4f,
};

struct VertexOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f,
};

@vertex
fn main(in: VertexInput) -> VertexOutput {
    var out: VertexOutput;
    out.position = in.position;
    out.color = in.color;
    return out;
}
`

const code2 = `
@fragment
fn main(@location(0) c: vec4f) -> @location(0) vec4f {
  return c;
}
`

const adapter = await navigator.gpu.requestAdapter();
/** {GPUDevice} */
const device = await adapter.requestDevice();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');

context.configure({
  device,
  format: presentationFormat,
})

const module = device.createShaderModule({code});
const module2 = device.createShaderModule({code: code2});

function createBuffer(device, usage, data) {
  const f32 = new Float32Array(data);
  const buffer = device.createBuffer({
    usage,
    size: f32.byteLength,
  });
  device.queue.writeBuffer(buffer, 0, f32);
  return buffer;
}

const positionBuffer = createBuffer(device, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, [
  0, 1,
  -1, -1,
  1, -1,
]);

const colorBuffer = createBuffer(device, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, [
  1, 0, 0, 1,
  0, 1, 0, 1,
  0, 0, 1, 1,
]);

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module,
    buffers: [
      {
        arrayStride: 2 * 4, // 2 floats, 4 bytes each
        attributes: [
          {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
        ],
      },
      {
        arrayStride: 4 * 4, // 4 floats, 4 bytes each
        attributes: [
          {shaderLocation: 1, offset: 0, format: 'float32x4'},  // position
        ],
      },
    ],
  },
  fragment: {
    module: module2,
    targets: [{ format: presentationFormat }],
  },
});

const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({
  colorAttachments: [
    {
      view: context.getCurrentTexture(),
      loadOp: 'clear',
      storeOp: 'store',
    },
  ],
});
pass.setVertexBuffer(0, positionBuffer);
pass.setVertexBuffer(1, colorBuffer);
pass.setPipeline(pipeline);
pass.draw(3);
pass.end();
device.queue.submit([encoder.finish()]);

jsGist.json

{"name":"WebGPU: tint vulkan issue","settings":{},"filenames":["index.html","index.css","index.js"]}