ccincotti3/webgpu-triangle-series-part-5.html

## webgpu-triangle-series-part-5.html
<!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>Carmen's Fun WebGPU Triangle</title>
</head>

<body>
    <canvas id="canvas-container"></canvas>
</body>
<script>
    const init = async () => {
        const gpu = navigator.gpu
        if (!gpu) {
            console.error("Hey I didn't find WebGPU in this browser.")
        }

        const canvas = document.getElementById("canvas-container")
        const context = canvas.getContext("webgpu")

        if (!context) {
            console.error("Hey NO CANVAS CONTEXT FOUND!")
        }

        const adapter = await gpu.requestAdapter(); // GPUAdapter
        if (!adapter) {
            console.error("WebGPU cannot be initialized - Adapter not found");
            return null;
        }
        const device = await adapter.requestDevice(); // GPUDevice
        device.lost.then(() => {
            console.error("WebGPU cannot be initialized - Device has been lost");
            return null;
        });

        // ~~ CONFIGURE THE SWAP CHAIN ~~
        // https://carmencincotti.com/2022-04-18/drawing-a-webgpu-triangle/#swap-chain

        // https://www.w3.org/TR/webgpu/#dom-gpu-getpreferredcanvasformat
        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

        context.configure({
            device, // Create link between GPU and canvas.
            format: presentationFormat,
            alphaMode: "opaque"
        });

        // Each vertex has a position and a color packed in memory in X Y Z W R G B A order
        const vertices = new Float32Array([
            -1.0, -1.0, 0, 1, 1, 0, 0, 1, // Bottom left, red
            -0.0, 1.0, 0, 1, 0, 1, 0, 1, // Top, green
            1.0, -1.0, 0, 1, 0, 0, 1, 1, // Bottom right, blue
        ]);

        const vertexBuffer = device.createBuffer({
            size: vertices.byteLength,
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, // https://www.w3.org/TR/webgpu/#buffer-usage
            mappedAtCreation: true,
        });

        // https://www.w3.org/TR/webgpu/#dom-gpubuffer-getmappedrange
        new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
        vertexBuffer.unmap();

        const vertexBuffersDescriptors = [
            {
                attributes: [
                    {
                        // Position
                        shaderLocation: 0,
                        offset: 0,
                        format: "float32x4",
                    },
                    {
                        // Color
                        shaderLocation: 1,
                        offset: 16,
                        format: "float32x4",
                    },
                ],
                arrayStride: 32,
                stepMode: "vertex", // https://www.w3.org/TR/webgpu/#enumdef-gpuvertexstepmode
            },
        ];
    }

    // ~~ DEFINE BASIC SHADERS ~~
    // https://carmencincotti.com/2022-04-18/drawing-a-webgpu-triangle/#the-vertex-and-fragment-shader
    // @builtin https://www.w3.org/TR/WGSL/#builtin-values
    const shaderModule = device.createShaderModule({
        code: `
            struct VertexOut {
                @builtin(position) position : vec4<f32>,
                @location(0) color : vec4<f32>,
            };
            @vertex
            fn vertex_main(@location(0) position: vec4<f32>,
                        @location(1) color: vec4<f32>) -> VertexOut
            {
                var output : VertexOut;
                output.position = position;
                output.color = color;
                return output;
            }
            @fragment
            fn fragment_main(fragData: VertexOut) -> @location(0) vec4<f32>
            {
                return fragData.color;
            }
        `,
    });

    init()

</script>

</html>
	<!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>Carmen's Fun WebGPU Triangle</title>
	</head>

	<body>
	<canvas id="canvas-container"></canvas>
	</body>
	<script>
	const init = async () => {
	const gpu = navigator.gpu
	if (!gpu) {
	console.error("Hey I didn't find WebGPU in this browser.")
	}

	const canvas = document.getElementById("canvas-container")
	const context = canvas.getContext("webgpu")

	if (!context) {
	console.error("Hey NO CANVAS CONTEXT FOUND!")
	}

	const adapter = await gpu.requestAdapter(); // GPUAdapter
	if (!adapter) {
	console.error("WebGPU cannot be initialized - Adapter not found");
	return null;
	}
	const device = await adapter.requestDevice(); // GPUDevice
	device.lost.then(() => {
	console.error("WebGPU cannot be initialized - Device has been lost");
	return null;
	});

	// ~~ CONFIGURE THE SWAP CHAIN ~~
	// https://carmencincotti.com/2022-04-18/drawing-a-webgpu-triangle/#swap-chain

	// https://www.w3.org/TR/webgpu/#dom-gpu-getpreferredcanvasformat
	const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

	context.configure({
	device, // Create link between GPU and canvas.
	format: presentationFormat,
	alphaMode: "opaque"
	});

	// Each vertex has a position and a color packed in memory in X Y Z W R G B A order
	const vertices = new Float32Array([
	-1.0, -1.0, 0, 1, 1, 0, 0, 1, // Bottom left, red
	-0.0, 1.0, 0, 1, 0, 1, 0, 1, // Top, green
	1.0, -1.0, 0, 1, 0, 0, 1, 1, // Bottom right, blue
	]);

	const vertexBuffer = device.createBuffer({
	size: vertices.byteLength,
	usage: GPUBufferUsage.VERTEX \| GPUBufferUsage.COPY_DST, // https://www.w3.org/TR/webgpu/#buffer-usage
	mappedAtCreation: true,
	});

	// https://www.w3.org/TR/webgpu/#dom-gpubuffer-getmappedrange
	new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
	vertexBuffer.unmap();

	const vertexBuffersDescriptors = [
	{
	attributes: [
	{
	// Position
	shaderLocation: 0,
	offset: 0,
	format: "float32x4",
	},
	{
	// Color
	shaderLocation: 1,
	offset: 16,
	format: "float32x4",
	},
	],
	arrayStride: 32,
	stepMode: "vertex", // https://www.w3.org/TR/webgpu/#enumdef-gpuvertexstepmode
	},
	];
	}

	// ~~ DEFINE BASIC SHADERS ~~
	// https://carmencincotti.com/2022-04-18/drawing-a-webgpu-triangle/#the-vertex-and-fragment-shader
	// @builtin https://www.w3.org/TR/WGSL/#builtin-values
	const shaderModule = device.createShaderModule({
	code: `
	struct VertexOut {
	@builtin(position) position : vec4<f32>,
	@location(0) color : vec4<f32>,
	};
	@vertex
	fn vertex_main(@location(0) position: vec4<f32>,
	@location(1) color: vec4<f32>) -> VertexOut
	{
	var output : VertexOut;
	output.position = position;
	output.color = color;
	return output;
	}
	@fragment
	fn fragment_main(fragData: VertexOut) -> @location(0) vec4<f32>
	{
	return fragData.color;
	}
	`,
	});

	init()

	</script>

	</html>