Deploying to gh-pages from @ ReactUnity/core@c96e067 🚀

Author: gkurt

reference/css/backdrop-filter/index.html

@@ -51,5 +51,7 @@ <h2 id="notes" class="mdx-heading text-3xl leading-10 text-primary dark:text-pri
 <ul class="ml-6 my-3 list-disc">
 <li class="leading-relaxed mb-1">The backdrop is the frame as it stands when the element is drawn, so the filter only sees what is <em>behind</em> it — anything drawn after it is unaffected, as on the web.</li>
 <li class="leading-relaxed mb-1">The built-in pipeline reads the backdrop 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 copies the screen as it stands. A scriptable pipeline has none, so the backdrop is rendered instead: the camera draws the frame again with the element and everything after it left out. That is one extra render per element that reads a backdrop, so a screen with many of them costs accordingly.</li>
+<li class="leading-relaxed mb-1">That render is kept between frames, and taken again only when something painted <em>before</em> the element has changed inside the part of the screen the element reads. An animation over a frosted panel therefore costs the panel nothing, while one behind it is read every frame, and a panel scrolled out of the frame costs nothing at all until it comes back.</li>
+<li class="leading-relaxed mb-1">What is watched to decide that is the canvas: where each element is, how large it is, whether it is drawn, and when it rebuilds. Anything else the camera draws — a 3D scene behind the UI — cannot be watched that way, so an element with such geometry behind it is taken again every frame. A <a href="/reference/css/background-image" 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">RenderTexture</code></a> whose contents an external script rewrites is the one case nothing notices; move it, or toggle it, to say so.</li>
 <li class="leading-relaxed mb-1">Rendering the backdrop needs a camera whose output the element is part of, which a <code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30/10 py-px">ScreenSpaceOverlay</code> canvas has not got — it is drawn after every camera has finished. Under a scriptable pipeline an element on an overlay canvas falls back to the camera’s opaque texture, which holds the 3D scene but no UI, and is downsampled according to the render pipeline asset’s <em>Opaque Downsampling</em> setting.</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/appearance" 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">Appearance</span></span></a><a href="/reference/css/background-blend-mode" 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 Blend Mode</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="12ASHR" 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;#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="#notes">Notes </a></li></ul></div></nav><!--astro:end--></astro-island></div></div></body></html>