Hugging Face's logo

Spaces:
awacke1
/
GPU-Memory-Detector-HTML5
Running

App Files Community
awacke1 commited on
Commit
788c035
·
1 Parent(s): 8229346

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +44 -8
index.html CHANGED
@@ -14,12 +14,19 @@
14
  width: 100%;
15
  height: 100%;
16
  }
 
 
 
 
 
 
17
  </style>
18
  </head>
19
  <body>
 
20
  <script>
21
  // Create a WebGL renderer
22
- var renderer = new THREE.WebGLRenderer();
23
  renderer.setSize(window.innerWidth, window.innerHeight);
24
  document.body.appendChild(renderer.domElement);
25
 
@@ -34,6 +41,11 @@
34
  var cube = new THREE.Mesh(geometry, material);
35
  scene.add(cube);
36
 
 
 
 
 
 
37
  // Detect the GPU memory and type
38
  var gl = renderer.getContext();
39
  var extension = gl.getExtension('WEBGL_debug_renderer_info');
@@ -41,22 +53,46 @@
41
  var type = gl.getParameter(extension.UNMASKED_RENDERER_WEBGL);
42
 
43
  // Display the GPU information
44
- var info = document.createElement('div');
45
  info.innerHTML = 'GPU Memory: ' + memory + '<br>GPU Type: ' + type;
46
- info.style.position = 'absolute';
47
- info.style.top = '10px';
48
- info.style.left = '10px';
49
- info.style.color = '#fff';
50
- document.body.appendChild(info);
51
 
52
- // Render the scene
 
 
 
 
 
 
 
53
  function render() {
54
  requestAnimationFrame(render);
55
  cube.rotation.x += 0.01;
56
  cube.rotation.y += 0.01;
 
 
 
 
 
 
 
 
 
 
57
  renderer.render(scene, camera);
 
 
 
58
  }
59
  render();
 
 
 
 
 
 
 
 
60
  </script>
 
61
  </body>
62
  </html>
 
14
  width: 100%;
15
  height: 100%;
16
  }
17
+ .info {
18
+ position: absolute;
19
+ top: 10px;
20
+ left: 10px;
21
+ color: #fff;
22
+ }
23
  </style>
24
  </head>
25
  <body>
26
+ <div class="info"></div>
27
  <script>
28
  // Create a WebGL renderer
29
+ var renderer = new THREE.WebGLRenderer({ antialias: true });
30
  renderer.setSize(window.innerWidth, window.innerHeight);
31
  document.body.appendChild(renderer.domElement);
32
 
 
41
  var cube = new THREE.Mesh(geometry, material);
42
  scene.add(cube);
43
 
44
+ // Create a raytracer
45
+ var raycaster = new THREE.Raycaster();
46
+ var mouse = new THREE.Vector2();
47
+ var intersects = [];
48
+
49
  // Detect the GPU memory and type
50
  var gl = renderer.getContext();
51
  var extension = gl.getExtension('WEBGL_debug_renderer_info');
 
53
  var type = gl.getParameter(extension.UNMASKED_RENDERER_WEBGL);
54
 
55
  // Display the GPU information
56
+ var info = document.querySelector('.info');
57
  info.innerHTML = 'GPU Memory: ' + memory + '<br>GPU Type: ' + type;
 
 
 
 
 
58
 
59
+ // Display the frames per second
60
+ var stats = new Stats();
61
+ stats.domElement.style.position = 'absolute';
62
+ stats.domElement.style.top = '10px';
63
+ stats.domElement.style.right = '10px';
64
+ document.body.appendChild(stats.domElement);
65
+
66
+ // Render the scene and handle mouse events
67
  function render() {
68
  requestAnimationFrame(render);
69
  cube.rotation.x += 0.01;
70
  cube.rotation.y += 0.01;
71
+
72
+ // Raytrace on mouse move
73
+ raycaster.setFromCamera(mouse, camera);
74
+ intersects = raycaster.intersectObjects(scene.children);
75
+ if (intersects.length > 0) {
76
+ intersects[0].object.material.color.set(0xff0000);
77
+ } else {
78
+ cube.material.color.set(0x00ff00);
79
+ }
80
+
81
  renderer.render(scene, camera);
82
+
83
+ // Display the frames per second
84
+ stats.update();
85
  }
86
  render();
87
+
88
+ // Handle mouse events
89
+ function onDocumentMouseMove(event) {
90
+ event.preventDefault();
91
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
92
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
93
+ }
94
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
95
  </script>
96
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
97
  </body>
98
  </html>