Skip to content

Commit 1db4479

Browse files
DancingPhoenix88DancingPhoenix88
committed
v8.2b: Just add opacity:0.8 => 200 balls @ 30FPS
Now we add opacity to control "light" to mimic 3D space. By setting opacity = 1, frame rate is high as v8.2 (Later drawn balls will overwrite drawn balls). By setting opacity = 0.8, frame rate is very unstable, can not even animate 200 balls at 30 FPS smoothly. Tab 'Performance' shows that CPU consumption is as low as v8.2, because logic stays the same, but GPU takes a lot of time. After digging many other tools (Layers, Tracing, Performance monitor, and other browsers like Safari & Firefox too), I can not find the exact root cause for this behavior in details. But I know there's something wrong from GPU side.
1 parent c82907d commit 1db4479

2 files changed

Lines changed: 2 additions & 1 deletion

File tree

‎index_3d.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
border-radius: 25px;
1313
background-image: radial-gradient(#07f4ff, #0e91ce);
1414
box-shadow: 0 0 10px 0px #1ef2fe;
15+
opacity: 0.8;
1516
}
1617

1718
#inputContainer {
@@ -56,7 +57,7 @@
5657
'use strict';
5758
window.onload = function () {
5859
// Adjustment parameters (target: 60FPS)
59-
const MOVERS_COUNT = 1000;
60+
const MOVERS_COUNT = 200;
6061
var updateFunc = update_v8; // to select different algorithm
6162
//----------------------------------------------------------------------------------------------
6263
// Program parameters

‎screenshots/animate-3d/v8.2b-200 balls.png‎

1.79 MB
Loading

0 commit comments

Comments
 (0)