Deploying to gh-pages from @ ReactUnity/core@479259d 🚀

Author: gkurt

reference/css/backdrop-filter/index.html

@@ -64,5 +64,5 @@ <h2 id="notes" class="mdx-heading text-3xl leading-10 text-primary dark:text-pri
 <li class="leading-relaxed mb-1"><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">normal</code> costs nothing, and neither does a single blended image over a colour: its backdrop is a value the shader is simply handed.</li>
 <li class="leading-relaxed mb-1">Stacking two or more blended image layers is what costs something. The upper layers have to read back what the ones below actually painted, so the element is rendered to its own target first — the same capture <a href="/reference/css/filter" class="inline text-link dark:text-link-dark border-b border-link/0 hover:border-link/100 duration-100 ease-in transition leading-normal"><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">filter</code></a> and <code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">mix-blend-mode</code> use.</li>
 <li class="leading-relaxed mb-1">Stacking them also contains a descendant’s <a href="/reference/css/mix-blend-mode" class="inline text-link dark:text-link-dark border-b border-link/0 hover:border-link/100 duration-100 ease-in transition leading-normal"><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">mix-blend-mode</code></a>, because the capture is the same one <a href="/reference/css/isolation" class="inline text-link dark:text-link-dark border-b border-link/0 hover:border-link/100 duration-100 ease-in transition leading-normal"><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">isolation: isolate</code></a> creates. CSS does not make a blending group for <code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">background-blend-mode</code>, so that is a divergence — one a single blended image does not have.</li>
-<li class="leading-relaxed mb-1">That read is a pipeline feature. Under the Universal Render Pipeline it comes from the camera’s opaque texture, which does not contain transparent UI, so stacked blending needs the built-in pipeline. A single blended image over a colour works under both.</li>
+<li class="leading-relaxed mb-1">The built-in pipeline does that read with a <code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">GrabPass</code>, which inside the capture already holds this element’s background and nothing else. A scriptable pipeline has none, so the layers below are rendered into a surface of their own and bound for the layer above to sample — one extra render per stacked blending layer, on top of the capture itself. A single blended image over a colour costs neither.</li>
 </ul></div><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12"><a href="/reference/css/backdrop-filter" class="flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="duration-100 ease-in transition rotate-90 text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark" style="min-width:20px;min-height:20px"><g fill="none" fill-rule="evenodd" transform="translate(-446 -398)"><path fill="currentColor" fill-rule="nonzero" d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" transform="translate(356.5 164.5)"></path><polygon points="446 418 466 418 466 398 446 398"></polygon></g></svg><span><span class="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark">Previous</span><span class="block text-lg group-hover:underline">Backdrop Filter</span></span></a><a href="/reference/css/background-color" class="flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80 flex-row-reverse justify-self-end text-right"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="duration-100 ease-in transition -rotate-90 text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark" style="min-width:20px;min-height:20px"><g fill="none" fill-rule="evenodd" transform="translate(-446 -398)"><path fill="currentColor" fill-rule="nonzero" d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" transform="translate(356.5 164.5)"></path><polygon points="446 418 466 418 466 398 446 398"></polygon></g></svg><span><span class="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark">Next</span><span class="block text-lg group-hover:underline">Background Color</span></span></a></div></div></div></article><div class="self-stretch w-full"><footer class="text-secondary dark:text-secondary-dark py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14"><div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-3 gap-x-12 gap-y-8 max-w-7xl mx-auto"><div class="flex flex-col"><div><a href="/" class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10">Community</a></div><div><a href="https://github.com/ReactUnity" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" target="_blank" rel="noopener">GitHub</a></div><div><a href="https://discord.gg/UY2EFW5ZKG" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" target="_blank" rel="noopener">Discord</a></div><div><a href="/acknowledgements" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Acknowledgements</a></div><div><a href="https://github.com/ReactUnity/core/discussions/82" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" target="_blank" rel="noopener">Leave Feedback</a></div></div><div class="flex flex-col"><div><a href="/learn" class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10">Learn ReactUnity</a></div><div><a href="/learn/" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Quick Start</a></div></div><div class="flex flex-col"><div><a href="/reference" class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10">API Reference</a></div><div><a href="/reference" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">ReactUnity APIs</a></div><div><a href="/reference/components" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Components</a></div><div><a href="/reference/css" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">CSS Reference</a></div><div><a href="/reference/material" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Material Design</a></div></div></div></footer></div></main><div class="hidden lg:max-w-xs 2xl:block"><astro-island uid="40dLK" prefix="r6" component-url="/_astro/Toc.PdHbRo7Z.js" component-export="Toc" renderer-url="/_astro/client.RPOveYPR.js" props="{&quot;headings&quot;:[1,[[0,{&quot;url&quot;:[0,&quot;#&quot;],&quot;text&quot;:[0,&quot;Overview&quot;],&quot;depth&quot;:[0,2]}],[0,{&quot;url&quot;:[0,&quot;#values&quot;],&quot;text&quot;:[0,&quot;Values &quot;],&quot;depth&quot;:[0,2]}],[0,{&quot;url&quot;:[0,&quot;#notes&quot;],&quot;text&quot;:[0,&quot;Notes &quot;],&quot;depth&quot;:[0,2]}]]]}" ssr client="load" opts="{&quot;name&quot;:&quot;Toc&quot;,&quot;value&quot;:true}" await-children><nav role="navigation" class="pt-[22px] sticky top-0 right-0"><h2 class="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">On this page</h2><div class="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]"><ul class="space-y-2 pb-16"><li class="text-sm px-2 rounded-l-lg bg-highlight dark:bg-highlight-dark"><a class="text-link dark:text-link-dark font-bold block hover:text-link dark:hover:text-link-dark leading-normal py-2" href="#">Overview</a></li><li class="text-sm px-2 rounded-l-lg"><a class="text-secondary dark:text-secondary-dark block hover:text-link dark:hover:text-link-dark leading-normal py-2" href="#values">Values </a></li><li class="text-sm px-2 rounded-l-lg"><a class="text-secondary dark:text-secondary-dark block hover:text-link dark:hover:text-link-dark leading-normal py-2" href="#notes">Notes </a></li></ul></div></nav><!--astro:end--></astro-island></div></div></body></html>