By ihsumlee , 2 June 2026
content

Assume you have many images captured around the outfit:

outfit_000.jpg
outfit_001.jpg
outfit_002.jpg
...
outfit_071.jpg

Put them in one folder:

mkdir -p ~/outfit_360/images

Then copy your images into:

~/outfit_360/images

1. Rename images in sequence

FFmpeg works best when image names are sequential.

Example:

frame_0001.jpg
frame_0002.jpg
frame_0003.jpg
...

You can rename them using:

cd ~/outfit_360/images

i=1
for f in *.jpg; do
  printf -v new "frame_%04d.jpg" "$i"
  mv "$f" "$new"
  i=$((i+1))
done

2. Create a 360-degree MP4 video

ffmpeg -framerate 12 \
  -i ~/outfit_360/images/frame_%04d.jpg \
  -vf "scale=720:-1" \
  -c:v libx264 \
  -pix_fmt yuv420p \
  ~/outfit_360/outfit_360.mp4

Meaning:

-framerate 12       show 12 images per second
frame_%04d.jpg      input image sequence
scale=720:-1        resize width to 720 px
libx264             encode as MP4
yuv420p             compatible video format

3. Create a 360-degree GIF

A simple command:

ffmpeg -framerate 12 \
  -i ~/outfit_360/images/frame_%04d.jpg \
  -vf "scale=480:-1:flags=lanczos" \
  ~/outfit_360/outfit_360.gif

Better quality GIF:

ffmpeg -framerate 12 \
  -i ~/outfit_360/images/frame_%04d.jpg \
  -vf "scale=480:-1:flags=lanczos,palettegen" \
  ~/outfit_360/palette.png

Then:

ffmpeg -framerate 12 \
  -i ~/outfit_360/images/frame_%04d.jpg \
  -i ~/outfit_360/palette.png \
  -filter_complex "scale=480:-1:flags=lanczos[x];[x][1:v]paletteuse" \
  ~/outfit_360/outfit_360.gif

4. Make the video loop smoothly

For a smooth 360-degree outfit show, the first and last images should be close in angle.

For example, if you take 72 images:

360 degrees / 72 images = 5 degrees per image

A good capture plan:

| Number of images | Angle interval | Result | | -------------------- | ------------------ | ----------- | | 36 images | 10° | acceptable | | 72 images | 5° | smooth | | 120 images | 3° | very smooth |

Recommended:

Use 72 images for a smooth but manageable 360-degree outfit show.

5. Capture method

Method A: Camera fixed, person/mannequin rotates

This is easiest.

camera stays fixed
person/mannequin rotates slowly
take images every 5–10 degrees

This produces a clean 360 outfit view.

Method B: Person/mannequin fixed, camera moves around

This is harder because the camera distance and height may change.

To make it good:

keep camera height fixed
keep distance fixed
use same focal length
use stable lighting
capture on a circular path

6. Recommended shooting settings

For best results:

background: plain wall or simple studio background
lighting: stable and soft
camera height: around chest level
distance: fixed
focus/exposure: locked
image size: same resolution
pose: person should not move
rotation: constant angle step

Avoid:

changing lighting
camera shake
different zoom levels
different image sizes
motion blur
loose clothing moving too much

7. Example project structure

outfit_360/
├── images/
│   ├── frame_0001.jpg
│   ├── frame_0002.jpg
│   ├── frame_0003.jpg
│   └── ...
├── palette.png
├── outfit_360.mp4
└── outfit_360.gif

8. If you want a web-based 360 outfit viewer

Instead of converting images into a video, you can make an interactive viewer where users drag left/right.

Concept:

mouse drag left/right
→ change image index
→ show outfit from different angle

Simple HTML idea:

<img id="viewer" src="images/frame_0001.jpg" width="500">

<script>
const total = 72;
let index = 1;
let dragging = false;
let lastX = 0;

const img = document.getElementById("viewer");

function updateImage() {
  const name = String(index).padStart(4, "0");
  img.src = `images/frame_${name}.jpg`;
}

img.addEventListener("mousedown", e => {
  dragging = true;
  lastX = e.clientX;
});

window.addEventListener("mouseup", () => {
  dragging = false;
});

window.addEventListener("mousemove", e => {
  if (!dragging) return;
  if (Math.abs(e.clientX - lastX) > 8) {
    if (e.clientX > lastX) {
      index = index - 1;
    } else {
      index = index + 1;
    }

    if (index < 1) index = total;
    if (index > total) index = 1;

    lastX = e.clientX;
    updateImage();
  }
});
</script>

This is often better than GIF for product/outfit display because the user can control the rotation.

Final recommendation

For a simple 360-degree outfit show:

Take 72 images around the outfit
Rename them as frame_0001.jpg to frame_0072.jpg
Use ffmpeg to create MP4 or GIF

For a better online showcase:

Use the images directly in an interactive web viewer

For your VLA/VLN research, this example is useful because it shows the same idea:

Multiple images from different viewpoints can be converted into a visual representation, but for robot navigation we need camera poses and a 3D map, not only a rotating video.