LayoutTests/fast/webgpu/nocrash/poc-275569.html - external/github.com/WebKit/webkit - Git at Google

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>WebGPU triangle</title>
     <script src="../../../resources/js-test-pre.js"></script>
     <script>
         globalThis.testRunner?.dumpAsText();
   globalThis.testRunner?.waitUntilDone();


 onload = async () => {
   let adapter = await navigator.gpu.requestAdapter({});
   let device = await adapter.requestDevice({
     label: 'dev',
     requiredFeatures: [
       'depth-clip-control',
       'texture-compression-etc2',
       'texture-compression-astc',
       'texture-compression-bc',
       'indirect-first-instance',
       'shader-f16',
       'rg11b10ufloat-renderable',
       'bgra8unorm-storage'
     ],
     requiredLimits: {
       maxColorAttachmentBytesPerSample: 49,
       maxVertexAttributes: 22,
       maxVertexBufferArrayStride: 22731,
       maxStorageTexturesPerShaderStage: 13,
       maxBindingsPerBindGroup: 2463,
       maxTextureArrayLayers: 2048,
       maxTextureDimension1D: 9624,
       maxTextureDimension2D: 12505,
       maxVertexBuffers: 12,
       minUniformBufferOffsetAlignment: 32,
     },
   });

   // Clear color for GPURenderPassDescriptor
   const clearColor = { r: 0.0, g: 0.5, b: 1.0, a: 1.0 };

   // Vertex data for triangle
   // Each vertex has 8 values representing position and color: X Y Z W R G B A

   const vertices = new Float32Array([
     0.0,  0.6, 0, 1, 1, 0, 0, 1,
   -0.5, -0.6, 0, 1, 0, 1, 0, 1,
     0.5, -0.6, 0, 1, 0, 0, 1, 1
   ]);

   // Vertex and fragment shaders
   const shaders = `
   struct VertexOut {
     @builtin(position) position : vec4f,
     @location(0) color : vec4f
   }

   @vertex
   fn vertex_main(@location(0) position: vec4f,
                 @location(1) color: vec4f) -> VertexOut
   {
     var output : VertexOut;
     output.position = position;
     output.color = color;
     return output;
   }

   @fragment
   fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
   {
     return fragData.color;
   }
   `;

   // 2: Create a shader module from the shaders template literal
   const shaderModule = device.createShaderModule({
     code: shaders
   });

   // 3: Get reference to the canvas to render on
   const canvas = document.querySelector('#gpuCanvas');
   const context = canvas.getContext('webgpu');

   context.configure({
     device: device,
     format: navigator.gpu.getPreferredCanvasFormat(),
     alphaMode: 'premultiplied'
   });

   // 4: Create vertex buffer to contain vertex data
   const vertexBuffer = device.createBuffer({
     size: vertices.byteLength, // make it big enough to store vertices in
     usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
   });

   // Copy the vertex data over to the GPUBuffer using the writeBuffer() utility function
   device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);

   // 5: Create a GPUVertexBufferLayout and GPURenderPipelineDescriptor to provide a definition of our render pipline
   const vertexBuffers = [{
     attributes: [{
       shaderLocation: 0, // position
       offset: 0,
       format: 'float32x4'
     }, {
       shaderLocation: 1, // color
       offset: 16,
       format: 'float32x4'
     }],
     arrayStride: 32,
     stepMode: 'vertex'
   }];

   const bindGroupLayout = device.createBindGroupLayout({
   entries: [
     {
       binding: 0,
       visibility: GPUShaderStage.COMPUTE,
       buffer: {
         type: "uniform",
         hasDynamicOffset: true,
       },
     },
     {
       binding: 1,
       visibility: GPUShaderStage.FRAGMENT,
       buffer: {
         type: "storage",
         hasDynamicOffset: true,
       },
     },
     {
       binding: 2,
       visibility: GPUShaderStage.FRAGMENT,
       buffer: {
         type: "storage",
         hasDynamicOffset: true,
       },
     },
   ],
   });

   const bindGroupLayout2 = device.createBindGroupLayout({
   entries: [
     {
       binding: 0,
       visibility: GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,
       buffer: {
         type: "uniform",
         hasDynamicOffset: true,
       },
     },
     {
       binding: 1,
       visibility: GPUShaderStage.FRAGMENT,
       buffer: {
         type: "storage",
         hasDynamicOffset: true,
         minBindingSize: 0x12,
       },
     },
     {
       binding: 2,
       visibility: GPUShaderStage.FRAGMENT,
       buffer: {
         type: "storage",
         hasDynamicOffset: true,
       },
     },
   ],
   });

   const pipelineLayout = device.createPipelineLayout({
     bindGroupLayouts: [bindGroupLayout, bindGroupLayout2],
   });

   const pipelineDescriptor = {
     vertex: {
       module: shaderModule,
       entryPoint: 'vertex_main',
       buffers: vertexBuffers
     },
     fragment: {
       module: shaderModule,
       entryPoint: 'fragment_main',
       targets: [{
         format: navigator.gpu.getPreferredCanvasFormat()
       }]
     },
     primitive: {
       topology: 'triangle-list'
     },
     layout: pipelineLayout
   };

   // 6: Create the actual render pipeline

   const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

   // 7: Create GPUCommandEncoder to issue commands to the GPU
   // Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
   let commandEncoder = device.createCommandEncoder();

   // 8: Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass

   const renderPassDescriptor = {
     colorAttachments: [{
       clearValue: clearColor,
       loadOp: 'clear',
       storeOp: 'store',
       view: context.getCurrentTexture().createView()
     }]
   };

   const output = device.createBuffer({
       size: 1024,
       usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
     });

   const output2 = device.createBuffer({
     size: 0x10000000,
     usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
   });

   const outputUniform = device.createBuffer({
       size: 1024,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_SRC
     });

   const bindGroup = device.createBindGroup({
     layout: bindGroupLayout,
     entries: [
       {
         binding: 0,
         resource: {
           buffer: outputUniform,
           size: 500
         },
       },
       {
         binding: 1,
         resource: {
           buffer: output2,
           size: 500
         },
       },
       {
         binding: 2,
         resource: {
           buffer: output,
           size: 500
         },
       },
     ],
   });

   const bindGroup2 = device.createBindGroup({
     layout: bindGroupLayout2,
     entries: [
       {
         binding: 0,
         resource: {
           buffer: outputUniform,
           size: 512
         },
       },
       {
         binding: 1,
         resource: {
           buffer: output,
           size: 512
         },
       },
       {
         binding: 2,
         resource: {
           buffer: output,
           size: 512
         },
       },
     ],
   });

   // 9: Draw the triangle

   let passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

   passEncoder.setPipeline(renderPipeline);
   // passEncoder.setVertexBuffer(0, vertexBuffer);
   // const dynamicOffsets = new Uint32Array([256, 512, 256, 256, 256]);
   // passEncoder.setBindGroup(0, bindGroup, dynamicOffsets, 1, 3);
   // passEncoder.setBindGroup(1, bindGroup2, dynamicOffsets, 1, 3);

   const indexCount = 16;
   const indexBuffer = device.createBuffer({
     size: indexCount * Uint16Array.BYTES_PER_ELEMENT,
     usage: GPUBufferUsage.INDEX,
     mappedAtCreation: true,
   });
   passEncoder.setIndexBuffer(indexBuffer, "uint16");

   const drawValues = device.createBuffer({
     size: 20,
     usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.INDIRECT,
   });
   passEncoder.drawIndexedIndirect(drawValues, 0);

   // passEncoder.draw(3);

   // End the render pass
   passEncoder.end();

   // 10: End frame by passing array of command buffers to command queue for execution
   device.queue.submit([commandEncoder.finish()]);

   // commandEncoder = device.createCommandEncoder();
   // passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
   // passEncoder.setIndexBuffer(indexBuffer, "uint16");
   // passEncoder.end();
   // device.queue.submit([commandEncoder.finish()]);


 };
         debug('Pass')
     globalThis.testRunner?.notifyDone();

   </script>

 </head>
 <body>
   <h1>WebGPU triangle</h1>
   <canvas id="gpuCanvas" width="800" height="600"></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>WebGPU triangle</title>
	<script src="../../../resources/js-test-pre.js"></script>
	<script>
	globalThis.testRunner?.dumpAsText();
	globalThis.testRunner?.waitUntilDone();


	onload = async () => {
	let adapter = await navigator.gpu.requestAdapter({});
	let device = await adapter.requestDevice({
	label: 'dev',
	requiredFeatures: [
	'depth-clip-control',
	'texture-compression-etc2',
	'texture-compression-astc',
	'texture-compression-bc',
	'indirect-first-instance',
	'shader-f16',
	'rg11b10ufloat-renderable',
	'bgra8unorm-storage'
	],
	requiredLimits: {
	maxColorAttachmentBytesPerSample: 49,
	maxVertexAttributes: 22,
	maxVertexBufferArrayStride: 22731,
	maxStorageTexturesPerShaderStage: 13,
	maxBindingsPerBindGroup: 2463,
	maxTextureArrayLayers: 2048,
	maxTextureDimension1D: 9624,
	maxTextureDimension2D: 12505,
	maxVertexBuffers: 12,
	minUniformBufferOffsetAlignment: 32,
	},
	});

	// Clear color for GPURenderPassDescriptor
	const clearColor = { r: 0.0, g: 0.5, b: 1.0, a: 1.0 };

	// Vertex data for triangle
	// Each vertex has 8 values representing position and color: X Y Z W R G B A

	const vertices = new Float32Array([
	0.0, 0.6, 0, 1, 1, 0, 0, 1,
	-0.5, -0.6, 0, 1, 0, 1, 0, 1,
	0.5, -0.6, 0, 1, 0, 0, 1, 1
	]);

	// Vertex and fragment shaders
	const shaders = `
	struct VertexOut {
	@builtin(position) position : vec4f,
	@location(0) color : vec4f
	}

	@vertex
	fn vertex_main(@location(0) position: vec4f,
	@location(1) color: vec4f) -> VertexOut
	{
	var output : VertexOut;
	output.position = position;
	output.color = color;
	return output;
	}

	@fragment
	fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
	{
	return fragData.color;
	}
	`;

	// 2: Create a shader module from the shaders template literal
	const shaderModule = device.createShaderModule({
	code: shaders
	});

	// 3: Get reference to the canvas to render on
	const canvas = document.querySelector('#gpuCanvas');
	const context = canvas.getContext('webgpu');

	context.configure({
	device: device,
	format: navigator.gpu.getPreferredCanvasFormat(),
	alphaMode: 'premultiplied'
	});

	// 4: Create vertex buffer to contain vertex data
	const vertexBuffer = device.createBuffer({
	size: vertices.byteLength, // make it big enough to store vertices in
	usage: GPUBufferUsage.VERTEX \| GPUBufferUsage.COPY_DST,
	});

	// Copy the vertex data over to the GPUBuffer using the writeBuffer() utility function
	device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);

	// 5: Create a GPUVertexBufferLayout and GPURenderPipelineDescriptor to provide a definition of our render pipline
	const vertexBuffers = [{
	attributes: [{
	shaderLocation: 0, // position
	offset: 0,
	format: 'float32x4'
	}, {
	shaderLocation: 1, // color
	offset: 16,
	format: 'float32x4'
	}],
	arrayStride: 32,
	stepMode: 'vertex'
	}];

	const bindGroupLayout = device.createBindGroupLayout({
	entries: [
	{
	binding: 0,
	visibility: GPUShaderStage.COMPUTE,
	buffer: {
	type: "uniform",
	hasDynamicOffset: true,
	},
	},
	{
	binding: 1,
	visibility: GPUShaderStage.FRAGMENT,
	buffer: {
	type: "storage",
	hasDynamicOffset: true,
	},
	},
	{
	binding: 2,
	visibility: GPUShaderStage.FRAGMENT,
	buffer: {
	type: "storage",
	hasDynamicOffset: true,
	},
	},
	],
	});

	const bindGroupLayout2 = device.createBindGroupLayout({
	entries: [
	{
	binding: 0,
	visibility: GPUShaderStage.COMPUTE \| GPUShaderStage.FRAGMENT,
	buffer: {
	type: "uniform",
	hasDynamicOffset: true,
	},
	},
	{
	binding: 1,
	visibility: GPUShaderStage.FRAGMENT,
	buffer: {
	type: "storage",
	hasDynamicOffset: true,
	minBindingSize: 0x12,
	},
	},
	{
	binding: 2,
	visibility: GPUShaderStage.FRAGMENT,
	buffer: {
	type: "storage",
	hasDynamicOffset: true,
	},
	},
	],
	});

	const pipelineLayout = device.createPipelineLayout({
	bindGroupLayouts: [bindGroupLayout, bindGroupLayout2],
	});

	const pipelineDescriptor = {
	vertex: {
	module: shaderModule,
	entryPoint: 'vertex_main',
	buffers: vertexBuffers
	},
	fragment: {
	module: shaderModule,
	entryPoint: 'fragment_main',
	targets: [{
	format: navigator.gpu.getPreferredCanvasFormat()
	}]
	},
	primitive: {
	topology: 'triangle-list'
	},
	layout: pipelineLayout
	};

	// 6: Create the actual render pipeline

	const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

	// 7: Create GPUCommandEncoder to issue commands to the GPU
	// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
	let commandEncoder = device.createCommandEncoder();

	// 8: Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass

	const renderPassDescriptor = {
	colorAttachments: [{
	clearValue: clearColor,
	loadOp: 'clear',
	storeOp: 'store',
	view: context.getCurrentTexture().createView()
	}]
	};

	const output = device.createBuffer({
	size: 1024,
	usage: GPUBufferUsage.STORAGE \| GPUBufferUsage.COPY_SRC
	});

	const output2 = device.createBuffer({
	size: 0x10000000,
	usage: GPUBufferUsage.STORAGE \| GPUBufferUsage.COPY_SRC
	});

	const outputUniform = device.createBuffer({
	size: 1024,
	usage: GPUBufferUsage.UNIFORM \| GPUBufferUsage.COPY_SRC
	});

	const bindGroup = device.createBindGroup({
	layout: bindGroupLayout,
	entries: [
	{
	binding: 0,
	resource: {
	buffer: outputUniform,
	size: 500
	},
	},
	{
	binding: 1,
	resource: {
	buffer: output2,
	size: 500
	},
	},
	{
	binding: 2,
	resource: {
	buffer: output,
	size: 500
	},
	},
	],
	});

	const bindGroup2 = device.createBindGroup({
	layout: bindGroupLayout2,
	entries: [
	{
	binding: 0,
	resource: {
	buffer: outputUniform,
	size: 512
	},
	},
	{
	binding: 1,
	resource: {
	buffer: output,
	size: 512
	},
	},
	{
	binding: 2,
	resource: {
	buffer: output,
	size: 512
	},
	},
	],
	});

	// 9: Draw the triangle

	let passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

	passEncoder.setPipeline(renderPipeline);
	// passEncoder.setVertexBuffer(0, vertexBuffer);
	// const dynamicOffsets = new Uint32Array([256, 512, 256, 256, 256]);
	// passEncoder.setBindGroup(0, bindGroup, dynamicOffsets, 1, 3);
	// passEncoder.setBindGroup(1, bindGroup2, dynamicOffsets, 1, 3);

	const indexCount = 16;
	const indexBuffer = device.createBuffer({
	size: indexCount * Uint16Array.BYTES_PER_ELEMENT,
	usage: GPUBufferUsage.INDEX,
	mappedAtCreation: true,
	});
	passEncoder.setIndexBuffer(indexBuffer, "uint16");

	const drawValues = device.createBuffer({
	size: 20,
	usage: GPUBufferUsage.COPY_DST \| GPUBufferUsage.INDIRECT,
	});
	passEncoder.drawIndexedIndirect(drawValues, 0);

	// passEncoder.draw(3);

	// End the render pass
	passEncoder.end();

	// 10: End frame by passing array of command buffers to command queue for execution
	device.queue.submit([commandEncoder.finish()]);

	// commandEncoder = device.createCommandEncoder();
	// passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
	// passEncoder.setIndexBuffer(indexBuffer, "uint16");
	// passEncoder.end();
	// device.queue.submit([commandEncoder.finish()]);


	};
	debug('Pass')
	globalThis.testRunner?.notifyDone();

	</script>

	</head>
	<body>
	<h1>WebGPU triangle</h1>
	<canvas id="gpuCanvas" width="800" height="600"></canvas>
	</body>
	</html>