Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sprites Take 2 #265

Merged
merged 7 commits into from
Aug 16, 2023
Merged

Sprites Take 2 #265

merged 7 commits into from
Aug 16, 2023

Conversation

alecpm
Copy link
Contributor

@alecpm alecpm commented Aug 15, 2023

Refs #251 and based on #260

There are some limitations when using a WebGL/Regl canvas that needed to be worked around for this:

  • It's not possible to use multiple textures for the main squares function rendering (see here), and combining different types of textures (simple arrays, images, 2D canvas) into a single indexable texture isn't feasible (though doing so would probably be the most efficient option).
  • The WebGL code runs async and in parallel on the GPU, so running multiple pipelines which affect the same canvas areas in a single frame render doesn't work. We need to ensure the currently textured squares aren't passed to the main squares function.
  • We need to be judicious about how many textures we create, so caching the textures aggressively and only creating them once is important.

I've moved the emoji rendering to use a canvas texture with a text fill. This simplified the implementation of emojis, but they can only be added by pasting the characters directly, not by name.

I think this is in decent shape now and seems to be performing well.

@alecpm alecpm requested a review from cguardia August 15, 2023 19:49
@alecpm
Copy link
Contributor Author

alecpm commented Aug 15, 2023

I've added @cguardia as a reviewer since he got pretty deep into this. From the looks of it Matthew Wilkes probably did most of the post-Jordan work on this. Feel free to try it out @jessesnyder and @silviot, it seems to be working well from here, but it would be nice to have it tested on different machines, browsers, and OSs, in case we run into resource issues with all the texture objects in the pipeline.

@alecpm alecpm self-assigned this Aug 15, 2023
Copy link
Contributor

@cguardia cguardia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great.

@silviot
Copy link

silviot commented Aug 16, 2023

This works flawlessly for me on Chrome/Linux.

cguardia and others added 7 commits August 16, 2023 09:20
…ji/image when creating the canvas. Trying to process the same pixels/vertices in a single frame render doesn't work, so we need to have the main `draw` function skip rendering squares with sprites, which need their own pass with the custom texture. We render each item type/texture in a separate pass from the main draw. Emojis are rendered in an HTML5 2D canvas, so the emoji image map is no longer needed, and they can no longer be referenced by name.
@alecpm alecpm merged commit 5b01519 into one-hour-one-life Aug 16, 2023
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants