Hugging Face's logo

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

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +8 -44
index.html CHANGED
@@ -14,19 +14,12 @@
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,11 +34,6 @@
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,46 +41,22 @@
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>
 
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
  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
  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>