examples/pbr.html

<!--
/*
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; - Physically Based Rendering Materials</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no,
  minimum-scale=1.0, maximum-scale=1.0">
  <link type="text/css" href="styles/examples.css" rel="stylesheet" />

  <!-- The following libraries and polyfills are recommended to maximize browser support -->
  <!-- Include prismatic.js for Magic Leap support: -->
  <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->

  <!-- Web Components polyfill is required to support Edge and Firefox < 63: -->
  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  <!-- Intersection Observer polyfill is required for Safari and IE11 -->
  <script src="../node_modules/intersection-observer/intersection-observer.js"></script>

  <!-- Resize Observer polyfill is required for non-Chrome browsers: -->
  <script src="../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>

  <!-- Fullscreen polyfill is required to support all stable browsers: -->
  <script src="../node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>
</head>
<body>
    <div id="container">
        <h1>&lt;model-viewer&gt; - Physically Based Rendering Materials</h1>
        <div class="desc">
            <p>This page includes several sample usages of the <code>&lt;model-viewer&gt;</code> element using higher-resolution models with multiple (normal, ambient occlusion, bump) maps with physically-based materials, and environment maps.</p>
        </div>

        <lazy-inject>
            <div class="heavy-bandwidth-warning">
                <p>These examples use 16MB+ of assets. A local web server or landline connection is recommended.</p>
                <paper-button raised id="load-examples">Load examples</paper-button>
            </div>
            <template slot="lazy">
                <demo-snippet>
                    <template>
                        <model-viewer
                          src="assets/DamagedHelmet/DamagedHelmet.gltf"
                          controls auto-rotate
                          background-image="assets/small_hangar_01_1k.jpg">
                        </model-viewer>
                    </template>
                </demo-snippet>

                <demo-snippet>
                    <h2>Barramundi Fish</h2>
                    <template>
                        <model-viewer
                          src="assets/BarramundiFish/glTF-Binary/BarramundiFish.glb"
                          controls auto-rotate
                          background-image="assets/whipple_creek_regional_park_04_1k.jpg">
                        </model-viewer>
                    </template>
                </demo-snippet>
            </template>
        </lazy-inject>

        <div class="attribution">
          Barramundi Fish by <a href="https://www.microsoft.com/">Microsoft</a>,
          licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC-0</a>
          (<a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/BarramundiFish">source</a>)
        </div>
        <div class="attribution">
          Damaged Helmet by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_</a>,
          licensed under Creative Commons Attribution-NonCommercial
          (<a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">source</a>)
        </div>
        <div class="attribution">
          small_hangar_01_1k.jpg by <a href="https://hdrihaven.com">HDRI Haven</a>
          licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
          (<a href="https://hdrihaven.com/hdri/?h=small_hangar_01">source</a>)
        </div>
        <div class="attribution">
          whipple_creek_regional_park_04_1k.jpg by <a href="https://hdrihaven.com">HDRI Haven</a>
          licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
          (<a href="https://hdrihaven.com/hdri/?h=whipple_creek_regional_park_04">source</a>)
        </div>
    <script src="./scripts/helpers.js"></script>
    <script src="./scripts/lazy-inject.js"></script>
    <script src="./built/dependencies.js"></script>
    <script src="../dist/model-viewer.js"></script>
    <script>
        $('#load-examples').addEventListener('click', e => {
            // Let the button animation play for a moment before
            // replacing the content
            setTimeout(() => $('lazy-inject').inject(), 100);
        });
    </script>
</body>
</html>