Skip to content

Commit 4cba57e

Browse files
davepagurekdavepagurek
committed
Cache data views
1 parent b91a4c5 commit 4cba57e

1 file changed

Lines changed: 84 additions & 41 deletions

File tree

‎src/webgpu/p5.RendererWebGPU.js‎

Lines changed: 84 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ function rendererWebGPU(p5, fn) {
3535

3636
this.samplers = new Map();
3737

38+
// Cache for current frame's canvas texture view
39+
this.currentCanvasColorTexture = null;
40+
this.currentCanvasColorTextureView = null;
41+
3842
// Single reusable staging buffer for pixel reading
3943
this.pixelReadBuffer = null;
4044
this.pixelReadBufferSize = 0;
@@ -160,6 +164,7 @@ function rendererWebGPU(p5, fn) {
160164
_updateSize() {
161165
if (this.depthTexture && this.depthTexture.destroy) {
162166
this.depthTexture.destroy();
167+
this.depthTextureView = null;
163168
}
164169
this.depthTexture = this.device.createTexture({
165170
size: {
@@ -170,11 +175,22 @@ function rendererWebGPU(p5, fn) {
170175
format: this.depthFormat,
171176
usage: GPUTextureUsage.RENDER_ATTACHMENT,
172177
});
178+
this.depthTextureView = this.depthTexture.createView();
173179

174180
// Clear the main canvas after resize
175181
this.clear();
176182
}
177183

184+
_getCanvasColorTextureView() {
185+
const canvasTexture = this.drawingContext.getCurrentTexture();
186+
// If texture changed (new frame), update cache
187+
if (this.currentCanvasColorTexture !== canvasTexture) {
188+
this.currentCanvasColorTexture = canvasTexture;
189+
this.currentCanvasColorTextureView = canvasTexture.createView();
190+
}
191+
return this.currentCanvasColorTextureView;
192+
}
193+
178194
clear(...args) {
179195
const _r = args[0] || 0;
180196
const _g = args[1] || 0;
@@ -185,25 +201,28 @@ function rendererWebGPU(p5, fn) {
185201

186202
// Use framebuffer texture if active, otherwise use canvas texture
187203
const activeFramebuffer = this.activeFramebuffer();
188-
const colorTexture = activeFramebuffer ?
189-
(activeFramebuffer.aaColorTexture || activeFramebuffer.colorTexture) :
190-
this.drawingContext.getCurrentTexture();
191204

192205
const colorAttachment = {
193-
view: colorTexture.createView(),
206+
view: activeFramebuffer
207+
? (activeFramebuffer.aaColorTexture
208+
? activeFramebuffer.aaColorTextureView
209+
: activeFramebuffer.colorTextureView)
210+
: this._getCanvasColorTextureView(),
194211
clearValue: { r: _r * _a, g: _g * _a, b: _b * _a, a: _a },
195212
loadOp: 'clear',
196213
storeOp: 'store',
197214
// If using multisampled texture, resolve to non-multisampled texture
198-
resolveTarget: activeFramebuffer && activeFramebuffer.aaColorTexture ?
199-
activeFramebuffer.colorTexture.createView() : undefined,
215+
resolveTarget: activeFramebuffer && activeFramebuffer.aaColorTexture
216+
? activeFramebuffer.colorTextureView
217+
: undefined,
200218
};
201219

202220
// Use framebuffer depth texture if active, otherwise use canvas depth texture
203-
const depthTexture = activeFramebuffer ?
204-
(activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
205-
this.depthTexture;
206-
const depthTextureView = depthTexture?.createView();
221+
const depthTextureView = activeFramebuffer
222+
? (activeFramebuffer.aaDepthTexture
223+
? activeFramebuffer.aaDepthTextureView
224+
: activeFramebuffer.depthTextureView)
225+
: this.depthTextureView;
207226
const depthAttachment = depthTextureView
208227
? {
209228
view: depthTextureView,
@@ -238,10 +257,11 @@ function rendererWebGPU(p5, fn) {
238257
const activeFramebuffer = this.activeFramebuffer();
239258

240259
// Use framebuffer depth texture if active, otherwise use canvas depth texture
241-
const depthTexture = activeFramebuffer ?
242-
(activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
243-
this.depthTexture;
244-
const depthTextureView = depthTexture?.createView();
260+
const depthTextureView = activeFramebuffer
261+
? (activeFramebuffer.aaDepthTexture
262+
? activeFramebuffer.aaDepthTextureView
263+
: activeFramebuffer.depthTextureView)
264+
: this.depthTextureView;
245265

246266
if (!depthTextureView) {
247267
// No depth buffer to clear
@@ -786,7 +806,7 @@ function rendererWebGPU(p5, fn) {
786806
}
787807
const commandEncoder = this.device.createCommandEncoder();
788808

789-
const depthTextureView = this.depthTexture?.createView();
809+
const depthTextureView = this.depthTextureView;
790810
const depthAttachment = depthTextureView
791811
? {
792812
view: depthTextureView,
@@ -974,6 +994,10 @@ function rendererWebGPU(p5, fn) {
974994

975995
// Submit the commands
976996
this.queue.submit(commandsToSubmit);
997+
998+
// Reset canvas texture cache for next frame
999+
this.currentCanvasColorTexture = null;
1000+
this.currentCanvasColorTextureView = null;
9771001
}
9781002
}
9791003

@@ -1059,24 +1083,27 @@ function rendererWebGPU(p5, fn) {
10591083

10601084
// Use framebuffer texture if active, otherwise use canvas texture
10611085
const activeFramebuffer = this.activeFramebuffer();
1062-
const colorTexture = activeFramebuffer ?
1063-
(activeFramebuffer.aaColorTexture || activeFramebuffer.colorTexture) :
1064-
this.drawingContext.getCurrentTexture();
10651086

10661087
const colorAttachment = {
1067-
view: colorTexture.createView(),
1088+
view: activeFramebuffer
1089+
? (activeFramebuffer.aaColorTexture
1090+
? activeFramebuffer.aaColorTextureView
1091+
: activeFramebuffer.colorTextureView)
1092+
: this._getCanvasColorTextureView(),
10681093
loadOp: "load",
10691094
storeOp: "store",
10701095
// If using multisampled texture, resolve to non-multisampled texture
1071-
resolveTarget: activeFramebuffer && activeFramebuffer.aaColorTexture ?
1072-
activeFramebuffer.colorTexture.createView() : undefined,
1096+
resolveTarget: activeFramebuffer && activeFramebuffer.aaColorTexture
1097+
? activeFramebuffer.colorTextureView
1098+
: undefined,
10731099
};
10741100

10751101
// Use framebuffer depth texture if active, otherwise use canvas depth texture
1076-
const depthTexture = activeFramebuffer ?
1077-
(activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
1078-
this.depthTexture;
1079-
const depthTextureView = depthTexture?.createView();
1102+
const depthTextureView = activeFramebuffer
1103+
? (activeFramebuffer.aaDepthTexture
1104+
? activeFramebuffer.aaDepthTextureView
1105+
: activeFramebuffer.depthTextureView)
1106+
: this.depthTextureView;
10801107
const renderPassDescriptor = {
10811108
colorAttachments: [colorAttachment],
10821109
depthStencilAttachment: depthTextureView
@@ -1643,16 +1670,18 @@ function rendererWebGPU(p5, fn) {
16431670
const commandEncoder = this.device.createCommandEncoder();
16441671

16451672
const activeFramebuffer = this.activeFramebuffer();
1646-
const depthTexture = activeFramebuffer ?
1647-
(activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
1648-
this.depthTexture;
1673+
const depthTextureView = activeFramebuffer
1674+
? (activeFramebuffer.aaDepthTexture
1675+
? activeFramebuffer.aaDepthTextureView
1676+
: activeFramebuffer.depthTextureView)
1677+
: this.depthTextureView;
16491678

1650-
if (!depthTexture) {
1679+
if (!depthTextureView) {
16511680
return;
16521681
}
16531682

16541683
const depthStencilAttachment = {
1655-
view: depthTexture.createView(),
1684+
view: depthTextureView,
16561685
stencilLoadOp: 'clear',
16571686
stencilStoreOp: 'store',
16581687
stencilClearValue: 0,
@@ -1682,16 +1711,18 @@ function rendererWebGPU(p5, fn) {
16821711
const commandEncoder = this.device.createCommandEncoder();
16831712

16841713
const activeFramebuffer = this.activeFramebuffer();
1685-
const depthTexture = activeFramebuffer ?
1686-
(activeFramebuffer.aaDepthTexture || activeFramebuffer.depthTexture) :
1687-
this.depthTexture;
1714+
const depthTextureView = activeFramebuffer
1715+
? (activeFramebuffer.aaDepthTexture
1716+
? activeFramebuffer.aaDepthTextureView
1717+
: activeFramebuffer.depthTextureView)
1718+
: this.depthTextureView;
16881719

1689-
if (!depthTexture) {
1720+
if (!depthTextureView) {
16901721
return;
16911722
}
16921723

16931724
const depthStencilAttachment = {
1694-
view: depthTexture.createView(),
1725+
view: depthTextureView,
16951726
stencilLoadOp: 'clear',
16961727
stencilStoreOp: 'store',
16971728
stencilClearValue: 1,
@@ -2145,15 +2176,19 @@ function rendererWebGPU(p5, fn) {
21452176
// Clean up existing textures
21462177
if (framebuffer.colorTexture && framebuffer.colorTexture.destroy) {
21472178
framebuffer.colorTexture.destroy();
2179+
framebuffer.colorTextureView = null;
21482180
}
21492181
if (framebuffer.aaColorTexture && framebuffer.aaColorTexture.destroy) {
21502182
framebuffer.aaColorTexture.destroy();
2183+
framebuffer.aaColorTextureView = null;
21512184
}
21522185
if (framebuffer.depthTexture && framebuffer.depthTexture.destroy) {
21532186
framebuffer.depthTexture.destroy();
2187+
framebuffer.depthTextureView = null;
21542188
}
21552189
if (framebuffer.aaDepthTexture && framebuffer.aaDepthTexture.destroy) {
21562190
framebuffer.aaDepthTexture.destroy();
2191+
framebuffer.aaDepthTextureView = null;
21572192
}
21582193

21592194
const baseDescriptor = {
@@ -2172,6 +2207,7 @@ function rendererWebGPU(p5, fn) {
21722207
sampleCount: 1,
21732208
};
21742209
framebuffer.colorTexture = this.device.createTexture(colorTextureDescriptor);
2210+
framebuffer.colorTextureView = framebuffer.colorTexture.createView();
21752211

21762212
// Create multisampled texture for rendering if antialiasing is enabled
21772213
if (framebuffer.antialias) {
@@ -2181,6 +2217,7 @@ function rendererWebGPU(p5, fn) {
21812217
sampleCount: this._getValidSampleCount(framebuffer.antialiasSamples),
21822218
};
21832219
framebuffer.aaColorTexture = this.device.createTexture(aaColorTextureDescriptor);
2220+
framebuffer.aaColorTextureView = framebuffer.aaColorTexture.createView();
21842221
}
21852222

21862223
if (framebuffer.useDepth) {
@@ -2200,6 +2237,7 @@ function rendererWebGPU(p5, fn) {
22002237
sampleCount: 1,
22012238
};
22022239
framebuffer.depthTexture = this.device.createTexture(depthTextureDescriptor);
2240+
framebuffer.depthTextureView = framebuffer.depthTexture.createView();
22032241

22042242
// Create multisampled depth texture for rendering if antialiasing is enabled
22052243
if (framebuffer.antialias) {
@@ -2209,6 +2247,7 @@ function rendererWebGPU(p5, fn) {
22092247
sampleCount: this._getValidSampleCount(framebuffer.antialiasSamples),
22102248
};
22112249
framebuffer.aaDepthTexture = this.device.createTexture(aaDepthTextureDescriptor);
2250+
framebuffer.aaDepthTextureView = framebuffer.aaDepthTexture.createView();
22122251
}
22132252
}
22142253

@@ -2220,20 +2259,24 @@ function rendererWebGPU(p5, fn) {
22202259
const commandEncoder = this.device.createCommandEncoder();
22212260

22222261
// Clear the color texture (and multisampled texture if it exists)
2223-
const colorTexture = framebuffer.aaColorTexture || framebuffer.colorTexture;
22242262
const colorAttachment = {
2225-
view: colorTexture.createView(),
2263+
view: framebuffer.aaColorTexture
2264+
? framebuffer.aaColorTextureView
2265+
: framebuffer.colorTextureView,
22262266
loadOp: "clear",
22272267
storeOp: "store",
22282268
clearValue: { r: 0, g: 0, b: 0, a: 0 },
2229-
resolveTarget: framebuffer.aaColorTexture ?
2230-
framebuffer.colorTexture.createView() : undefined,
2269+
resolveTarget: framebuffer.aaColorTexture
2270+
? framebuffer.colorTextureView
2271+
: undefined,
22312272
};
22322273

22332274
// Clear the depth texture if it exists
22342275
const depthTexture = framebuffer.aaDepthTexture || framebuffer.depthTexture;
22352276
const depthStencilAttachment = depthTexture ? {
2236-
view: depthTexture.createView(),
2277+
view: framebuffer.aaDepthTexture
2278+
? framebuffer.aaDepthTextureView
2279+
: framebuffer.depthTextureView,
22372280
depthLoadOp: "clear",
22382281
depthStoreOp: "store",
22392282
depthClearValue: 1.0,
@@ -2257,7 +2300,7 @@ function rendererWebGPU(p5, fn) {
22572300

22582301
_getFramebufferColorTextureView(framebuffer) {
22592302
if (framebuffer.colorTexture) {
2260-
return framebuffer.colorTexture.createView();
2303+
return framebuffer.colorTextureView;
22612304
}
22622305
return null;
22632306
}

0 commit comments

Comments
 (0)