JusSn/webgpu.html

## webgpu.html
<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<script src="js/set-up-webgpu-contexts.js"></script>
<script id="library" type="x-shader/x-metal">
    #include <metal_stdlib>

    using namespace metal;

    struct Vertex
    {
        float4 position [[position]];
    };

    vertex Vertex vertex_main(uint vid [[vertex_id]])
    {
        Vertex v;
        switch (vid) {
        case 0:
            v.position = float4(-.75, -.75, 0, 1);
            break;
        case 1:
            v.position = float4(.75, -.75, 0, 1);
            break;
        case 2:
            v.position = float4(0, .75, 0, 1);
            break;
        default:
            v.position = float4(0, 0, 0, 1);
        }
        return v;
    }

    fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
    {
        return float4(1.0, 0.0, 0.0, 1.0);
    }
</script>
</head>
<body>
<canvas width="300" height="300"></canvas>
<script>
'use strict';

if (window.testRunner)
    window.testRunner.dumpAsText();

let renderPipeline;

function setUpPipeline() {
    let shaderDescriptor = {
        code: document.getElementById("library").text
    };
    let shaderModule = defaultDevice.createShaderModule(shaderDescriptor);
    if (!shaderModule) {
        testFailed("Could not create WebGPUShaderModule!");
        return;
    }

    let vertexStageDescriptor = {
        module: shaderModule,
        stage: WebGPUShaderStage.VERTEX,
        entryPoint: "vertex_main"
    };

    let fragmentStageDescriptor = {
        module: shaderModule,
        stage: WebGPUShaderStage.FRAGMENT,
        entryPoint: "fragment_main"
    };

    if (!vertexStageDescriptor || !fragmentStageDescriptor) {
        testFailed("Could not create WebGPUPipelineStageDescriptor!");
        return;
    }

    let pipelineDescriptor = {
        stages: [vertexStageDescriptor, fragmentStageDescriptor],
        primitiveTopology: "triangleList"
    };

    if (!pipelineDescriptor) {
        testFailed("Could not create WebGPURenderPipelineDescriptor!");
        return;
    }

    renderPipeline = defaultDevice.createRenderPipeline(pipelineDescriptor);
    if (!renderPipeline) {
        testFailed("Could not create WebGPURenderPipeline!");
        return;
    }
}

function render() {
    let commandBuffer = defaultDevice.createCommandBuffer();
    if (!commandBuffer) {
        testFailed("Could not create WebGPUCommandBuffer!");
        return;
    }

    let texture = context.getNextTexture();
    if (!texture) {
        testFailed("Could not get next WebGPUTexture!");
        return;
    }

    let textureView = texture.createDefaultTextureView();
    if (!textureView) {
        testFailed("Could not create WebGPUTextureView!");
        return;
    }

    // FIXME: Flesh out the rest of WebGPURenderPassDescriptor. Default loadOp, storeOp, clearColor for now.
    let renderPassDescriptor = {
        attachment : textureView
    };

    let renderPassEncoder = commandBuffer.beginRenderPass(renderPassDescriptor);
    if (!renderPassEncoder) {
        testFailed("Could not create WebGPURenderPassEncoder!");
        return;
    }

    renderPassEncoder.setPipeline(renderPipeline);

    // Note that we didn't attach any buffers - the shader is generating the vertices for us.
    renderPassEncoder.draw(3, 1, 0, 0);
    let commandBufferEnd = renderPassEncoder.endPass();
    if (!commandBufferEnd) {
        testFailed("Unable to create WebGPUCommandBuffer from WeGPURenderPassEncoder::endPass!");
        return;
    }

    let queue = defaultDevice.getQueue();
    if (!queue) {
        testFailed("Unable to create default WebGPUQueue!");
        return;
    }
    queue.submit([commandBufferEnd]);

    context.present();
}

let canvas = document.querySelector("canvas");
runWebGPUTestsOnCanvas(canvas, [setUpPipeline, render]);

