[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Feffects-fracture":129},{"stars":4},5505,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":131,"body":132,"categoryId":2216,"categorySlug":2217,"categoryTitle":2218,"curated":348,"description":2219,"editUrl":2220,"extension":2221,"group":2222,"groupTitle":2223,"kind":2218,"meta":2224,"navigation":348,"path":2225,"seo":2226,"sourceUrl":2227,"stem":2228,"wordCount":390,"__hash__":2229},"primitives\u002Fdocs\u002Fprimitives\u002F32.effects-fracture\u002Findex.md","Fracture",{"type":133,"value":134,"toc":2211},"minimark",[135,139,185,199,228,233,308,312,2160,2164,2207],[136,137,131],"h1",{"id":138},"fracture",[140,141,142,143,147,148,151,152,159,160,163,164,170,171,177,178,184],"p",{},"Broken glass. The canvas splits into ",[144,145,146],"strong",{},"shards"," around a set of random sites; a pixel belongs\nto the nearest site. Where a shard has moved, a ",[144,149,150],{},"crack"," opens along its border with the\nnext-nearest shard, and the layer inside bends and colour-splits across it like light through\na prism. ",[153,154,156],"a",{"href":155},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fvoronoiregionfield",[10,157,158],{},"voronoiRegionField"," is the compute hook (for ",[10,161,162],{},"compute:",") that finds each pixel's\nshard and the next-nearest one; it only recomputes when the seed changes. The crack words run\nin the fragment: ",[153,165,167],{"href":166},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackgeom",[10,168,169],{},"crackGeom"," measures the crack at a pixel, ",[153,172,174],{"href":173},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackrefractuv",[10,175,176],{},"crackRefractUV"," bends one colour\nchannel across it, and ",[153,179,181],{"href":180},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackshardcompose",[10,182,183],{},"crackShardCompose"," joins the three channels with a little light on\ntilted shards.",[140,186,187,188,194,195,198],{},"Each shard's position and displacement reach the fragment through a one-row data texture you\nfill on the CPU (the Shatter shader moves them with pointer physics every frame). Lay it out as\nfour values per shard and read it with ",[153,189,191],{"href":190},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcelllaneuvfor",[10,192,193],{},"cellLaneUVFor",". The crack words are GPU functions:\ninvoke one with ",[10,196,197],{},"call(fn, 'name', [args])",". Samples come from the layer's texture, so\nunpremultiply the final colour.",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-ts shiki shiki-themes github-dark","import {effects} from 'shaders\u002Fstd'\n","ts","",[10,207,208],{"__ignoreMap":205},[209,210,213,217,221,224],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"snl16","import",[209,218,220],{"class":219},"s95oV"," {effects} ",[209,222,223],{"class":215},"from",[209,225,227],{"class":226},"sU2Wk"," 'shaders\u002Fstd'\n",[229,230,232],"h2",{"id":231},"reach-for-it-when","Reach for it when",[234,235,236,249],"table",{},[237,238,239],"thead",{},[240,241,242,246],"tr",{},[243,244,245],"th",{},"When you need",[243,247,248],{},"Use",[250,251,252,264,275,286,297],"tbody",{},[240,253,254,258],{},[255,256,257],"td",{},"splitting the canvas into shards that follow a seed",[255,259,260],{},[153,261,262],{"href":155},[10,263,158],{},[240,265,266,269],{},[255,267,268],{},"reading one shard's position or displacement from your data texture",[255,270,271],{},[153,272,273],{"href":190},[10,274,193],{},[240,276,277,280],{},[255,278,279],{},"how wide the crack is at a pixel and where the shard has gone",[255,281,282],{},[153,283,284],{"href":166},[10,285,169],{},[240,287,288,291],{},[255,289,290],{},"bending and colour-splitting the layer across the crack",[255,292,293],{},[153,294,295],{"href":173},[10,296,176],{},[240,298,299,302],{},[255,300,301],{},"the final glass colour with shard lighting",[255,303,304],{},[153,305,306],{"href":180},[10,307,183],{},[229,309,311],{"id":310},"example","Example",[200,313,315],{"className":202,"code":314,"language":204,"meta":205,"style":205},"import {defineShader, effects, math, call} from 'shaders\u002Fstd'\nimport type {Expr, GpuFragmentParams, KitTexture} from 'shaders\u002Fstd'\n\nconst {voronoiRegionField, cellLaneUVFor, crackGeom, crackRefractUV, crackShardCompose} = effects.fracture\nconst {vec4, div, max, sub, mul, float} = math\n\nconst SHARDS = 16\nconst cellLaneUV = cellLaneUVFor(SHARDS * 4)\n\n\u002F\u002F Deterministic shard sites for a seed, in uv. Shared by the region field and the data texture.\nconst rand = (n: number): number => {\n  const x = Math.sin(n) * 10000\n  return x - Math.floor(x)\n}\nconst sites = (seed: number): Float32Array => {\n  const out = new Float32Array(SHARDS * 2)\n  for (let i = 0; i \u003C SHARDS; i++) {\n    out[i * 2] = rand(seed + i * 2)\n    out[i * 2 + 1] = rand(seed + i * 2 + 1)\n  }\n  return out\n}\n\n\u002F\u002F Straight alpha from a premultiplied sample.\nconst unpremultiply = (c: Expr): Expr => vec4(div(c.member('rgb'), max(c.member('a'), 0.0001)), c.member('a'))\n\n\u002F\u002F Frozen shatter: every shard sits a little away from the centre, so the cracks stay open.\nexport const FrozenShatter = defineShader({\n  name: 'FrozenShatter',\n  requiresRTT: true,\n  requiresChild: true,\n  props: {\n    crackWidth: {default: 1},\n    spread: {default: 1, compileTime: true},\n    refractionStrength: {default: 5},\n    chromaticSplit: {default: 1},\n    shardLighting: {default: 0.1},\n    seed: {default: 2, compileTime: true},\n  },\n  compute: voronoiRegionField({count: SHARDS, size: 1024, sites, seedProp: 'seed', seedDefault: 2, output: 'shards'}),\n  gpu: {fragment: (params: GpuFragmentParams): Expr => {\n    const {childNode, ctx, uniforms, computeOutputs, convertToTexture, getCpuValue, createDataTexture, registerMediaTexture, onCleanup} = params\n    if (!childNode) return vec4(0, 0, 0, 0)\n    const child = convertToTexture(childNode)\n    const field = computeOutputs?.shards as KitTexture | undefined\n    if (!field) return unpremultiply(child.sample(ctx.uv))\n\n    \u002F\u002F One row, four values per shard: x, y, then the displacement encoded as byte = d \u002F 0.1 + 0.5.\n    const seed = (getCpuValue('seed') as number) ?? 2\n    const spread = (getCpuValue('spread') as number) ?? 1\n    const pos = sites(seed)\n    const bytes = new Uint8Array(SHARDS * 4 * 4)\n    for (let i = 0; i \u003C SHARDS; i++) {\n      const dx = (pos[i * 2] - 0.5) * 0.05 * spread\n      const dy = (pos[i * 2 + 1] - 0.5) * 0.05 * spread\n      const lane = [pos[i * 2], pos[i * 2 + 1], dx \u002F 0.1 + 0.5, dy \u002F 0.1 + 0.5]\n      for (let f = 0; f \u003C 4; f++) bytes[(i * 4 + f) * 4] = Math.round(Math.min(1, Math.max(0, lane[f])) * 255)\n    }\n    const data = createDataTexture({width: SHARDS * 4, height: 1, format: 'rgba8unorm', data: bytes})\n    onCleanup(() => data.destroy())\n    const dataKit = registerMediaTexture(() => data.texture)\n    const at = (idx: Expr, f: number): Expr => dataKit.sample(call(cellLaneUV, 'cellLaneUV', [idx, float(f)]), 'nearestClamp').member('r')\n    const dispAt = (idx: Expr, f: number): Expr => mul(sub(at(idx, f), 0.5), 0.1)\n\n    const cell = field.sample(ctx.uv, 'nearestClamp')\n    const nearest = cell.member('r')\n    const second = cell.member('g')\n    const geom = call(crackGeom, 'crackGeom', [\n      ctx.uv, at(nearest, 0), at(nearest, 1), at(second, 0), at(second, 1), dispAt(nearest, 2), dispAt(nearest, 3), uniforms.crackWidth,\n    ])\n    const refracted = (channel: number): Expr => child.sample(call(crackRefractUV, 'crackRefractUV', [\n      geom.member('displacedUV'), geom.member('edgeNormal'), geom.member('crackIntensity'), uniforms.refractionStrength, uniforms.chromaticSplit, float(channel),\n    ]))\n    const glass = call(crackShardCompose, 'crackShardCompose', [\n      child.sample(geom.member('displacedUV')), refracted(1), refracted(0), refracted(-1), geom.member('crackIntensity'), geom.member('disp'), uniforms.shardLighting,\n    ])\n    return unpremultiply(glass)\n  }},\n})\n",[10,316,317,328,343,350,388,430,435,449,478,483,490,526,552,572,578,608,634,670,701,738,744,752,757,762,768,845,850,856,876,888,899,909,915,927,942,953,963,974,989,995,1034,1064,1122,1160,1176,1201,1226,1231,1237,1270,1302,1317,1346,1374,1411,1447,1502,1585,1591,1627,1648,1668,1743,1801,1806,1828,1849,1870,1892,1951,1957,2001,2041,2047,2067,2132,2137,2148,2154],{"__ignoreMap":205},[209,318,319,321,324,326],{"class":211,"line":212},[209,320,216],{"class":215},[209,322,323],{"class":219}," {defineShader, effects, math, call} ",[209,325,223],{"class":215},[209,327,227],{"class":226},[209,329,331,333,336,339,341],{"class":211,"line":330},2,[209,332,216],{"class":215},[209,334,335],{"class":215}," type",[209,337,338],{"class":219}," {Expr, GpuFragmentParams, KitTexture} ",[209,340,223],{"class":215},[209,342,227],{"class":226},[209,344,346],{"class":211,"line":345},3,[209,347,349],{"emptyLinePlaceholder":348},true,"\n",[209,351,353,356,359,362,365,367,369,371,373,375,377,379,382,385],{"class":211,"line":352},4,[209,354,355],{"class":215},"const",[209,357,358],{"class":219}," {",[209,360,158],{"class":361},"sDLfK",[209,363,364],{"class":219},", ",[209,366,193],{"class":361},[209,368,364],{"class":219},[209,370,169],{"class":361},[209,372,364],{"class":219},[209,374,176],{"class":361},[209,376,364],{"class":219},[209,378,183],{"class":361},[209,380,381],{"class":219},"} ",[209,383,384],{"class":215},"=",[209,386,387],{"class":219}," effects.fracture\n",[209,389,391,393,395,398,400,403,405,408,410,413,415,418,420,423,425,427],{"class":211,"line":390},5,[209,392,355],{"class":215},[209,394,358],{"class":219},[209,396,397],{"class":361},"vec4",[209,399,364],{"class":219},[209,401,402],{"class":361},"div",[209,404,364],{"class":219},[209,406,407],{"class":361},"max",[209,409,364],{"class":219},[209,411,412],{"class":361},"sub",[209,414,364],{"class":219},[209,416,417],{"class":361},"mul",[209,419,364],{"class":219},[209,421,422],{"class":361},"float",[209,424,381],{"class":219},[209,426,384],{"class":215},[209,428,429],{"class":219}," math\n",[209,431,433],{"class":211,"line":432},6,[209,434,349],{"emptyLinePlaceholder":348},[209,436,438,440,443,446],{"class":211,"line":437},7,[209,439,355],{"class":215},[209,441,442],{"class":361}," SHARDS",[209,444,445],{"class":215}," =",[209,447,448],{"class":361}," 16\n",[209,450,452,454,457,459,463,466,469,472,475],{"class":211,"line":451},8,[209,453,355],{"class":215},[209,455,456],{"class":361}," cellLaneUV",[209,458,445],{"class":215},[209,460,462],{"class":461},"svObZ"," cellLaneUVFor",[209,464,465],{"class":219},"(",[209,467,468],{"class":361},"SHARDS",[209,470,471],{"class":215}," *",[209,473,474],{"class":361}," 4",[209,476,477],{"class":219},")\n",[209,479,481],{"class":211,"line":480},9,[209,482,349],{"emptyLinePlaceholder":348},[209,484,486],{"class":211,"line":485},10,[209,487,489],{"class":488},"sAwPA","\u002F\u002F Deterministic shard sites for a seed, in uv. Shared by the region field and the data texture.\n",[209,491,493,495,498,500,503,507,510,513,516,518,520,523],{"class":211,"line":492},11,[209,494,355],{"class":215},[209,496,497],{"class":461}," rand",[209,499,445],{"class":215},[209,501,502],{"class":219}," (",[209,504,506],{"class":505},"s9osk","n",[209,508,509],{"class":215},":",[209,511,512],{"class":361}," number",[209,514,515],{"class":219},")",[209,517,509],{"class":215},[209,519,512],{"class":361},[209,521,522],{"class":215}," =>",[209,524,525],{"class":219}," {\n",[209,527,529,532,535,537,540,543,546,549],{"class":211,"line":528},12,[209,530,531],{"class":215},"  const",[209,533,534],{"class":361}," x",[209,536,445],{"class":215},[209,538,539],{"class":219}," Math.",[209,541,542],{"class":461},"sin",[209,544,545],{"class":219},"(n) ",[209,547,548],{"class":215},"*",[209,550,551],{"class":361}," 10000\n",[209,553,555,558,561,564,566,569],{"class":211,"line":554},13,[209,556,557],{"class":215},"  return",[209,559,560],{"class":219}," x ",[209,562,563],{"class":215},"-",[209,565,539],{"class":219},[209,567,568],{"class":461},"floor",[209,570,571],{"class":219},"(x)\n",[209,573,575],{"class":211,"line":574},14,[209,576,577],{"class":219},"}\n",[209,579,581,583,586,588,590,593,595,597,599,601,604,606],{"class":211,"line":580},15,[209,582,355],{"class":215},[209,584,585],{"class":461}," sites",[209,587,445],{"class":215},[209,589,502],{"class":219},[209,591,592],{"class":505},"seed",[209,594,509],{"class":215},[209,596,512],{"class":361},[209,598,515],{"class":219},[209,600,509],{"class":215},[209,602,603],{"class":461}," Float32Array",[209,605,522],{"class":215},[209,607,525],{"class":219},[209,609,611,613,616,618,621,623,625,627,629,632],{"class":211,"line":610},16,[209,612,531],{"class":215},[209,614,615],{"class":361}," out",[209,617,445],{"class":215},[209,619,620],{"class":215}," new",[209,622,603],{"class":461},[209,624,465],{"class":219},[209,626,468],{"class":361},[209,628,471],{"class":215},[209,630,631],{"class":361}," 2",[209,633,477],{"class":219},[209,635,637,640,642,645,648,650,653,656,659,661,664,667],{"class":211,"line":636},17,[209,638,639],{"class":215},"  for",[209,641,502],{"class":219},[209,643,644],{"class":215},"let",[209,646,647],{"class":219}," i ",[209,649,384],{"class":215},[209,651,652],{"class":361}," 0",[209,654,655],{"class":219},"; i ",[209,657,658],{"class":215},"\u003C",[209,660,442],{"class":361},[209,662,663],{"class":219},"; i",[209,665,666],{"class":215},"++",[209,668,669],{"class":219},") {\n",[209,671,673,676,678,680,683,685,687,690,693,695,697,699],{"class":211,"line":672},18,[209,674,675],{"class":219},"    out[i ",[209,677,548],{"class":215},[209,679,631],{"class":361},[209,681,682],{"class":219},"] ",[209,684,384],{"class":215},[209,686,497],{"class":461},[209,688,689],{"class":219},"(seed ",[209,691,692],{"class":215},"+",[209,694,647],{"class":219},[209,696,548],{"class":215},[209,698,631],{"class":361},[209,700,477],{"class":219},[209,702,704,706,708,710,713,716,718,720,722,724,726,728,730,732,734,736],{"class":211,"line":703},19,[209,705,675],{"class":219},[209,707,548],{"class":215},[209,709,631],{"class":361},[209,711,712],{"class":215}," +",[209,714,715],{"class":361}," 1",[209,717,682],{"class":219},[209,719,384],{"class":215},[209,721,497],{"class":461},[209,723,689],{"class":219},[209,725,692],{"class":215},[209,727,647],{"class":219},[209,729,548],{"class":215},[209,731,631],{"class":361},[209,733,712],{"class":215},[209,735,715],{"class":361},[209,737,477],{"class":219},[209,739,741],{"class":211,"line":740},20,[209,742,743],{"class":219},"  }\n",[209,745,747,749],{"class":211,"line":746},21,[209,748,557],{"class":215},[209,750,751],{"class":219}," out\n",[209,753,755],{"class":211,"line":754},22,[209,756,577],{"class":219},[209,758,760],{"class":211,"line":759},23,[209,761,349],{"emptyLinePlaceholder":348},[209,763,765],{"class":211,"line":764},24,[209,766,767],{"class":488},"\u002F\u002F Straight alpha from a premultiplied sample.\n",[209,769,771,773,776,778,780,783,785,788,790,792,794,796,799,801,803,806,809,811,814,817,819,821,823,825,828,830,833,836,838,840,842],{"class":211,"line":770},25,[209,772,355],{"class":215},[209,774,775],{"class":461}," unpremultiply",[209,777,445],{"class":215},[209,779,502],{"class":219},[209,781,782],{"class":505},"c",[209,784,509],{"class":215},[209,786,787],{"class":461}," Expr",[209,789,515],{"class":219},[209,791,509],{"class":215},[209,793,787],{"class":461},[209,795,522],{"class":215},[209,797,798],{"class":461}," vec4",[209,800,465],{"class":219},[209,802,402],{"class":461},[209,804,805],{"class":219},"(c.",[209,807,808],{"class":461},"member",[209,810,465],{"class":219},[209,812,813],{"class":226},"'rgb'",[209,815,816],{"class":219},"), ",[209,818,407],{"class":461},[209,820,805],{"class":219},[209,822,808],{"class":461},[209,824,465],{"class":219},[209,826,827],{"class":226},"'a'",[209,829,816],{"class":219},[209,831,832],{"class":361},"0.0001",[209,834,835],{"class":219},")), c.",[209,837,808],{"class":461},[209,839,465],{"class":219},[209,841,827],{"class":226},[209,843,844],{"class":219},"))\n",[209,846,848],{"class":211,"line":847},26,[209,849,349],{"emptyLinePlaceholder":348},[209,851,853],{"class":211,"line":852},27,[209,854,855],{"class":488},"\u002F\u002F Frozen shatter: every shard sits a little away from the centre, so the cracks stay open.\n",[209,857,859,862,865,868,870,873],{"class":211,"line":858},28,[209,860,861],{"class":215},"export",[209,863,864],{"class":215}," const",[209,866,867],{"class":361}," FrozenShatter",[209,869,445],{"class":215},[209,871,872],{"class":461}," defineShader",[209,874,875],{"class":219},"({\n",[209,877,879,882,885],{"class":211,"line":878},29,[209,880,881],{"class":219},"  name: ",[209,883,884],{"class":226},"'FrozenShatter'",[209,886,887],{"class":219},",\n",[209,889,891,894,897],{"class":211,"line":890},30,[209,892,893],{"class":219},"  requiresRTT: ",[209,895,896],{"class":361},"true",[209,898,887],{"class":219},[209,900,902,905,907],{"class":211,"line":901},31,[209,903,904],{"class":219},"  requiresChild: ",[209,906,896],{"class":361},[209,908,887],{"class":219},[209,910,912],{"class":211,"line":911},32,[209,913,914],{"class":219},"  props: {\n",[209,916,918,921,924],{"class":211,"line":917},33,[209,919,920],{"class":219},"    crackWidth: {default: ",[209,922,923],{"class":361},"1",[209,925,926],{"class":219},"},\n",[209,928,930,933,935,938,940],{"class":211,"line":929},34,[209,931,932],{"class":219},"    spread: {default: ",[209,934,923],{"class":361},[209,936,937],{"class":219},", compileTime: ",[209,939,896],{"class":361},[209,941,926],{"class":219},[209,943,945,948,951],{"class":211,"line":944},35,[209,946,947],{"class":219},"    refractionStrength: {default: ",[209,949,950],{"class":361},"5",[209,952,926],{"class":219},[209,954,956,959,961],{"class":211,"line":955},36,[209,957,958],{"class":219},"    chromaticSplit: {default: ",[209,960,923],{"class":361},[209,962,926],{"class":219},[209,964,966,969,972],{"class":211,"line":965},37,[209,967,968],{"class":219},"    shardLighting: {default: ",[209,970,971],{"class":361},"0.1",[209,973,926],{"class":219},[209,975,977,980,983,985,987],{"class":211,"line":976},38,[209,978,979],{"class":219},"    seed: {default: ",[209,981,982],{"class":361},"2",[209,984,937],{"class":219},[209,986,896],{"class":361},[209,988,926],{"class":219},[209,990,992],{"class":211,"line":991},39,[209,993,994],{"class":219},"  },\n",[209,996,998,1001,1003,1006,1008,1011,1014,1017,1020,1023,1025,1028,1031],{"class":211,"line":997},40,[209,999,1000],{"class":219},"  compute: ",[209,1002,158],{"class":461},[209,1004,1005],{"class":219},"({count: ",[209,1007,468],{"class":361},[209,1009,1010],{"class":219},", size: ",[209,1012,1013],{"class":361},"1024",[209,1015,1016],{"class":219},", sites, seedProp: ",[209,1018,1019],{"class":226},"'seed'",[209,1021,1022],{"class":219},", seedDefault: ",[209,1024,982],{"class":361},[209,1026,1027],{"class":219},", output: ",[209,1029,1030],{"class":226},"'shards'",[209,1032,1033],{"class":219},"}),\n",[209,1035,1037,1040,1043,1046,1049,1051,1054,1056,1058,1060,1062],{"class":211,"line":1036},41,[209,1038,1039],{"class":219},"  gpu: {",[209,1041,1042],{"class":461},"fragment",[209,1044,1045],{"class":219},": (",[209,1047,1048],{"class":505},"params",[209,1050,509],{"class":215},[209,1052,1053],{"class":461}," GpuFragmentParams",[209,1055,515],{"class":219},[209,1057,509],{"class":215},[209,1059,787],{"class":461},[209,1061,522],{"class":215},[209,1063,525],{"class":219},[209,1065,1067,1070,1072,1075,1077,1080,1082,1085,1087,1090,1092,1095,1097,1100,1102,1105,1107,1110,1112,1115,1117,1119],{"class":211,"line":1066},42,[209,1068,1069],{"class":215},"    const",[209,1071,358],{"class":219},[209,1073,1074],{"class":361},"childNode",[209,1076,364],{"class":219},[209,1078,1079],{"class":361},"ctx",[209,1081,364],{"class":219},[209,1083,1084],{"class":361},"uniforms",[209,1086,364],{"class":219},[209,1088,1089],{"class":361},"computeOutputs",[209,1091,364],{"class":219},[209,1093,1094],{"class":361},"convertToTexture",[209,1096,364],{"class":219},[209,1098,1099],{"class":361},"getCpuValue",[209,1101,364],{"class":219},[209,1103,1104],{"class":361},"createDataTexture",[209,1106,364],{"class":219},[209,1108,1109],{"class":361},"registerMediaTexture",[209,1111,364],{"class":219},[209,1113,1114],{"class":361},"onCleanup",[209,1116,381],{"class":219},[209,1118,384],{"class":215},[209,1120,1121],{"class":219}," params\n",[209,1123,1125,1128,1130,1133,1136,1139,1141,1143,1146,1148,1150,1152,1154,1156,1158],{"class":211,"line":1124},43,[209,1126,1127],{"class":215},"    if",[209,1129,502],{"class":219},[209,1131,1132],{"class":215},"!",[209,1134,1135],{"class":219},"childNode) ",[209,1137,1138],{"class":215},"return",[209,1140,798],{"class":461},[209,1142,465],{"class":219},[209,1144,1145],{"class":361},"0",[209,1147,364],{"class":219},[209,1149,1145],{"class":361},[209,1151,364],{"class":219},[209,1153,1145],{"class":361},[209,1155,364],{"class":219},[209,1157,1145],{"class":361},[209,1159,477],{"class":219},[209,1161,1163,1165,1168,1170,1173],{"class":211,"line":1162},44,[209,1164,1069],{"class":215},[209,1166,1167],{"class":361}," child",[209,1169,445],{"class":215},[209,1171,1172],{"class":461}," convertToTexture",[209,1174,1175],{"class":219},"(childNode)\n",[209,1177,1179,1181,1184,1186,1189,1192,1195,1198],{"class":211,"line":1178},45,[209,1180,1069],{"class":215},[209,1182,1183],{"class":361}," field",[209,1185,445],{"class":215},[209,1187,1188],{"class":219}," computeOutputs?.shards ",[209,1190,1191],{"class":215},"as",[209,1193,1194],{"class":461}," KitTexture",[209,1196,1197],{"class":215}," |",[209,1199,1200],{"class":361}," undefined\n",[209,1202,1204,1206,1208,1210,1213,1215,1217,1220,1223],{"class":211,"line":1203},46,[209,1205,1127],{"class":215},[209,1207,502],{"class":219},[209,1209,1132],{"class":215},[209,1211,1212],{"class":219},"field) ",[209,1214,1138],{"class":215},[209,1216,775],{"class":461},[209,1218,1219],{"class":219},"(child.",[209,1221,1222],{"class":461},"sample",[209,1224,1225],{"class":219},"(ctx.uv))\n",[209,1227,1229],{"class":211,"line":1228},47,[209,1230,349],{"emptyLinePlaceholder":348},[209,1232,1234],{"class":211,"line":1233},48,[209,1235,1236],{"class":488},"    \u002F\u002F One row, four values per shard: x, y, then the displacement encoded as byte = d \u002F 0.1 + 0.5.\n",[209,1238,1240,1242,1245,1247,1249,1251,1253,1255,1258,1260,1262,1264,1267],{"class":211,"line":1239},49,[209,1241,1069],{"class":215},[209,1243,1244],{"class":361}," seed",[209,1246,445],{"class":215},[209,1248,502],{"class":219},[209,1250,1099],{"class":461},[209,1252,465],{"class":219},[209,1254,1019],{"class":226},[209,1256,1257],{"class":219},") ",[209,1259,1191],{"class":215},[209,1261,512],{"class":361},[209,1263,1257],{"class":219},[209,1265,1266],{"class":215},"??",[209,1268,1269],{"class":361}," 2\n",[209,1271,1273,1275,1278,1280,1282,1284,1286,1289,1291,1293,1295,1297,1299],{"class":211,"line":1272},50,[209,1274,1069],{"class":215},[209,1276,1277],{"class":361}," spread",[209,1279,445],{"class":215},[209,1281,502],{"class":219},[209,1283,1099],{"class":461},[209,1285,465],{"class":219},[209,1287,1288],{"class":226},"'spread'",[209,1290,1257],{"class":219},[209,1292,1191],{"class":215},[209,1294,512],{"class":361},[209,1296,1257],{"class":219},[209,1298,1266],{"class":215},[209,1300,1301],{"class":361}," 1\n",[209,1303,1305,1307,1310,1312,1314],{"class":211,"line":1304},51,[209,1306,1069],{"class":215},[209,1308,1309],{"class":361}," pos",[209,1311,445],{"class":215},[209,1313,585],{"class":461},[209,1315,1316],{"class":219},"(seed)\n",[209,1318,1320,1322,1325,1327,1329,1332,1334,1336,1338,1340,1342,1344],{"class":211,"line":1319},52,[209,1321,1069],{"class":215},[209,1323,1324],{"class":361}," bytes",[209,1326,445],{"class":215},[209,1328,620],{"class":215},[209,1330,1331],{"class":461}," Uint8Array",[209,1333,465],{"class":219},[209,1335,468],{"class":361},[209,1337,471],{"class":215},[209,1339,474],{"class":361},[209,1341,471],{"class":215},[209,1343,474],{"class":361},[209,1345,477],{"class":219},[209,1347,1349,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372],{"class":211,"line":1348},53,[209,1350,1351],{"class":215},"    for",[209,1353,502],{"class":219},[209,1355,644],{"class":215},[209,1357,647],{"class":219},[209,1359,384],{"class":215},[209,1361,652],{"class":361},[209,1363,655],{"class":219},[209,1365,658],{"class":215},[209,1367,442],{"class":361},[209,1369,663],{"class":219},[209,1371,666],{"class":215},[209,1373,669],{"class":219},[209,1375,1377,1380,1383,1385,1388,1390,1392,1394,1396,1399,1401,1403,1406,1408],{"class":211,"line":1376},54,[209,1378,1379],{"class":215},"      const",[209,1381,1382],{"class":361}," dx",[209,1384,445],{"class":215},[209,1386,1387],{"class":219}," (pos[i ",[209,1389,548],{"class":215},[209,1391,631],{"class":361},[209,1393,682],{"class":219},[209,1395,563],{"class":215},[209,1397,1398],{"class":361}," 0.5",[209,1400,1257],{"class":219},[209,1402,548],{"class":215},[209,1404,1405],{"class":361}," 0.05",[209,1407,471],{"class":215},[209,1409,1410],{"class":219}," spread\n",[209,1412,1414,1416,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445],{"class":211,"line":1413},55,[209,1415,1379],{"class":215},[209,1417,1418],{"class":361}," dy",[209,1420,445],{"class":215},[209,1422,1387],{"class":219},[209,1424,548],{"class":215},[209,1426,631],{"class":361},[209,1428,712],{"class":215},[209,1430,715],{"class":361},[209,1432,682],{"class":219},[209,1434,563],{"class":215},[209,1436,1398],{"class":361},[209,1438,1257],{"class":219},[209,1440,548],{"class":215},[209,1442,1405],{"class":361},[209,1444,471],{"class":215},[209,1446,1410],{"class":219},[209,1448,1450,1452,1455,1457,1460,1462,1464,1467,1469,1471,1473,1475,1478,1481,1484,1486,1488,1491,1493,1495,1497,1499],{"class":211,"line":1449},56,[209,1451,1379],{"class":215},[209,1453,1454],{"class":361}," lane",[209,1456,445],{"class":215},[209,1458,1459],{"class":219}," [pos[i ",[209,1461,548],{"class":215},[209,1463,631],{"class":361},[209,1465,1466],{"class":219},"], pos[i ",[209,1468,548],{"class":215},[209,1470,631],{"class":361},[209,1472,712],{"class":215},[209,1474,715],{"class":361},[209,1476,1477],{"class":219},"], dx ",[209,1479,1480],{"class":215},"\u002F",[209,1482,1483],{"class":361}," 0.1",[209,1485,712],{"class":215},[209,1487,1398],{"class":361},[209,1489,1490],{"class":219},", dy ",[209,1492,1480],{"class":215},[209,1494,1483],{"class":361},[209,1496,712],{"class":215},[209,1498,1398],{"class":361},[209,1500,1501],{"class":219},"]\n",[209,1503,1505,1508,1510,1512,1515,1517,1519,1522,1524,1526,1529,1531,1534,1536,1538,1540,1543,1545,1547,1549,1551,1553,1556,1559,1562,1564,1566,1569,1571,1573,1575,1578,1580,1583],{"class":211,"line":1504},57,[209,1506,1507],{"class":215},"      for",[209,1509,502],{"class":219},[209,1511,644],{"class":215},[209,1513,1514],{"class":219}," f ",[209,1516,384],{"class":215},[209,1518,652],{"class":361},[209,1520,1521],{"class":219},"; f ",[209,1523,658],{"class":215},[209,1525,474],{"class":361},[209,1527,1528],{"class":219},"; f",[209,1530,666],{"class":215},[209,1532,1533],{"class":219},") bytes[(i ",[209,1535,548],{"class":215},[209,1537,474],{"class":361},[209,1539,712],{"class":215},[209,1541,1542],{"class":219}," f) ",[209,1544,548],{"class":215},[209,1546,474],{"class":361},[209,1548,682],{"class":219},[209,1550,384],{"class":215},[209,1552,539],{"class":219},[209,1554,1555],{"class":461},"round",[209,1557,1558],{"class":219},"(Math.",[209,1560,1561],{"class":461},"min",[209,1563,465],{"class":219},[209,1565,923],{"class":361},[209,1567,1568],{"class":219},", Math.",[209,1570,407],{"class":461},[209,1572,465],{"class":219},[209,1574,1145],{"class":361},[209,1576,1577],{"class":219},", lane[f])) ",[209,1579,548],{"class":215},[209,1581,1582],{"class":361}," 255",[209,1584,477],{"class":219},[209,1586,1588],{"class":211,"line":1587},58,[209,1589,1590],{"class":219},"    }\n",[209,1592,1594,1596,1599,1601,1604,1607,1609,1611,1613,1616,1618,1621,1624],{"class":211,"line":1593},59,[209,1595,1069],{"class":215},[209,1597,1598],{"class":361}," data",[209,1600,445],{"class":215},[209,1602,1603],{"class":461}," createDataTexture",[209,1605,1606],{"class":219},"({width: ",[209,1608,468],{"class":361},[209,1610,471],{"class":215},[209,1612,474],{"class":361},[209,1614,1615],{"class":219},", height: ",[209,1617,923],{"class":361},[209,1619,1620],{"class":219},", format: ",[209,1622,1623],{"class":226},"'rgba8unorm'",[209,1625,1626],{"class":219},", data: bytes})\n",[209,1628,1630,1633,1636,1639,1642,1645],{"class":211,"line":1629},60,[209,1631,1632],{"class":461},"    onCleanup",[209,1634,1635],{"class":219},"(() ",[209,1637,1638],{"class":215},"=>",[209,1640,1641],{"class":219}," data.",[209,1643,1644],{"class":461},"destroy",[209,1646,1647],{"class":219},"())\n",[209,1649,1651,1653,1656,1658,1661,1663,1665],{"class":211,"line":1650},61,[209,1652,1069],{"class":215},[209,1654,1655],{"class":361}," dataKit",[209,1657,445],{"class":215},[209,1659,1660],{"class":461}," registerMediaTexture",[209,1662,1635],{"class":219},[209,1664,1638],{"class":215},[209,1666,1667],{"class":219}," data.texture)\n",[209,1669,1671,1673,1676,1678,1680,1683,1685,1687,1689,1692,1694,1696,1698,1700,1702,1704,1707,1709,1711,1714,1717,1720,1723,1725,1728,1731,1734,1736,1738,1741],{"class":211,"line":1670},62,[209,1672,1069],{"class":215},[209,1674,1675],{"class":461}," at",[209,1677,445],{"class":215},[209,1679,502],{"class":219},[209,1681,1682],{"class":505},"idx",[209,1684,509],{"class":215},[209,1686,787],{"class":461},[209,1688,364],{"class":219},[209,1690,1691],{"class":505},"f",[209,1693,509],{"class":215},[209,1695,512],{"class":361},[209,1697,515],{"class":219},[209,1699,509],{"class":215},[209,1701,787],{"class":461},[209,1703,522],{"class":215},[209,1705,1706],{"class":219}," dataKit.",[209,1708,1222],{"class":461},[209,1710,465],{"class":219},[209,1712,1713],{"class":461},"call",[209,1715,1716],{"class":219},"(cellLaneUV, ",[209,1718,1719],{"class":226},"'cellLaneUV'",[209,1721,1722],{"class":219},", [idx, ",[209,1724,422],{"class":461},[209,1726,1727],{"class":219},"(f)]), ",[209,1729,1730],{"class":226},"'nearestClamp'",[209,1732,1733],{"class":219},").",[209,1735,808],{"class":461},[209,1737,465],{"class":219},[209,1739,1740],{"class":226},"'r'",[209,1742,477],{"class":219},[209,1744,1746,1748,1751,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1780,1782,1784,1786,1789,1792,1795,1797,1799],{"class":211,"line":1745},63,[209,1747,1069],{"class":215},[209,1749,1750],{"class":461}," dispAt",[209,1752,445],{"class":215},[209,1754,502],{"class":219},[209,1756,1682],{"class":505},[209,1758,509],{"class":215},[209,1760,787],{"class":461},[209,1762,364],{"class":219},[209,1764,1691],{"class":505},[209,1766,509],{"class":215},[209,1768,512],{"class":361},[209,1770,515],{"class":219},[209,1772,509],{"class":215},[209,1774,787],{"class":461},[209,1776,522],{"class":215},[209,1778,1779],{"class":461}," mul",[209,1781,465],{"class":219},[209,1783,412],{"class":461},[209,1785,465],{"class":219},[209,1787,1788],{"class":461},"at",[209,1790,1791],{"class":219},"(idx, f), ",[209,1793,1794],{"class":361},"0.5",[209,1796,816],{"class":219},[209,1798,971],{"class":361},[209,1800,477],{"class":219},[209,1802,1804],{"class":211,"line":1803},64,[209,1805,349],{"emptyLinePlaceholder":348},[209,1807,1809,1811,1814,1816,1819,1821,1824,1826],{"class":211,"line":1808},65,[209,1810,1069],{"class":215},[209,1812,1813],{"class":361}," cell",[209,1815,445],{"class":215},[209,1817,1818],{"class":219}," field.",[209,1820,1222],{"class":461},[209,1822,1823],{"class":219},"(ctx.uv, ",[209,1825,1730],{"class":226},[209,1827,477],{"class":219},[209,1829,1831,1833,1836,1838,1841,1843,1845,1847],{"class":211,"line":1830},66,[209,1832,1069],{"class":215},[209,1834,1835],{"class":361}," nearest",[209,1837,445],{"class":215},[209,1839,1840],{"class":219}," cell.",[209,1842,808],{"class":461},[209,1844,465],{"class":219},[209,1846,1740],{"class":226},[209,1848,477],{"class":219},[209,1850,1852,1854,1857,1859,1861,1863,1865,1868],{"class":211,"line":1851},67,[209,1853,1069],{"class":215},[209,1855,1856],{"class":361}," second",[209,1858,445],{"class":215},[209,1860,1840],{"class":219},[209,1862,808],{"class":461},[209,1864,465],{"class":219},[209,1866,1867],{"class":226},"'g'",[209,1869,477],{"class":219},[209,1871,1873,1875,1878,1880,1883,1886,1889],{"class":211,"line":1872},68,[209,1874,1069],{"class":215},[209,1876,1877],{"class":361}," geom",[209,1879,445],{"class":215},[209,1881,1882],{"class":461}," call",[209,1884,1885],{"class":219},"(crackGeom, ",[209,1887,1888],{"class":226},"'crackGeom'",[209,1890,1891],{"class":219},", [\n",[209,1893,1895,1898,1900,1903,1905,1907,1909,1911,1913,1915,1917,1920,1922,1924,1926,1928,1930,1932,1935,1937,1939,1941,1943,1945,1948],{"class":211,"line":1894},69,[209,1896,1897],{"class":219},"      ctx.uv, ",[209,1899,1788],{"class":461},[209,1901,1902],{"class":219},"(nearest, ",[209,1904,1145],{"class":361},[209,1906,816],{"class":219},[209,1908,1788],{"class":461},[209,1910,1902],{"class":219},[209,1912,923],{"class":361},[209,1914,816],{"class":219},[209,1916,1788],{"class":461},[209,1918,1919],{"class":219},"(second, ",[209,1921,1145],{"class":361},[209,1923,816],{"class":219},[209,1925,1788],{"class":461},[209,1927,1919],{"class":219},[209,1929,923],{"class":361},[209,1931,816],{"class":219},[209,1933,1934],{"class":461},"dispAt",[209,1936,1902],{"class":219},[209,1938,982],{"class":361},[209,1940,816],{"class":219},[209,1942,1934],{"class":461},[209,1944,1902],{"class":219},[209,1946,1947],{"class":361},"3",[209,1949,1950],{"class":219},"), uniforms.crackWidth,\n",[209,1952,1954],{"class":211,"line":1953},70,[209,1955,1956],{"class":219},"    ])\n",[209,1958,1960,1962,1965,1967,1969,1972,1974,1976,1978,1980,1982,1984,1987,1989,1991,1993,1996,1999],{"class":211,"line":1959},71,[209,1961,1069],{"class":215},[209,1963,1964],{"class":461}," refracted",[209,1966,445],{"class":215},[209,1968,502],{"class":219},[209,1970,1971],{"class":505},"channel",[209,1973,509],{"class":215},[209,1975,512],{"class":361},[209,1977,515],{"class":219},[209,1979,509],{"class":215},[209,1981,787],{"class":461},[209,1983,522],{"class":215},[209,1985,1986],{"class":219}," child.",[209,1988,1222],{"class":461},[209,1990,465],{"class":219},[209,1992,1713],{"class":461},[209,1994,1995],{"class":219},"(crackRefractUV, ",[209,1997,1998],{"class":226},"'crackRefractUV'",[209,2000,1891],{"class":219},[209,2002,2004,2007,2009,2011,2014,2017,2019,2021,2024,2026,2028,2030,2033,2036,2038],{"class":211,"line":2003},72,[209,2005,2006],{"class":219},"      geom.",[209,2008,808],{"class":461},[209,2010,465],{"class":219},[209,2012,2013],{"class":226},"'displacedUV'",[209,2015,2016],{"class":219},"), geom.",[209,2018,808],{"class":461},[209,2020,465],{"class":219},[209,2022,2023],{"class":226},"'edgeNormal'",[209,2025,2016],{"class":219},[209,2027,808],{"class":461},[209,2029,465],{"class":219},[209,2031,2032],{"class":226},"'crackIntensity'",[209,2034,2035],{"class":219},"), uniforms.refractionStrength, uniforms.chromaticSplit, ",[209,2037,422],{"class":461},[209,2039,2040],{"class":219},"(channel),\n",[209,2042,2044],{"class":211,"line":2043},73,[209,2045,2046],{"class":219},"    ]))\n",[209,2048,2050,2052,2055,2057,2059,2062,2065],{"class":211,"line":2049},74,[209,2051,1069],{"class":215},[209,2053,2054],{"class":361}," glass",[209,2056,445],{"class":215},[209,2058,1882],{"class":461},[209,2060,2061],{"class":219},"(crackShardCompose, ",[209,2063,2064],{"class":226},"'crackShardCompose'",[209,2066,1891],{"class":219},[209,2068,2070,2073,2075,2078,2080,2082,2084,2087,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2129],{"class":211,"line":2069},75,[209,2071,2072],{"class":219},"      child.",[209,2074,1222],{"class":461},[209,2076,2077],{"class":219},"(geom.",[209,2079,808],{"class":461},[209,2081,465],{"class":219},[209,2083,2013],{"class":226},[209,2085,2086],{"class":219},")), ",[209,2088,2089],{"class":461},"refracted",[209,2091,465],{"class":219},[209,2093,923],{"class":361},[209,2095,816],{"class":219},[209,2097,2089],{"class":461},[209,2099,465],{"class":219},[209,2101,1145],{"class":361},[209,2103,816],{"class":219},[209,2105,2089],{"class":461},[209,2107,465],{"class":219},[209,2109,563],{"class":215},[209,2111,923],{"class":361},[209,2113,2016],{"class":219},[209,2115,808],{"class":461},[209,2117,465],{"class":219},[209,2119,2032],{"class":226},[209,2121,2016],{"class":219},[209,2123,808],{"class":461},[209,2125,465],{"class":219},[209,2127,2128],{"class":226},"'disp'",[209,2130,2131],{"class":219},"), uniforms.shardLighting,\n",[209,2133,2135],{"class":211,"line":2134},76,[209,2136,1956],{"class":219},[209,2138,2140,2143,2145],{"class":211,"line":2139},77,[209,2141,2142],{"class":215},"    return",[209,2144,775],{"class":461},[209,2146,2147],{"class":219},"(glass)\n",[209,2149,2151],{"class":211,"line":2150},78,[209,2152,2153],{"class":219},"  }},\n",[209,2155,2157],{"class":211,"line":2156},79,[209,2158,2159],{"class":219},"})\n",[229,2161,2163],{"id":2162},"words","Words",[2165,2166,2168],"primitive-words",{":words":2167},"[{\"name\":\"voronoiRegionField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fvoronoiregionfield\",\"summary\":\"Splits the canvas into shards around random sites and records, per pixel, its shard and the next-nearest one.\"},{\"name\":\"crackGeom\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackgeom\",\"summary\":\"How much crack there is at a pixel, and which way the shard under it has moved.\"},{\"name\":\"crackRefractUV\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackrefractuv\",\"summary\":\"Where to sample one color channel so the crack bends the light and splits it like a prism.\"},{\"name\":\"crackShardCompose\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcrackshardcompose\",\"summary\":\"The finished glass: the three refracted channels blended into the crack, with a hint of light on tilted shards.\"},{\"name\":\"cellLaneUVFor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-fracture\u002Fcelllaneuvfor\",\"summary\":\"Where one shard's value sits in a one-row data texture.\"}]",[2169,2170,2171,2179,2186,2193,2200],"ul",{},[2172,2173,2174,2178],"li",{},[153,2175,2176],{"href":155},[10,2177,158],{}," — Splits the canvas into shards around random sites and records, per pixel, its shard and the next-nearest one.",[2172,2180,2181,2185],{},[153,2182,2183],{"href":166},[10,2184,169],{}," — How much crack there is at a pixel, and which way the shard under it has moved.",[2172,2187,2188,2192],{},[153,2189,2190],{"href":173},[10,2191,176],{}," — Where to sample one color channel so the crack bends the light and splits it like a prism.",[2172,2194,2195,2199],{},[153,2196,2197],{"href":180},[10,2198,183],{}," — The finished glass: the three refracted channels blended into the crack, with a hint of light on tilted shards.",[2172,2201,2202,2206],{},[153,2203,2204],{"href":190},[10,2205,193],{}," — Where one shard's value sits in a one-row data texture.",[2208,2209,2210],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":205,"searchDepth":330,"depth":330,"links":2212},[2213,2214,2215],{"id":231,"depth":330,"text":232},{"id":310,"depth":330,"text":311},{"id":2162,"depth":330,"text":2163},"effects.fracture","effects-fracture",null,"Broken glass.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Feffects.fracture.md","md","effects","Filters & effects",{},"\u002Fdocs\u002Fprimitives\u002Feffects-fracture",{"title":131,"description":2219},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Feffects\u002Ffracture.ts","docs\u002Fprimitives\u002F32.effects-fracture\u002Findex","XBvU3IDvWXsX8ql-hPQ_sbzNHiZK-KKxti0bqYBZABU"]