Screenshot out of babylon.js and used in vuetify.js:

Questions
1

I need to get a scrrenshot….one for now to see if this is possible, but I will need to get several at some point.

Doing this in Babylon seems way overly complicated….

So I used a node server

onst express = require('express’);
const fs = require('fs’);
const cors = require('cors’);
const app = express();

app.use(cors()); // Use cors middleware
app.use(express.json({ limit: ‘50mb’ })); // Increase limit to 50mb

app.post(‘/save-screenshot’, (req, res) => {
const base64Data = req.body.data.replace(/^data:image/png;base64,/, “”);

fs.writeFile("./src/images/iteration.png", base64Data, 'base64', function(err) {
    if (err) {
        console.log(err);
        res.status(500).send(err);
    } else {
        res.status(200).send('Screenshot saved.’);
    }
});

});

app.listen(3000, () => console.log('Server running on port 3000’));

And then this in the babylon scene:

Tools.CreateScreenshot(this.engine, camera, { width: 1024, height: 1024 }, function (data) {
// Send the screenshot data to the server
fetch(‘http://localhost:3000/save-screenshot’, {
method: ‘POST’,
headers: {
‘Content-Type’: 'application/json’
},
body: JSON.stringify({ data: data })
})
.then(response => response.text())
.then(data => console.log(data))
.catch((error) => {
console.error(‘Error:’, error);
});
});

Then wanted to use the image as the image in a v-btn in vuetify or at least just display it. I am geting some unstable side effects where the babylon scen just crashes which I think is because of the node server….I have never used a node server like this.

What I need to do is take snapshots save them to the root directory on the server when deployed and then in vue grab them and use them where I need them. I have done this with other platforms, but doing this in babylon is way different.

Howe can I do this the simpliest way?

2

what makes you say this? and then say “So I used a node server…” of course you going to need some backend to save the image if it is meant to be persistent and loaded again from the front end.

im pretty sure JSON stringify is not for converting images to base64.

I have done this with other platforms, but doing this in babylon is way different.

really , what other platforms? how again is babylon way different? babylon is a realtime 3d rendering engine… im not sure what you are comparing it to here?

3

Not here to argue with you……

Unity can do this simply by saving it to a folder and then use it.

This is very unstable. Babylon crashes when this server function runs. Maybe it is the json stringify that is making it unstable.

4

It’s probably the implementation on your end. I am not sure I understand what exactly breaks. Can you give us some error logs or something to go from? Example of your implementation and how communication between client and server works.

On the note of Unity and Babylon. Thing is, client (browser) basically cannot access your file system, because of security reasons. That’s why Babylon cannot directly save your image to a file. On the other hand Node CAN access your file system, that’s why it is handling this exact process.
Unity being standalone application installed on your system is not limited by these “security reasons”, therefore you can save your file directly.

5

I am not getting any errors. It works. But then babylon stops. if I stop the server it doesn’t crash.

The code I posted above is what I am doing. Taking a screenshot after meshes are created. This is just my initial testing to see how I can do what I actually need to do which is iterate over many different meshes and take a screen shot then add the screen shots to images for buttons to then select those meshes.

6

Seems there is some leakage or overflow at some point of your code?

7

I am grabbing the image source in the button and updating it when the screenshot overwrites the previous one….for now anyway. I thought that might be what was causing it so I commented all that out, but just having the server running and taking the screenshot resets babylon.

The code above is as is in my codebase.

But I was kind of wondering about why it is using the json stringify like shaderbytes mentioned.

8

So basically, you do this in a loop? For multiple meshes you run CreateScreenshot method and at some point it stops?

Try placing “console.logs” inside you server side code on several places where error might occur, these logs will show up in your terminal and might give some clue.

My guess is that it has something to do with async nature of your operation (writeFile). Where you send multiple requests for writing files while some of the images are still being written. Will try to test out the process a bit later, don’t have much time atm.

9

No, not yet…it is just one shot for now……but I will want to once I get this figured out.

I will double check to see if there is any errors popping off. I looked but didn’t see any….unless by it resetting it clears them.

10

So, I now am not getting this crash….it seems to be working, but the image in the button is not being updated. Using vuetify I have the property in the watch option….and it isn’t updating….Not sure why.

The old image is gone and I am basically updating the path which is a string. So I would think that it would update. But no dice.

I didn’t do anything different than before…except used a property for the path instead of a string for the src in the image for the button.

11

I got the image to update by getting the timestamp.

1 Like
12

You are saying it is overly complex but I am not sure why you are making it like this?

From what I understand, you need to take screenshots to display them in buttons on the client only ?Maybe you could use a canvas with a context2d and drawImage to render the babylon canvas into the button canvas as this might be more efficient than trying to create a picture and persist it if not absolutely necessary ?

If you need to persist only locally, you can as well store as a png in the local browser database instead of roundtriping to the server ?

13

@sebavan , I need the images down stream. I am not sure if storing them in a local browser would work. This will ultimately be deployed and I would want the images just stored in a folder on the server.