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

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2013 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8   <head>
   9     <meta charset="UTF-8">
  10
  11     <title>Multi-Threaded Raycasted Earth</title>
  12
  13     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
  14     <link href="/static/css/out/site.css" rel="stylesheet">
  15
  16     <script type="text/javascript" src="example.js"></script>
  17
  18   </head>
  19
  20   <body class="demo">
  21
  22     <header>
  23       <h1>Multi-Threaded Raycasted Earth</h1>
  24
  25     </header>
  26
  27     <section>
  28       <div class="intro">
  29         <p>
  30           An example of using multiple threads to render the globe through ray-tracing.
  31         </p>
  32         <p class="note">
  33           Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/earth</tt>).
  34         </p>
  35         <p class="note">
  36           FPS: <span id="fps">0</span>
  37         </p>
  38
  39         <div class="panel panel-info">
  40
  41           <h2>Controls</h2>
  42
  43           <div class="panel-body">
  44             <table id="config" cellspacing="0" cellpadding="0">
  45               <tbody>
  46                 <tr>
  47                   <td class="name">Thread Count:</td>
  48                   <td class="value">
  49
  50                     <select id="threadCount">
  51                       <option value="0">Main Thread only</option>
  52                       <option value="1">1 Thread</option>
  53                       <option value="2" selected="selected">2 Threads</option>
  54                       <option value="4">4 Threads</option>
  55                       <option value="6">6 Threads</option>
  56                       <option value="8">8 Threads</option>
  57                       <option value="12">12 Threads</option>
  58                       <option value="24">24 Threads</option>
  59                       <option value="32">32 Threads</option>
  60                     </select>
  61                   </td>
  62                 </tr>
  63                 <tr>
  64                   <td class="name">Zoom:</td>
  65                   <td class="value">
  66                     <input type="range" id="zoomRange"
  67                         min="1.0" max="50.0" step="0.5" value="14.0">
  68                   </td>
  69                 </tr>
  70                 <tr>
  71                   <td class="name">Light:</td>
  72                   <td class="value">
  73                     <input type="range" id="lightRange"
  74                         min="0.2" max="2.0" step=".01" value="1.0">
  75                   </td>
  76                 </tr>
  77               </tbody>
  78             </table>
  79           </div>
  80         </div>
  81
  82         <p class="credit">
  83           <b>Image Credit:</b>
  84           NASA Goddard Space Flight Center Image by Reto Stöckli (land
  85           surface, shallow water, clouds). Enhancements by Robert Simmon
  86           (ocean color, compositing, 3D globes, animation).
  87           <br/>
  88           <b>Data and technical support:</b> MODIS Land Group; MODIS Science Data,
  89           Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional
  90           data: USGS EROS Data Center (topography); USGS Terrestrial Remote
  91           Sensing Flagstaff Field Center (Antarctica); Defense Meteorological
  92           Satellite Program (city lights).
  93         </p>
  94       </div>
  95
  96       <div class="Demo-body">
  97
  98       <div id="listener" class="Demo-content"></div>
  99     </div>
 100
 101     <div id="loading-cover">
 102         <div id="message">
 103           <div id="statusField"></div>
 104           <div id="progress" class="progress progress-striped active">
 105             <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
 106             </div>
 107           </div>
 108         </div>
 109       </div>
 110   </section>
 111
 112 </body>
 113 </html>