bellbind · October 1, 2023 10:33 · bellbind · Mar 12, 2022
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
         To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
         This token is for a Web Origin "http://localhost:8000" (maybe expired at Mar 31, 2022)
      -->
    <meta http-equiv="origin-trial"
          content="AkIL+/THBoi1QEsWbX5SOuMpL6+KGAXKrZE5Bz6yHTuijzvKz2MznuLqE+MH4YSqRi/v1fDK/6JyFzgibTTeNAsAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjUyODMxOTk5fQ==" />
    <meta http-equiv="origin-trial"
          content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
    <script src="./main.js" type="module"></script>
    <style>@media(prefers-color-scheme: dark){:root {color-scheme: dark;}}</style>
    <link rel="icon" href="data:image/x-icon;," />
  </head>
  <body>
    <h1>(Notice: The origin-trial token in this page will be expired at May 15, 2022)</h1>
    <canvas style="width: 80vmin; height: 80vmin; border: solid;" id="canvas"></canvas>
  </body>
 </html>
diff --git a/main.js b/main.js
 // Tiny example for WebGPU API: https://www.w3.org/TR/webgpu/
 const adapter = await navigator.gpu.requestAdapter();
 const device = await adapter.requestDevice();

 // WGSL shaders: https://www.w3.org/TR/WGSL/
 const wgsl = `
 @stage(vertex) fn vmain(@builtin(vertex_index) i: u32) -> @builtin(position) vec4<f32> {
  let t = radians(f32(i) * 120.0);
  return vec4<f32>(-sin(t), cos(t), 0.0, 1.0);
 }

 @stage(fragment) fn fmain() -> @location(0) vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
 }
 `;
 const shader = device.createShaderModule({code: wgsl});

 // gpu config for canvas
 const canvas = document.getElementById("canvas");
 const gpu = canvas.getContext("webgpu");
 const format = gpu.getPreferredFormat(adapter);
 gpu.configure({device, format, size: [canvas.width, canvas.height]});

 // pipeline
 const pipeline = device.createRenderPipeline({
  primitive: {topology: "triangle-list", cullMode: "back"},
  vertex: {module: shader, entryPoint: "vmain", buffers: []},
  fragment: {module: shader, entryPoint: "fmain", targets: [{format}]},
 });

 // render with no vertex buffer
 const render = () => {
  const view = gpu.getCurrentTexture().createView();
  const clearValue = {r: 0, g: 0, b: 0, a: 1}, loadValue = clearValue;
  const renderPass = {colorAttachments: [{view, loadOp: "clear", clearValue, loadValue, storeOp: "store"}]}; //[chrome-99] loadValue
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginRenderPass(renderPass);
  passEncoder.setPipeline(pipeline);
  passEncoder.draw(3,  1);
  (passEncoder.end ?? passEncoder.endPass).call(passEncoder); //[chrome-99] endPass
  device.queue.submit([commandEncoder.finish()]);
 };
 render();
	<!doctype html>
	<html>
	<head>
	<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
	To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
	This token is for a Web Origin "http://localhost:8000" (maybe expired at Mar 31, 2022)
	-->
	<meta http-equiv="origin-trial"
	content="AkIL+/THBoi1QEsWbX5SOuMpL6+KGAXKrZE5Bz6yHTuijzvKz2MznuLqE+MH4YSqRi/v1fDK/6JyFzgibTTeNAsAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjUyODMxOTk5fQ==" />
	<meta http-equiv="origin-trial"
	content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
	<script src="./main.js" type="module"></script>
	<style>@media(prefers-color-scheme: dark){:root {color-scheme: dark;}}</style>
	<link rel="icon" href="data:image/x-icon;," />
	</head>
	<body>
	<h1>(Notice: The origin-trial token in this page will be expired at May 15, 2022)</h1>
	<canvas style="width: 80vmin; height: 80vmin; border: solid;" id="canvas"></canvas>
	</body>
	</html>
	// Tiny example for WebGPU API: https://www.w3.org/TR/webgpu/
	const adapter = await navigator.gpu.requestAdapter();
	const device = await adapter.requestDevice();

	// WGSL shaders: https://www.w3.org/TR/WGSL/
	const wgsl = `
	@stage(vertex) fn vmain(@builtin(vertex_index) i: u32) -> @builtin(position) vec4<f32> {
	let t = radians(f32(i) * 120.0);
	return vec4<f32>(-sin(t), cos(t), 0.0, 1.0);
	}

	@stage(fragment) fn fmain() -> @location(0) vec4<f32> {
	return vec4<f32>(1.0, 0.0, 0.0, 1.0);
	}
	`;
	const shader = device.createShaderModule({code: wgsl});

	// gpu config for canvas
	const canvas = document.getElementById("canvas");
	const gpu = canvas.getContext("webgpu");
	const format = gpu.getPreferredFormat(adapter);
	gpu.configure({device, format, size: [canvas.width, canvas.height]});

	// pipeline
	const pipeline = device.createRenderPipeline({
	primitive: {topology: "triangle-list", cullMode: "back"},
	vertex: {module: shader, entryPoint: "vmain", buffers: []},
	fragment: {module: shader, entryPoint: "fmain", targets: [{format}]},
	});

	// render with no vertex buffer
	const render = () => {
	const view = gpu.getCurrentTexture().createView();
	const clearValue = {r: 0, g: 0, b: 0, a: 1}, loadValue = clearValue;
	const renderPass = {colorAttachments: [{view, loadOp: "clear", clearValue, loadValue, storeOp: "store"}]}; //[chrome-99] loadValue
	const commandEncoder = device.createCommandEncoder();
	const passEncoder = commandEncoder.beginRenderPass(renderPass);
	passEncoder.setPipeline(pipeline);
	passEncoder.draw(3, 1);
	(passEncoder.end ?? passEncoder.endPass).call(passEncoder); //[chrome-99] endPass
	device.queue.submit([commandEncoder.finish()]);
	};
	render();