[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fradiance":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":154,"categorySlug":154,"categoryTitle":9,"curated":332,"description":1471,"editUrl":1472,"extension":1473,"group":1474,"groupTitle":1475,"kind":9,"meta":1476,"navigation":332,"path":1477,"seo":1478,"sourceUrl":1479,"stem":1480,"wordCount":336,"__hash__":1481},"primitives\u002Fdocs\u002Fprimitives\u002F16.radiance\u002Findex.md","Radiance",{"type":149,"value":150,"toc":1465},"minimark",[151,155,176,220,249,254,307,311,1375,1379,1428,1432,1461],[152,153,147],"h1",{"id":154},"radiance",[156,157,158,159,162,163,166,167,170,171,175],"p",{},"Words for light a shape gives off or blocks. Colored point lights strike the shape's\nsilhouette, the lit edges spill light into their surroundings, and the shape's body casts\nshadows, so light stays out of a ring's hole and off the far side of a wall. They work inside\na shape-effect material, the ",[8,160,161],{},"surface:"," of ",[8,164,165],{},"shapedSurface"," from ",[8,168,169],{},"materials",". The shape is a\n",[172,173,174],"strong",{},"signed distance",", a function from a point to its distance from the edge, and every word\nhere marches rays against it.",[156,177,178,185,186,189,190,193,194,200,201,207,208,211,212,215,216,219],{},[179,180,182],"a",{"href":181},"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Firradiancefield",[8,183,184],{},"irradianceField"," does the heavy work once: it gathers the spilled light into a texture in a\ncompute pass and only gathers again when a light or the shape changes, so a still scene\ncosts one texture read per pixel. Build its spec once, put its ",[8,187,188],{},"compute"," on your definition\nand read ",[8,191,192],{},"sample(params)"," in your material. ",[179,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Fshadowvisibility",[8,198,199],{},"shadowVisibility"," is for light you compute\nyourself at a point, such as the directly lit rim. ",[179,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Fgatherirradiance",[8,205,206],{},"gatherIrradiance"," is the same gather run\nlive per pixel, for when the light must change every frame. The light comes back as rgb.\nSend it through ",[8,209,210],{},"exposureTone"," and ",[8,213,214],{},"emissiveAlpha"," for a glow that composites over what is\nbehind it, then mix in the body by ",[8,217,218],{},"silhouette",".",[221,222,227],"pre",{"className":223,"code":224,"language":225,"meta":226,"style":226},"language-ts shiki shiki-themes github-dark","import {radiance} from 'shaders\u002Fstd'\n","ts","",[8,228,229],{"__ignoreMap":226},[230,231,234,238,242,245],"span",{"class":232,"line":233},"line",1,[230,235,237],{"class":236},"snl16","import",[230,239,241],{"class":240},"s95oV"," {radiance} ",[230,243,244],{"class":236},"from",[230,246,248],{"class":247},"sU2Wk"," 'shaders\u002Fstd'\n",[250,251,253],"h2",{"id":252},"reach-for-it-when","Reach for it when",[255,256,257,270],"table",{},[258,259,260],"thead",{},[261,262,263,267],"tr",{},[264,265,266],"th",{},"When you need",[264,268,269],{},"Use",[271,272,273,285,296],"tbody",{},[261,274,275,279],{},[276,277,278],"td",{},"colored lights spilling around a shape, with shadows",[276,280,281],{},[179,282,283],{"href":181},[8,284,184],{},[261,286,287,290],{},[276,288,289],{},"a light that the shape's body should block at one point",[276,291,292],{},[179,293,294],{"href":196},[8,295,199],{},[261,297,298,301],{},[276,299,300],{},"a gather that must change every frame",[276,302,303],{},[179,304,305],{"href":203},[8,306,206],{},[250,308,310],{"id":309},"example","Example",[221,312,314],{"className":223,"code":313,"language":225,"meta":226,"style":226},"import {defineShader, listPropConfig, materials, radiance, compose, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {shapedSurface, surfaceField, silhouette, exposureTone} = materials\nconst {irradianceField} = radiance\nconst {emissiveAlpha} = compose\nconst {local, mix, splat3, vec4} = math\n\n\u002F\u002F One spec for both halves: the compute gather and the fragment read.\nconst GATHER = {\n  rays: {burst: 128, motion: 64, refine: 32, refineFrames: 12},\n  steps: 32,\n  shadowSteps: 12,\n  resolution: 512,\n  lights: {prop: 'lights', position: 'position', color: 'color', intensity: 'intensity'},\n  reach: 'reach',\n  wrap: 'wrap',\n  lightRange: 'lightRange',\n  shadowSoftness: 'shadowSoftness',\n}\n\n\u002F\u002F Colored lights spilling around a dark shape, gathered once and read per pixel.\nexport const LitEdge = defineShader({\n  name: 'LitEdge',\n  role: 'shapeEffect',\n  species: 'custom',\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    scale: {default: 1},\n    rotation: {default: 0},\n    lights: listPropConfig({\n      maxItems: 6,\n      minItems: 1,\n      itemLabel: 'Light',\n      item: {\n        position: {kind: 'position', default: {x: 0.3, y: 0.3}, label: 'Position'},\n        color: {kind: 'color', default: '#ffb347', label: 'Color'},\n        intensity: {kind: 'number', default: 3, label: 'Intensity', min: 0, max: 8, step: 0.01},\n      },\n    }, {\n      default: [\n        {position: {x: 0.3, y: 0.3}, color: '#ffb347', intensity: 3},\n        {position: {x: 0.72, y: 0.7}, color: '#7a5cff', intensity: 2},\n      ],\n      description: 'The point lights striking the shape',\n      label: 'Lights',\n      group: 'Lights',\n    }),\n    lightRange: {default: 1.2},\n    reach: {default: 3},\n    wrap: {default: 0},\n    shadowSoftness: {default: 0.2},\n    bodyColor: {default: '#000000', transform: transformColor},\n    edgeSoftness: {default: 0.01},\n    shape: {default: JSON.stringify({type: 'circleSDF', radius: 0.35}), ui: {type: 'shape', label: 'Shape'}},\n    shapeSdfUrl: {default: '', compileTime: true},\n    shapeType: {default: '', compileTime: true},\n  },\n  ...shapedSurface({\n    stencil: 'centre',\n    centreTap: 'fast',\n    surface: (frame, params) => {\n      const u = params.uniforms\n      const field = surfaceField(frame, params)\n      const spill = irradianceField(GATHER).sample(params) ?? splat3(0)\n      const glow = emissiveAlpha(exposureTone(spill), 'glow')\n      const cov = local(silhouette(field, u.edgeSoftness), 'cov')\n      return vec4(mix(glow.member('rgb'), u.bodyColor.member('rgb'), cov), mix(glow.member('a'), 1, cov))\n    },\n  }),\n  compute: (params) => irradianceField(GATHER).compute(params),\n})\n",[8,315,316,327,334,369,385,401,433,438,445,459,489,500,510,521,550,561,572,583,594,600,605,611,632,643,654,665,671,688,699,710,721,732,742,753,759,785,807,845,851,857,863,886,911,917,928,939,949,955,966,976,986,997,1009,1019,1059,1076,1090,1096,1106,1117,1128,1154,1168,1184,1225,1250,1275,1330,1336,1342,1369],{"__ignoreMap":226},[230,317,318,320,323,325],{"class":232,"line":233},[230,319,237],{"class":236},[230,321,322],{"class":240}," {defineShader, listPropConfig, materials, radiance, compose, math, transformColor, transformPosition} ",[230,324,244],{"class":236},[230,326,248],{"class":247},[230,328,330],{"class":232,"line":329},2,[230,331,333],{"emptyLinePlaceholder":332},true,"\n",[230,335,337,340,343,346,349,352,354,356,358,360,363,366],{"class":232,"line":336},3,[230,338,339],{"class":236},"const",[230,341,342],{"class":240}," {",[230,344,165],{"class":345},"sDLfK",[230,347,348],{"class":240},", ",[230,350,351],{"class":345},"surfaceField",[230,353,348],{"class":240},[230,355,218],{"class":345},[230,357,348],{"class":240},[230,359,210],{"class":345},[230,361,362],{"class":240},"} ",[230,364,365],{"class":236},"=",[230,367,368],{"class":240}," materials\n",[230,370,372,374,376,378,380,382],{"class":232,"line":371},4,[230,373,339],{"class":236},[230,375,342],{"class":240},[230,377,184],{"class":345},[230,379,362],{"class":240},[230,381,365],{"class":236},[230,383,384],{"class":240}," radiance\n",[230,386,388,390,392,394,396,398],{"class":232,"line":387},5,[230,389,339],{"class":236},[230,391,342],{"class":240},[230,393,214],{"class":345},[230,395,362],{"class":240},[230,397,365],{"class":236},[230,399,400],{"class":240}," compose\n",[230,402,404,406,408,411,413,416,418,421,423,426,428,430],{"class":232,"line":403},6,[230,405,339],{"class":236},[230,407,342],{"class":240},[230,409,410],{"class":345},"local",[230,412,348],{"class":240},[230,414,415],{"class":345},"mix",[230,417,348],{"class":240},[230,419,420],{"class":345},"splat3",[230,422,348],{"class":240},[230,424,425],{"class":345},"vec4",[230,427,362],{"class":240},[230,429,365],{"class":236},[230,431,432],{"class":240}," math\n",[230,434,436],{"class":232,"line":435},7,[230,437,333],{"emptyLinePlaceholder":332},[230,439,441],{"class":232,"line":440},8,[230,442,444],{"class":443},"sAwPA","\u002F\u002F One spec for both halves: the compute gather and the fragment read.\n",[230,446,448,450,453,456],{"class":232,"line":447},9,[230,449,339],{"class":236},[230,451,452],{"class":345}," GATHER",[230,454,455],{"class":236}," =",[230,457,458],{"class":240}," {\n",[230,460,462,465,468,471,474,477,480,483,486],{"class":232,"line":461},10,[230,463,464],{"class":240},"  rays: {burst: ",[230,466,467],{"class":345},"128",[230,469,470],{"class":240},", motion: ",[230,472,473],{"class":345},"64",[230,475,476],{"class":240},", refine: ",[230,478,479],{"class":345},"32",[230,481,482],{"class":240},", refineFrames: ",[230,484,485],{"class":345},"12",[230,487,488],{"class":240},"},\n",[230,490,492,495,497],{"class":232,"line":491},11,[230,493,494],{"class":240},"  steps: ",[230,496,479],{"class":345},[230,498,499],{"class":240},",\n",[230,501,503,506,508],{"class":232,"line":502},12,[230,504,505],{"class":240},"  shadowSteps: ",[230,507,485],{"class":345},[230,509,499],{"class":240},[230,511,513,516,519],{"class":232,"line":512},13,[230,514,515],{"class":240},"  resolution: ",[230,517,518],{"class":345},"512",[230,520,499],{"class":240},[230,522,524,527,530,533,536,539,542,545,548],{"class":232,"line":523},14,[230,525,526],{"class":240},"  lights: {prop: ",[230,528,529],{"class":247},"'lights'",[230,531,532],{"class":240},", position: ",[230,534,535],{"class":247},"'position'",[230,537,538],{"class":240},", color: ",[230,540,541],{"class":247},"'color'",[230,543,544],{"class":240},", intensity: ",[230,546,547],{"class":247},"'intensity'",[230,549,488],{"class":240},[230,551,553,556,559],{"class":232,"line":552},15,[230,554,555],{"class":240},"  reach: ",[230,557,558],{"class":247},"'reach'",[230,560,499],{"class":240},[230,562,564,567,570],{"class":232,"line":563},16,[230,565,566],{"class":240},"  wrap: ",[230,568,569],{"class":247},"'wrap'",[230,571,499],{"class":240},[230,573,575,578,581],{"class":232,"line":574},17,[230,576,577],{"class":240},"  lightRange: ",[230,579,580],{"class":247},"'lightRange'",[230,582,499],{"class":240},[230,584,586,589,592],{"class":232,"line":585},18,[230,587,588],{"class":240},"  shadowSoftness: ",[230,590,591],{"class":247},"'shadowSoftness'",[230,593,499],{"class":240},[230,595,597],{"class":232,"line":596},19,[230,598,599],{"class":240},"}\n",[230,601,603],{"class":232,"line":602},20,[230,604,333],{"emptyLinePlaceholder":332},[230,606,608],{"class":232,"line":607},21,[230,609,610],{"class":443},"\u002F\u002F Colored lights spilling around a dark shape, gathered once and read per pixel.\n",[230,612,614,617,620,623,625,629],{"class":232,"line":613},22,[230,615,616],{"class":236},"export",[230,618,619],{"class":236}," const",[230,621,622],{"class":345}," LitEdge",[230,624,455],{"class":236},[230,626,628],{"class":627},"svObZ"," defineShader",[230,630,631],{"class":240},"({\n",[230,633,635,638,641],{"class":232,"line":634},23,[230,636,637],{"class":240},"  name: ",[230,639,640],{"class":247},"'LitEdge'",[230,642,499],{"class":240},[230,644,646,649,652],{"class":232,"line":645},24,[230,647,648],{"class":240},"  role: ",[230,650,651],{"class":247},"'shapeEffect'",[230,653,499],{"class":240},[230,655,657,660,663],{"class":232,"line":656},25,[230,658,659],{"class":240},"  species: ",[230,661,662],{"class":247},"'custom'",[230,664,499],{"class":240},[230,666,668],{"class":232,"line":667},26,[230,669,670],{"class":240},"  props: {\n",[230,672,674,677,680,683,685],{"class":232,"line":673},27,[230,675,676],{"class":240},"    center: {default: {x: ",[230,678,679],{"class":345},"0.5",[230,681,682],{"class":240},", y: ",[230,684,679],{"class":345},[230,686,687],{"class":240},"}, transform: transformPosition},\n",[230,689,691,694,697],{"class":232,"line":690},28,[230,692,693],{"class":240},"    scale: {default: ",[230,695,696],{"class":345},"1",[230,698,488],{"class":240},[230,700,702,705,708],{"class":232,"line":701},29,[230,703,704],{"class":240},"    rotation: {default: ",[230,706,707],{"class":345},"0",[230,709,488],{"class":240},[230,711,713,716,719],{"class":232,"line":712},30,[230,714,715],{"class":240},"    lights: ",[230,717,718],{"class":627},"listPropConfig",[230,720,631],{"class":240},[230,722,724,727,730],{"class":232,"line":723},31,[230,725,726],{"class":240},"      maxItems: ",[230,728,729],{"class":345},"6",[230,731,499],{"class":240},[230,733,735,738,740],{"class":232,"line":734},32,[230,736,737],{"class":240},"      minItems: ",[230,739,696],{"class":345},[230,741,499],{"class":240},[230,743,745,748,751],{"class":232,"line":744},33,[230,746,747],{"class":240},"      itemLabel: ",[230,749,750],{"class":247},"'Light'",[230,752,499],{"class":240},[230,754,756],{"class":232,"line":755},34,[230,757,758],{"class":240},"      item: {\n",[230,760,762,765,767,770,773,775,777,780,783],{"class":232,"line":761},35,[230,763,764],{"class":240},"        position: {kind: ",[230,766,535],{"class":247},[230,768,769],{"class":240},", default: {x: ",[230,771,772],{"class":345},"0.3",[230,774,682],{"class":240},[230,776,772],{"class":345},[230,778,779],{"class":240},"}, label: ",[230,781,782],{"class":247},"'Position'",[230,784,488],{"class":240},[230,786,788,791,793,796,799,802,805],{"class":232,"line":787},36,[230,789,790],{"class":240},"        color: {kind: ",[230,792,541],{"class":247},[230,794,795],{"class":240},", default: ",[230,797,798],{"class":247},"'#ffb347'",[230,800,801],{"class":240},", label: ",[230,803,804],{"class":247},"'Color'",[230,806,488],{"class":240},[230,808,810,813,816,818,821,823,826,829,831,834,837,840,843],{"class":232,"line":809},37,[230,811,812],{"class":240},"        intensity: {kind: ",[230,814,815],{"class":247},"'number'",[230,817,795],{"class":240},[230,819,820],{"class":345},"3",[230,822,801],{"class":240},[230,824,825],{"class":247},"'Intensity'",[230,827,828],{"class":240},", min: ",[230,830,707],{"class":345},[230,832,833],{"class":240},", max: ",[230,835,836],{"class":345},"8",[230,838,839],{"class":240},", step: ",[230,841,842],{"class":345},"0.01",[230,844,488],{"class":240},[230,846,848],{"class":232,"line":847},38,[230,849,850],{"class":240},"      },\n",[230,852,854],{"class":232,"line":853},39,[230,855,856],{"class":240},"    }, {\n",[230,858,860],{"class":232,"line":859},40,[230,861,862],{"class":240},"      default: [\n",[230,864,866,869,871,873,875,878,880,882,884],{"class":232,"line":865},41,[230,867,868],{"class":240},"        {position: {x: ",[230,870,772],{"class":345},[230,872,682],{"class":240},[230,874,772],{"class":345},[230,876,877],{"class":240},"}, color: ",[230,879,798],{"class":247},[230,881,544],{"class":240},[230,883,820],{"class":345},[230,885,488],{"class":240},[230,887,889,891,894,896,899,901,904,906,909],{"class":232,"line":888},42,[230,890,868],{"class":240},[230,892,893],{"class":345},"0.72",[230,895,682],{"class":240},[230,897,898],{"class":345},"0.7",[230,900,877],{"class":240},[230,902,903],{"class":247},"'#7a5cff'",[230,905,544],{"class":240},[230,907,908],{"class":345},"2",[230,910,488],{"class":240},[230,912,914],{"class":232,"line":913},43,[230,915,916],{"class":240},"      ],\n",[230,918,920,923,926],{"class":232,"line":919},44,[230,921,922],{"class":240},"      description: ",[230,924,925],{"class":247},"'The point lights striking the shape'",[230,927,499],{"class":240},[230,929,931,934,937],{"class":232,"line":930},45,[230,932,933],{"class":240},"      label: ",[230,935,936],{"class":247},"'Lights'",[230,938,499],{"class":240},[230,940,942,945,947],{"class":232,"line":941},46,[230,943,944],{"class":240},"      group: ",[230,946,936],{"class":247},[230,948,499],{"class":240},[230,950,952],{"class":232,"line":951},47,[230,953,954],{"class":240},"    }),\n",[230,956,958,961,964],{"class":232,"line":957},48,[230,959,960],{"class":240},"    lightRange: {default: ",[230,962,963],{"class":345},"1.2",[230,965,488],{"class":240},[230,967,969,972,974],{"class":232,"line":968},49,[230,970,971],{"class":240},"    reach: {default: ",[230,973,820],{"class":345},[230,975,488],{"class":240},[230,977,979,982,984],{"class":232,"line":978},50,[230,980,981],{"class":240},"    wrap: {default: ",[230,983,707],{"class":345},[230,985,488],{"class":240},[230,987,989,992,995],{"class":232,"line":988},51,[230,990,991],{"class":240},"    shadowSoftness: {default: ",[230,993,994],{"class":345},"0.2",[230,996,488],{"class":240},[230,998,1000,1003,1006],{"class":232,"line":999},52,[230,1001,1002],{"class":240},"    bodyColor: {default: ",[230,1004,1005],{"class":247},"'#000000'",[230,1007,1008],{"class":240},", transform: transformColor},\n",[230,1010,1012,1015,1017],{"class":232,"line":1011},53,[230,1013,1014],{"class":240},"    edgeSoftness: {default: ",[230,1016,842],{"class":345},[230,1018,488],{"class":240},[230,1020,1022,1025,1028,1030,1033,1036,1039,1042,1045,1048,1051,1053,1056],{"class":232,"line":1021},54,[230,1023,1024],{"class":240},"    shape: {default: ",[230,1026,1027],{"class":345},"JSON",[230,1029,219],{"class":240},[230,1031,1032],{"class":627},"stringify",[230,1034,1035],{"class":240},"({type: ",[230,1037,1038],{"class":247},"'circleSDF'",[230,1040,1041],{"class":240},", radius: ",[230,1043,1044],{"class":345},"0.35",[230,1046,1047],{"class":240},"}), ui: {type: ",[230,1049,1050],{"class":247},"'shape'",[230,1052,801],{"class":240},[230,1054,1055],{"class":247},"'Shape'",[230,1057,1058],{"class":240},"}},\n",[230,1060,1062,1065,1068,1071,1074],{"class":232,"line":1061},55,[230,1063,1064],{"class":240},"    shapeSdfUrl: {default: ",[230,1066,1067],{"class":247},"''",[230,1069,1070],{"class":240},", compileTime: ",[230,1072,1073],{"class":345},"true",[230,1075,488],{"class":240},[230,1077,1079,1082,1084,1086,1088],{"class":232,"line":1078},56,[230,1080,1081],{"class":240},"    shapeType: {default: ",[230,1083,1067],{"class":247},[230,1085,1070],{"class":240},[230,1087,1073],{"class":345},[230,1089,488],{"class":240},[230,1091,1093],{"class":232,"line":1092},57,[230,1094,1095],{"class":240},"  },\n",[230,1097,1099,1102,1104],{"class":232,"line":1098},58,[230,1100,1101],{"class":236},"  ...",[230,1103,165],{"class":627},[230,1105,631],{"class":240},[230,1107,1109,1112,1115],{"class":232,"line":1108},59,[230,1110,1111],{"class":240},"    stencil: ",[230,1113,1114],{"class":247},"'centre'",[230,1116,499],{"class":240},[230,1118,1120,1123,1126],{"class":232,"line":1119},60,[230,1121,1122],{"class":240},"    centreTap: ",[230,1124,1125],{"class":247},"'fast'",[230,1127,499],{"class":240},[230,1129,1131,1134,1137,1141,1143,1146,1149,1152],{"class":232,"line":1130},61,[230,1132,1133],{"class":627},"    surface",[230,1135,1136],{"class":240},": (",[230,1138,1140],{"class":1139},"s9osk","frame",[230,1142,348],{"class":240},[230,1144,1145],{"class":1139},"params",[230,1147,1148],{"class":240},") ",[230,1150,1151],{"class":236},"=>",[230,1153,458],{"class":240},[230,1155,1157,1160,1163,1165],{"class":232,"line":1156},62,[230,1158,1159],{"class":236},"      const",[230,1161,1162],{"class":345}," u",[230,1164,455],{"class":236},[230,1166,1167],{"class":240}," params.uniforms\n",[230,1169,1171,1173,1176,1178,1181],{"class":232,"line":1170},63,[230,1172,1159],{"class":236},[230,1174,1175],{"class":345}," field",[230,1177,455],{"class":236},[230,1179,1180],{"class":627}," surfaceField",[230,1182,1183],{"class":240},"(frame, params)\n",[230,1185,1187,1189,1192,1194,1197,1200,1203,1206,1209,1212,1215,1218,1220,1222],{"class":232,"line":1186},64,[230,1188,1159],{"class":236},[230,1190,1191],{"class":345}," spill",[230,1193,455],{"class":236},[230,1195,1196],{"class":627}," irradianceField",[230,1198,1199],{"class":240},"(",[230,1201,1202],{"class":345},"GATHER",[230,1204,1205],{"class":240},").",[230,1207,1208],{"class":627},"sample",[230,1210,1211],{"class":240},"(params) ",[230,1213,1214],{"class":236},"??",[230,1216,1217],{"class":627}," splat3",[230,1219,1199],{"class":240},[230,1221,707],{"class":345},[230,1223,1224],{"class":240},")\n",[230,1226,1228,1230,1233,1235,1238,1240,1242,1245,1248],{"class":232,"line":1227},65,[230,1229,1159],{"class":236},[230,1231,1232],{"class":345}," glow",[230,1234,455],{"class":236},[230,1236,1237],{"class":627}," emissiveAlpha",[230,1239,1199],{"class":240},[230,1241,210],{"class":627},[230,1243,1244],{"class":240},"(spill), ",[230,1246,1247],{"class":247},"'glow'",[230,1249,1224],{"class":240},[230,1251,1253,1255,1258,1260,1263,1265,1267,1270,1273],{"class":232,"line":1252},66,[230,1254,1159],{"class":236},[230,1256,1257],{"class":345}," cov",[230,1259,455],{"class":236},[230,1261,1262],{"class":627}," local",[230,1264,1199],{"class":240},[230,1266,218],{"class":627},[230,1268,1269],{"class":240},"(field, u.edgeSoftness), ",[230,1271,1272],{"class":247},"'cov'",[230,1274,1224],{"class":240},[230,1276,1278,1281,1284,1286,1288,1291,1294,1296,1299,1302,1304,1306,1308,1311,1313,1315,1317,1319,1322,1325,1327],{"class":232,"line":1277},67,[230,1279,1280],{"class":236},"      return",[230,1282,1283],{"class":627}," vec4",[230,1285,1199],{"class":240},[230,1287,415],{"class":627},[230,1289,1290],{"class":240},"(glow.",[230,1292,1293],{"class":627},"member",[230,1295,1199],{"class":240},[230,1297,1298],{"class":247},"'rgb'",[230,1300,1301],{"class":240},"), u.bodyColor.",[230,1303,1293],{"class":627},[230,1305,1199],{"class":240},[230,1307,1298],{"class":247},[230,1309,1310],{"class":240},"), cov), ",[230,1312,415],{"class":627},[230,1314,1290],{"class":240},[230,1316,1293],{"class":627},[230,1318,1199],{"class":240},[230,1320,1321],{"class":247},"'a'",[230,1323,1324],{"class":240},"), ",[230,1326,696],{"class":345},[230,1328,1329],{"class":240},", cov))\n",[230,1331,1333],{"class":232,"line":1332},68,[230,1334,1335],{"class":240},"    },\n",[230,1337,1339],{"class":232,"line":1338},69,[230,1340,1341],{"class":240},"  }),\n",[230,1343,1345,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366],{"class":232,"line":1344},70,[230,1346,1347],{"class":627},"  compute",[230,1349,1136],{"class":240},[230,1351,1145],{"class":1139},[230,1353,1148],{"class":240},[230,1355,1151],{"class":236},[230,1357,1196],{"class":627},[230,1359,1199],{"class":240},[230,1361,1202],{"class":345},[230,1363,1205],{"class":240},[230,1365,188],{"class":627},[230,1367,1368],{"class":240},"(params),\n",[230,1370,1372],{"class":232,"line":1371},71,[230,1373,1374],{"class":240},"})\n",[250,1376,1378],{"id":1377},"types","Types",[255,1380,1381,1391],{},[258,1382,1383],{},[261,1384,1385,1388],{},[264,1386,1387],{},"Type",[264,1389,1390],{},"What it is",[271,1392,1393,1406,1417],{},[261,1394,1395,1400],{},[276,1396,1397],{},[8,1398,1399],{},"GatherSpec",[276,1401,1402,1403,1405],{},"What ",[8,1404,206],{}," needs.",[261,1407,1408,1413],{},[276,1409,1410],{},[8,1411,1412],{},"IrradianceFieldSpec",[276,1414,1402,1415,1405],{},[8,1416,184],{},[261,1418,1419,1424],{},[276,1420,1421],{},[8,1422,1423],{},"ShadowSpec",[276,1425,1402,1426,1405],{},[8,1427,199],{},[250,1429,1431],{"id":1430},"words","Words",[1433,1434,1436],"primitive-words",{":words":1435},"[{\"name\":\"irradianceField\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Firradiancefield\",\"summary\":\"The light spilling from a shape's edges, gathered once into a texture and read per pixel.\"},{\"name\":\"shadowVisibility\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Fshadowvisibility\",\"summary\":\"How much of a light reaches a point, 1 when nothing is in the way and 0 when the shape blocks it.\"},{\"name\":\"gatherIrradiance\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fradiance\u002Fgatherirradiance\",\"summary\":\"The light arriving at a pixel from a glowing shape edge, with the shape's body blocking it.\"}]",[1437,1438,1439,1447,1454],"ul",{},[1440,1441,1442,1446],"li",{},[179,1443,1444],{"href":181},[8,1445,184],{}," — The light spilling from a shape's edges, gathered once into a texture and read per pixel.",[1440,1448,1449,1453],{},[179,1450,1451],{"href":196},[8,1452,199],{}," — How much of a light reaches a point, 1 when nothing is in the way and 0 when the shape blocks it.",[1440,1455,1456,1460],{},[179,1457,1458],{"href":203},[8,1459,206],{}," — The light arriving at a pixel from a glowing shape edge, with the shape's body blocking it.",[1462,1463,1464],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":226,"searchDepth":329,"depth":329,"links":1466},[1467,1468,1469,1470],{"id":252,"depth":329,"text":253},{"id":309,"depth":329,"text":310},{"id":1377,"depth":329,"text":1378},{"id":1430,"depth":329,"text":1431},"Words for light a shape gives off or blocks.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fradiance.md","md","light","Noise, light & materials",{},"\u002Fdocs\u002Fprimitives\u002Fradiance",{"title":147,"description":1471},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fradiance.ts","docs\u002Fprimitives\u002F16.radiance\u002Findex","gwtCPztxS5G2Ta_2XbXNNEUndrt-bhhfk3DUyhkhWyA"]