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