index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>glTF Sample Viewer</title>

    <meta name="author" content="Khronos Group Inc.">
    <meta name="description" content="The official glTF sample viewer">
    <meta name="keywords" content="glTF, WebGL, Sample, Viewer, PBR">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="GltfSVApp.css">
    <link rel="icon" href="assets/images/gltf.png">

    <!-- buefy styles -->
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

    <!-- load fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">

    <script src="https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.js"></script>
    <script src="libs/libktx.js"></script>
</head>
<script>
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
            vars[key] = value;
        });
        return vars;
    }

    function getUrlParam(parameter, defaultvalue) {
        var urlparameter = defaultvalue;
        if (window.location.href.indexOf(parameter) > -1) {
            urlparameter = getUrlVars()[parameter];
        }
        return urlparameter;
    }
</script>

<!-- vue js templates -->
<!-- general templates -->
<script id="toggleButtonTemplate" type="text/x-template">
    <div>
        <b-button v-on:click="buttonclicked" rounded>{{ name }}</b-button>
    </div>
</script>
<script id="jsonToUITemplate" type="text/x-template">
    <div>
        <div v-for="(value, name) in data">
            <b-collapse :class="(isinner === false) ? 'cardGrayMain' : 'cardGrayMainInner'" animation="slide"  style="word-break: break-word;">
                <!-- header -->
                <template #trigger="props">
                    <div class="cardHeader" role="button">
                        <p class="smallerLabel">
                            {{ name }}
                        </p>
                        <!-- a element needed for buefy. can be removed if hover effects are made custom -->
                        <a>
                            <b-icon :icon="props.open ? 'menu-down' : 'menu-up'">
                            </b-icon>
                        </a>
                    </div>
                </template>

                <!-- content -->
                <!-- if value is object -->
                <div v-if="value !== null && value !== undefined && value.constructor.name === 'Object'">
                    <json-to-ui-template v-bind:data="value" v-bind:isinner="!isinner"></json-to-ui-template>
                </div>
                <!-- if value is array -->
                <div v-else-if="Array.isArray(value)">
                    <label v-for="arrayValue in value" class="smallestLabel" style="display: block;">{{ arrayValue }}</label>
                </div>
                <div v-else>
                    <label class="smallestLabel">{{ value }}</label>
                </div>
            </b-collapse>
        </div>
    </div>
</script>


