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