scene name and logo embedded in saved images

[kfarr]

there should always be 3DStreet logo in upper-right hand corner of captured image in capture modal as well as scene title in lower-left hand corner.

These should appear in all versions accessible to a user except not when saving a thumbnail preview.

possible methods:

• a-frame - put in front of camera with a tool such as this https://github.com/diarmidmackenzie/screen-display
• canvas - add to the image screenshot canvas (overlayed on top of canvas used for image screenshot after screenshot generated)
• third-party api - add text and logo image overlay with third-party api https://cloudinary.com/documentation/conditional_transformations let's not use third-party cloud api, operation should happen in browser

related to #306 -- they'll both need to be done before / after screencapture

[kfarr]

A few more notes:

• This should be done as part of, or closely related to, the screentock component here https://github.com/3DStreet/3dstreet/blob/main/src/components/screentock.js
• It may be helpful to have a "screenshot-overlay" entity that is a child of screentock entity / component. The screenshot-overlay entity will hold all of the overlays needed, such as logo or street name. The parent screenshot-overlay can be shown or hidden. Normally it is hidden. It is only shown right before the screentock component fires and hides right after.

[Algorush]

Should the logo on the screenshot consist only of "3DStreet" text? Or "Editor/Viewer" icon too?
I could use the already loaded image from the img.viewer-logo-img element to take the screenshot, but it is only available when the scene is initially loaded. Then when user switch to the Editor, this element is deleted forever.
I could also use the svg logo from the inspector for the screenshot, but first I need to assign an id or class to it. Can I do this in 3DStreet-editor code?

[Algorush]

Another option for logo is to write it using text on canvas (fillText method). But judging by Figma, Google font Rubik is used for the logo. If we use regular sans-serif, it will look like this:

@kfarr I'll be waiting for your comment

[Algorush]

3DStreet/3dstreet#409
I made a PR in the 3DStreet repository. since the screntock component is there. But maybe now we don't need to use the tock method?
I made a separate canvas for the screenshot for several reasons:

• as it turned out, it is not possible to use the getContext method for canvas, which is already used as a WebGL renderer.
• the second canvas is hidden and the user will not see the text and logo blinking when they are added to the screenshot

[Algorush]

To add a logo to a screenshot, I use the canvas.fillText method. Just for demonstration. But I can also use an SVG of the logo that is used on the stage and in the editor. I think the SVG option will be look better.
I added id to logo element in this PR: #343. After merging this PR I would be able to use SVG with logo for screenshot

[kfarr]

@Algorush working to test and merge this next. One thing that we will need even before I test is an option on the screentock to not include name and logo for the purposes of generating thumbnail preview image, but yes to include name / logo overlay in other cases. How do you think is best to handle that?

[Algorush]

@Algorush working to test and merge this next. One thing that we will need even before I test is an option on the screentock to not include name and logo for the purposes of generating thumbnail preview image, but yes to include name / logo overlay in other cases. How do you think is best to handle that?

It could be done for example with property of screentock component - showTitleAndLogo: true/false

[kfarr]

@Algorush that's great, is that available yet or can you help to provide that feature?

[Algorush]

@kfarr no, this option is not ready yet, I will add it today

[Algorush]

Added commit with this option in 3dStreet repo here:
3DStreet/3dstreet@08e236f

[kfarr]

yes seems to work on 3dstreet.app production now