Animated Gif stitching?

Anupam_Das · February 21, 2023, 7:42pm

Im trying to generate animated gifs just like the export gif animation feature in inspector but do it programatically. I have a function that generates an array of base64 PNGs from the scene and thats fine, but and id like to stitch these together into a animated gif. So really I just need the javascript stitching part of it. For some reason I cant find this in docs or related source. I dont see anything here:

github.com

sebavan/Babylon.js/blob/master/packages/dev/inspector/src/inspector.ts

import * as React from "react";
import * as ReactDOM from "react-dom";

import type { IInspectorOptions } from "core/Debug/debugLayer";
import type { Nullable } from "core/types";
import type { Observer } from "core/Misc/observable";
import { Observable } from "core/Misc/observable";
import { EngineStore } from "core/Engines/engineStore";
import type { Scene } from "core/scene";
import { SceneLoader } from "core/Loading/sceneLoader";

import { ActionTabsComponent } from "./components/actionTabs/actionTabsComponent";
import { SceneExplorerComponent } from "./components/sceneExplorer/sceneExplorerComponent";
import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
import type { PropertyChangedEvent } from "./components/propertyChangedEvent";
import { GlobalState } from "./components/globalState";
import type { IPopupComponentProps } from "./components/popupComponent";
import { PopupComponent } from "./components/popupComponent";

interface IInternalInspectorOptions extends IInspectorOptions {

This file has been truncated. show original

the only thing I did find was this package and I dont know if this is what BJS uses?

Thanks everyone

Evgeni_Popov · February 22, 2023, 10:07am

The implementation is there:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/inspector/src/components/actionTabs/tabs/toolsTabComponent.tsx

/* eslint-disable import/no-internal-modules */
import type { IPaneComponentProps } from "../paneComponent";
import { PaneComponent } from "../paneComponent";
import { LineContainerComponent } from "shared-ui-components/lines/lineContainerComponent";
import { ButtonLineComponent } from "shared-ui-components/lines/buttonLineComponent";
import type { Node } from "core/node";
import type { Nullable } from "core/types";
import { VideoRecorder } from "core/Misc/videoRecorder";
import { Tools } from "core/Misc/tools";
import { EnvironmentTextureTools } from "core/Misc/environmentTextureTools";
import type { BackgroundMaterial } from "core/Materials/Background/backgroundMaterial";
import type { StandardMaterial } from "core/Materials/standardMaterial";
import type { PBRMaterial } from "core/Materials/PBR/pbrMaterial";
import type { CubeTexture } from "core/Materials/Textures/cubeTexture";
import { Texture } from "core/Materials/Textures/texture";
import { SceneSerializer } from "core/Misc/sceneSerializer";
import { Mesh } from "core/Meshes/mesh";
import { FilesInput } from "core/Misc/filesInput";
import type { Scene } from "core/scene";
import { SceneLoader, SceneLoaderAnimationGroupLoadingMode } from "core/Loading/sceneLoader";

This file has been truncated. show original

We are using gif.js.optimized.

Anupam_Das · February 24, 2023, 7:12pm

You guys are awsome thanks for being my eyes. So much to comb through. Thank you again.

Topic		Replies	Views
Animated Gifs in Babylon Announcements	34	4443	January 8, 2024
Download scene to .gif Questions	8	520	January 6, 2022
Babylonjs Editor Animation Questions	2	431	September 1, 2021
Babylon Editor animations Questions	6	379	December 29, 2021
Struggling with importing animations from Blender into BJS Questions blender	7	3991	August 23, 2019

Animated Gif stitching?

Related Topics