@@ -17,14 +17,15 @@ quitIfWebGPUNotAvailable(adapter, device);
17
17
18
18
const kInitConfig = {
19
19
scene : 'solid_colors' ,
20
- emulatedDevice : 'none' ,
20
+ leftDevice : 'no emulation' ,
21
+ rightDevice : 'Apple M1 Pro' ,
21
22
sizeLog2 : 3 ,
22
- showResolvedColor : true ,
23
+ showResolvedColor : false ,
23
24
color1 : 0x0000ff ,
24
- alpha1 : 127 ,
25
+ alpha1 : 0 ,
25
26
color2 : 0xff0000 ,
26
27
alpha2 : 16 ,
27
- pause : false ,
28
+ animate : false ,
28
29
} ;
29
30
const config = { ...kInitConfig } ;
30
31
@@ -38,29 +39,41 @@ gui.width = 300;
38
39
} ,
39
40
} ;
40
41
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' ) ;
46
59
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' ] ) ;
51
63
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' ) ;
53
68
draw1Panel . open ( ) ;
54
69
draw1Panel . addColor ( config , 'color1' ) . name ( 'color' ) ;
55
70
draw1Panel . add ( config , 'alpha1' , 0 , 255 ) . name ( 'alpha' ) ;
56
71
57
- const draw2Panel = gui . addFolder ( 'solid_colors Draw 2' ) ;
72
+ const draw2Panel = solidColors . addFolder ( 'Draw 2' ) ;
58
73
draw2Panel . open ( ) ;
59
74
draw2Panel . addColor ( config , 'color2' ) . name ( 'color' ) ;
60
75
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 ) ;
64
77
}
65
78
66
79
//
@@ -94,8 +107,8 @@ let actualMSTexture: GPUTexture, actualMSTextureView: GPUTextureView;
94
107
let emulatedMSTexture : GPUTexture , emulatedMSTextureView : GPUTextureView ;
95
108
let resolveTexture : GPUTexture , resolveTextureView : GPUTextureView ;
96
109
let lastSize = 0 ;
97
- let renderWithEmulatedAlphaToCoveragePipeline : GPURenderPipeline | null ;
98
- let lastEmulatedDevice = 'none ' ;
110
+ let renderWithEmulatedAlphaToCoveragePipeline : GPURenderPipeline | null = null ;
111
+ let lastEmulatedDevice = 'no emulation ' ;
99
112
function resetConfiguredObjects ( ) {
100
113
const size = 2 ** config . sizeLog2 ;
101
114
if ( lastSize !== size ) {
@@ -131,38 +144,42 @@ function resetConfiguredObjects() {
131
144
lastSize = size ;
132
145
}
133
146
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 ;
166
183
}
167
184
}
168
185
@@ -248,11 +265,14 @@ function render() {
248
265
const showMultisampleTextureBG = device . createBindGroup ( {
249
266
layout : showMultisampleTextureBGL ,
250
267
entries : [
251
- { binding : 0 , resource : actualMSTextureView } ,
268
+ {
269
+ binding : 0 ,
270
+ resource : actualMSTextureView ,
271
+ } ,
252
272
{
253
273
binding : 1 ,
254
274
resource :
255
- config . emulatedDevice === 'none '
275
+ config . rightDevice === 'no emulation '
256
276
? actualMSTextureView
257
277
: emulatedMSTextureView ,
258
278
} ,
@@ -337,7 +357,7 @@ function render() {
337
357
}
338
358
339
359
function frame ( ) {
340
- if ( ! config . pause ) {
360
+ if ( config . animate ) {
341
361
// scrub alpha2 over 15 seconds
342
362
let alpha = ( ( performance . now ( ) / 15000 ) % 1 ) * ( 255 + 20 ) - 10 ;
343
363
alpha = Math . max ( 0 , Math . min ( alpha , 255 ) ) ;
0 commit comments