-
Notifications
You must be signed in to change notification settings - Fork 20
Expand file tree
/
Copy pathindex.html
More file actions
57 lines (57 loc) · 301 KB
/
index.html
File metadata and controls
57 lines (57 loc) · 301 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Tutorials/Components/Front/PostproductionRenderer" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.4.0">
<title data-rh="true">PostproductionRenderer | That Open docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.thatopen.com/img/logo.svg"><meta data-rh="true" name="twitter:image" content="https://docs.thatopen.com/img/logo.svg"><meta data-rh="true" property="og:url" content="https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="PostproductionRenderer | That Open docs"><meta data-rh="true" name="description" content="window.open("https://thatopen.github.io/engine_components/examples/PostproductionRenderer")} >Go Full Screen"><meta data-rh="true" property="og:description" content="window.open("https://thatopen.github.io/engine_components/examples/PostproductionRenderer")} >Go Full Screen"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer"><link data-rh="true" rel="alternate" href="https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.thatopen.com/Tutorials/Components/Front/PostproductionRenderer" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://Z3IS6MTI1S-dsn.algolia.net" crossorigin="anonymous"><link rel="search" type="application/opensearchdescription+xml" title="That Open docs" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.0229516a.css">
<script src="/assets/js/runtime~main.ab4ea4d5.js" defer="defer"></script>
<script src="/assets/js/main.6473d28b.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"dark")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo-purple.svg" alt="That Open Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo-green.svg" alt="That Open Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a></div><div class="navbar__items navbar__items--right"><a href="https://thatopen.com/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Project<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://people.thatopen.com/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Community<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://www.npmjs.com/org/thatopen" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">NPM<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/ThatOpen/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/intro">👨🏻💻 Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/contributing">🤝 Get involved</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/components/getting-started">🧩 Components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/Tutorials/Components/">👩🏻🏫 Tutorials</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/Tutorials/Components/">Components</a><button aria-label="Collapse sidebar category 'Components'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/Tutorials/Components/Core/BCFTopics">Core</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/Tutorials/Components/Front/AngleMeasurement">Front</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/AngleMeasurement">AngleMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/AreaMeasurement">AreaMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Civil3DNavigator">Civil3DNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilCrossSectionNavigator">CivilCrossSectionNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilElevationNavigator">CivilElevationNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilPlanNavigator">CivilPlanNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/ClipEdges">ClipEdges</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/EdgeMeasurement">EdgeMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/FaceMeasurement">FaceMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Highlighter">Highlighter</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/IfcStreamer">IfcStreamer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/LengthMeasurement">LengthMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Marker">Marker</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Plans">Plans</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/Tutorials/Components/Front/PostproductionRenderer">PostproductionRenderer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Sections">Sections</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/ShadowDropper">ShadowDropper</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/VolumeMeasurement">VolumeMeasurement</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/Tutorials/UserInterface/">UserInterface</a><button aria-label="Expand sidebar category 'UserInterface'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/api/">📋 API</a><button aria-label="Expand sidebar category '📋 API'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">👩🏻🏫 Tutorials</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/Tutorials/Components/"><span itemprop="name">Components</span></a><meta itemprop="position" content="2"></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Front</span><meta itemprop="position" content="3"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">PostproductionRenderer</span><meta itemprop="position" content="4"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>PostproductionRenderer</h1></header><div style="position:relative"><iframe src="https://thatopen.github.io/engine_components/examples/PostproductionRenderer"></iframe><button class="full-screen-btn">Go Full Screen</button></div>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Source</div><div class="admonitionContent_BuS1"><p>Copying and pasting? We've got you covered! You can find the full source code of this tutorial <a href="https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/core/PostproductionRenderer/example.ts" target="_blank" rel="noopener noreferrer">here</a>.</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-great-graphics">🎥 Great graphics<a class="hash-link" aria-label="Direct link to 🎥 Great graphics" title="Direct link to 🎥 Great graphics" href="/Tutorials/Components/Front/PostproductionRenderer#-great-graphics"></a></h3>
<hr>
<p>Postproduction effects enrich your 3D scenes. There are several post-production effects, such as adding shadows, rendering outlines, adding ambient occlusion and applying bloom, that can enhance and make your scene look cool. In this tutorial, you'll learn how to do it.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>Postproduction?</div><div class="admonitionContent_BuS1"><p>The simple Three.js renderer isn't bad, but it's pretty basic. Postproduction are a collection of effects you can add to your scene to make it look much better. Of course, this means consuming more resources, but luckily for us, the power of devices is proportional to the size of its screen, so we should be able to enjoy this beauty in most scene even from our smartphones!</p></div></div>
<p>In this tutorial, we will import:</p>
<ul>
<li><code>three</code> to create some 3D items.</li>
<li><code>@thatopen/components</code> to set up the barebone of our app.</li>
<li><code>@thatopen/ui</code> to add some simple and cool UI menus.</li>
<li><code>@thatopen/components-front</code> to use some frontend-oriented components.</li>
<li><code>Stats.js</code> (optional) to measure the performance of our app.</li>
</ul>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">THREE</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"three"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Stats</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"stats.js"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/ui"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/components"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/components-front"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-setting-up-a-simple-scene">🌎 Setting up a simple scene<a class="hash-link" aria-label="Direct link to 🌎 Setting up a simple scene" title="Direct link to 🌎 Setting up a simple scene" href="/Tutorials/Components/Front/PostproductionRenderer#-setting-up-a-simple-scene"></a></h3>
<hr>
<p>We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial. Notice how we use the PostproductionRenderer in this case.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> container </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getElementById</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">"container"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">!</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> components </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">Components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> worlds </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Worlds</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> world </span><span class="token operator">=</span><span class="token plain"> worlds</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">SimpleScene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">SimpleCamera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PostproductionRenderer</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">SimpleScene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBCF</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">PostproductionRenderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> container</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">camera</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">SimpleCamera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">background</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">init</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">camera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">controls</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setLookAt</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">12</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">6</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">8</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setup</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> grids </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Grids</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> grid </span><span class="token operator">=</span><span class="token plain"> grids</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">create</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">grid</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">config</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">color</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">set</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">0x666666</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">background</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-loading-a-bim-model">🧳 Loading a BIM model<a class="hash-link" aria-label="Direct link to 🧳 Loading a BIM model" title="Direct link to 🧳 Loading a BIM model" href="/Tutorials/Components/Front/PostproductionRenderer#-loading-a-bim-model"></a></h3>
<hr>
<p>We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>Fragments?</div><div class="admonitionContent_BuS1"><p>If you are not familiar with fragments, check out the IfcLoader tutorial!</p></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> fragments </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">FragmentsManager</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> file </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">fetch</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://thatopen.github.io/engine_components/resources/small.frag"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> data </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">await</span><span class="token plain"> file</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">arrayBuffer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> buffer </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">Uint8Array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> model </span><span class="token operator">=</span><span class="token plain"> fragments</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">load</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">buffer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">model</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-turning-on-the-postproduction">🎬 Turning on the Postproduction<a class="hash-link" aria-label="Direct link to 🎬 Turning on the Postproduction" title="Direct link to 🎬 Turning on the Postproduction" href="/Tutorials/Components/Front/PostproductionRenderer#-turning-on-the-postproduction"></a></h3>
<hr>
<p>Now we will activate the postproduction effect and enable the visibility for postproduction layer.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> postproduction </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">postproduction</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">enabled</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">postproduction</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">customEffects</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">excludedMeshes</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">push</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">grid</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> ao </span><span class="token operator">=</span><span class="token plain"> postproduction</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">n8ao</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">configuration</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="️-measuring-the-performance-optional">⏱️ Measuring the performance (optional)<a class="hash-link" aria-label="Direct link to ⏱️ Measuring the performance (optional)" title="Direct link to ⏱️ Measuring the performance (optional)" href="/Tutorials/Components/Front/PostproductionRenderer#️-measuring-the-performance-optional"></a></h3>
<hr>
<p>We'll use the <a href="https://github.com/mrdoob/stats.js" target="_blank" rel="noopener noreferrer">Stats.js</a> to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> stats </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">Stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">showPanel</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">2</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">style</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">left</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"0px"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">style</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">zIndex</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"unset"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onBeforeUpdate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">begin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onAfterUpdate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">end</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-adding-some-ui">🧩 Adding some UI<a class="hash-link" aria-label="Direct link to 🧩 Adding some UI" title="Direct link to 🧩 Adding some UI" href="/Tutorials/Components/Front/PostproductionRenderer#-adding-some-ui"></a></h3>
<hr>
<p>We will use the <code>@thatopen/ui</code> library to add some simple and cool UI elements to our app. First, we need to call the <code>init</code> method of the <code>BUI.Manager</code> class to initialize the library:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Manager</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">init</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Now we will add some UI to control some of the most common postproduction parameters. For more information about the UI library, you can check the specific documentation for it!</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> panel </span><span class="token operator">=</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Component</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PanelSection</span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">html</span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">active</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Postproduction Tutorial</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">options-menu</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">collapsed</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Gamma</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">checked</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Gamma Correction</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">setPasses</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation literal-property property" style="color:rgb(255, 121, 198)">gamma</span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">collapsed</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Custom effects</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">checked</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Custom effects</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">setPasses</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation literal-property property" style="color:rgb(255, 121, 198)">custom</span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">checked</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Gamma Correction</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">glossEnabled</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0.01</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Opacity</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">opacity</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">opacity</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0.1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Tolerance</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">tolerance</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">6</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">tolerance</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-color-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Line color</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@input</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">ColorInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation class-name" style="color:rgb(255, 121, 198)">THREE</span><span class="token template-string html language-html tag attr-value interpolation class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation class-name" style="color:rgb(255, 121, 198)">Color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">lineColor</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">getHex</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-color-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Gloss exponent</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0.1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">glossExponent</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">5</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">glossExponent</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Max gloss</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0.05</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">maxGloss</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">-2</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">2</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">maxGloss</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Min gloss</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0.05</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">minGloss</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">-2</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">2</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">customEffects</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">minGloss</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">collapsed</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Ambient Oclussion</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">AO enabled</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> postproduction</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">setPasses</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation literal-property property" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">checked</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Half resolution</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">halfRes</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Screen space radius</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">Checkbox</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">screenSpaceRadius</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-checkbox</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-color-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">AO color</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@input</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">ColorInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation class-name" style="color:rgb(255, 121, 198)">THREE</span><span class="token template-string html language-html tag attr-value interpolation class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation class-name" style="color:rgb(255, 121, 198)">Color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">r</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">r</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">g</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">g</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">b</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> color</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">b</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-color-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">AO Samples</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">aoSamples</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">16</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">aoSamples</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Denoise Samples</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">denoiseSamples</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">16</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">denoiseSamples</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Denoise Radius</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">denoiseRadius</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">100</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">denoiseRadius</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">AO Radius</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">aoRadius</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">16</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">aoRadius</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Distance falloff</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">distanceFalloff</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">16</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">distanceFalloff</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">slider</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Intensity</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">step</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">1</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">value</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">intensity</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">min</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">0</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">max</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">16</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@change</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> target </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter literal-property property" style="color:rgb(255, 121, 198)">target</span><span class="token template-string html language-html tag attr-value interpolation parameter operator" style="color:rgb(255, 121, 198)">:</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation parameter property-access maybe-class-name" style="color:rgb(255, 121, 198)">NumberInput</span><span class="token template-string html language-html tag attr-value interpolation parameter" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation parameter punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> ao</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">intensity</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation operator" style="color:rgb(255, 121, 198)">=</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> target</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">value</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-number-input</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">panel</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> button </span><span class="token operator">=</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Component</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PanelSection</span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">html</span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">phone-menu-toggler</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">icon</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">solar:settings-bold</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@click</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">contains</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">remove</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">else</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-wrap-up">🎉 Wrap up<a class="hash-link" aria-label="Direct link to 🎉 Wrap up" title="Direct link to 🎉 Wrap up" href="/Tutorials/Components/Front/PostproductionRenderer#-wrap-up"></a></h3>
<hr>
<p>That's it! You have created an app that looks great thanks to postproduction and exposes a menu to allow the user control it in real time.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/Tutorials/Components/Front/Plans"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Plans</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/Tutorials/Components/Front/Sections"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Sections</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-great-graphics">🎥 Great graphics</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-setting-up-a-simple-scene">🌎 Setting up a simple scene</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-loading-a-bim-model">🧳 Loading a BIM model</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-turning-on-the-postproduction">🎬 Turning on the Postproduction</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#️-measuring-the-performance-optional">⏱️ Measuring the performance (optional)</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-adding-some-ui">🧩 Adding some UI</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/PostproductionRenderer#-wrap-up">🎉 Wrap up</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 That Open Company. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>