Skip to content

Commit f4ca808

Browse files
quinton-ashleyquinton-ashley
committed
2.26.1
1 parent 22c0f94 commit f4ca808

File tree

7 files changed

+75
-73
lines changed

7 files changed

+75
-73
lines changed

‎deno.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@q5/q5",
3-
"version": "2.26.0",
3+
"version": "2.26.1",
44
"license": "LGPL-3.0",
55
"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
66
"author": "quinton-ashley",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "q5",
3-
"version": "2.26.0",
3+
"version": "2.26.1",
44
"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
55
"author": "quinton-ashley",
66
"contributors": [

‎q5.js

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4346,7 +4346,7 @@ Q5.modules.util = ($, q) => {
43464346
name = name || 'untitled';
43474347
ext = ext || 'png';
43484348
if (imgRegex.test(ext)) {
4349-
if ($.canvas?.renderer == 'webgpu' && data.canvas.renderer == 'c2d') {
4349+
if ($.canvas?.renderer == 'webgpu' && data.canvas?.renderer == 'c2d') {
43504350
data = await $._g._saveCanvas(data, ext);
43514351
} else {
43524352
data = await $._saveCanvas(data, ext);
@@ -4371,8 +4371,9 @@ Q5.modules.util = ($, q) => {
43714371
if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
43724372
c = b;
43734373
b = a;
4374-
a = $.canvas;
4374+
a = $;
43754375
}
4376+
if (a == $.canvas) a = $;
43764377
if (c) saveFile(a, b, c);
43774378
else if (b) {
43784379
let lastDot = b.lastIndexOf('.');
@@ -5473,7 +5474,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
54735474
}
54745475
};
54755476

5476-
$._finishRender = async () => {
5477+
$._finishRender = () => {
54775478
pass.end();
54785479

54795480
pass = encoder.beginRenderPass({
@@ -5505,22 +5506,22 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
55055506
Q5.device.queue.submit([encoder.finish()]);
55065507
$._pass = pass = encoder = null;
55075508

5508-
// destroy buffers
5509-
Q5.device.queue.onSubmittedWorkDone().then(() => {
5510-
for (let b of $._buffers) b.destroy();
5511-
$._buffers = [];
5512-
});
5513-
55145509
// clear the stacks for the next frame
55155510
drawStack.splice(0, drawStack.length);
55165511
colorIndex = 1;
55175512
colorStackIndex = 8;
55185513
matrices = [matrices[0]];
55195514
matricesIndexStack = [];
55205515

5521-
$.texture = frameA;
5516+
$._texture = frameA;
55225517

55235518
for (let m of $._hooks.postRender) m();
5519+
5520+
// destroy buffers
5521+
Q5.device.queue.onSubmittedWorkDone().then(() => {
5522+
for (let b of $._buffers) b.destroy();
5523+
$._buffers = [];
5524+
});
55245525
};
55255526
};
55265527

@@ -6429,13 +6430,16 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
64296430

64306431
$._textureBindGroups = [];
64316432

6432-
$._saveCanvas = async (img, ext) => {
6433-
let graphicsFrame = img._graphics && img._drawStack?.length;
6434-
if (graphicsFrame) img.finishFrame();
6433+
$._saveCanvas = async (g, ext) => {
6434+
let makeFrame = g._drawStack?.length;
6435+
if (makeFrame) {
6436+
g._render();
6437+
g._finishRender();
6438+
}
64356439

6436-
let texture = img.texture;
6440+
let texture = g._texture;
64376441

6438-
if (graphicsFrame) img.beginFrame();
6442+
if (makeFrame) g._beginRender();
64396443

64406444
let w = texture.width,
64416445
h = texture.height,
@@ -6446,8 +6450,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
64466450
usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
64476451
});
64486452

6449-
$._buffers.push(buffer);
6450-
64516453
let en = Q5.device.createCommandEncoder();
64526454

64536455
en.copyTextureToBuffer({ texture }, { buffer, bytesPerRow, rowsPerImage: h }, { width: w, height: h });
@@ -6482,6 +6484,8 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
64826484
let ctx = cnv.getContext('2d', { colorSpace });
64836485
ctx.putImageData(data, 0, 0);
64846486

6487+
$._buffers.push(buffer);
6488+
64856489
// Convert to blob then data URL
64866490
let blob = await cnv.convertToBlob({ type: 'image/' + ext });
64876491
return await new Promise((resolve) => {
@@ -6533,10 +6537,10 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
65336537
}
65346538

65356539
texture.index = tIdx + vidFrames;
6536-
img.texture = texture;
6540+
img._texture = texture;
65376541

65386542
$._textureBindGroups[texture.index] = Q5.device.createBindGroup({
6539-
label: img.src || 'canvas',
6543+
label: img.src || texture.label || 'canvas',
65406544
layout: textureLayout,
65416545
entries: [
65426546
{ binding: 0, resource: $._imageSampler },
@@ -6587,16 +6591,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
65876591
$._addTexture(g, g._frameA);
65886592
$._addTexture(g, g._frameB);
65896593
g._beginRender();
6590-
6591-
g.finishFrame = function () {
6592-
this._render();
6593-
this._finishRender();
6594-
};
6595-
g.beginFrame = function () {
6596-
this.resetMatrix();
6597-
this._beginRender();
6598-
this.frameCount++;
6599-
};
66006594
} else $._extendImage(g);
66016595
return g;
66026596
};
@@ -6618,7 +6612,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
66186612

66196613
$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
66206614
let isVideo;
6621-
if (img.texture == undefined) {
6615+
if (img._texture == undefined) {
66226616
isVideo = img.tagName == 'VIDEO';
66236617
if (!isVideo || !img.width || !img.currentTime) return;
66246618
if (img.flipped) $.scale(-1, 1);
@@ -6630,14 +6624,17 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
66306624
w = cnv.width,
66316625
h = cnv.height,
66326626
pd = img._pixelDensity || 1,
6633-
graphicsFrame = img._graphics && img._drawStack?.length;
6627+
makeFrame = img._graphics && img._drawStack?.length;
66346628

6635-
if (graphicsFrame) img.finishFrame();
6629+
if (makeFrame) {
6630+
img._render();
6631+
img._finishRender();
6632+
}
66366633

66376634
if (img.modified) {
66386635
Q5.device.queue.copyExternalImageToTexture(
66396636
{ source: cnv },
6640-
{ texture: img.texture, colorSpace: $.canvas.colorSpace },
6637+
{ texture: img._texture, colorSpace: $.canvas.colorSpace },
66416638
[w, h, 1]
66426639
);
66436640
img.frameCount++;
@@ -6667,9 +6664,13 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
66676664
addVert(r, b, u1, v1, ci, ti, ia);
66686665

66696666
if (!isVideo) {
6670-
$._drawStack.push($._imagePL, img.texture.index);
6667+
$._drawStack.push($._imagePL, img._texture.index);
66716668

6672-
if (graphicsFrame) img.beginFrame();
6669+
if (makeFrame) {
6670+
img.resetMatrix();
6671+
img._beginRender();
6672+
img.frameCount++;
6673+
}
66736674
} else {
66746675
// render video
66756676
let externalTexture = Q5.device.importExternalTexture({ source: img });

‎q5.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/q5-util.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Q5.modules.util = ($, q) => {
6565
name = name || 'untitled';
6666
ext = ext || 'png';
6767
if (imgRegex.test(ext)) {
68-
if ($.canvas?.renderer == 'webgpu' && data.canvas.renderer == 'c2d') {
68+
if ($.canvas?.renderer == 'webgpu' && data.canvas?.renderer == 'c2d') {
6969
data = await $._g._saveCanvas(data, ext);
7070
} else {
7171
data = await $._saveCanvas(data, ext);
@@ -90,8 +90,9 @@ Q5.modules.util = ($, q) => {
9090
if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
9191
c = b;
9292
b = a;
93-
a = $.canvas;
93+
a = $;
9494
}
95+
if (a == $.canvas) a = $;
9596
if (c) saveFile(a, b, c);
9697
else if (b) {
9798
let lastDot = b.lastIndexOf('.');

‎src/q5-webgpu-canvas.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -733,7 +733,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
733733
}
734734
};
735735

736-
$._finishRender = async () => {
736+
$._finishRender = () => {
737737
pass.end();
738738

739739
pass = encoder.beginRenderPass({
@@ -765,22 +765,22 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
765765
Q5.device.queue.submit([encoder.finish()]);
766766
$._pass = pass = encoder = null;
767767

768-
// destroy buffers
769-
Q5.device.queue.onSubmittedWorkDone().then(() => {
770-
for (let b of $._buffers) b.destroy();
771-
$._buffers = [];
772-
});
773-
774768
// clear the stacks for the next frame
775769
drawStack.splice(0, drawStack.length);
776770
colorIndex = 1;
777771
colorStackIndex = 8;
778772
matrices = [matrices[0]];
779773
matricesIndexStack = [];
780774

781-
$.texture = frameA;
775+
$._texture = frameA;
782776

783777
for (let m of $._hooks.postRender) m();
778+
779+
// destroy buffers
780+
Q5.device.queue.onSubmittedWorkDone().then(() => {
781+
for (let b of $._buffers) b.destroy();
782+
$._buffers = [];
783+
});
784784
};
785785
};
786786

‎src/q5-webgpu-image.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -172,13 +172,16 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
172172

173173
$._textureBindGroups = [];
174174

175-
$._saveCanvas = async (img, ext) => {
176-
let graphicsFrame = img._graphics && img._drawStack?.length;
177-
if (graphicsFrame) img.finishFrame();
175+
$._saveCanvas = async (g, ext) => {
176+
let makeFrame = g._drawStack?.length;
177+
if (makeFrame) {
178+
g._render();
179+
g._finishRender();
180+
}
178181

179-
let texture = img.texture;
182+
let texture = g._texture;
180183

181-
if (graphicsFrame) img.beginFrame();
184+
if (makeFrame) g._beginRender();
182185

183186
let w = texture.width,
184187
h = texture.height,
@@ -189,8 +192,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
189192
usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
190193
});
191194

192-
$._buffers.push(buffer);
193-
194195
let en = Q5.device.createCommandEncoder();
195196

196197
en.copyTextureToBuffer({ texture }, { buffer, bytesPerRow, rowsPerImage: h }, { width: w, height: h });
@@ -225,6 +226,8 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
225226
let ctx = cnv.getContext('2d', { colorSpace });
226227
ctx.putImageData(data, 0, 0);
227228

229+
$._buffers.push(buffer);
230+
228231
// Convert to blob then data URL
229232
let blob = await cnv.convertToBlob({ type: 'image/' + ext });
230233
return await new Promise((resolve) => {
@@ -276,10 +279,10 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
276279
}
277280

278281
texture.index = tIdx + vidFrames;
279-
img.texture = texture;
282+
img._texture = texture;
280283

281284
$._textureBindGroups[texture.index] = Q5.device.createBindGroup({
282-
label: img.src || 'canvas',
285+
label: img.src || texture.label || 'canvas',
283286
layout: textureLayout,
284287
entries: [
285288
{ binding: 0, resource: $._imageSampler },
@@ -330,16 +333,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
330333
$._addTexture(g, g._frameA);
331334
$._addTexture(g, g._frameB);
332335
g._beginRender();
333-
334-
g.finishFrame = function () {
335-
this._render();
336-
this._finishRender();
337-
};
338-
g.beginFrame = function () {
339-
this.resetMatrix();
340-
this._beginRender();
341-
this.frameCount++;
342-
};
343336
} else $._extendImage(g);
344337
return g;
345338
};
@@ -361,7 +354,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
361354

362355
$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
363356
let isVideo;
364-
if (img.texture == undefined) {
357+
if (img._texture == undefined) {
365358
isVideo = img.tagName == 'VIDEO';
366359
if (!isVideo || !img.width || !img.currentTime) return;
367360
if (img.flipped) $.scale(-1, 1);
@@ -373,14 +366,17 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
373366
w = cnv.width,
374367
h = cnv.height,
375368
pd = img._pixelDensity || 1,
376-
graphicsFrame = img._graphics && img._drawStack?.length;
369+
makeFrame = img._graphics && img._drawStack?.length;
377370

378-
if (graphicsFrame) img.finishFrame();
371+
if (makeFrame) {
372+
img._render();
373+
img._finishRender();
374+
}
379375

380376
if (img.modified) {
381377
Q5.device.queue.copyExternalImageToTexture(
382378
{ source: cnv },
383-
{ texture: img.texture, colorSpace: $.canvas.colorSpace },
379+
{ texture: img._texture, colorSpace: $.canvas.colorSpace },
384380
[w, h, 1]
385381
);
386382
img.frameCount++;
@@ -410,9 +406,13 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
410406
addVert(r, b, u1, v1, ci, ti, ia);
411407

412408
if (!isVideo) {
413-
$._drawStack.push($._imagePL, img.texture.index);
409+
$._drawStack.push($._imagePL, img._texture.index);
414410

415-
if (graphicsFrame) img.beginFrame();
411+
if (makeFrame) {
412+
img.resetMatrix();
413+
img._beginRender();
414+
img.frameCount++;
415+
}
416416
} else {
417417
// render video
418418
let externalTexture = Q5.device.importExternalTexture({ source: img });

0 commit comments

Comments
 (0)