successfullyParsed = true;
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../resources/js-test-pre.js"></script>
	<script src="js/set-up-webgpu-contexts.js"></script>
	<script id="library" type="x-shader/x-metal">
	#include <metal_stdlib>

	using namespace metal;

	struct Vertex
	{
	float4 position [[position]];
	};

	vertex Vertex vertex_main(uint vid [[vertex_id]])
	{
	Vertex v;
	switch (vid) {
	case 0:
	v.position = float4(-.75, -.75, 0, 1);
	break;
	case 1:
	v.position = float4(.75, -.75, 0, 1);
	break;
	case 2:
	v.position = float4(0, .75, 0, 1);
	break;
	default:
	v.position = float4(0, 0, 0, 1);
	}
	return v;
	}

	fragment float4 fragment_main(Vertex vertexIn [[stage_in]])
	{
	return float4(1.0, 0.0, 0.0, 1.0);
	}
	</script>
	</head>
	<body>
	<canvas width="300" height="300"></canvas>
	<script>
	'use strict';

	if (window.testRunner)
	window.testRunner.dumpAsText();

	let renderPipeline;

	function setUpPipeline() {
	let shaderDescriptor = {
	code: document.getElementById("library").text
	};
	let shaderModule = defaultDevice.createShaderModule(shaderDescriptor);
	if (!shaderModule) {
	testFailed("Could not create WebGPUShaderModule!");
	return;
	}

	let vertexStageDescriptor = {
	module: shaderModule,
	stage: WebGPUShaderStage.VERTEX,
	entryPoint: "vertex_main"
	};

	let fragmentStageDescriptor = {
	module: shaderModule,
	stage: WebGPUShaderStage.FRAGMENT,
	entryPoint: "fragment_main"
	};

	if (!vertexStageDescriptor \|\| !fragmentStageDescriptor) {
	testFailed("Could not create WebGPUPipelineStageDescriptor!");
	return;
	}

	let pipelineDescriptor = {
	stages: [vertexStageDescriptor, fragmentStageDescriptor],
	primitiveTopology: "triangleList"
	};

	if (!pipelineDescriptor) {
	testFailed("Could not create WebGPURenderPipelineDescriptor!");
	return;
	}

	renderPipeline = defaultDevice.createRenderPipeline(pipelineDescriptor);
	if (!renderPipeline) {
	testFailed("Could not create WebGPURenderPipeline!");
	return;
	}
	}

	function render() {
	let commandBuffer = defaultDevice.createCommandBuffer();
	if (!commandBuffer) {
	testFailed("Could not create WebGPUCommandBuffer!");
	return;
	}

	let texture = context.getNextTexture();
	if (!texture) {
	testFailed("Could not get next WebGPUTexture!");
	return;
	}

	let textureView = texture.createDefaultTextureView();
	if (!textureView) {
	testFailed("Could not create WebGPUTextureView!");
	return;
	}

	// FIXME: Flesh out the rest of WebGPURenderPassDescriptor. Default loadOp, storeOp, clearColor for now.
	let renderPassDescriptor = {
	attachment : textureView
	};

	let renderPassEncoder = commandBuffer.beginRenderPass(renderPassDescriptor);
	if (!renderPassEncoder) {
	testFailed("Could not create WebGPURenderPassEncoder!");
	return;
	}

	renderPassEncoder.setPipeline(renderPipeline);

	// Note that we didn't attach any buffers - the shader is generating the vertices for us.
	renderPassEncoder.draw(3, 1, 0, 0);
	let commandBufferEnd = renderPassEncoder.endPass();
	if (!commandBufferEnd) {
	testFailed("Unable to create WebGPUCommandBuffer from WeGPURenderPassEncoder::endPass!");
	return;
	}

	let queue = defaultDevice.getQueue();
	if (!queue) {
	testFailed("Unable to create default WebGPUQueue!");
	return;
	}
	queue.submit([commandBufferEnd]);

	context.present();
	}

	let canvas = document.querySelector("canvas");
	runWebGPUTestsOnCanvas(canvas, [setUpPipeline, render]);

	successfullyParsed = true;
	</script>
	<script src="../resources/js-test-post.js"></script>
	</body>
	</html>