nebula-preview-generator

Generates preview assets for Nebula particle systems including a video and image to be used as a thumbnail.

Usage

Here's a really basic example usage

import generate from 'nebula-preview-generator';
import json from './my-particle-system';
import * as nebula from 'three-nebula';
import * as three from 'three';

document.getElementById('button').addEventListener('click', async e => {
  const { urls, blobs } = await generate(
    json,
    { nebula, three },
    {
      width: 320,
      height: 180,
      timeslice: 100,
      duration: 3 * 1000,
      mimeType: 'video/webm',
      audioBitsPerSecond: 0,
      videoBitsPerSecond: 25000000,
      shouldGenerateGif: false,
    }
  );

  // do stuff with the results
  // when done you'll want to call URL.revokeObjectURL(blobs.video);
  // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#memory_management
});

File Conversion

If you want to convert the blobs to files, you can use File API like so

const blobToFile = async (blob, filename) =>
  new File([blob], `${filename}.${blob.type.split('/')[1]}`, {
    type: blob.type,
    lastModified: new Date(),
  });

Performance

See this codepen for some basic performance measurements.

Test

See this codepen to see the library working as expected.