Template:ItemBox: Difference between revisions

Restore the icon mask and real masked wear on the lowGraphics path, keeping only texture off, to measure whether the masks affect scroll caching (with help from vergir-bot LLM)
Vergir (talk | contribs)
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM)
 
(8 intermediate revisions by one other user not shown)
Line 8: Line 8:
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--


     Measured name size (em) and stable per-item texture variety.
     Measured name size (cqw) and stable per-item texture variety.
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
Line 21: Line 21:
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--


     lowGraphics=true is the setting for callers that place dozens of cards on
     lowGraphics=true is for callers that place dozens of cards on one page (the
     one page. It drops the paper texture, because every way of drawing it
     card navboxes). It swaps the paper texture from the normal-mode multiply,
     multiplies two images together, and WebRender re-rasterises and re-uploads
     which blends two images and so is re-rasterised every scrolled frame, to a
    any such blend on every scrolled frame instead of caching it as a static
     transparent-paper overlay that is a single cacheable image. On the profiled
     tile. On the profiled navbox that blend was the whole cost: dropping it took
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
    the render thread's OpenGL work from ~230 ms/s to ~10 and roughly doubled
    roughly doubled the frame rate. The wear and icon masks are clips of a
    the frame rate. The wear and icon masks are clips of a single image, not
    single image, not blends, so they cache once rasterised and stay at full
    blends of two, so they cache once rasterised and are kept at full detail
     detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
     here; only the texture is dropped.
     keyed off the same per-item texture-vN class, so a card keeps its paper
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}<!--
     across both modes.
 
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
    The same layers individually, for testing combinations or overriding the
    bundle above. wearMask drops the mask from the wear tint three ways:
    no  - tint moves behind the artwork, so only the card stock is coloured
    ramp - tint stays on top, fading in from the card's edges
    soft - tint stays on top, uniform and lighter, with the name lifted clear
     texture handles the paper grain:
    no    - drop it entirely (the only option that caches while scrolling)
    1/2/3 - one shared paper via the mix-blend overlay
     blend / blend1..3 - paper multiplied into the card art. Both of these
            multiply two images and so are re-rasterised every scrolled frame;
            they are fine for a handful of cards but not for a full page.
-->{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}<!--


     Links.
     Links.
Line 50: Line 38:
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--


--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
<div class="itembox-background">
<div class="itembox-background">
<div class="itembox-card">
<div class="itembox-card">
Line 62: Line 50:
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
</div>
</div>
<div class="itembox-name-area">
<!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. -->
<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p>
<div class="itembox-name-area" style="container-type: inline-size;">
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
</div>
</div>
<div class="itembox-wear"></div>
<div class="itembox-wear"></div>