fix(shader): correct linear & radial gradient transparency#112
Merged
Conversation
WebGL LinearGradient: - restore the getGradientColor fallthrough return — a non-void GLSL function that falls off the end is a hard compile error on many embedded GLES2 drivers (lenient only on desktop Chrome) - apply node opacity via u_alpha and composite the gradient alpha into the output, so solid colors are no longer rendered semi-transparent - precompute the gradient ramp as dot(texCoords, a) + b on the CPU instead of recomputing cos/sin/projection per fragment (fill-rate) Canvas LinearGradient: - drop the broken "nearest opaque RGB" workaround. It read the high byte as alpha, but colors are RGBA (alpha in the low byte), so it overwrote the real alpha and forced transparent stops opaque. WebGL RadialGradient: - apply the same alpha compositing and actually use the declared u_alpha (node opacity was previously ignored). Tests: - unit tests for canvas color mapping and the webgl ramp math - shader-linear-gradient-alpha visual test + regenerated CI snapshots Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the linear gradient transparency issues from #111, with the WebGL portability/perf gaps addressed, and extends the fix to the radial gradient.
Problems
Changes
WebGL
LinearGradientgetGradientColorfallthroughreturn— a non-void GLSL function falling off the end is undefined behavior and a hard compile error on many embedded GLES2 drivers (lenient only on desktop Chrome).u_alpha.dist = dot(v_textureCoords, u_grad_a) + u_grad_bon the CPU instead of recomputingcos/sin/projection per fragment (the prior approach regressed fill rate against the TV perf model). Cache-safe —createValueKeyalready includesnode-width/node-height.Default.vertexfallback is geometrically identical.Canvas
LinearGradienttoColorString.WebGL
RadialGradient(follow-up)u_alpha(node opacity was previously ignored).Tests
shader-linear-gradient-alphavisual test — gradients over a white backdrop covering solid-opaque, partial-alpha, fade-to-transparent, and 50% node opacity.shader-linear-gradient-1,shader-radial-gradient-1, and the newshader-linear-gradient-alpha-1. Visually verified.pnpm buildclean · 257/257 unit tests pass · prettier/eslint clean.🤖 Generated with Claude Code