.Gif file support/

[Rezar0Fura]

Hello, I was wondering if you tell me how would one download the given models in a gif animation format. I cannot find a reliable method. If there is one, could you also post steps to properly execute it?

[DALFC]

Unfortunately the viewer wasn't made with exporting in mind. There are ways to capture the canvas via Javascript but I don't know if it can produce results with stable framerate or not. A simple screen recording may work too.

[Rezar0Fura]

@DALFC, say you tell me more about the javascript method? (I.e the procedure)

[DALFC]

You can search something along the line of: export HTML5 canvas to GIF, such as: https://stackoverflow.com/questions/50681683/how-to-save-canvas-animation-as-gif-or-webm

This code is ready to be pasted in the console of the viewer:

var canvas = document.getElementsByTagName("canvas")[0]
var ctx = canvas.getContext('webgl');
startRecording();

function startRecording() {
  const chunks = []; // here we will store our recorded media chunks (Blobs)
  const stream = canvas.captureStream(); // grab our canvas MediaStream
  const rec = new MediaRecorder(stream); // init the recorder
  // every time the recorder has new data, we will store it in our array
  rec.ondataavailable = e => chunks.push(e.data);
  // only when the recorder stops, we construct a complete Blob from all the chunks
  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));

  rec.start();
  setTimeout(()=>rec.stop(), 3000); // stop recording in 3s
}

function exportVid(blob) {
  console.log(URL.createObjectURL(blob));
}

It records the view for 3 seconds and log out a link. Open the link in new tab (including the blob: prefix) and download it.

[Rezar0Fura]

@DALFC, sorry but I am not that much into coding, could you explain to me where exactly I should paste this code? Also, is it possible to extend those 3s to something like 5 secs by tweaking into the code? Thank you

[DALFC]

Click the Console tab next to the Elements tab you're currently on. Then just paste the code above. To change the capture time you can change this line:

setTimeout(()=>rec.stop(), 3000); // stop recording in 3s

Change 3000 to 5000 should make it record for 5 seconds

[Rezar0Fura]

Yup, I used the link along with the blob:.... and it works. The quality is crap though, so I am better off with an inbuilt recorder. Thanks a lot for the help.