| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <!-- |
| 4 Copyright (c) 2014 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>Bullet Physics</title> |
| 12 |
| 13 <script type="text/javascript" src="NaClAM.js"></script> |
| 14 <script type="text/javascript" src="NaClAMBullet.js"></script> |
| 15 <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-de
mo-bullet/three.min.js"></script> |
| 16 <script type="text/javascript" src="scene.js"></script> |
| 17 <script type="text/javascript" src="world.js"></script> |
| 18 <script type="text/javascript" src="scenes.js"></script> |
| 19 |
| 20 <style> |
| 21 * { |
| 22 box-sizing: border-box; |
| 23 -webkit-font-smoothing:antialiased; |
| 24 } |
| 25 |
| 26 html, body { |
| 27 background: #FAFAFA; |
| 28 color: #444; |
| 29 font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-seri
f; |
| 30 height: 100%; |
| 31 line-height: 1.35; |
| 32 margin: 0; |
| 33 padding: 0; |
| 34 width: 100%; |
| 35 overflow: hidden; |
| 36 } |
| 37 |
| 38 .intro { |
| 39 background-color: #fff; |
| 40 border: 1px solid #ccc; |
| 41 border-radius: 4px; |
| 42 box-shadow: 0 1px 1px rgba(0,0,0,0.3); |
| 43 left: 8px; |
| 44 padding: 8px; |
| 45 position: absolute; |
| 46 text-align: center; |
| 47 top: 8px; |
| 48 z-index: 1000; |
| 49 } |
| 50 |
| 51 .Demo-body { |
| 52 bottom: 0; |
| 53 left: 0; |
| 54 position: absolute; |
| 55 right: 0; |
| 56 top: 0; |
| 57 } |
| 58 |
| 59 #rendererContainer { |
| 60 height: 100%; |
| 61 line-height: 0; |
| 62 width: 100%; |
| 63 } |
| 64 |
| 65 h1 { |
| 66 color: #666; |
| 67 font-size: 130%; |
| 68 font-weight: 600; |
| 69 letter-spacing: -0.05em; |
| 70 margin: 0; |
| 71 } |
| 72 |
| 73 p { |
| 74 margin: 1em 0; |
| 75 } |
| 76 |
| 77 a { |
| 78 color: #00A3D9; |
| 79 } |
| 80 |
| 81 .small { |
| 82 font-size: 75%; |
| 83 } |
| 84 |
| 85 .bottom-line { |
| 86 border-bottom: 1px solid #ccc; |
| 87 padding-bottom: 0.5em; |
| 88 } |
| 89 |
| 90 .controls { |
| 91 margin: 8px 0; |
| 92 } |
| 93 |
| 94 button { |
| 95 background: #777; |
| 96 color: #FFF; |
| 97 width: calc(100% - 20px); |
| 98 height: 35px; |
| 99 border-radius: 6px; |
| 100 border: none; |
| 101 margin-left: 10px; |
| 102 margin-right: 10px; |
| 103 margin-bottom: 4px; |
| 104 cursor: pointer; |
| 105 transition: background-color 0.2s ease-out; |
| 106 } |
| 107 |
| 108 button:hover { |
| 109 background: #333; |
| 110 } |
| 111 |
| 112 #loading-cover{ |
| 113 display: block; |
| 114 position: fixed; |
| 115 left: 0; |
| 116 top: 0; |
| 117 right: 0; |
| 118 bottom: 0; |
| 119 width: 100%; |
| 120 background-color: rgba(255, 255, 255, 0.8); |
| 121 } |
| 122 |
| 123 #message { |
| 124 bottom: 0; |
| 125 font-size: 44px; |
| 126 height: calc(1em + 80px); /* not perfect, but pretty close. */ |
| 127 left: 0; |
| 128 margin: auto; |
| 129 position: absolute; |
| 130 right: 0; |
| 131 text-align: center; |
| 132 top: 0; |
| 133 z-index: 10; |
| 134 } |
| 135 |
| 136 .demo #statusField { |
| 137 color: #444; |
| 138 font-weight: 700; |
| 139 width: 100%; |
| 140 letter-spacing: -0.06em; |
| 141 } |
| 142 |
| 143 #progress { |
| 144 margin: 20px auto; |
| 145 width: 300px; |
| 146 border-radius: 8px; |
| 147 background: #FFF; |
| 148 box-shadow: 0 3px 8px rgba(0,0,0,0.3); |
| 149 } |
| 150 |
| 151 .progress-bar { |
| 152 border-radius: 8px; |
| 153 height: 40px; |
| 154 background: #6DD900; |
| 155 transition: width 0.1s ease-out; |
| 156 } |
| 157 </style> |
| 158 |
| 159 </head> |
| 160 |
| 161 <body class="demo"> |
| 162 <section> |
| 163 <div class="intro"> |
| 164 <h1 class="bottom-line">Bullet Physics in PNaCl</h1> |
| 165 |
| 166 <div class="controls bottom-line"> |
| 167 <div><button type="button" id="jenga10">Block Tower (10 blocks)</butto
n></div> |
| 168 <div><button type="button" id="jenga20">Block Tower (20 blocks)</butto
n></div> |
| 169 <div><button type="button" id="randomCube250">Random Cubes (250)</butt
on></div> |
| 170 <div><button type="button" id="randomCube1000">Random Cubes (1000)</bu
tton></div> |
| 171 <div><button type="button" id="randomCube2000">Random Cubes (2000)</bu
tton></div> |
| 172 <div><button type="button" id="randomCylinder500">Random Cylinders (50
0)</button></div> |
| 173 <div><button type="button" id="randomShapes">Random Shapes</button></d
iv> |
| 174 <div><button type="button" id="reload">Reload Scene</button></div> |
| 175 </div> |
| 176 |
| 177 <p> |
| 178 <a href="https://gonativeclient.appspot.com/demo">More PNaCl Demos</a> |
| 179 </p> |
| 180 |
| 181 <p class="small"> |
| 182 Simulation Time: <span id="simulationTime">0</span>μs |
| 183 <br> |
| 184 FPS: <span id="fps">0</span> |
| 185 </p> |
| 186 </div> |
| 187 |
| 188 <div id="listener" class="Demo-body"> |
| 189 <div id="rendererContainer"></div> |
| 190 </div> |
| 191 |
| 192 <div id="loading-cover"> |
| 193 <div id="message"> |
| 194 <div id="statusField"></div> |
| 195 <div id="progress" class="progress progress-striped active"> |
| 196 <div id="progress-bar" class="progress-bar" role="progressbar" aria
-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> |
| 197 </div> |
| 198 </div> |
| 199 </div> |
| 200 </div> |
| 201 </section> |
| 202 |
| 203 <script type="text/javascript" src="main.js"></script> |
| 204 </body> |
| 205 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 140093007:
[NaCl SDK AppEngine] Add a fullscreen bullet demo. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src