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