Announcing the new WebGL Snapshot package for UAR!

#1

Hello everyone!

We hope that you are all well and keeping safe.

We wanted you to know that we’ve recently released a highly anticipated and requested feature that can be integrated into Universal AR WebGL projects.

:tada: We are delighted to announce the new WebGL Snapshot package for UAR! :tada:

You now have a really accessible route for creating save & share dialogs for your UAR projects. We’ve made it available as an NPM package but you can just as easily access it via CDN. Please note that this feature is used as an addition to projects that have been set up with a Zappar camera and chosen tracking type - for example, a fun face tracking experience for users to take a selfie and share with their friends on social media; or taking a picture in an instant tracked experience to compare which piece of office furniture to purchase!

Here is the documentation site for those of you that are interested: https://docs.zap.works/universal-ar/useful-packages/webgl-snapshot/

It goes without saying that our team will continue to improve the site with new content and more meaningful updates to older resources; so as always, we’d love to hear your thoughts - please drop any feedback or suggestions on this thread to let us know what you think!

Have a lovely day; best wishes from the Learning & Support Team,

@George, @Bob, @Anita, @Francesca :grin:

P.S. We’d also love to give a shoutout to @deimantas who has worked hard on bringing this to you! :clap:

Screen Capture button using Javascript
#3

Hi Francesca!, To get snapshot the screen is black. Please help me!, you can see my test project: https://hnrkj.zappar.io/2246629454076179847/0.4.0/

29
Captura de Pantalla 2020-10-05 a la(s) 15.50.29.png1968×1622 108 KB

#4

Hi @chrisvalear, thanks for that spot! :grin:

I appreciate the screenshot and link to the published version; I can confirm I’m having the same issue with your project and I’m currently looking our snapshot package now.

Fran

#5

Hi @chrisvalear

In order for canvas.toDataURL to work, we need to call it after the render of the frame, or with preserveDrawingBuffer enabled on the renderer. Luckily, A-Frame provides us with a handy screenshot method which lets us get the dataURL without any extra work! :slight_smile:

let canvas = document.querySelector("a-scene").components.screenshot.getCanvas("perspective");
SnapshotManager.promptImage({
  data: canvas.toDataURL('image/jpeg', 0.8)
});

Hope this helps,
Deim

#6

Hi! Deimantas, thanks for help me!.

Now I have to work on size of screenshot (mode portrait).

document.querySelector(‘a-scene’).setAttribute(‘screenshot’,{width: 1024, height: 1024});

Now again thanks a lot!.

My project: https://hnrkj.zappar.io/2246629454076179847/0.4.1.3/

Chris.

#7

Hi @Francesca, the snapshot package works well with three.js, however, I had to call promptImage() from ZapparWebGLSnapshot as opposed to SnapshotManager in order to access the api.