Fix for webgl-based canvas sources rendering flipped in 0.40.0 + non-animated optimization #5303
Conversation
This file contains 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
lbud
changed the title
mourner
requested changes
Sep 15, 2017
src/source/canvas_source.js
Outdated
| imageData.data.set(data); | ||
| const flipped = new Uint8Array(this.width * this.height * 4); | ||
| for (let i = this.height - 1, j = 0; i >= 0; i--, j++) { | ||
| flipped.set(data.slice(i * this.width * 4, (i + 1) * this.width * 4), j * this.width * 4); |
There was a problem hiding this comment.
I'd suggest avoiding many slice operations since they create a new array every time. 4 lines setting each of the 4 values of the array will be faster.
There was a problem hiding this comment.
The array looks like its an entire row, not just four values. It might make sense to try data.subarray(begin, end) which is like .slice() except it provides a view into the existing array without copying it.
There was a problem hiding this comment.
Oh, you're right. In that case a secondary inner loop might get also work well.
lbud
changed the title
lbud
force-pushed
the
5300-canvas-flip
branch
from
ba36f65 to
0be38ed
Compare
lbud
changed the title
lbud
changed the title
mourner
approved these changes
Sep 18, 2017
src/source/canvas_source.js
Outdated
| for (let i = this.height - 1, j = 0; i >= 0; i--, j++) { | ||
| flipped.set(data.subarray(i * this.width * 4, (i + 1) * this.width * 4), j * this.width * 4); | ||
| } | ||
| this.canvasData.data.set(flipped); |
There was a problem hiding this comment.
One more thing — is it possible to do this.canvasData.data.set inside the loop instead of using a temporary flipped array?
3 tasks
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.
WebGL APIs and Canvas APIs are vertically flipped (gl reads from the lower left, canvas from the upper left), so I introduced #5300 in #5155. Eventually we should try to write render tests with a secondary webgl canvas 🤔 to catch bugs like this, but in the meantime this should make it into the 0.40.1 patch release.
Edit: this PR also modifies the intermediary read step to only reread if a canvas is supposed to be animated, if it hasn't been read yet, or if it is resized, to mitigate performance concerns for non-animated canvases (see #5301).
Fixes #5300.
Refs #5301.
Launch Checklist