--- title: Breaking the Frame: Building a Real-Time Datamosh Effect... description: A detailed technical walkthrough of building a real-time datamosh effect in Three.js by borrowing concepts from video codecs. It covers feedback-buffer... canonical: https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js | daily.dev og:description: A detailed technical walkthrough of building a real-time datamosh effect in Three.js by borrowing concepts from video codecs. It covers feedback-buffer... og:url: https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg og:image: https://api.daily.dev/og/posts/72DiQxXSg.png og:image:alt: Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js **[Codrops](https://daily.dev/sources/codrops)** · 14 min read · 4 upvotes · 1 comments ## Summary A detailed technical walkthrough of building a real-time datamosh effect in Three.js by borrowing concepts from video codecs. It covers feedback-buffer architecture, a screen-space velocity pass derived from vertex position deltas, a self-limiting residual correction, Catmull-Rom reconstruction to slow feedback blur, block-based motion quantization for a compressed look, and a hashed packet-loss sector mask, ending with performance notes on the cost of the effect. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you create a real-time datamosh effect in Three.js using shaders? Build a feedback loop where a fragment shader samples its own previous output offset by a motion vector, mixing in a small amount of the current render (new frame = warp(previous frame, motion vectors) + residual). Use two swapped buffers since WebGL forbids sampling a framebuffer being written to, derive velocity from a second geometry pass comparing current and previous frame projected positions, then suppress the intra refresh on scene cuts so old pixels smear into new geometry. _Developers prototyping WebGL glitch effects can track Three.js shader techniques like this on daily.dev._ ### Why does computing per-fragment velocity in the vertex shader instead of the fragment shader produce wrong results in GLSL? Screen position is a ratio (clip position divided by w), and interpolating that ratio across a triangle differs from interpolating the two raw quantities separately and dividing them per fragment. Doing the perspective divide in the vertex shader looks cheaper and equivalent but yields incorrect velocity values; the divide must happen per fragment, using undivided clip positions passed through as varyings. _Anyone debugging motion-vector shader math can compare notes on GLSL pitfalls via daily.dev._ ### Why does a video feedback shader loop lose sharpness over time even with a constant motion vector? Because each motion vector usually points between texture pixels, the GPU performs bilinear blending on every sample, and that blend gets fed back into the next frame roughly sixty times per second at 60fps, compounding the softness. Using Catmull-Rom reconstruction instead of ordinary bilinear interpolation estimates sharper values from surrounding pixels and slows, though doesn't eliminate, this detail loss. _Graphics engineers tuning feedback-buffer shaders can dig into rendering tradeoffs like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > Did Catmull-Rom reduce repeated-feedback blur enough to justify the extra texture samples on mobile GPUs? ## Similar posts on daily.dev - [Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs](https://daily.dev/posts/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts-tjn34cai4) · Codrops · 3 upvotes · 0 comments - [How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier](https://daily.dev/posts/how-to-create-a-pixel-to-voxel-video-drop-effect-with-three-js-and-rapier-qqiiif8vg) · Codrops · 2 upvotes · 0 comments - [Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js](https://daily.dev/posts/building-a-dual-scene-fluid-x-ray-reveal-effect-in-three-js-ajz5uu9x7) · Codrops · 3 upvotes · 0 comments - [Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds](https://daily.dev/posts/building-a-scroll-reactive-3d-gallery-with-three-js-velocity-and-mood-based-backgrounds-fpqk8vowy) · Codrops · 0 upvotes · 2 comments - [Building an Interactive Wave Propagation Cube Grid with Three.js](https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10) · Codrops · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#game-development](https://daily.dev/tags/game-development), [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js","url":"https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg"},"datePublished":"2026-09-02T14:40:25.376Z","dateModified":"2026-09-02T14:41:43.649Z","description":"A detailed technical walkthrough of building a real-time datamosh effect in Three.js by borrowing concepts from video codecs. It covers feedback-buffer...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ca8059bb01d36aa54d82005cc3215fe2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ca8059bb01d36aa54d82005cc3215fe2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,game-development,threejs,creative-coding","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg","comment":[{"@type":"Comment","text":"Did Catmull-Rom reduce repeated-feedback blur enough to justify the extra texture samples on mobile GPUs?","datePublished":"2026-09-03T20:13:10.365Z","url":"https://daily.dev/posts/72DiQxXSg#c-rrf3M9G3N","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js-72diqxxsg#faq","mainEntity":[{"@type":"Question","name":"How do you create a real-time datamosh effect in Three.js using shaders?","acceptedAnswer":{"@type":"Answer","text":"Build a feedback loop where a fragment shader samples its own previous output offset by a motion vector, mixing in a small amount of the current render (new frame = warp(previous frame, motion vectors) + residual). Use two swapped buffers since WebGL forbids sampling a framebuffer being written to, derive velocity from a second geometry pass comparing current and previous frame projected positions, then suppress the intra refresh on scene cuts so old pixels smear into new geometry. Developers prototyping WebGL glitch effects can track Three.js shader techniques like this on daily.dev."}},{"@type":"Question","name":"Why does computing per-fragment velocity in the vertex shader instead of the fragment shader produce wrong results in GLSL?","acceptedAnswer":{"@type":"Answer","text":"Screen position is a ratio (clip position divided by w), and interpolating that ratio across a triangle differs from interpolating the two raw quantities separately and dividing them per fragment. Doing the perspective divide in the vertex shader looks cheaper and equivalent but yields incorrect velocity values; the divide must happen per fragment, using undivided clip positions passed through as varyings. Anyone debugging motion-vector shader math can compare notes on GLSL pitfalls via daily.dev."}},{"@type":"Question","name":"Why does a video feedback shader loop lose sharpness over time even with a constant motion vector?","acceptedAnswer":{"@type":"Answer","text":"Because each motion vector usually points between texture pixels, the GPU performs bilinear blending on every sample, and that blend gets fed back into the next frame roughly sixty times per second at 60fps, compounding the softness. Using Catmull-Rom reconstruction instead of ordinary bilinear interpolation estimates sharper values from surrounding pixels and slows, though doesn't eliminate, this detail loss. Graphics engineers tuning feedback-buffer shaders can dig into rendering tradeoffs like this on daily.dev."}}]} ```