Skip to content

Commit 7316efc

Browse files
committed
WIP
1 parent e65e384 commit 7316efc

File tree

2 files changed

+77
-57
lines changed

2 files changed

+77
-57
lines changed

sample/alphaToCoverage/emulatedAlphaToCoverage.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ type Mask = number;
2323
export const kEmulatedAlphaToCoverage = {
2424
'Apple M1 Pro': `\
2525
fn emulatedAlphaToCoverage(alpha: f32, x: u32, y: u32) -> u32 {
26-
let u = x % 2;
27-
let v = y % 2;
26+
let u = x % 2u;
27+
let v = y % 2u;
2828
if (alpha < 0.5 / 16) { return ${0b0000}; }
2929
// FIXME returning values out of an array is not working, always returns 0
3030
if (alpha < 1.5 / 16) { return array(array(${0b0001}u, ${0b0000}), array(${0b0000}, ${0b0000}))[v][u]; }

sample/alphaToCoverage/main.ts

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@ quitIfWebGPUNotAvailable(adapter, device);
1717

1818
const kInitConfig = {
1919
scene: 'solid_colors',
20-
emulatedDevice: 'none',
20+
leftDevice: 'no emulation',
21+
rightDevice: 'Apple M1 Pro',
2122
sizeLog2: 3,
22-
showResolvedColor: true,
23+
showResolvedColor: false,
2324
color1: 0x0000ff,
24-
alpha1: 127,
25+
alpha1: 0,
2526
color2: 0xff0000,
2627
alpha2: 16,
27-
pause: false,
28+
animate: false,
2829
};
2930
const config = { ...kInitConfig };
3031

@@ -38,29 +39,41 @@ gui.width = 300;
3839
},
3940
};
4041

41-
gui.add(config, 'scene', ['solid_colors']);
42-
gui.add(config, 'emulatedDevice', [
43-
'none',
44-
...Object.keys(kEmulatedAlphaToCoverage),
45-
]);
42+
gui.add(buttons, 'initial').name('reset all settings');
43+
44+
gui.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**');
45+
46+
const leftPanel = gui.addFolder('Left hand side + resolved color');
47+
leftPanel.open();
48+
leftPanel.add(config, 'leftDevice', ['no emulation']).name('emulated device');
49+
leftPanel.add(config, 'showResolvedColor', true);
50+
51+
const rightPanel = gui.addFolder('Right hand side');
52+
rightPanel.open();
53+
rightPanel
54+
.add(config, 'rightDevice', [
55+
'no emulation',
56+
...Object.keys(kEmulatedAlphaToCoverage),
57+
])
58+
.name('emulated device');
4659

47-
const settings = gui.addFolder('Settings');
48-
settings.open();
49-
settings.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**');
50-
settings.add(config, 'showResolvedColor', true);
60+
const scenes = gui.addFolder('Scenes');
61+
scenes.open();
62+
scenes.add(config, 'scene', ['solid_colors']);
5163

52-
const draw1Panel = gui.addFolder('solid_colors Draw 1');
64+
const solidColors = scenes.addFolder('solid_colors scene options');
65+
solidColors.open();
66+
67+
const draw1Panel = solidColors.addFolder('Draw 1');
5368
draw1Panel.open();
5469
draw1Panel.addColor(config, 'color1').name('color');
5570
draw1Panel.add(config, 'alpha1', 0, 255).name('alpha');
5671

57-
const draw2Panel = gui.addFolder('solid_colors Draw 2');
72+
const draw2Panel = solidColors.addFolder('Draw 2');
5873
draw2Panel.open();
5974
draw2Panel.addColor(config, 'color2').name('color');
6075
draw2Panel.add(config, 'alpha2', 0, 255).name('alpha');
61-
draw2Panel.add(config, 'pause', false);
62-
63-
gui.add(buttons, 'initial').name('reset to initial');
76+
draw2Panel.add(config, 'animate', false);
6477
}
6578

6679
//
@@ -94,8 +107,8 @@ let actualMSTexture: GPUTexture, actualMSTextureView: GPUTextureView;
94107
let emulatedMSTexture: GPUTexture, emulatedMSTextureView: GPUTextureView;
95108
let resolveTexture: GPUTexture, resolveTextureView: GPUTextureView;
96109
let lastSize = 0;
97-
let renderWithEmulatedAlphaToCoveragePipeline: GPURenderPipeline | null;
98-
let lastEmulatedDevice = 'none';
110+
let renderWithEmulatedAlphaToCoveragePipeline: GPURenderPipeline | null = null;
111+
let lastEmulatedDevice = 'no emulation';
99112
function resetConfiguredObjects() {
100113
const size = 2 ** config.sizeLog2;
101114
if (lastSize !== size) {
@@ -131,38 +144,42 @@ function resetConfiguredObjects() {
131144
lastSize = size;
132145
}
133146

134-
if (
135-
config.emulatedDevice !== 'none' &&
136-
lastEmulatedDevice !== config.emulatedDevice
137-
) {
138-
// Pipeline to render to a multisampled texture using *emulated* alpha-to-coverage
139-
const renderWithEmulatedAlphaToCoverageModule = device.createShaderModule({
140-
code:
141-
renderWithEmulatedAlphaToCoverageWGSL +
142-
kEmulatedAlphaToCoverage[config.emulatedDevice],
143-
});
144-
renderWithEmulatedAlphaToCoveragePipeline = device.createRenderPipeline({
145-
label: 'renderWithEmulatedAlphaToCoveragePipeline',
146-
layout: 'auto',
147-
vertex: {
148-
module: renderWithEmulatedAlphaToCoverageModule,
149-
buffers: [
150-
{
151-
stepMode: 'instance',
152-
arrayStride: 4,
153-
attributes: [{ shaderLocation: 0, format: 'unorm8x4', offset: 0 }],
154-
},
155-
],
156-
},
157-
fragment: {
158-
module: renderWithEmulatedAlphaToCoverageModule,
159-
targets: [{ format: 'rgba8unorm' }],
160-
},
161-
multisample: { count: 4, alphaToCoverageEnabled: false },
162-
primitive: { topology: 'triangle-list' },
163-
});
164-
} else {
165-
renderWithEmulatedAlphaToCoveragePipeline = null;
147+
if (lastEmulatedDevice !== config.rightDevice) {
148+
if (config.rightDevice === 'no emulation') {
149+
renderWithEmulatedAlphaToCoveragePipeline = null;
150+
} else {
151+
// Pipeline to render to a multisampled texture using *emulated* alpha-to-coverage
152+
const renderWithEmulatedAlphaToCoverageModule = device.createShaderModule(
153+
{
154+
code:
155+
renderWithEmulatedAlphaToCoverageWGSL +
156+
kEmulatedAlphaToCoverage[config.rightDevice],
157+
}
158+
);
159+
renderWithEmulatedAlphaToCoveragePipeline = device.createRenderPipeline({
160+
label: 'renderWithEmulatedAlphaToCoveragePipeline',
161+
layout: 'auto',
162+
vertex: {
163+
module: renderWithEmulatedAlphaToCoverageModule,
164+
buffers: [
165+
{
166+
stepMode: 'instance',
167+
arrayStride: 4,
168+
attributes: [
169+
{ shaderLocation: 0, format: 'unorm8x4', offset: 0 },
170+
],
171+
},
172+
],
173+
},
174+
fragment: {
175+
module: renderWithEmulatedAlphaToCoverageModule,
176+
targets: [{ format: 'rgba8unorm' }],
177+
},
178+
multisample: { count: 4, alphaToCoverageEnabled: false },
179+
primitive: { topology: 'triangle-list' },
180+
});
181+
}
182+
lastEmulatedDevice = config.rightDevice;
166183
}
167184
}
168185

@@ -248,11 +265,14 @@ function render() {
248265
const showMultisampleTextureBG = device.createBindGroup({
249266
layout: showMultisampleTextureBGL,
250267
entries: [
251-
{ binding: 0, resource: actualMSTextureView },
268+
{
269+
binding: 0,
270+
resource: actualMSTextureView,
271+
},
252272
{
253273
binding: 1,
254274
resource:
255-
config.emulatedDevice === 'none'
275+
config.rightDevice === 'no emulation'
256276
? actualMSTextureView
257277
: emulatedMSTextureView,
258278
},
@@ -337,7 +357,7 @@ function render() {
337357
}
338358

339359
function frame() {
340-
if (!config.pause) {
360+
if (config.animate) {
341361
// scrub alpha2 over 15 seconds
342362
let alpha = ((performance.now() / 15000) % 1) * (255 + 20) - 10;
343363
alpha = Math.max(0, Math.min(alpha, 255));

0 commit comments

Comments
 (0)