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