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