| Issue | Why it Happens | Fix | |-------|----------------|-----| | | Frame‑capture isn’t synchronized with the render loop. | Use requestAnimationFrame and a fixed‑time accumulator ( delta ) to guarantee exactly FPS captures per second. | | Colors look washed out | The canvas is using sRGB but gif.js expects linear RGB. | Add renderer.outputEncoding = THREE.sRGBEncoding; before recording, and call renderer.toneMapping = THREE.ACESFilmicToneMapping; for better contrast. | | File size > 5 MB | Too many frames or high resolution. | Reduce width/height ( renderer.setSize(480, 270) ), lower quality in GIF options, or use a palette‑reduction step ( gif.js does this automatically if quality ≤ 10). | | Loop doesn’t close perfectly | The first and last frames aren’t identical. | Make the animation mathematically periodic (e.g., use Math.sin(t) / Math.cos(t) ) or duplicate the first frame at the end. | | Browser freezes during encoding | Large GIFs block the main thread. | Increase workers in the GIF constructor (e.g., workers: 4 ) or off‑load the process to a Web Worker manually. |
If you're noticing a 3D effect when looking at certain text in a GIF, it is likely due to or color vibration . This occurs when high-contrast, vibrant colors (typically red and blue) are placed adjacent to each other, causing the eye to focus on them differently and creating a perceived sense of depth. Why Text Can Look 3D
frameCount++; if (frameCount <= TOTAL_FRAMES * 60 / 60) requestAnimationFrame(render); else finalizeGif();
// ------------------------------------------------- // 1️⃣ Scene setup // ------------------------------------------------- const renderer = new THREE.WebGLRenderer( antialias: true ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
// ------------------------------------------------- // 3️⃣ Animation loop (simple rotation) // ------------------------------------------------- const FPS = 30; // GIF frame‑rate const DURATION = 2; // seconds const TOTAL_FRAMES = FPS * DURATION;
// Lights const dir = new THREE.DirectionalLight(0xffffff, 1); dir.position.set(5, 5, 5); scene.add(dir); scene.add(new THREE.AmbientLight(0x404040, 0.5));
