lzy
/
threepipe


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ThreePipe Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
        }

        .root-container {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }

        .hamburger {
            position: absolute;
            background: transparent;
            border: none;
            top: 0.25rem;
            right: 0.5rem;
            font-size: 1.75rem;
            padding: 0.5rem;
            color: #bbb;
        }

        .hamburger:hover {
            color: #fff;
        }

        .sidebar {
            max-width: min(320px, 30%);
            height: 100%;
            background: #1a1a1c;
            color: #bbb;
            padding: 1rem 1rem;
            box-sizing: border-box;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: relative;
        }

        .sidebar h1 {
            color: #ddd;
            font-size: 1.5rem;
            margin: 0 3rem 1rem 0;
            font-weight: normal;
            padding: 0;
        }

        .sidebar h1 a {
            color: #58a6ff;
            text-decoration: none;
        }

        .sidebar h1 a:hover {
            color: #eee;
        }

        .sidebar h2 {
            font-size: 1.2rem;
            margin: 0 0 0.5rem 0.25rem;
            font-weight: normal;
            padding: 0;
        }

        .sidebar ul {
            font-size: 1rem;
            list-style: none;
            padding: 0 0 0 1rem;
            margin: 0 0 1rem;
            display: flex;
            flex-direction: column;
            font-weight: normal;
            gap: 0.6rem;
        }

        .sidebar ul li a {
            color: #58a6ff;
            text-underline-offset: 0.25rem;
            text-decoration: none;
            transition: color 0.25s ease-in-out;
        }

        .sidebar ul li a:hover {
            color: #eee;
        }

        .sidebar ul li a.selected {
            color: #fff;
            font-weight: bold;
            text-decoration: underline;
        }

        .iframe-container {
            flex: 1;
            height: 100%;
            overflow: hidden;
        }

        .iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .closed > ul {
            display: none;
        }

        .closed > h1 {
            display: none;
        }

        .closed > h2 {
            display: none;
        }

        .closed.sidebar{
            padding: 1.75rem;
        }
        .closed:before{
            content: attr(data-selected-example);
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 3.3rem;
            color: #58a6ff;
            font-size: 1.25rem;
            text-align: center;
            vertical-align: middle;
            line-height: 3.25rem;
            writing-mode: vertical-lr;
            text-orientation: upright;
        }


        @media only screen and (max-width: 768px) {
            .root-container {
                flex-direction: column;
            }
            .sidebar{
                max-width: 100%;
                height: auto;
                max-height: 50%;
                padding: 1rem;
                position: relative;
            }
            .hamburger{
                padding: 0.25rem;
            }
            .closed:before{
                width: 100%;
                height: 3rem;
                writing-mode: unset;
                text-orientation: unset;
            }
        }


    </style>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const hamburger = document.querySelector('.hamburger');
            const sidebar = document.querySelector('.sidebar');
            hamburger.addEventListener('click', () => {
                sidebar.classList.toggle('closed');
            });

            const iframe = document.querySelector('#example-iframe');
            const links = document.querySelectorAll('li>a');
            let selected = document.querySelector('a.selected');

            function selectTarget(target) {
                selected.classList.remove('selected');
                target.classList.add('selected');
                selected = target;
                iframe.src = target.href;
                sidebar.dataset.selectedExample = target.innerText;
                window.location.hash = "#" + target.getAttribute("href").slice(2);
            }

            links.forEach(link => {
                link.onclick = (ev) => {
                    ev.preventDefault()
                    const target = ev.target;
                    selectTarget(target);
                }
            });

            const hash = window.location.hash.slice(1);
            if(hash){
                const target = document.querySelector(`a[href="./${hash}"]`);
                selectTarget(target || selected);
            }
            else selectTarget(selected);
        });
    </script>
