Skip to content

Commit 6745d3d

Browse files
committed
[WHLSL] Vertex shader and fragment shader need to be able to come from two different programs
https://bugs.webkit.org/show_bug.cgi?id=195446 Reviewed by Saam Barati. Source/WebCore: When an author configures WebGPU to render things, the author provides a vertex shader and a fragment shader, and they both execute within the same draw call. It's common for authors coming from WebGL to put the two shaders in distinct files. Until this patch, WHLSL was unable to process two shaders from different sources which were meant to be hooked together. The first thing this patch does is add the notion of a "shader module" to the WHLSL compiler. This represents the source code containing one or more shaders. When the author wants to actually compile their source, they supply one or more shader modules to the compiler. The compiler then looks in the first module for the vertex shader and the second module for the fragment shader. The two modules are passed by reference, so they may refer to the same underlying object, which is supported. Shader modules have this interesting behavior where, within a shader module, funtion / type names may refer to each other, but may not refer to any other name within any other shader module. They behave as if all the names inside the module are not exported. So, it would seem that the most natural way to support this would be to run the WHLSL compiler and the MSL compiler twice independently, once for each module. However, this means that our compile times would double, which would be unfortunate. Instead, a more performant option would be to make the WHLSL compiler smart enough to handle multiple shader modules at once, and to produce a single merged output program that contains everything. It does this by parsing all the shader modules into a single Program object, but remembering which items in the Program came from which places. This is implemented by teaching the WHLSL compiler about "namespaces." There are three namespaces: one for each shader module, and an additional one for the standard library. Every global object (e.g. named types and functions) knows which namespace it lives inside. The NameResolver has been educated to understand namespaces, so when you ask it for a name in a particular namespace, it will look up all the names both in that namespace and in the standard library's namespace, and it will union the results together. Function overload resolution doesn't actually go through the name resolver; instead, it's handled by sorting all functions into buckets such that any CallExpression only has to look in a single bucket to find all its potential overloads. These buckets can't be educated about namespaces (consider a function which has overloads in all 3 namespaces that is called from both shader modules - all the overloads must end up in the same bucket). Therefore, this logic is moved into resolveFunctionOverload(), which will now disregard candidate functions if they are in an inaccessible namespace. Tests: webgpu/whlsl/separate-shader-modules/separate-shader-modules-10.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-11.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-12.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-13.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-14.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-15.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-16.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-17.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-18.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-19.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-2.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-20.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-21.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-22.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-23.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-24.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-25.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-26.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-27.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-3.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-4.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-5.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-6.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-7.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-8.html webgpu/whlsl/separate-shader-modules/separate-shader-modules-9.html webgpu/whlsl/separate-shader-modules/separate-shader-modules.html * Modules/webgpu/WHLSL/AST/WHLSLFunctionDeclaration.h: (WebCore::WHLSL::AST::FunctionDeclaration::nameSpace const): (WebCore::WHLSL::AST::FunctionDeclaration::setNameSpace): * Modules/webgpu/WHLSL/AST/WHLSLNameSpace.h: Copied from Source/WebCore/Modules/webgpu/WHLSL/WHLSLStandardLibraryUtilities.h. * Modules/webgpu/WHLSL/AST/WHLSLNamedType.h: (WebCore::WHLSL::AST::NamedType::nameSpace const): (WebCore::WHLSL::AST::NamedType::setNameSpace): * Modules/webgpu/WHLSL/Metal/WHLSLFunctionWriter.cpp: (WebCore::WHLSL::Metal::emitMetalFunctions): * Modules/webgpu/WHLSL/WHLSLCheckDuplicateFunctions.cpp: (WebCore::WHLSL::DuplicateFunctionKey::operator== const): * Modules/webgpu/WHLSL/WHLSLChecker.cpp: (WebCore::WHLSL::FunctionKey::operator== const): (WebCore::WHLSL::checkOperatorOverload): (WebCore::WHLSL::Checker::checkShaderType): (WebCore::WHLSL::Checker::visit): (WebCore::WHLSL::Checker::resolveFunction): * Modules/webgpu/WHLSL/WHLSLLexer.cpp: * Modules/webgpu/WHLSL/WHLSLNameContext.cpp: (WebCore::WHLSL::NameContext::add): (WebCore::WHLSL::NameContext::getTypes): (WebCore::WHLSL::NameContext::getFunctions): (WebCore::WHLSL::NameContext::searchTypes const): (WebCore::WHLSL::NameContext::searchFunctions const): (WebCore::WHLSL::NameContext::globalExists const): (WebCore::WHLSL::NameContext::localExists const): (WebCore::WHLSL::NameContext::exists): Deleted. * Modules/webgpu/WHLSL/WHLSLNameContext.h: (WebCore::WHLSL::NameContext::setCurrentNameSpace): * Modules/webgpu/WHLSL/WHLSLNameResolver.cpp: (WebCore::WHLSL::NameResolver::NameResolver): (WebCore::WHLSL::NameResolver::visit): (WebCore::WHLSL::resolveNamesInTypes): (WebCore::WHLSL::resolveTypeNamesInFunctions): * Modules/webgpu/WHLSL/WHLSLNameResolver.h: (WebCore::WHLSL::NameResolver::setCurrentNameSpace): * Modules/webgpu/WHLSL/WHLSLParser.cpp: (WebCore::WHLSL::Parser::parse): (WebCore::WHLSL::Parser::fail): (WebCore::WHLSL::Parser::consumeIntegralLiteral): (WebCore::WHLSL::Parser::consumeNonNegativeIntegralLiteral): (WebCore::WHLSL::Parser::parseConstantExpression): (WebCore::WHLSL::Parser::parseTypeSuffixAbbreviated): (WebCore::WHLSL::Parser::parseTypeSuffixNonAbbreviated): (WebCore::WHLSL::Parser::parseBuiltInSemantic): (WebCore::WHLSL::Parser::parseResourceSemantic): (WebCore::WHLSL::Parser::parseStageInOutSemantic): (WebCore::WHLSL::Parser::parseEnumerationDefinition): (WebCore::WHLSL::Parser::parseEnumerationMember): (WebCore::WHLSL::Parser::parseNumThreadsFunctionAttribute): (WebCore::WHLSL::Parser::parseVertexOrFragmentFunctionDeclaration): (WebCore::WHLSL::Parser::parseRegularFunctionDeclaration): (WebCore::WHLSL::Parser::parseSwitchCase): (WebCore::WHLSL::Parser::parseForLoop): (WebCore::WHLSL::Parser::parseVariableDeclarations): (WebCore::WHLSL::Parser::completeAssignment): (WebCore::WHLSL::Parser::parsePossibleTernaryConditional): (WebCore::WHLSL::Parser::parseTerm): * Modules/webgpu/WHLSL/WHLSLPrepare.cpp: (WebCore::WHLSL::ShaderModule::ShaderModule): (WebCore::WHLSL::createShaderModule): (WebCore::WHLSL::ShaderModuleDeleter::operator()): (WebCore::WHLSL::prepareShared): (WebCore::WHLSL::prepare): * Modules/webgpu/WHLSL/WHLSLPrepare.h: * Modules/webgpu/WHLSL/WHLSLProgram.h: (WebCore::WHLSL::Program::append): * Modules/webgpu/WHLSL/WHLSLResolveOverloadImpl.cpp: (WebCore::WHLSL::resolveFunctionOverloadImpl): (WebCore::WHLSL::resolveFunctionOverload): * Modules/webgpu/WHLSL/WHLSLResolveOverloadImpl.h: * Modules/webgpu/WHLSL/WHLSLSemanticMatcher.cpp: (WebCore::WHLSL::matchSemantics): (WebCore::WHLSL::findEntryPoint): Deleted. * Modules/webgpu/WHLSL/WHLSLSemanticMatcher.h: * Modules/webgpu/WHLSL/WHLSLStandardLibraryUtilities.cpp: (WebCore::WHLSL::includeStandardLibrary): * Modules/webgpu/WHLSL/WHLSLStandardLibraryUtilities.h: * WebCore.xcodeproj/project.pbxproj: * platform/graphics/gpu/GPUShaderModule.h: (WebCore::GPUShaderModule::platformShaderModule const): (WebCore::GPUShaderModule::whlslModule const): (WebCore::GPUShaderModule::whlslSource const): Deleted. * platform/graphics/gpu/cocoa/GPUComputePipelineMetal.mm: (WebCore::trySetFunctions): (WebCore::convertComputePipelineDescriptor): * platform/graphics/gpu/cocoa/GPURenderPipelineMetal.mm: (WebCore::trySetMetalFunctions): (WebCore::trySetFunctions): (WebCore::convertRenderPipelineDescriptor): * platform/graphics/gpu/cocoa/GPUShaderModuleMetal.mm: (WebCore::GPUShaderModule::tryCreate): (WebCore::GPUShaderModule::GPUShaderModule): LayoutTests: * webgpu/whlsl/separate-shader-modules/separate-shader-modules-10-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-10.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-11-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-11.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-12-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-12.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-13-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-13.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-14-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-14.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-15-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-15.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-16-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-16.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-17-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-17.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-18-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-18.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-19-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-19.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-2-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-2.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-20-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-20.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-21-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-21.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-22-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-22.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-23-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-23.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-24-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-24.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-25-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-25.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-26-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-26.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-27-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-27.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-3-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-3.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-4-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-4.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-5-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-5.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-6-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-6.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-7-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-7.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-8-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-8.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-9-expected.txt: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-9.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules-expected.html: Added. * webgpu/whlsl/separate-shader-modules/separate-shader-modules.html: Added. Canonical link: https://commits.webkit.org/214731@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248993 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent a0e18ce commit 6745d3d