<body class="" style="touch-action: none">  <!--is-flex -->

    <div class="columns is-mobile">
        <div class="column" id="canvasUI" ><!---->
            
                <canvas id="canvas" @mousemove="mouseMove">
                    No Canvas!
                </canvas> 
            
        </div>
        <div id="app"> 
            <!-- UI -->
                <div class="canvasUIMaximize">
                    <img v-bind:src="[uiVisible ? 'assets/ui/Icon_Expand.svg' : 'assets/ui/Icon_Collapse.svg']"
                        @click="toggleUI()" ref="fullscreenIcon" class="maximizeCanvasIcon" width="30px"
                        v-show='!(isMobile && tabContentHidden === false) && !noUI'
                        >
                </div>  
            <div class="column" v-show='uiVisible'>
                    <!--Drop Area -->
                    <div v-bind:class="[showDropDownOverlay ? '' : 'is-hidden']" id="dropZone"
                        style="pointer-events: none;">
                        <div class="is-overlay is-dropAreaCard is-flex" style="z-index: 999;">
                            <div class="box has-text-centered">
                                <span class="icon is-large">
                                    <i class="fas fa-folder-open fa-4x"></i>
                                </span>
                                <p class="is-size-2 has-text-weight-light">
                                    Drag and drop files here
                                </p>
                                <p class="is-size-4">
                                    Supported files: glTF, glb & hdr
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- Tabs -->
                    <b-tabs id="tabsContainer" 
                        vertical position="is-right" 
                        v-model="activeTab"
                        v-bind:class="[tabContentHidden ? 'is-flex-wrap-nowrap hideTabs tabsContainer' : 'is-flex-wrap-nowrap tabsContainer']" 
                        type="is-toggle" v-bind:animated="false">

                        <!-- Tab Category: Models -->
                        <b-tab-item label="Models" icon="google-photos" class="tab-item tabItemScrollable" 
                        title-item-class="d-none">
                            
                            
                            <!-- Tab Header -->
                            <template #header  >
                                <div id="test-id" @click="collapseActiveTab($event, 0)"
                                    v-bind:style="[tabContentHidden === false && activeTab === 0 ? {'height': '100%'} : {}]"
                                    v-bind:width="[isMobile ? '200px' : '100px']"
                                    >
                                    <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                    <img v-bind:src="[tabContentHidden === false && activeTab === 0 ? 'assets/ui/Model 50X50.svg' : 'assets/ui/Model 30X30.svg']"
                                        v-bind:style="[tabContentHidden === false && activeTab === 0 ? {'height': '100%'} : {}]">
                                    <span
                                      
                                        v-show='isMobile === false && (tabContentHidden === true || activeTab !== 0)'>
                                        Models
                                    </span>
                                </div>
                            </template>

                            <!-- Tab Content: Models -->
                            <div class="tabContent">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 0)">
                                <h2 class="title is-spaced">Models</h2>
                                <b-field label="Models" class="subtitle">
                                    <b-select v-model="selectedModel" v-on:input="modelChanged.next($event.target.value);">
                                        <option v-for="(item) in models" v-bind:value="item">
                                            {{ item }}
                                        </option>
                                    </b-select>
                                </b-field>
                                <b-field label="Flavor">
                                    <b-select v-model="selectedFlavour" v-on:input="flavourChanged.next($event.target.value)">
                                        <option v-for="(item) in flavours" v-bind:value="item">
                                            {{ item }}
                                        </option>
                                    </b-select>
                                </b-field>
                                <b-field label="Scenes" class="subtitle">
                                    <b-select v-model="selectedScene" v-on:input="sceneChanged.next($event.target.value)">
                                        <option v-for="(item) in scenes" v-bind:value="item.index">
                                            {{ item.title }}
                                        </option>
                                    </b-select>
                                </b-field>
                                <b-field label="Cameras" class="subtitle">
                                    <b-select v-model="selectedCamera" v-on:input="cameraChanged.next(parseInt($event.target.value))">
                                        <option v-for="(item) in cameras" v-bind:value="item.index">
                                            {{ item.title }}
                                        </option>
                                    </b-select>
                                </b-field>

                                <b-field label="Variants" class="subtitle"
                                    v-bind:style="[materialVariants.length <= 1 ? {'display': 'none'} : {}]">
                                    <b-field v-for="item in materialVariants" v-bind:key="item"
                                        v-bind:style="[materialVariants.length > 5 ? {'display': 'none'} : {}]">
                                        <b-radio v-bind:native-value="item" v-on:input="variantChanged.next($event.target.value)"
                                            v-model="selectedVariant">
                                            {{ item }}
                                        </b-radio>
                                    </b-field>
                                    <b-select v-model="selectedVariant" v-on:input="variantChanged.next($event.target.value)"
                                        v-bind:style="[materialVariants.length > 5 ? {} : {'display': 'none'}]">
                                        <option v-for="(item) in materialVariants" v-bind:value="item">
                                            {{ item }}
                                        </option>
                                    </b-select>
                                </b-field>
                            </div>
                        </b-tab-item>


                        <b-tab-item label="Display" icon="library-music" class="tabItemScrollable tab-item">
                            <template #header>
                                <div @click="collapseActiveTab($event, 1)"
                                    v-bind:style="[tabContentHidden === false && activeTab === 1 ? {'height': '100%'} : {}]">
                                    <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                    <img v-bind:src="[tabContentHidden === false && activeTab === 1 ? 'assets/ui/Display 50X50.svg' : 'assets/ui/Display 30X30.svg']"
                                        v-bind:width="[tabContentHidden === false && activeTab === 1 ? '50px' : '30px']"
                                        v-bind:style="[tabContentHidden === false && activeTab === 1 ? {'height': '100%'} : {}]">
                                    <span
                                        v-show='isMobile === false && (tabContentHidden === true || activeTab !== 1)'>
                                        Display
                                    </span>
                                </div>
                            </template>

                            <div class="tabContent">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 1)">
                                <h2 class="title  is-spaced">Display</h2>
                                <b-field label="Lighting" class="subtitle">
                                    <b-switch class="smallerLabel" v-model="ibl" v-on:input="iblChanged.next($event.target.checked); iblTriggered($event.target.checked);">Image Based
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="punctualLights" v-on:input="punctualLightsChanged.next($event.target.checked)">Punctual
                                        Lighting</b-switch>
                                </b-field>
                                <b-field label="IBL Intensity" class="smallerLabel">
                                    <b-slider rounded v-model="iblIntensity" :min="-2" v-bind:max="5" :step=0.01 :custom-formatter="val => Math.round(Math.pow(10,val)*100.0)/100.0"
                                        class="iblIntensitySlider" v-on:dragging="iblIntensityChanged.next($event)">
                                        <b-slider-tick :value="-2" class="iblIntensitySliderMarker">0.01</b-slider-tick>
                                        <b-slider-tick :value="0" class="iblIntensitySliderMarker">1</b-slider-tick>
                                        <b-slider-tick :value="2" class="iblIntensitySliderMarker">100</b-slider-tick>                               
                                        <b-slider-tick :value="4" class="iblIntensitySliderMarker">10000</b-slider-tick>
                                    </b-slider>
                                </b-field>
                                <b-field class="subtitle"  label="Exposure"></b-field>
                                <b-slider rounded v-model="exposureSetting" :min="21" v-bind:max="-6" :step=0.1 
                                :custom-formatter="val => Math.round((1.0 / Math.pow(2.0, val))*100000)/100000" class="exposureSlider" ticks v-on:dragging="exposureChanged.next($event)">
                                    <b-slider-tick :value="-6" class="exposureSliderMarker">64</b-slider-tick>
                                    <b-slider-tick :value="0" class="exposureSliderMarker">1</b-slider-tick>
                                    <b-slider-tick :value="9.966" class="exposureSliderMarker">0.001</b-slider-tick>
                                    <b-slider-tick :value="21" class="exposureSliderMarker">0</b-slider-tick>

                                </b-slider>
                                </b-field>

                                <b-field label="Tone Map" class="subtitle">
                                    <b-select v-on:input="tonemapChanged.next($event.target.value)" v-model="toneMap">
                                        <option v-for="(item) in tonemaps" v-bind:value="item.title">
                                            {{ item.title }}
                                        </option>
                                    </b-select>
                                </b-field>
                                <b-field label="Background" class="subtitle">
                                    <b-switch class="smallerLabel" v-model="renderEnv" v-on:input="renderEnvChanged.next($event.target.checked)" v-bind:disabled="ibl === false ? true : false">Environment
                                        Map</b-switch>
                                    <b-switch class="smallerLabel" v-model="blurEnv" v-on:input="blurEnvChanged.next($event.target.checked)"
                                        v-bind:disabled="ibl === false ? true : false">Blur</b-switch>
                                    <b-field label="Background Color" class="smallerLabel"></b-field>
                                    <b-input type="color" id="clearColorPicker" custom-class="colorInput"
                                    v-on:input="colorChanged.next($event.target.value)" v-model="clearColor"></b-input>
                                </b-field>
                                <b-field label="Environment Rotation" class="smallerLabel">
                                    <b-select v-on:input="environmentRotationChanged.next($event.target.value)"
                                        v-model="selectedEnvironmentRotation">
                                        <option v-for="(item) in environmentRotations" v-bind:value="item.title">
                                            {{ item.title }}
                                        </option>
                                    </b-select>
                                </b-field>

                                <b-field label="Image Based Lighting" class="subtitle">
                                    <button class="button is-rounded">
                                        <input class="file-input" type="file" accept=".hdr" @change="onFileChange">
                                        <i class="fas fa-plus"></i>
                                        Add New HDR
                                    </button>

                                    <b-field label="Active Environment" class="subtitle">
                                        <b-dropdown aria-role="list" v-model="selectedEnvironment" v-on:change="selectedEnvironmentChanged.next($event)">
                                            <template #trigger="{ active }">
                                                <b-button rounded type="is-primary"
                                                    :icon-right="active ? 'menu-up' : 'menu-down'">
                                                    {{ environments[selectedEnvironment].title }}
                                                </b-button>
                                            </template>

                                            <b-dropdown-item aria-role="listitem" v-for="name in Object.keys(environments)"
                                                v-bind:key="name" :value="name">
                                                {{ environments[name].title }}
                                            </b-dropdown-item>
                                        </b-dropdown>
                                    </b-field>
                                </b-field>
                                <div class="pb-6"></div>
                            </div>
                        </b-tab-item>

                        <b-tab-item label="Validator" icon="video" class="tabItemScrollable tab-item">
                            <template #header>
                                <div @click="collapseActiveTab($event, 2)"
                                v-bind:style="[tabContent === false && activeTab === 2 ? {'height': '100%'} : {}]">
                                <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                <div style="max-width:fit-content; margin-left: auto; margin-right: auto;" v-html="getValidationCounter()"></div>
                                <span
                                v-show='isMobile === false && (tabContentHidden === true || activeTab !== 2)'>
                                Validator
                                </span>
                               
                            </div>
                            </template>
    
                            <div class="tabContent" style="display: flex; flex-direction: column; height: inherit;">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 2)">
                                <h2 class="title is-spaced" v-bind:data="validationReport">glTF Validator</h2>
                                    <div class="modelCredit">
                                        <p>Number of errors: {{validationReport?.issues?.numErrors ?? 0}}</p>
                                        <p>Number of warnings: {{validationReport?.issues?.numWarnings ?? 0}}</p>
                                        <p>Number of infos: {{validationReport?.issues?.numInfos ?? 0}}</p>
                                    </div>

                                    <div v-show='validationReportDescription?.message !== undefined && validationReportDescription?.message !== ""'>
                                        <p style="margin-top: 10px; margin-bottom: 10px; font-size:smaller;">{{validationReportDescription?.message}}</p>
                                    </div>

                                    <button class="button is-rounded" style="width: fit-content; flex-shrink: 0; margin-bottom: 12px;" v-on:click="copyToClipboard(JSON.stringify(validationReport, undefined, 4))">Copy</button>
                                    <button class="button is-rounded" style="width: fit-content; flex-shrink: 0;" v-on:click="downloadJSON(validationReport?.uri?.substring(validationReport.uri.lastIndexOf('/') + 1) + '.report.json', validationReport)">Download</button>
                                    <span style="margin-top: 5px;">Powered by <a href="https://github.com/KhronosGroup/glTF-Validator" target="_blank" rel="noopener noreferrer">glTF-Validator</a></span>
                                </b-field>
                            </div>
                        </b-tab-item>
    

                        <b-tab-item label="Animation" icon="video" class="tabItemScrollable tab-item">
                            <template #header>
                                <div @click="collapseActiveTab($event, 3)"
                                    v-bind:style="[tabContentHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
                                    <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                    <img v-bind:src="[tabContentHidden === false && activeTab === 3 ? 'assets/ui/Animation 50X50.svg' : 'assets/ui/Animation 30X30.svg']"
                                        v-bind:width="[tabContentHidden === false && activeTab === 3 ? '50px' : '30px']"
                                        v-bind:style="[tabContentHidden === false && activeTab === 3 ? {'height': '100%'} : {}]">
                                    <span 
                                        v-show='isMobile === false && (tabContentHidden === true || activeTab !== 3 )'>
                                        Animation
                                    </span>
                                </div>
                            </template>

                            <div class="tabContent">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 3)">
                                <h2 class="title is-spaced">Animation</h2>
                                <label class="subtitle" v-bind:style="[animations.length == 0 ? {'display': 'none'} : {}]">Animation Controls</label>
                                <toggle-button v-on:buttonclicked="animationPlayChanged.next($event)" ontext="Pause" offtext="Play"
                                    ref="animationState"
                                    v-bind:style="[animations.length == 0 ? {'display': 'none'} : {}]"></toggle-button>
                                
                                <label class="subtitle" v-bind:style="[animations.length != 0 ? {'display': 'none'} : {}]">No Animations available</label>

                                <b-field label="Animations"
                                    v-bind:style="[animations.length == 0 ? {'display': 'none'} : {}]">
                                    <b-field v-for="animation in animations" v-bind:key="animation.index">
                                        <b-checkbox v-bind:native-value="animation.index" v-model="selectedAnimations"
                                            :disabled="disabledAnimations.includes(animation.index)">
                                            {{ animation.title }}
                                        </b-checkbox>
                                    </b-field>
                                </b-field>
                            </div>
                        </b-tab-item>


                        <b-tab-item label="Credits" icon="video" class="tabItemScrollable tab-item">
                            <template #header>
                                <div @click="collapseActiveTab($event, 4)"
                                    v-bind:style="[tabContentHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
                                    <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                    <img v-bind:src="[tabContentHidden === false && activeTab === 4 ? 'assets/ui/XMP 50X50.svg' : 'assets/ui/XMP 30X30.svg']"
                                        v-bind:width="[tabContentHidden === false && activeTab === 4 ? '50px' : '30px']"
                                        v-bind:style="[tabContentHidden === false && activeTab === 4 ? {'height': '100%'} : {}]">
                                    <span 
                                        v-show='isMobile === false && (tabContentHidden === true || activeTab !== 4)'>
                                        Credits
                                    </span>
                                </div>
                            </template>

                            <div class="tabContent">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 4)">
                                <h2 class="title">Model Credits</h2>
                                <div class="modelCredit"><i>Copyright:</i><br/>{{ assetCopyright }}</div>
                                <div class="modelCredit"><i>Generated by:</i><br/>{{ assetGenerator }}</div>
                                <h2 class="title">Environment Credits</h2>
                                <div class="modelCredit"><i>Copyright:</i><br/><p v-html="environmentLicense"></p></div>
                                <h3 class="title">{{ xmp ? "XMP" : "" }}</h3>
                                <json-to-ui-template v-bind:data="xmp" v-bind:isinner="false"></json-to-ui-template>
                            </div>
                        </b-tab-item>
                        <!--<b-tab-item label="Capture" icon="video">
                            <template #header>
                                to get colored icons use: https://stackoverflow.com/a/43916743
                                <img src="assets/ui/Capture 30X30.svg" width="30px" height="30px">
                                <span>Capture</span>
                            </template>
                        </b-tab-item>-->


                        <b-tab-item label="Advanced Controls" icon="video" class="tabItemScrollable tab-item">
                            <template #header>
                                <div @click="collapseActiveTab($event, 5)"
                                    v-bind:style="[tabContentHidden === false && activeTab === 5 ? {'height': '100%'} : {}]">
                                    <!-- to get colored icons use: https://stackoverflow.com/a/43916743 -->
                                    <img v-bind:src="[tabContentHidden === false && activeTab === 5 ? 'assets/ui/Developer 50X50.svg' : 'assets/ui/Developer 30X30.svg']"
                                        v-bind:width="[tabContentHidden === false && activeTab === 5 ? '50px' : '30px']"
                                        v-bind:style="[tabContentHidden === false && activeTab === 5 ? {'height': '100%'} : {}]">
                                    <span
                                        v-show='isMobile === false && (tabContentHidden === true || activeTab !== 5)'>
                                        Advanced<br>
                                        Controls
                                    </span>
                                </div>
                            </template>

                            <div class="tabContent">
                                <img src="assets/ui/Navigation_right_20px.svg" width="30px"
                                    @click="collapseActiveTab($event, 5)">
                                <h2 class="title is-spaced">Advanced Controls</h2>
                                <b-field label="Capture Canvas" class="subtitle">
                                    <button v-on:click="captureCanvas.next($event.target.value)" type="button" class="button is-rounded"><i
                                            class="fa fa-download downloadIcon"></i>Download as .png</button>
                                </b-field>
                                <b-field label="Debug Channels" class="subtitle">
                                    <b-select v-on:input="debugchannelChanged.next($event.target.value)" v-model="debugChannel">
                                        <template v-for="item in debugchannels">
                                            <option v-if="typeof(item.title) == 'string'" v-bind:value="item.title" v-bind:label="item.title"></option>
                                        </template>
                                        <template v-for="item in debugchannels">
                                            <optgroup v-if="typeof(item.title) == 'object'">
                                                <option v-for="subitem of item.title" v-bind:value="subitem" v-bind:label="subitem"></option>
                                            </optgroup>
                                        </template>
                                    </b-select>
                                </b-field>

                                <b-switch v-model="skinning" v-on:input="skinningChanged.next($event.target.checked)">Skinning</b-switch>
                                <br>
                                <b-switch v-model="morphing" v-on:input="morphingChanged.next($event.target.checked)">Morphing</b-switch>
                                <b-field label="Current Camera Values" class="subtitle">
                                    <button v-on:click="cameraExport.next($event.target.value)" type="button" class="button is-rounded"><i
                                            class="fa fa-download downloadIcon"></i>Download as .gltf</button>
                                </b-field>
                                <b-field label="KHR Materials Extensions" class="subtitle">
                                    <b-switch class="smallerLabel" v-model="clearcoatEnabled"
                                        v-on:input="clearcoatChanged.next($event.target.checked)">
                                        Clearcoat
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="sheenEnabled" v-on:input="sheenChanged.next($event.target.checked)">
                                        Sheen
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="transmissionEnabled"
                                        v-on:input="transmissionChanged.next($event.target.checked)" @input="transmissionTriggered($event.target.checked)">
                                       Transmission
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="diffuseTransmissionEnabled"
                                        v-on:input="diffuseTransmissionChanged.next($event.target.checked)" @input="diffuseTransmissionTriggered($event.target.checked)">
                                        Diffuse Transmission
                                    </b-switch>
                                    <b-switch class="smallerLabel"
                                        v-bind:disabled="!transmissionEnabled && !diffuseTransmissionEnabled"
                                        v-model="volumeEnabled" v-on:input="volumeChanged.next($event.target.checked)">
                                        Volume
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="iorEnabled" v-on:input="iorChanged.next($event.target.checked)">IOR</b-switch>
                                    <b-switch class="smallerLabel" v-model="specularEnabled" v-on:input="specularChanged.next($event.target.checked)">
                                        Specular                                        
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="emissiveStrengthEnabled" v-on:input="emissiveStrengthChanged.next($event.target.checked)">
                                        Emissive Strength
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="iridescenceEnabled" v-on:input="iridescenceChanged.next($event.target.checked)">
                                        Iridescence
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="anisotropyEnabled" v-on:input="anisotropyChanged.next($event.target.checked)">
                                        Anisotropy
                                    </b-switch>
                                    <b-switch class="smallerLabel" v-model="dispersionEnabled" v-on:input="dispersionChanged.next($event.target.checked)">
                                        Dispersion
                                    </b-switch>
                                </b-field>
                                <b-field label="Statistics" class="subtitle">
                                    <json-to-ui-template v-bind:data="statistics" v-bind:isinner="false">
                                    </json-to-ui-template>
                                </b-field>
                                <div class="pb-6"></div>
                            </div>
                        </b-tab-item>

                    </b-tabs>
                
            </div>
        </div>
    </div>
</body>

<script type="module" src="main.js"></script>

</html>