</head>
<body>
<div class="root-container">
    <div class="sidebar" data-selected-example="Tweakpane Editor">
        <button class="hamburger"> &#9776;</button>
        <h1><a href="https://github.com/repalash/threepipe">ThreePipe</a> Examples</h1>
        <h2 class="category">Editors</h2>
        <ul>
            <li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
        </ul>
        <h2 class="category">Post-Processing</h2>
        <ul>
            <li><a href="./tonemap-plugin/">Tonemap Plugin </a></li>
            <li><a href="./frame-fade-plugin/">Frame Fade Plugin </a></li>
        </ul>
        <h2 class="category">Rendering</h2>
        <ul>
            <li><a href="./progressive-plugin/">Progressive Plugin </a></li>
            <li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
            <li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
            <li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
        </ul>
        <h2 class="category">Interaction</h2>
        <ul>
            <li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li>
            <li><a href="./camera-view-plugin/">Camera View (Animation) Plugin </a></li>
            <li><a href="./dropzone-plugin/">Dropzone (Drag & Drop) Plugin </a></li>
            <li><a href="./fullscreen-plugin/">FullScreen Plugin </a></li>
        </ul>
        <h2 class="category">Import</h2>
        <ul>
            <li><a href="./fbx-load/">FBX Load </a></li>
            <li><a href="./obj-mtl-load/">OBJ MTL Load </a></li>
            <li><a href="./gltf-load/">GLTF Load </a></li>
            <li><a href="./rhino3dm-load/">Rhino 3DM Load </a></li>
            <li><a href="./drc-load/">DRACO(DRC) Load </a></li>
            <li><a href="./hdr-load/">HDR Load </a></li>
            <li><a href="./exr-load/">EXR Load </a></li>
            <li><a href="./image-load/">Image(png, jpeg, svg, ico, webp, avif) Load </a></li>
            <li><a href="./usdz-load/">USDZ, USDA Load </a></li>
            <li><a href="./ply-load/">PLY Load </a></li>
            <li><a href="./stl-load/">STL Load </a></li>
            <li><a href="./ktx2-load/">KTX2 Load </a></li>
            <li><a href="./ktx-load/">KTX Load </a></li>
            <li><a href="./blend-load/">BLEND Load </a></li>
            <li><a href="./extra-importer-plugins/">Extra(3ds, 3mf, collada, amf, bvh, vox, gcode, mdd, pcd, tilt, wrl, ldraw, vtk, xyz) Load </a></li>
        </ul>
        <h2 class="category">Export</h2>
        <ul>
            <li><a href="./image-snapshot-export/">PNG, JPEG, WEBP Export<br/>(Image Snapshot) </a></li>
            <li><a href="./render-target-export/">EXR, PNG, JPEG, WEBP Export<br/>(Render Target Export) </a></li>
            <li><a href="./glb-export/">GLB Export </a></li>
            <li><a href="./pmat-material-export/">PMAT Material export </a></li>
        </ul>
        <h2 class="category">UI Config</h2>
        <ul>
            <li><a href="./material-uiconfig/">Material UI </a></li>
            <li><a href="./object-uiconfig/">Object UI </a></li>
            <li><a href="./camera-uiconfig/">Camera UI </a></li>
            <li><a href="./scene-uiconfig/">Scene UI </a></li>
            <li><a href="./viewer-uiconfig/">Viewer UI </a></li>
        </ul>
        <h2 class="category">Animation</h2>
        <ul>
            <li><a href="./gltf-animation-plugin/">glTF Animation Plugin </a></li>
            <li><a href="./popmotion-plugin/">Popmotion Plugin </a></li>
            <li><a href="./gltf-camera-animation/">glTF Camera Animation </a></li>
            <li><a href="./gltf-animation-page-scroll/">glTF Animation Page Scroll </a></li>
        </ul>
        <h2 class="category">Utils</h2>
        <ul>
            <li><a href="./hdri-ground-plugin/">HDRi Ground Plugin <br/>(Projected Skybox)</a></li>
            <li><a href="./render-target-preview/">Render Target Preview Plugin </a></li>
            <li><a href="./geometry-uv-preview/">Geometry UV Preview Plugin </a></li>
            <li><a href="./parallel-asset-import/">Parallel Asset Import </a></li>
            <li><a href="./obj-to-glb/">Convert OBJ to GLB </a></li>
            <li><a href="./3dm-to-glb/">Convert 3DM to GLB </a></li>
            <li><a href="./hdr-to-exr/">Convert HDR to EXR </a></li>
        </ul>
        <h2 class="category">Samples</h2>
        <ul>
            <li><a href="./html-sample/">HTML/JS Sample </a></li>
        </ul>
        <h2 class="category">Lights</h2>
        <ul>
            <li><a href="./directional-light/">Directional Light </a></li>
        </ul>
        <h2 class="category">Tests</h2>
        <ul>
            <li><a href="./multi-viewer-test/">Multiple Viewers Test </a></li>
            <li><a href="./gltf-transmission-test/">glTF Transmission Test </a></li>
            <li><a href="./gltf-transmission-test-msaa/">glTF Transmission Test + MSAA </a></li>
            <li><a href="./uint8-rgbm-hdr-test/">Uint8 RGBM HDR Test </a></li>
            <li><a href="./half-float-hdr-test/">Half-float HDR Test </a></li>
            <li><a href="./sphere-rgbm-test/">RGBM Test </a></li>
            <li><a href="./sphere-half-float-test/">Half Float Test </a></li>
            <li><a href="./sphere-msaa-test/">MSAA Test </a></li>
            <li><a href="./z-prepass/">Z-Prepass Test </a></li>
            <li><a href="./import-test/">Import Test</a></li>
        </ul>
    </div>
    <div class="iframe-container">
        <iframe id="example-iframe" src="./tweakpane-editor/" frameborder="0" allowfullscreen="allowfullscreen"
                allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *">
        </iframe>
    </div>
</div>
</body>