examples/pbr.html

<!--
/* @license
 * 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" />
  <link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>

  <!-- The following libraries and polyfills are recommended to maximize browser support -->

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

  <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
  <script src="../node_modules/intersection-observer/intersection-observer.js"></script>

  <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
  <script src="../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script>

  <!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->
  <script src="../node_modules/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>

  <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
  <script src="../node_modules/focus-visible/dist/focus-visible.js" defer></script>

  <!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
  <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->


</head>
<body>

  <div class="sample">
    <div class="content">

      <div id="header">
        <a class="icon-button icon-modelviewer" href="../index.html"></a>
        <a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/rendering-showcase.html"></a>
      </div>

      <div class="wrapper">

        <h2 class="demo-title"><span class="attribute">&lt;model-viewer&gt;</span>
        use high-resolution models with multiple maps (normal, ambient occlusion,
        bump) with physically-based materials, and HDR environment maps.</h2>

        <example-snippet stamp-to="demo-container-1" highlight-as="html">
          <template>
  <model-viewer
    src="assets/DamagedHelmet/DamagedHelmet.gltf"
    alt="A 3D model of a damaged helmet depicted within a hangar"
    camera-controls auto-rotate
    background-image="assets/aircraft_workshop_01_1k.hdr">
  </model-viewer>
          </template>
        </example-snippet>

      </div>

    </div>

    <div class="demo" id="demo-container-1"></div>

  </div>

  <div class="sample">
    <div class="content">
      <div class="wrapper">

        <h2 class="demo-title"><span class="attribute">&lt;model-viewer&gt;</span>
        use high-resolution models with multiple maps (normal, ambient occlusion,
        bump) with physically-based materials, and HDR environment maps.</h2>

        <example-snippet stamp-to="demo-container-2" highlight-as="html">
          <template>
    <model-viewer
      src="assets/glTF-Sample-Models/2.0/AntiqueCamera/glTF/AntiqueCamera.gltf"
      alt="A 3D model of a rubber duck depicted on a pier"
      camera-controls auto-rotate
      background-image="assets/music_hall_01_1k.hdr">
    </model-viewer>
            </template>
          </example-snippet>

        </div>
      </div>
      <div class="demo" id="demo-container-2"></div>
    </div>


    <div class="footer">
      <ul>
        <li class="attribution">
          <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/BarramundiFish">Antique Camera</a> by <a href="https://www.ux3d.io/">UX3D</a>,
          licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC-0</a>
        </li>
        <li class="attribution">
          <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">Damaged Helmet</a> by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_</a>,
          licensed under Creative Commons Attribution-NonCommercial
        </li>
      </ul>
      <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
    </div>

    <script src="./scripts/helpers.js"></script>

    <!-- Documentation-specific dependencies: -->
    <script type="module"
        src="./built/dependencies.js">
    </script>
    <script nomodule
        src="./built/dependencies-legacy.js">
    </script>

    <!-- Loads <model-viewer> only on modern browsers: -->
    <script type="module"
        src="../dist/model-viewer.js">
    </script>

    <!-- Loads <model-viewer> only on old browsers like IE11: -->
    <script nomodule
        src="../dist/model-viewer-legacy.js">
    </script>
</body>
</html>