node capture: animating a shaderPaint's opacity makes every position in the invocation render unshaded
Summary
When dapi node capture is given more than one -t position and any one of those
positions falls where a <shaderPaint>'s animated opacity is between 0 and 1, every
frame in that invocation comes back with the shader skipped — including positions that
render correctly when captured on their own.
The frames are silently wrong: they render as if the <shaderPaint> were absent, with no
error on stdout and nothing in dapi logs.
Expected
Each requested position renders the same as an export would, with the shader applied.
shader-paint.md states that exports wait for pipeline compilation; node capture is
documented as the way to check a composition, so it should wait too.
Actual
Measured on a composition where a procedural <shaderPaint> (no media paint below it, in a
<rect>) draws a bright ribbon in the lower half of the frame. The paint's opacity is
driven by an anime.js timeline through a solid-js store, and fades 1 -> 0 starting at 13.57s.
Value quoted is the brightest pixel in the lower half; (22,22,22) is the bare background,
i.e. no shader.
| invocation |
11.62s |
12.90s |
13.70s |
13.90s |
-t 11.62 12.90 (opacity == 1 at both) |
(224,233,255) |
(163,168,189) |
— |
— |
-t 11.62 13.70 |
(22,22,22) |
— |
(22,22,22) |
— |
-t 13.62 13.90 (both mid-fade) |
— |
— |
(22,22,22) |
(22,22,22) |
-t 13.70 (alone) |
— |
— |
(155,160,177) |
— |
-t 13.90 (alone) |
— |
— |
— |
(152,157,175) |
Bisected on the fade boundary: -t 11.62 13.50 is fine, -t 11.62 13.60 fails. The fade
starts at 13.57.
What is and isn't the trigger
- Not the number of positions —
-t 11.7 11.9 12.1 12.3 (four) renders correctly.
- Not the span between positions —
-t 11.62 13.40 (1.8s) renders correctly.
- Not animated uniforms — the control row above animates seven
f32 uniforms per frame
and renders correctly.
- Not contact sheet vs
--separate — both behave the same.
- Not a cold pipeline alone — repeating the failing invocation keeps failing, and
repeating the single-position invocation keeps succeeding, indefinitely.
The one variable that flips it is the paint's own animated opacity.
Guess at the mechanism
Reads like the multi-position path patches the paint's opacity between renders, that patch
invalidates or recompiles the shader pipeline, and — pipeline compilation being async — the
capture doesn't wait for it, so the whole batch rasterises unshaded. A single-position
capture never patches, so it never trips.
Why it matters
This is the verification path. An author checking a shader composition sees frames with no
shader in them and reasonably concludes their own shader or paint stack is broken. It cost me
a couple of hours and one wrong diagnosis: I concluded a <shaderPaint> needs an opaque paint
beneath it to render at all, removed and re-added that paint, and reordered the scene's layers
chasing it — all on frames that were lying. The trap is that the failure looks exactly like a
composition bug, and the "fix" (capture one position at a time) looks exactly like a flake.
Secondary, unconfirmed, possibly unrelated
I could not get a standalone minimal repro to render a <shaderPaint> at all. In a fresh
project, this module renders solid black in node capture and in the app canvas
(dapi screenshot), with no WGSL error in dapi logs:
const RED = `
@fragment
fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
return vec4f(1.0, 0.0, 0.0, 1.0);
}
`;
export default function Repro() {
return (
<rect scene="repro" name="Repro" width={1920} height={1080} fill="#161616">
<rect name="Shaded" x={0} y={540} width={1920} height={540} fill="#000000" start={0} end={3}>
<shaderPaint wgsl={RED} />
</rect>
</rect>
);
}
The same construction (procedural <shaderPaint> on a non-root <rect>, no media below)
renders fine in my real composition, which differs mainly in driving a useTicker() clock and
a solid-js store. If a procedural shader paint needs a running ticker to draw, that is worth
documenting; if it doesn't, this is a second bug.
Repro
dapi mount main.jsx
dapi node capture <scene> -t 11.62 12.90 -S -o ok # both shaded
dapi node capture <scene> -t 11.62 13.70 -S -o bad # both unshaded; 13.70 is mid opacity-fade
dapi node capture <scene> -t 13.70 -S -o single # same position alone: shaded
Environment
|
|
| dapi |
0.129.0 |
| platform |
darwin 25.5.0 (arm64) |
| node |
v20.19.0 |
| app |
running |
App logs
13:31:59.130 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:31:59.130 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:32:28.954 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:32:28.954 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:33:51.672 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:33:51.672 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:34:34.819 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
13:34:34.819 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:07:08.524 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:07:08.524 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:08:24.495 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:08:24.495 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:09:38.567 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:09:38.567 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:10:15.172 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:10:15.172 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:11:03.604 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:11:03.604 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:12:02.211 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:12:02.211 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:26:47.088 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:26:47.088 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:32:45.192 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:32:45.192 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:34:45.349 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:34:45.349 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:43:13.345 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:43:13.345 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:44:08.070 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:44:08.070 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:51:06.863 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:51:06.864 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:54:40.699 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
16:54:40.699 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:00:04.370 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:00:04.370 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:02:15.685 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:02:15.685 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:03:43.441 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:03:43.441 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:06:11.692 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:06:11.692 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:06:43.398 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:06:43.398 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:07:30.377 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:07:30.377 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:08:44.148 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:08:44.148 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:15:51.870 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
17:15:51.871 [error] Error drawing <HtmlPaint> content: InvalidStateError: Failed to execute 'drawElementImage' on 'CanvasRenderingContext2D': No cached paint record for element. (file:///Applications/Diffusion%20Studio.app/Contents/Resources/app/web/assets/index-CJwuYvmu.js:15)
node capture: animating a shaderPaint's opacity makes every position in the invocation render unshaded
Summary
When
dapi node captureis given more than one-tposition and any one of thosepositions falls where a
<shaderPaint>'s animatedopacityis between 0 and 1, everyframe in that invocation comes back with the shader skipped — including positions that
render correctly when captured on their own.
The frames are silently wrong: they render as if the
<shaderPaint>were absent, with noerror on stdout and nothing in
dapi logs.Expected
Each requested position renders the same as an export would, with the shader applied.
shader-paint.mdstates that exports wait for pipeline compilation;node captureisdocumented as the way to check a composition, so it should wait too.
Actual
Measured on a composition where a procedural
<shaderPaint>(no media paint below it, in a<rect>) draws a bright ribbon in the lower half of the frame. The paint'sopacityisdriven by an anime.js timeline through a solid-js store, and fades 1 -> 0 starting at 13.57s.
Value quoted is the brightest pixel in the lower half;
(22,22,22)is the bare background,i.e. no shader.
-t 11.62 12.90(opacity == 1 at both)-t 11.62 13.70-t 13.62 13.90(both mid-fade)-t 13.70(alone)-t 13.90(alone)Bisected on the fade boundary:
-t 11.62 13.50is fine,-t 11.62 13.60fails. The fadestarts at 13.57.
What is and isn't the trigger
-t 11.7 11.9 12.1 12.3(four) renders correctly.-t 11.62 13.40(1.8s) renders correctly.f32uniforms per frameand renders correctly.
--separate— both behave the same.repeating the single-position invocation keeps succeeding, indefinitely.
The one variable that flips it is the paint's own animated
opacity.Guess at the mechanism
Reads like the multi-position path patches the paint's
opacitybetween renders, that patchinvalidates or recompiles the shader pipeline, and — pipeline compilation being async — the
capture doesn't wait for it, so the whole batch rasterises unshaded. A single-position
capture never patches, so it never trips.
Why it matters
This is the verification path. An author checking a shader composition sees frames with no
shader in them and reasonably concludes their own shader or paint stack is broken. It cost me
a couple of hours and one wrong diagnosis: I concluded a
<shaderPaint>needs an opaque paintbeneath it to render at all, removed and re-added that paint, and reordered the scene's layers
chasing it — all on frames that were lying. The trap is that the failure looks exactly like a
composition bug, and the "fix" (capture one position at a time) looks exactly like a flake.
Secondary, unconfirmed, possibly unrelated
I could not get a standalone minimal repro to render a
<shaderPaint>at all. In a freshproject, this module renders solid black in
node captureand in the app canvas(
dapi screenshot), with no WGSL error indapi logs:The same construction (procedural
<shaderPaint>on a non-root<rect>, no media below)renders fine in my real composition, which differs mainly in driving a
useTicker()clock anda solid-js store. If a procedural shader paint needs a running ticker to draw, that is worth
documenting; if it doesn't, this is a second bug.
Repro
Environment
App logs