Repository navigation
fix(core): graded media crops at the same object-position as ungraded media - #5471
Closed
WaterrrForever wants to merge 1 commit into
Closed
WaterrrForever wants to merge 1 commit into
WaterrrForever wants to merge 1 commit into
Conversation
… media The grading canvas uploads its source texture flipped, so shader UVs are bottom-origin, but calculateObjectFitUv measured the vertical object-position offset from the top like CSS. object-position: 50% 0% showed the bottom of the source and 100% the top. Measure the y offset from the bottom. The x axis was already correct.
Contributor
Edit accuracy: accurate 2061 (base branch 2061), smooth 1621 of thoseThe gate passes. Quarantined, measured but not gated (0) |
Collaborator
Author
|
Closing as covered: main already measures the graded texture's y offset from the bottom ( |
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.
What was wrong
A
<video>or<img>withdata-color-gradingcropped vertically from the opposite end of the source in preview, snapshot and render.object-position: 50% 0%showed the bottom, and50% 100%showed the top. The same element without the grading attribute cropped correctly.Why
The grading canvas uploads its source texture with
UNPACK_FLIP_Y_WEBGL = true, so the shader works in bottom-origin UVs.calculateObjectFitUvcomputed the vertical offset as(box - draw) * position.y, which measures from the top the way CSS does. The fix measures from the bottom:(box - draw) * (1 - position.y).The horizontal axis was already correct, since CSS and GL both start at the left. Both callers (the live grading canvas and the preview thumbnails) go through this one function, so the one-line fix covers both.
Tests
colorGrading.test.tscases cover cover-fit at 0%, 22% and 100% on both axes, using a 9:16 source in a 3:4 box for Y and a 16:9 source in a 4:3 box for X. Each case reads back which source fraction the shader puts at the box's top-left edge and compares it with CSS. With the old code the three Y cases fail and the three X cases pass.object-positionnow match: snapshot SSIM 0.947 at 0% and 0.949 at 100%, and draft render SSIM 0.913 at 0%. The remaining gap is the grade's own colour change. Copies at opposite positions score SSIM ≈ 0.47.Note for existing projects
Any composition that worked around this by inverting the vertical percentage needs changing back. For example, the
viral-clone-labugc-product-tryonproject usesobject-position: 50% 78%on.shot-tallto get a top-22% crop. After this fix that value should become50% 22%.