[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fvoxels":145},[4,10,16,20,24,28,32,36,40,44,48,52,56,60,64,69,73,78,82,86,90,94,98,102,106,110,114,117,120,124,127,131,134,138,141],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[15],"js",{"path":17,"title":18,"description":19,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":21,"title":22,"description":23,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":25,"title":26,"description":27,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":29,"title":30,"description":31,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":33,"title":34,"description":35,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":37,"title":38,"description":39,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":41,"title":42,"description":43,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":45,"title":46,"description":47,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":49,"title":50,"description":51,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":53,"title":54,"description":55,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":57,"title":58,"description":59,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":61,"title":62,"description":63,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":65,"title":66,"description":67,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":70,"title":71,"description":72,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install shaders and presets into your codebase as component files, and keep them in sync with the design editor.",{"path":74,"title":75,"description":76,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":79,"title":80,"description":81,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":83,"title":84,"description":85,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":87,"title":88,"description":89,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":91,"title":92,"description":93,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":95,"title":96,"description":97,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":99,"title":100,"description":101,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":103,"title":104,"description":105,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":107,"title":108,"description":109,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":111,"title":112,"description":113,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":115,"title":12,"description":116,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":118,"title":12,"description":119,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":121,"title":122,"description":123,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js and SSR","Render Shaders in Next.js and other React SSR apps by keeping each shader on the client.",{"path":125,"title":12,"description":126,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":128,"title":129,"description":130,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":132,"title":12,"description":133,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":135,"title":136,"description":137,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit and SSR","Render Shaders in SvelteKit and other Svelte SSR apps, where each shader already waits for the browser.",{"path":139,"title":12,"description":140,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":142,"title":143,"description":144,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":146,"title":147,"body":148,"categoryId":154,"categorySlug":154,"categoryTitle":9,"curated":312,"description":1468,"editUrl":1469,"extension":1470,"group":1471,"groupTitle":1472,"kind":9,"meta":1473,"navigation":312,"path":1474,"seo":1475,"sourceUrl":1476,"stem":1477,"wordCount":211,"__hash__":1478},"primitives\u002Fdocs\u002Fprimitives\u002F17.voxels\u002Findex.md","Voxels",{"type":149,"value":150,"toc":1462},"minimark",[151,155,176,198,227,232,287,291,1357,1361,1437,1441,1458],[152,153,147],"h1",{"id":154},"voxels",[156,157,158,159,166,167,170,171,175],"p",{},"One word, ",[160,161,163],"a",{"href":162},"\u002Fdocs\u002Fprimitives\u002Fvoxels\u002Fvoxelsurface",[8,164,165],{},"voxelSurface",", rebuilds any shape out of blocks. A flat shape becomes chunky\npixel art, an SVG a slab of bricks, a 3D shape a lit voxel model. It asks you for one thing:\nthe color of a single block. For that it hands your ",[8,168,169],{},"surface"," a ",[172,173,174],"strong",{},"voxel frame",", everything\na material needs already worked out: the block's normal, how open its surroundings are, how\nmuch shadow other blocks cast on it, its cell position, a random number that stays fixed to\nthat block, how high and how deep it sits, and how close the pixel is to the face's edge.",[156,177,178,179,182,183,186,187,189,190,193,194,197],{},"Spread ",[8,180,181],{},"...voxelSurface({...})"," into a shape-effect definition next to the standard shape\nprops. The geometry knobs (block size, style, gaps, bevel, camera and light direction) are\nprop refs made with ",[8,184,185],{},"p('name')",", and changing them rebuilds the model. Your ",[8,188,169],{}," lights\nthe block with the ",[8,191,192],{},"materials"," words and returns ",[8,195,196],{},"vec4(rgb, vox.coverage)",". The engine\nresolves which block each pixel sees, anti-aliases the edges and clips to the silhouette.",[199,200,205],"pre",{"className":201,"code":202,"language":203,"meta":204,"style":204},"language-ts shiki shiki-themes github-dark","import {voxels} from 'shaders\u002Fstd'\n","ts","",[8,206,207],{"__ignoreMap":204},[208,209,212,216,220,223],"span",{"class":210,"line":211},"line",1,[208,213,215],{"class":214},"snl16","import",[208,217,219],{"class":218},"s95oV"," {voxels} ",[208,221,222],{"class":214},"from",[208,224,226],{"class":225},"sU2Wk"," 'shaders\u002Fstd'\n",[228,229,231],"h2",{"id":230},"reach-for-it-when","Reach for it when",[233,234,235,248],"table",{},[236,237,238],"thead",{},[239,240,241,245],"tr",{},[242,243,244],"th",{},"When you need",[242,246,247],{},"Use",[249,250,251,263,275],"tbody",{},[239,252,253,257],{},[254,255,256],"td",{},"a shape as pixel art, bricks or a voxel model",[254,258,259],{},[160,260,261],{"href":162},[8,262,165],{},[239,264,265,268],{},[254,266,267],{},"per-block color variation",[254,269,270,271],{},"the frame's per-block random number inside ",[160,272,273],{"href":162},[8,274,165],{},[239,276,277,280],{},[254,278,279],{},"a gradient by height or depth across the model",[254,281,282,283],{},"the frame's height and depth inside ",[160,284,285],{"href":162},[8,286,165],{},[228,288,290],{"id":289},"example","Example",[199,292,294],{"className":201,"code":293,"language":203,"meta":204,"style":204},"import {defineShader, p, materials, voxels, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {lambert} = materials\nconst {voxelSurface} = voxels\nconst {add, cos, local, mix, mul, neg, normalize, sin, sub, vec3, vec4} = math\n\nconst DEG = Math.PI \u002F 180\n\n\u002F\u002F Any shape as lit blocks: a key light you can orbit, shadows between the blocks, a sky fill in the creases.\nexport const Blocks = defineShader({\n  name: 'Blocks',\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    voxelSize: {default: 0.035},\n    voxelShape: {default: 'cube', compileTime: true, ui: {type: 'select', options: [{label: 'Cube', value: 'cube'}, {label: 'Rounded', value: 'rounded'}, {label: 'Sphere', value: 'sphere'}]}},\n    gridSpace: {default: 'shape', compileTime: true, ui: {type: 'select', options: [{label: 'Model', value: 'shape'}, {label: 'Screen', value: 'view'}]}},\n    voxelScale: {default: 1},\n    fill: {default: 0},\n    bevel: {default: 0},\n    depth: {default: 0.12},\n    lightAngle: {default: 225},\n    lightElevation: {default: 45},\n    shadows: {default: 0.7},\n    shadowSoftness: {default: 0.3},\n    color: {default: '#e8a24a', transform: transformColor},\n    sky: {default: '#6f86c9', transform: transformColor},\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  ...voxelSurface({\n    style: p('voxelShape'),\n    gridSpace: p('gridSpace'),\n    voxelSize: p('voxelSize'),\n    fill: p('fill'),\n    voxelScale: p('voxelScale'),\n    bevel: p('bevel'),\n    shadowSoftness: p('shadowSoftness'),\n    lightAngle: p('lightAngle'),\n    lightElevation: p('lightElevation'),\n    depth: p('depth'),\n    surface: (vox, _frame, params) => {\n      const u = params.uniforms\n      \u002F\u002F The key light as a vector, from its angle around the canvas and its elevation.\n      const az = mul(u.lightAngle, DEG)\n      const el = mul(u.lightElevation, DEG)\n      const L = local(normalize(vec3(mul(cos(az), cos(el)), mul(sin(az), cos(el)), neg(sin(el)))), 'L')\n      \u002F\u002F Key light, cut by the shadow other blocks cast; sky fill, darkened in the creases.\n      const lit = sub(1, mul(vox.shadow, u.shadows))\n      const key = mul(lambert(vox.normal, L, {wrap: 0.12}), lit)\n      const fill = mul(u.sky.member('rgb'), mul(0.5, vox.ao))\n      \u002F\u002F A little per-block variation so the bricks read as individual.\n      const tone = mix(0.85, 1.15, vox.cellHash)\n      const rgb = mul(add(mul(u.color.member('rgb'), key), fill), tone)\n      return vec4(rgb, vox.coverage)\n    },\n  }),\n})\n",[8,295,296,307,314,336,352,420,425,448,453,460,481,493,504,515,521,538,550,561,572,628,666,676,686,696,707,718,729,740,751,763,774,815,830,844,850,860,877,892,907,922,937,952,967,982,997,1012,1044,1058,1064,1086,1105,1168,1174,1198,1228,1263,1269,1295,1327,1339,1345,1351],{"__ignoreMap":204},[208,297,298,300,303,305],{"class":210,"line":211},[208,299,215],{"class":214},[208,301,302],{"class":218}," {defineShader, p, materials, voxels, math, transformColor, transformPosition} ",[208,304,222],{"class":214},[208,306,226],{"class":225},[208,308,310],{"class":210,"line":309},2,[208,311,313],{"emptyLinePlaceholder":312},true,"\n",[208,315,317,320,323,327,330,333],{"class":210,"line":316},3,[208,318,319],{"class":214},"const",[208,321,322],{"class":218}," {",[208,324,326],{"class":325},"sDLfK","lambert",[208,328,329],{"class":218},"} ",[208,331,332],{"class":214},"=",[208,334,335],{"class":218}," materials\n",[208,337,339,341,343,345,347,349],{"class":210,"line":338},4,[208,340,319],{"class":214},[208,342,322],{"class":218},[208,344,165],{"class":325},[208,346,329],{"class":218},[208,348,332],{"class":214},[208,350,351],{"class":218}," voxels\n",[208,353,355,357,359,362,365,368,370,373,375,378,380,383,385,388,390,393,395,398,400,403,405,408,410,413,415,417],{"class":210,"line":354},5,[208,356,319],{"class":214},[208,358,322],{"class":218},[208,360,361],{"class":325},"add",[208,363,364],{"class":218},", ",[208,366,367],{"class":325},"cos",[208,369,364],{"class":218},[208,371,372],{"class":325},"local",[208,374,364],{"class":218},[208,376,377],{"class":325},"mix",[208,379,364],{"class":218},[208,381,382],{"class":325},"mul",[208,384,364],{"class":218},[208,386,387],{"class":325},"neg",[208,389,364],{"class":218},[208,391,392],{"class":325},"normalize",[208,394,364],{"class":218},[208,396,397],{"class":325},"sin",[208,399,364],{"class":218},[208,401,402],{"class":325},"sub",[208,404,364],{"class":218},[208,406,407],{"class":325},"vec3",[208,409,364],{"class":218},[208,411,412],{"class":325},"vec4",[208,414,329],{"class":218},[208,416,332],{"class":214},[208,418,419],{"class":218}," math\n",[208,421,423],{"class":210,"line":422},6,[208,424,313],{"emptyLinePlaceholder":312},[208,426,428,430,433,436,439,442,445],{"class":210,"line":427},7,[208,429,319],{"class":214},[208,431,432],{"class":325}," DEG",[208,434,435],{"class":214}," =",[208,437,438],{"class":218}," Math.",[208,440,441],{"class":325},"PI",[208,443,444],{"class":214}," \u002F",[208,446,447],{"class":325}," 180\n",[208,449,451],{"class":210,"line":450},8,[208,452,313],{"emptyLinePlaceholder":312},[208,454,456],{"class":210,"line":455},9,[208,457,459],{"class":458},"sAwPA","\u002F\u002F Any shape as lit blocks: a key light you can orbit, shadows between the blocks, a sky fill in the creases.\n",[208,461,463,466,469,472,474,478],{"class":210,"line":462},10,[208,464,465],{"class":214},"export",[208,467,468],{"class":214}," const",[208,470,471],{"class":325}," Blocks",[208,473,435],{"class":214},[208,475,477],{"class":476},"svObZ"," defineShader",[208,479,480],{"class":218},"({\n",[208,482,484,487,490],{"class":210,"line":483},11,[208,485,486],{"class":218},"  name: ",[208,488,489],{"class":225},"'Blocks'",[208,491,492],{"class":218},",\n",[208,494,496,499,502],{"class":210,"line":495},12,[208,497,498],{"class":218},"  role: ",[208,500,501],{"class":225},"'shapeEffect'",[208,503,492],{"class":218},[208,505,507,510,513],{"class":210,"line":506},13,[208,508,509],{"class":218},"  species: ",[208,511,512],{"class":225},"'custom'",[208,514,492],{"class":218},[208,516,518],{"class":210,"line":517},14,[208,519,520],{"class":218},"  props: {\n",[208,522,524,527,530,533,535],{"class":210,"line":523},15,[208,525,526],{"class":218},"    center: {default: {x: ",[208,528,529],{"class":325},"0.5",[208,531,532],{"class":218},", y: ",[208,534,529],{"class":325},[208,536,537],{"class":218},"}, transform: transformPosition},\n",[208,539,541,544,547],{"class":210,"line":540},16,[208,542,543],{"class":218},"    scale: {default: ",[208,545,546],{"class":325},"1",[208,548,549],{"class":218},"},\n",[208,551,553,556,559],{"class":210,"line":552},17,[208,554,555],{"class":218},"    rotation: {default: ",[208,557,558],{"class":325},"0",[208,560,549],{"class":218},[208,562,564,567,570],{"class":210,"line":563},18,[208,565,566],{"class":218},"    voxelSize: {default: ",[208,568,569],{"class":325},"0.035",[208,571,549],{"class":218},[208,573,575,578,581,584,587,590,593,596,599,602,604,607,610,612,615,617,620,622,625],{"class":210,"line":574},19,[208,576,577],{"class":218},"    voxelShape: {default: ",[208,579,580],{"class":225},"'cube'",[208,582,583],{"class":218},", compileTime: ",[208,585,586],{"class":325},"true",[208,588,589],{"class":218},", ui: {type: ",[208,591,592],{"class":225},"'select'",[208,594,595],{"class":218},", options: [{label: ",[208,597,598],{"class":225},"'Cube'",[208,600,601],{"class":218},", value: ",[208,603,580],{"class":225},[208,605,606],{"class":218},"}, {label: ",[208,608,609],{"class":225},"'Rounded'",[208,611,601],{"class":218},[208,613,614],{"class":225},"'rounded'",[208,616,606],{"class":218},[208,618,619],{"class":225},"'Sphere'",[208,621,601],{"class":218},[208,623,624],{"class":225},"'sphere'",[208,626,627],{"class":218},"}]}},\n",[208,629,631,634,637,639,641,643,645,647,650,652,654,656,659,661,664],{"class":210,"line":630},20,[208,632,633],{"class":218},"    gridSpace: {default: ",[208,635,636],{"class":225},"'shape'",[208,638,583],{"class":218},[208,640,586],{"class":325},[208,642,589],{"class":218},[208,644,592],{"class":225},[208,646,595],{"class":218},[208,648,649],{"class":225},"'Model'",[208,651,601],{"class":218},[208,653,636],{"class":225},[208,655,606],{"class":218},[208,657,658],{"class":225},"'Screen'",[208,660,601],{"class":218},[208,662,663],{"class":225},"'view'",[208,665,627],{"class":218},[208,667,669,672,674],{"class":210,"line":668},21,[208,670,671],{"class":218},"    voxelScale: {default: ",[208,673,546],{"class":325},[208,675,549],{"class":218},[208,677,679,682,684],{"class":210,"line":678},22,[208,680,681],{"class":218},"    fill: {default: ",[208,683,558],{"class":325},[208,685,549],{"class":218},[208,687,689,692,694],{"class":210,"line":688},23,[208,690,691],{"class":218},"    bevel: {default: ",[208,693,558],{"class":325},[208,695,549],{"class":218},[208,697,699,702,705],{"class":210,"line":698},24,[208,700,701],{"class":218},"    depth: {default: ",[208,703,704],{"class":325},"0.12",[208,706,549],{"class":218},[208,708,710,713,716],{"class":210,"line":709},25,[208,711,712],{"class":218},"    lightAngle: {default: ",[208,714,715],{"class":325},"225",[208,717,549],{"class":218},[208,719,721,724,727],{"class":210,"line":720},26,[208,722,723],{"class":218},"    lightElevation: {default: ",[208,725,726],{"class":325},"45",[208,728,549],{"class":218},[208,730,732,735,738],{"class":210,"line":731},27,[208,733,734],{"class":218},"    shadows: {default: ",[208,736,737],{"class":325},"0.7",[208,739,549],{"class":218},[208,741,743,746,749],{"class":210,"line":742},28,[208,744,745],{"class":218},"    shadowSoftness: {default: ",[208,747,748],{"class":325},"0.3",[208,750,549],{"class":218},[208,752,754,757,760],{"class":210,"line":753},29,[208,755,756],{"class":218},"    color: {default: ",[208,758,759],{"class":225},"'#e8a24a'",[208,761,762],{"class":218},", transform: transformColor},\n",[208,764,766,769,772],{"class":210,"line":765},30,[208,767,768],{"class":218},"    sky: {default: ",[208,770,771],{"class":225},"'#6f86c9'",[208,773,762],{"class":218},[208,775,777,780,783,786,789,792,795,798,801,804,806,809,812],{"class":210,"line":776},31,[208,778,779],{"class":218},"    shape: {default: ",[208,781,782],{"class":325},"JSON",[208,784,785],{"class":218},".",[208,787,788],{"class":476},"stringify",[208,790,791],{"class":218},"({type: ",[208,793,794],{"class":225},"'sphere3D'",[208,796,797],{"class":218},", radius: ",[208,799,800],{"class":325},"0.35",[208,802,803],{"class":218},"}), ui: {type: ",[208,805,636],{"class":225},[208,807,808],{"class":218},", label: ",[208,810,811],{"class":225},"'Shape'",[208,813,814],{"class":218},"}},\n",[208,816,818,821,824,826,828],{"class":210,"line":817},32,[208,819,820],{"class":218},"    shapeSdfUrl: {default: ",[208,822,823],{"class":225},"''",[208,825,583],{"class":218},[208,827,586],{"class":325},[208,829,549],{"class":218},[208,831,833,836,838,840,842],{"class":210,"line":832},33,[208,834,835],{"class":218},"    shapeType: {default: ",[208,837,823],{"class":225},[208,839,583],{"class":218},[208,841,586],{"class":325},[208,843,549],{"class":218},[208,845,847],{"class":210,"line":846},34,[208,848,849],{"class":218},"  },\n",[208,851,853,856,858],{"class":210,"line":852},35,[208,854,855],{"class":214},"  ...",[208,857,165],{"class":476},[208,859,480],{"class":218},[208,861,863,866,868,871,874],{"class":210,"line":862},36,[208,864,865],{"class":218},"    style: ",[208,867,156],{"class":476},[208,869,870],{"class":218},"(",[208,872,873],{"class":225},"'voxelShape'",[208,875,876],{"class":218},"),\n",[208,878,880,883,885,887,890],{"class":210,"line":879},37,[208,881,882],{"class":218},"    gridSpace: ",[208,884,156],{"class":476},[208,886,870],{"class":218},[208,888,889],{"class":225},"'gridSpace'",[208,891,876],{"class":218},[208,893,895,898,900,902,905],{"class":210,"line":894},38,[208,896,897],{"class":218},"    voxelSize: ",[208,899,156],{"class":476},[208,901,870],{"class":218},[208,903,904],{"class":225},"'voxelSize'",[208,906,876],{"class":218},[208,908,910,913,915,917,920],{"class":210,"line":909},39,[208,911,912],{"class":218},"    fill: ",[208,914,156],{"class":476},[208,916,870],{"class":218},[208,918,919],{"class":225},"'fill'",[208,921,876],{"class":218},[208,923,925,928,930,932,935],{"class":210,"line":924},40,[208,926,927],{"class":218},"    voxelScale: ",[208,929,156],{"class":476},[208,931,870],{"class":218},[208,933,934],{"class":225},"'voxelScale'",[208,936,876],{"class":218},[208,938,940,943,945,947,950],{"class":210,"line":939},41,[208,941,942],{"class":218},"    bevel: ",[208,944,156],{"class":476},[208,946,870],{"class":218},[208,948,949],{"class":225},"'bevel'",[208,951,876],{"class":218},[208,953,955,958,960,962,965],{"class":210,"line":954},42,[208,956,957],{"class":218},"    shadowSoftness: ",[208,959,156],{"class":476},[208,961,870],{"class":218},[208,963,964],{"class":225},"'shadowSoftness'",[208,966,876],{"class":218},[208,968,970,973,975,977,980],{"class":210,"line":969},43,[208,971,972],{"class":218},"    lightAngle: ",[208,974,156],{"class":476},[208,976,870],{"class":218},[208,978,979],{"class":225},"'lightAngle'",[208,981,876],{"class":218},[208,983,985,988,990,992,995],{"class":210,"line":984},44,[208,986,987],{"class":218},"    lightElevation: ",[208,989,156],{"class":476},[208,991,870],{"class":218},[208,993,994],{"class":225},"'lightElevation'",[208,996,876],{"class":218},[208,998,1000,1003,1005,1007,1010],{"class":210,"line":999},45,[208,1001,1002],{"class":218},"    depth: ",[208,1004,156],{"class":476},[208,1006,870],{"class":218},[208,1008,1009],{"class":225},"'depth'",[208,1011,876],{"class":218},[208,1013,1015,1018,1021,1025,1027,1030,1032,1035,1038,1041],{"class":210,"line":1014},46,[208,1016,1017],{"class":476},"    surface",[208,1019,1020],{"class":218},": (",[208,1022,1024],{"class":1023},"s9osk","vox",[208,1026,364],{"class":218},[208,1028,1029],{"class":1023},"_frame",[208,1031,364],{"class":218},[208,1033,1034],{"class":1023},"params",[208,1036,1037],{"class":218},") ",[208,1039,1040],{"class":214},"=>",[208,1042,1043],{"class":218}," {\n",[208,1045,1047,1050,1053,1055],{"class":210,"line":1046},47,[208,1048,1049],{"class":214},"      const",[208,1051,1052],{"class":325}," u",[208,1054,435],{"class":214},[208,1056,1057],{"class":218}," params.uniforms\n",[208,1059,1061],{"class":210,"line":1060},48,[208,1062,1063],{"class":458},"      \u002F\u002F The key light as a vector, from its angle around the canvas and its elevation.\n",[208,1065,1067,1069,1072,1074,1077,1080,1083],{"class":210,"line":1066},49,[208,1068,1049],{"class":214},[208,1070,1071],{"class":325}," az",[208,1073,435],{"class":214},[208,1075,1076],{"class":476}," mul",[208,1078,1079],{"class":218},"(u.lightAngle, ",[208,1081,1082],{"class":325},"DEG",[208,1084,1085],{"class":218},")\n",[208,1087,1089,1091,1094,1096,1098,1101,1103],{"class":210,"line":1088},50,[208,1090,1049],{"class":214},[208,1092,1093],{"class":325}," el",[208,1095,435],{"class":214},[208,1097,1076],{"class":476},[208,1099,1100],{"class":218},"(u.lightElevation, ",[208,1102,1082],{"class":325},[208,1104,1085],{"class":218},[208,1106,1108,1110,1113,1115,1118,1120,1122,1124,1126,1128,1130,1132,1134,1137,1139,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1163,1166],{"class":210,"line":1107},51,[208,1109,1049],{"class":214},[208,1111,1112],{"class":325}," L",[208,1114,435],{"class":214},[208,1116,1117],{"class":476}," local",[208,1119,870],{"class":218},[208,1121,392],{"class":476},[208,1123,870],{"class":218},[208,1125,407],{"class":476},[208,1127,870],{"class":218},[208,1129,382],{"class":476},[208,1131,870],{"class":218},[208,1133,367],{"class":476},[208,1135,1136],{"class":218},"(az), ",[208,1138,367],{"class":476},[208,1140,1141],{"class":218},"(el)), ",[208,1143,382],{"class":476},[208,1145,870],{"class":218},[208,1147,397],{"class":476},[208,1149,1136],{"class":218},[208,1151,367],{"class":476},[208,1153,1141],{"class":218},[208,1155,387],{"class":476},[208,1157,870],{"class":218},[208,1159,397],{"class":476},[208,1161,1162],{"class":218},"(el)))), ",[208,1164,1165],{"class":225},"'L'",[208,1167,1085],{"class":218},[208,1169,1171],{"class":210,"line":1170},52,[208,1172,1173],{"class":458},"      \u002F\u002F Key light, cut by the shadow other blocks cast; sky fill, darkened in the creases.\n",[208,1175,1177,1179,1182,1184,1187,1189,1191,1193,1195],{"class":210,"line":1176},53,[208,1178,1049],{"class":214},[208,1180,1181],{"class":325}," lit",[208,1183,435],{"class":214},[208,1185,1186],{"class":476}," sub",[208,1188,870],{"class":218},[208,1190,546],{"class":325},[208,1192,364],{"class":218},[208,1194,382],{"class":476},[208,1196,1197],{"class":218},"(vox.shadow, u.shadows))\n",[208,1199,1201,1203,1206,1208,1210,1212,1214,1217,1220,1223,1225],{"class":210,"line":1200},54,[208,1202,1049],{"class":214},[208,1204,1205],{"class":325}," key",[208,1207,435],{"class":214},[208,1209,1076],{"class":476},[208,1211,870],{"class":218},[208,1213,326],{"class":476},[208,1215,1216],{"class":218},"(vox.normal, ",[208,1218,1219],{"class":325},"L",[208,1221,1222],{"class":218},", {wrap: ",[208,1224,704],{"class":325},[208,1226,1227],{"class":218},"}), lit)\n",[208,1229,1231,1233,1236,1238,1240,1243,1246,1248,1251,1254,1256,1258,1260],{"class":210,"line":1230},55,[208,1232,1049],{"class":214},[208,1234,1235],{"class":325}," fill",[208,1237,435],{"class":214},[208,1239,1076],{"class":476},[208,1241,1242],{"class":218},"(u.sky.",[208,1244,1245],{"class":476},"member",[208,1247,870],{"class":218},[208,1249,1250],{"class":225},"'rgb'",[208,1252,1253],{"class":218},"), ",[208,1255,382],{"class":476},[208,1257,870],{"class":218},[208,1259,529],{"class":325},[208,1261,1262],{"class":218},", vox.ao))\n",[208,1264,1266],{"class":210,"line":1265},56,[208,1267,1268],{"class":458},"      \u002F\u002F A little per-block variation so the bricks read as individual.\n",[208,1270,1272,1274,1277,1279,1282,1284,1287,1289,1292],{"class":210,"line":1271},57,[208,1273,1049],{"class":214},[208,1275,1276],{"class":325}," tone",[208,1278,435],{"class":214},[208,1280,1281],{"class":476}," mix",[208,1283,870],{"class":218},[208,1285,1286],{"class":325},"0.85",[208,1288,364],{"class":218},[208,1290,1291],{"class":325},"1.15",[208,1293,1294],{"class":218},", vox.cellHash)\n",[208,1296,1298,1300,1303,1305,1307,1309,1311,1313,1315,1318,1320,1322,1324],{"class":210,"line":1297},58,[208,1299,1049],{"class":214},[208,1301,1302],{"class":325}," rgb",[208,1304,435],{"class":214},[208,1306,1076],{"class":476},[208,1308,870],{"class":218},[208,1310,361],{"class":476},[208,1312,870],{"class":218},[208,1314,382],{"class":476},[208,1316,1317],{"class":218},"(u.color.",[208,1319,1245],{"class":476},[208,1321,870],{"class":218},[208,1323,1250],{"class":225},[208,1325,1326],{"class":218},"), key), fill), tone)\n",[208,1328,1330,1333,1336],{"class":210,"line":1329},59,[208,1331,1332],{"class":214},"      return",[208,1334,1335],{"class":476}," vec4",[208,1337,1338],{"class":218},"(rgb, vox.coverage)\n",[208,1340,1342],{"class":210,"line":1341},60,[208,1343,1344],{"class":218},"    },\n",[208,1346,1348],{"class":210,"line":1347},61,[208,1349,1350],{"class":218},"  }),\n",[208,1352,1354],{"class":210,"line":1353},62,[208,1355,1356],{"class":218},"})\n",[228,1358,1360],{"id":1359},"types","Types",[233,1362,1363,1373],{},[236,1364,1365],{},[239,1366,1367,1370],{},[242,1368,1369],{},"Type",[242,1371,1372],{},"What it is",[249,1374,1375,1390,1406,1424],{},[239,1376,1377,1382],{},[254,1378,1379],{},[8,1380,1381],{},"VoxelFrame",[254,1383,1384,1385,1387,1388,785],{},"One block, as ",[8,1386,165],{}," hands it to your ",[8,1389,169],{},[239,1391,1392,1397],{},[254,1393,1394],{},[8,1395,1396],{},"VoxelGridSpace",[254,1398,1399,1400,1402,1403,1405],{},"Where the grid sits: ",[8,1401,636],{}," turns with the shape like a built model, ",[8,1404,663],{}," stays fixed to the canvas.",[239,1407,1408,1413],{},[254,1409,1410],{},[8,1411,1412],{},"VoxelStyle",[254,1414,1415,1416,364,1418,1420,1421,1423],{},"What each block is: ",[8,1417,580],{},[8,1419,624],{}," or ",[8,1422,614],{}," (a cube with rounded corners).",[239,1425,1426,1431],{},[254,1427,1428],{},[8,1429,1430],{},"VoxelSurfaceSpec",[254,1432,1433,1434,1436],{},"What ",[8,1435,165],{}," needs.",[228,1438,1440],{"id":1439},"words","Words",[1442,1443,1445],"primitive-words",{":words":1444},"[{\"name\":\"voxelSurface\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fvoxels\u002Fvoxelsurface\",\"summary\":\"Rebuild the shape from blocks and shade each block with your `surface`.\"}]",[1446,1447,1448],"ul",{},[1449,1450,1451,1455,1456,785],"li",{},[160,1452,1453],{"href":162},[8,1454,165],{}," — Rebuild the shape from blocks and shade each block with your ",[8,1457,169],{},[1459,1460,1461],"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":204,"searchDepth":309,"depth":309,"links":1463},[1464,1465,1466,1467],{"id":230,"depth":309,"text":231},{"id":289,"depth":309,"text":290},{"id":1359,"depth":309,"text":1360},{"id":1439,"depth":309,"text":1440},"One word, voxelSurface, rebuilds any shape out of blocks.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fvoxels.md","md","light","Noise, light & materials",{},"\u002Fdocs\u002Fprimitives\u002Fvoxels",{"title":147,"description":1468},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fvoxels.ts","docs\u002Fprimitives\u002F17.voxels\u002Findex","y9UI66D0k6ld82S2cXbNC-KmDibzgrSOJA6iPaoVkQ8"]