85 files changed

Lines changed: 3555 additions & 305 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

LayoutTests/ChangeLog

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,65 @@
1+
2019-08-21 Myles C. Maxfield <mmaxfield@apple.com>
2+
3+
[WHLSL] Vertex shader and fragment shader need to be able to come from two different programs
4+
https://bugs.webkit.org/show_bug.cgi?id=195446
5+
6+
Reviewed by Saam Barati.
7+
8+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-10-expected.html: Added.
9+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-10.html: Added.
10+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-11-expected.html: Added.
11+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-11.html: Added.
12+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-12-expected.html: Added.
13+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-12.html: Added.
14+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-13-expected.html: Added.
15+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-13.html: Added.
16+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-14-expected.html: Added.
17+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-14.html: Added.
18+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-15-expected.html: Added.
19+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-15.html: Added.
20+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-16-expected.html: Added.
21+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-16.html: Added.
22+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-17-expected.html: Added.
23+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-17.html: Added.
24+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-18-expected.html: Added.
25+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-18.html: Added.
26+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-19-expected.html: Added.
27+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-19.html: Added.
28+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-2-expected.html: Added.
29+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-2.html: Added.
30+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-20-expected.txt: Added.
31+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-20.html: Added.
32+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-21-expected.txt: Added.
33+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-21.html: Added.
34+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-22-expected.txt: Added.
35+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-22.html: Added.
36+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-23-expected.txt: Added.
37+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-23.html: Added.
38+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-24-expected.html: Added.
39+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-24.html: Added.
40+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-25-expected.txt: Added.
41+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-25.html: Added.
42+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-26-expected.html: Added.
43+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-26.html: Added.
44+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-27-expected.txt: Added.
45+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-27.html: Added.
46+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-3-expected.txt: Added.
47+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-3.html: Added.
48+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-4-expected.txt: Added.
49+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-4.html: Added.
50+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-5-expected.txt: Added.
51+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-5.html: Added.
52+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-6-expected.txt: Added.
53+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-6.html: Added.
54+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-7-expected.html: Added.
55+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-7.html: Added.
56+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-8-expected.txt: Added.
57+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-8.html: Added.
58+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-9-expected.txt: Added.
59+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-9.html: Added.
60+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules-expected.html: Added.
61+
* webgpu/whlsl/separate-shader-modules/separate-shader-modules.html: Added.
62+
163
2019-08-21 Ryosuke Niwa <rniwa@webkit.org>
264

