chromium/native_client_sdk/src/gonacl_appengine/static/earth/index.html

<!DOCTYPE html>
<html>
  <!--
  Copyright 2013 The Chromium Authors
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
  <head>
    <meta charset="UTF-8">

    <title>Multi-Threaded Raycasted Earth</title>

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
    <link href="/static/css/out/site.css" rel="stylesheet">
    <meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">

    <script type="text/javascript" src="example.js"></script>

  </head>

  <body class="demo">

    <header>
      <h1>Multi-Threaded Raycasted Earth</h1>

    </header>

    <section>
      <div class="intro">
        <p>
          An example of using multiple threads to render the globe through ray-tracing.
        </p>
        <p class="note">
          Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/earth</tt>).
        </p>
        <p class="note">
          FPS: <span id="fps">0</span>
        </p>

        <div class="panel panel-info">

          <h2>Controls</h2>

          <div class="panel-body">
            <table id="config" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td class="name">Thread Count:</td>
                  <td class="value">

                    <select id="threadCount">
                      <option value="0">Main Thread only</option>
                      <option value="1">1 Thread</option>
                      <option value="2" selected="selected">2 Threads</option>
                      <option value="4">4 Threads</option>
                      <option value="6">6 Threads</option>
                      <option value="8">8 Threads</option>
                      <option value="12">12 Threads</option>
                      <option value="24">24 Threads</option>
                      <option value="32">32 Threads</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="name">Zoom:</td>
                  <td class="value">
                    <input type="range" id="zoomRange"
                        min="1.0" max="50.0" step="0.5" value="14.0">
                  </td>
                </tr>
                <tr>
                  <td class="name">Light:</td>
                  <td class="value">
                    <input type="range" id="lightRange"
                        min="0.2" max="2.0" step=".01" value="1.0">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <p class="credit">
          <b>Image Credit:</b>
          NASA Goddard Space Flight Center Image by Reto Stöckli (land
          surface, shallow water, clouds). Enhancements by Robert Simmon
          (ocean color, compositing, 3D globes, animation).
          <br/>
          <b>Data and technical support:</b> MODIS Land Group; MODIS Science Data,
          Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional
          data: USGS EROS Data Center (topography); USGS Terrestrial Remote
          Sensing Flagstaff Field Center (Antarctica); Defense Meteorological
          Satellite Program (city lights).
        </p>
      </div>

      <div class="Demo-body">

      <div id="listener" class="Demo-content"></div>
    </div>

    <div id="loading-cover">
        <div id="message">
          <div id="statusField"></div>
          <div id="progress" class="progress progress-striped active">
            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            </div>
          </div>
        </div>
      </div>
  </section>

</body>
</html>