Recommended Free Tools
The hard part of a browser physics sandbox is rarely the physics. Once a marble is rolling on screen, the browser can already draw it. A shareable MP4 asks for more: every frame at a known size and timestamp, audio on the same clock, and a container that a video player will open. The creator of a 3D marble-run playground describes exactly this gap. Their first instinct was to record the canvas, but the export they say they shipped renders each frame at a selected resolution and frame rate, with physics running on a deterministic clock. Those project details come from the creator’s own Reddit post and have not been independently tested.
Why a live run and an exported file are different jobs
Playback is paced by the browser and the display. If a frame takes 22 milliseconds instead of 16, the marbles simply look a little choppy, and nothing is saved. A video file has to be built on its own timeline: a fixed number of frames per second, a fixed duration, fixed dimensions, and a timestamp for every frame.
As an Amazon Associate I earn from qualifying purchases.
That is why recording the screen and exporting a simulation are different problems. A screen recording captures whatever the display showed at whatever rate the browser managed. If the tab stutters during a busy collision, the file stutters too. An exporter that renders the scene itself decides what frame 150 contains, how large it is, and when it appears, regardless of what the monitor is doing at that moment.
What the creator says they built
According to the creator, the project is a 3D marble-run playground with a physics simulation and a vertical MP4 export that includes sound. The export renders at a chosen resolution and frame rate, and the physics advances on a deterministic clock. The creator also says the output is a real MP4 encode rather than a screen capture.
#1 Best Overall
- All-Inclusive Marble Extravaganza: Our 236 Pcs Elevator Marble Run Toy Set is here to take Play period to new heights! Including 176 vibrant track pieces, 15 sleek plastic marbles, 30 glow-in-the-dark marbles, and 15 classic glass marbles, this marble tower is a complete "marbel run" masterpiece.
- Innovative Elevator Magic: The unique elevator feature elevates this marble race track from cool to WOW! It's a rush watching marbles climb up and slide down in an endless loop, ensuring the marble run never stops.
- Sturdy and Higher Quality: Made with durable materials, our marble runs for kids withstand the test of Play period. This marble set is crafted to last, ensuring countless hours of racing fun.
- Shine with Glow Marbles: Turn off the lights and watch the race light up! Our glow marbles add an extra dazzle to your child's marble games, making the race track a radiant spectacle in the dark.
- Perfect for Family Bonding: Engage in a marble race that's great for parent-child interaction. Spend quality time building and racing, creating memories with every marble set showdown.
Several details are not established by the post. It does not identify the physics engine, the audio generation method, or the muxing library. Nothing here shows that the project uses PlayCanvas or Ammo.js; those are cited below only as examples of how engines handle the same problems. Treat the implementation claims as self-reported.
The export pipeline, stage by stage
An export is six stages that have to agree with each other. Each stage can be correct on its own and still produce a broken file if the timing drifts between them.
Rank #2
- Interactive Mable Run Game - MaxTronic mable run set includes 50 building pieces with 60 marbles.Comes with easy assembly manual, kids need to think about the track directdions and assemble it. Encouraging children's imagination and improving problem solving skills. Perfect for both single kid and family playing together.
- STEM Fun for Different Levels - For little kids aged 3-5, this marble run is great for them to learn colors, numbers and build blocks to assemble it while having fun. And for kids aged above 5, children need to consider the design of the track and the gravitrax, which gives child's spatial imagination and logical thinking.
- Teaching Assistant & Free up Parent's Time - There is no fixed shape, kids can buid different shapes as they like. Our Marble Runs can be found in many classrooms to teach important STEM concepts. Building these pieces will keep children entertained for hours which helps free up parent's time.
- Safe for Kids -Marble maze toys was made of solid ABS,non toxic,not easy to break or snapped. Marble tracks are ASTM-certified and CPSIA compliant which is safe for kids. Smooth edges avoid scratching hands. Warm tip: Please be careful not to let your child swallow the balls.
- Perfect Gift Surprise - The marble run set use a beautifully packed color box, and the components are in different colors to match the classic and beautiful styles, definitely a popular birthday/holiday gift for kids! It is very suitable for children to use it as an entertainment project during parties, after school, weekends, and even all other holidays.
1. Fix the timeline first
Decide the output frame rate, duration, dimensions and orientation before rendering anything. Then give every output frame a timestamp. In WebCodecs, a VideoFrame carries a timestamp and a duration, and MDN’s example assigns timestamps in microseconds for a 30 fps sequence. The arithmetic is simple:
const fps = 30;
const frameDurationUs = 1_000_000 / fps; // about 33,333 µs
for (let i = 0; i < totalFrames; i++) {
const timestampUs = Math.round(i * frameDurationUs);
// render frame i, then create a VideoFrame with timestampUs
}2. Advance the simulation on a fixed step
A fixed-step clock keeps physics progression from depending on how fast the screen refreshes. PlayCanvas’s getting-started physics documentation states, “The simulation steps at a fixed rate,” and its example uses a 1/60-second physics step. The same documentation says bodies behave the same at 30 and 144 display frames per second. That is an engine example, not evidence about this project, but it shows the pattern: the simulation advances in fixed increments, and the renderer draws whatever state results.
Rank #3
- 【Glowing In Dark Marbles Inside Add More Fun for An Amazing Marble Games】Meland 2024 NEW Launched Marble Run Set comes with 102 translucent building pieces, 20pcs normal glass marbles and 10pcs special pattern marbles that glow in the dark! All the marble building pieces are interchangeable so kids can create endless models. The booklet can guide toddlers through the building process step by step, so little ones can build whatever their skill level.
- 【Stimulates Creativity, Promotes Patience & Develops Self-Confidence】Lots of marble toy kits and ways of building opportunities perfect for improving hand-eye coordination, problem- solving skills and delevep concentration. Away from TV and electronics, toddlers will feel proud and accomplished with what they have done which promotes a healthy sense of self-confidence.
- 【Ensure Kids' Safety and Free up Parents' Time.】Made of child-friendly ABS material, smooth edges avoid scratching hands. Keeps children entertained for hours and gives parents time.
- 【Taller and Bigger Marble Run Cultivates Parent-Child Relationship】 With a unisex neutral colour tones, our marble race toy is designed to meet each stage of a boy's and girl's development(age 3+) and promotes STEM learning through play. Parents can build it with little builders can make your relationship more intimate.
- 【See-Through Translucent Marble Pieces】Meland marble run toys are translucent so children can see the marble as it goes from the top of the set to the bottom. Comes with 8 marble tower bases, allowing kids to build bigger and sturdier marble runs. Nice educational building toys for boys & girls aged 3 4 5 6 7 8 9 10 11 12 years.
3. Render at the output size, not the editor size
Draw the scene at the required width, height and aspect ratio. An editor canvas is usually sized for a window or panel, so it is the wrong target for a vertical video. The creator reports rendering at an export resolution rather than relying on screen capture. Check that the camera’s aspect ratio matches the output, or the marbles will look stretched or cropped in the file even though the preview looked fine.
4. Encode with a managed queue
WebCodecs provides low-level, frame-by-frame video and audio encoding. Its encoder runs asynchronously, so the export loop has to track how much work is waiting. MDN warns that the encoder queue can grow without bound if frames are submitted faster than they are encoded. The loop must also flush the encoder at the end so that pending output is written out.
Rank #4
- STURDY TIGHT-FIT PIECES – This construction kit is designed to fit together snuggly so your marble maze won’t fall apart while you play. With 5 sturdy bases, 15 exciting action pieces, and 45 clear smooth-run track pieces, our kit has countless imaginative configurations.
- GLOW-IN-THE-DARK MARBLES - This marble run kit includes 15 glow in the dark glass marbles in 6 colors! Kids will love watching them glow as they zig-zag down their custom tracks!
- CONVENIENT STORAGE – A large storage bag makes it easy to store all your marble run construction pieces and glow-in-the-dark marbles in one place.
- GREAT STEM TOY – The learning guide inside teaches about the physics of motion and aerodynamics. It also includes marble run construction experiments.
- AMAZON EXCLUSIVE - Blue Marble has developed this product exclusively for Amazon.
5. Mux the chunks into a container
WebCodecs produces encoded chunks, not a playable file. A muxer has to place the encoded video and audio samples into the chosen container, such as MP4 or WebM, with the metadata a player needs to seek and play. Whatever muxer you use has to accept the codec configuration your encoder produces, and the container has to match it.
Free tools Windows power users keep installed
One-click scans. No signup required.
6. Keep audio on the export timeline
If collision sounds or a music track are part of the export, every audio sample needs a timestamp on the same timeline as the video. The creator says the exported MP4 includes sound, but the post does not describe how the audio is generated or synchronized. Sync errors tend to appear late in a run, so test a full-length playback with several collisions rather than only the opening seconds.
Best Value
- MOTORIZED LIFT FOR ENDLESS RUNS - Features a motorized lift that carries your marbles up almost 20 inches and drop them onto the track! Create a perpetual motion machine that continuously takes your marbles back to the top to launch again!
- 150-PIECE KIT FOR MASSIVE MAZES - With 106 construction pieces, 30 marbles, and the 14-piece spiral lift, you get everything you need to create endless configurations of marble runs! A storage bag is also included to safely store your kit.
- COMPATIBLE WITH NATIONAL GEOGRAPHIC MARBLE RUNS - Expand any National Geographic Glow-in-the-Dark Marble Run with this kit! All pieces, including the spiral lift, work seamlessly with existing sets (non-magnetic), so you can create even bigger runs!
- LEARN WITH NATIONAL GEOGRAPHIC - With National Geographic STEM toys, learning is always part of the fun! The included Learning Guide contains fascinating facts about physics, motion, and more! It also contains tips for building amazing marble runs!
- AMAZON EXCLUSIVE - Blue Marble has developed this product exclusively for Amazon.
Two ways to get frames out of a canvas
The export approach comes down to two routes. They are not interchangeable, and the choice shapes everything after it.
Quick Recap
| Approach | How it works | Strengths | Limits | Check before choosing |
|---|---|---|---|---|
| Canvas stream with MediaRecorder | canvas.captureStream() produces a real-time stream of the canvas contents; MediaRecorder records that stream and can be configured with a MIME type and bitrate. |
A direct route for recording what the canvas is already drawing, with less export code to own. | Capture runs in real time. It does not by itself provide fixed simulation time, offline rendering, or a guaranteed frame rate. | Whether each target browser supports the MIME type you want, checked with MediaRecorder.isTypeSupported(); whether live pacing is acceptable; how audio joins the stream. |
| Explicit frame rendering with WebCodecs | Render each frame for a chosen timeline, build VideoFrame objects with explicit timestamps, submit them to a VideoEncoder, encode audio separately, and mux the chunks. |
Per-frame timestamps and encoder settings stay under your control, which suits offline or repeatable rendering. | Needs queue and memory management, codec support checks, audio handling and a muxer. WebCodecs alone does not produce an MP4 or WebM file. | Codec support in each target browser; encode speed on your hardware; memory over long runs; audio alignment; output profile and muxer requirements. |
Choosing between them
- Use a canvas stream with MediaRecorder when a real-time recording is acceptable, your target browsers support the container you need, and you want the shortest path to a file.
- Use explicit frames with WebCodecs when each run must produce the same timestamps, when export speed should not depend on the display, or when you need control over encoder settings.
- Neither route makes the output repeatable on its own. Repeatability depends on the simulation step, the renderer, the clock, resource handling, codecs and the muxer working together.
Failure modes and fixes
- Memory climbs steadily during the export. The likely cause is an encoder queue that grows because frames are submitted faster than they are encoded, or
VideoFrameobjects that are never closed. Close each frame after passing it toencode(), pause submission while the encoder’sencodeQueueSizeis high, and flush at the end. - The file will not play. The likely cause is encoded chunks written without a muxer, or a container and codec pairing the player does not accept. Mux with a library that supports the codec you configured, then test the file in the players your readers use.
- Audio drifts late in the clip. The likely cause is audio timestamps derived from a different clock than the video frames. Generate both from the single export timeline described in step 1.
- Export works in one browser and fails in another. The likely cause is an unsupported codec or MIME type. Check support before starting the export, using
MediaRecorder.isTypeSupported()or the WebCodecs support checks, and offer a fallback rather than failing mid-run.
What is and isn’t established
- From the creator’s own post: the export is a vertical MP4 with sound, produced by rendering at a selected resolution and frame rate with physics on a deterministic clock. These are self-reported claims about a project whose code and live product have not been inspected.
- From MDN’s WebCodecs and media documentation: frame timestamps, the asynchronous encoder queue, and the fact that packaging into MP4 or WebM is a separate step.
- From PlayCanvas’s documentation: the fixed-step pattern, offered as an engine example rather than a description of this project.
- Not established: the project’s physics engine, audio generation method, muxing library, and whether audio stays in sync across target browsers.
- Codec and MIME type support varies by browser and changes over time, so verify it for the browsers and output format you intend to support.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