365
SVG element should become focusable when focus and key event listeners are added
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../js/webgpu-functions.js"></script>
5+
</head>
6+
<body>
7+
<canvas id="canvas" width="400" height="400"></canvas>
8+
<script>
9+
const canvas = document.getElementById("canvas");
10+
drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
11+
</script>
12+
</body>
13+
</html>
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../js/webgpu-functions.js"></script>
5+
</head>
6+
<body>
7+
<canvas id="canvas" width="400" height="400"></canvas>
8+
<script>
9+
const vertexShaderSource = `
10+
vertex float4 vertexShader(float4 position : attribute(0)) : SV_Position {
11+
return position;
12+
}`;
13+
14+
const fragmentShaderSource = `
15+
typedef Foo = int;
16+
fragment float4 fragmentShader(float4 position : SV_Position) : SV_Target 0 {
17+
Foo x;
18+
return float4(1, 1, 1, 1);
19+
}
20+
`;
21+
22+
const canvas = document.getElementById("canvas");
23+
24+
async function start(device) {
25+
const vertexShaderModule = device.createShaderModule({code: vertexShaderSource, isWHLSL: true});
26+
const fragmentShaderModule = device.createShaderModule({code: fragmentShaderSource, isWHLSL: true});
27+
const vertexStage = {module: vertexShaderModule, entryPoint: "vertexShader"};
28+
const fragmentStage = {module: fragmentShaderModule, entryPoint: "fragmentShader"};
29+
const primitiveTopology = "triangle-strip";
30+
const rasterizationState = {frontFace: "cw", cullMode: "none"};
31+
const alphaBlend = {};
32+
const colorBlend = {};
33+
const colorStates = [{format: "rgba8unorm", alphaBlend, colorBlend, writeMask: 15}]; // GPUColorWriteBits.ALL
34+
const depthStencilState = null;
35+
36+
const attribute = {shaderLocation: 0, format: "float4"};
37+
const input = {stride: 16, attributeSet: [attribute]};
38+
const inputs = [input];
39+
const vertexInput = {vertexBuffers: inputs};
40+
41+
const pipelineLayoutDescriptor = {bindGroupLayouts: []};
42+
const pipelineLayout = device.createPipelineLayout(pipelineLayoutDescriptor);
43+
44+
const renderPipelineDescriptor = {vertexStage, fragmentStage, primitiveTopology, rasterizationState, colorStates, depthStencilState, vertexInput, sampleCount: 1, layout: pipelineLayout};
45+
const renderPipeline = device.createRenderPipeline(renderPipelineDescriptor);
46+
47+
const vertexBufferDescriptor = {size: Float32Array.BYTES_PER_ELEMENT * 4 * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.MAP_WRITE};
48+
const vertexBuffer = device.createBuffer(vertexBufferDescriptor);
49+
const vertexBufferArrayBuffer = await vertexBuffer.mapWriteAsync();
50+
const vertexBufferFloat32Array = new Float32Array(vertexBufferArrayBuffer);
51+
vertexBufferFloat32Array[0] = -0.5;
52+
vertexBufferFloat32Array[1] = -0.5;
53+
vertexBufferFloat32Array[2] = 1.0;
54+
vertexBufferFloat32Array[3] = 1;
55+
vertexBufferFloat32Array[4] = -0.5;
56+
vertexBufferFloat32Array[5] = 0.5;
57+
vertexBufferFloat32Array[6] = 1.0;
58+
vertexBufferFloat32Array[7] = 1;
59+
vertexBufferFloat32Array[8] = 0.5;
60+
vertexBufferFloat32Array[9] = -0.5;
61+
vertexBufferFloat32Array[10] = 1.0;
62+
vertexBufferFloat32Array[11] = 1;
63+
vertexBufferFloat32Array[12] = 0.5;
64+
vertexBufferFloat32Array[13] = 0.5;
65+
vertexBufferFloat32Array[14] = 1.0;
66+
vertexBufferFloat32Array[15] = 1;
67+
vertexBuffer.unmap();
68+
69+
const context = canvas.getContext("gpu");
70+
const swapChainDescriptor = {device, format: "bgra8unorm"};
71+
const swapChain = context.configureSwapChain(swapChainDescriptor);
72+
const outputTexture = swapChain.getCurrentTexture();
73+
const outputTextureView = outputTexture.createDefaultView();
74+
75+
const commandEncoder = device.createCommandEncoder(); // {}
76+
const red = {r: 0, g: 0, b: 1, a: 1};
77+
const colorAttachments = [{attachment: outputTextureView, resolveTarget: null, loadOp: "clear", storeOp: "store", clearColor: red}];
78+
const depthStencilAttachment = null;
79+
const renderPassDescriptor = {colorAttachments, depthStencilAttachment};
80+
const renderPassEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
81+
renderPassEncoder.setPipeline(renderPipeline);
82+
renderPassEncoder.setVertexBuffers(0, [vertexBuffer], [0]);
83+
renderPassEncoder.draw(4, 1, 0, 0);
84+
renderPassEncoder.endPass();
85+
const commandBuffer = commandEncoder.finish();
86+
device.getQueue().submit([commandBuffer]);
87+
}
88+
if (window.testRunner)
89+
testRunner.waitUntilDone();
90+
getBasicDevice().then(function(device) {
91+
start(device).then(function() {
92+
if (window.testRunner)
93+
testRunner.notifyDone();
94+
}, function() {
95+
if (window.testRunner)
96+
testRunner.notifyDone();
97+
});
98+
}, function() {
99+
drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
100+
if (window.testRunner)
101+
testRunner.notifyDone();
102+
});
103+
</script>
104+
</body>
105+
</html>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../js/webgpu-functions.js"></script>
5+
</head>
6+
<body>
7+
<canvas id="canvas" width="400" height="400"></canvas>
8+
<script>
9+
const canvas = document.getElementById("canvas");
10+
drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
11+
</script>
12+
</body>
13+
</html>
Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../js/webgpu-functions.js"></script>
5+
</head>
6+
<body>
7+
<canvas id="canvas" width="400" height="400"></canvas>
8+
<script>
9+
const vertexShaderSource = `
10+
vertex float4 vertexShader(float4 position : attribute(0)) : SV_Position {
11+
return position;
12+
}`;
13+
14+
const fragmentShaderSource = `
15+
struct Foo {
16+
int x;
17+
}
18+
19+
fragment float4 fragmentShader(float4 position : SV_Position) : SV_Target 0 {
20+
Foo f;
21+
return float4(1, 1, 1, 1);
22+
}
23+
`;
24+
25+
const canvas = document.getElementById("canvas");
26+
27+
async function start(device) {
28+
const vertexShaderModule = device.createShaderModule({code: vertexShaderSource, isWHLSL: true});
29+
const fragmentShaderModule = device.createShaderModule({code: fragmentShaderSource, isWHLSL: true});
30+
const vertexStage = {module: vertexShaderModule, entryPoint: "vertexShader"};
31+
const fragmentStage = {module: fragmentShaderModule, entryPoint: "fragmentShader"};
32+
const primitiveTopology = "triangle-strip";
33+
const rasterizationState = {frontFace: "cw", cullMode: "none"};
34+
const alphaBlend = {};
35+
const colorBlend = {};
36+
const colorStates = [{format: "rgba8unorm", alphaBlend, colorBlend, writeMask: 15}]; // GPUColorWriteBits.ALL
37+
const depthStencilState = null;
38+
39+
const attribute = {shaderLocation: 0, format: "float4"};
40+
const input = {stride: 16, attributeSet: [attribute]};
41+
const inputs = [input];
42+
const vertexInput = {vertexBuffers: inputs};
43+
44+
const pipelineLayoutDescriptor = {bindGroupLayouts: []};
45+
const pipelineLayout = device.createPipelineLayout(pipelineLayoutDescriptor);
46+
47+
const renderPipelineDescriptor = {vertexStage, fragmentStage, primitiveTopology, rasterizationState, colorStates, depthStencilState, vertexInput, sampleCount: 1, layout: pipelineLayout};
48+
const renderPipeline = device.createRenderPipeline(renderPipelineDescriptor);
49+
50+
const vertexBufferDescriptor = {size: Float32Array.BYTES_PER_ELEMENT * 4 * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.MAP_WRITE};
51+
const vertexBuffer = device.createBuffer(vertexBufferDescriptor);
52+
const vertexBufferArrayBuffer = await vertexBuffer.mapWriteAsync();
53+
const vertexBufferFloat32Array = new Float32Array(vertexBufferArrayBuffer);
54+
vertexBufferFloat32Array[0] = -0.5;
55+
vertexBufferFloat32Array[1] = -0.5;
56+
vertexBufferFloat32Array[2] = 1.0;
57+
vertexBufferFloat32Array[3] = 1;
58+
vertexBufferFloat32Array[4] = -0.5;
59+
vertexBufferFloat32Array[5] = 0.5;
60+
vertexBufferFloat32Array[6] = 1.0;
61+
vertexBufferFloat32Array[7] = 1;
62+
vertexBufferFloat32Array[8] = 0.5;
63+
vertexBufferFloat32Array[9] = -0.5;
64+
vertexBufferFloat32Array[10] = 1.0;
65+
vertexBufferFloat32Array[11] = 1;
66+
vertexBufferFloat32Array[12] = 0.5;
67+
vertexBufferFloat32Array[13] = 0.5;
68+
vertexBufferFloat32Array[14] = 1.0;
69+
vertexBufferFloat32Array[15] = 1;
70+
vertexBuffer.unmap();
71+
72+
const context = canvas.getContext("gpu");
73+
const swapChainDescriptor = {device, format: "bgra8unorm"};
74+
const swapChain = context.configureSwapChain(swapChainDescriptor);
75+
const outputTexture = swapChain.getCurrentTexture();
76+
const outputTextureView = outputTexture.createDefaultView();
77+
78+
const commandEncoder = device.createCommandEncoder(); // {}
79+
const red = {r: 0, g: 0, b: 1, a: 1};
80+
const colorAttachments = [{attachment: outputTextureView, resolveTarget: null, loadOp: "clear", storeOp: "store", clearColor: red}];
81+
const depthStencilAttachment = null;
82+
const renderPassDescriptor = {colorAttachments, depthStencilAttachment};
83+
const renderPassEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
84+
renderPassEncoder.setPipeline(renderPipeline);
85+
renderPassEncoder.setVertexBuffers(0, [vertexBuffer], [0]);
86+
renderPassEncoder.draw(4, 1, 0, 0);
87+
renderPassEncoder.endPass();
88+
const commandBuffer = commandEncoder.finish();
89+
device.getQueue().submit([commandBuffer]);
90+
}
91+
if (window.testRunner)
92+
testRunner.waitUntilDone();
93+
getBasicDevice().then(function(device) {
94+
start(device).then(function() {
95+
if (window.testRunner)
96+
testRunner.notifyDone();
97+
}, function() {
98+
if (window.testRunner)
99+
testRunner.notifyDone();
100+
});
101+
}, function() {
102+
drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
103+
if (window.testRunner)
104+
testRunner.notifyDone();
105+
});
106+
</script>
107+
</body>
108+
</html>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../js/webgpu-functions.js"></script>
5+
</head>
6+
<body>
7+
<canvas id="canvas" width="400" height="400"></canvas>
8+
<script>
9+
const canvas = document.getElementById("canvas");
10+
drawWhiteSquareOnBlueBackgroundInSoftware(canvas);
11+
</script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)