fix #12

index.html

@@ -54,6 +54,8 @@
         <!-- <label><input type="range" id="joint_radius" min="1" max="16" value="4" />Joint Radius</label> -->
         <label><input type="range" id="limb_width" min="1" max="16" value="4" />Limb Width</label>
         <label><input type="checkbox" id="elliptic_limbs" checked />Elliptic Limbs</label>
+        <div>- Others</div>
+        <label><input type="checkbox" id="low_fps" />Low fps</label>
       </div>
     </div>
     <div id="body_indicator2"></div>

javascript/lazyload/posex-webui.js

@@ -142,6 +142,10 @@ const { init, init_3d } = await _import();
         const elliptic_limbs_label = $('label');
         const elliptic_limbs = $('input'); elliptic_limbs.type = 'checkbox'; elliptic_limbs.classList.add('posex_joints', 'posex_elliptic_limbs'); elliptic_limbs.checked = true;
         elliptic_limbs_label.append(elliptic_limbs, document.createTextNode('Elliptic Limbs'));
+        const other_marker = $('div'); other_marker.textContent = '- Others';
+        const low_fps_label = $('label');
+        const low_fps = $('input'); low_fps.type = 'checkbox'; low_fps.classList.add('posex_low_fps', 'posex_others'); low_fps.checked = false;
+        low_fps_label.append(low_fps, document.createTextNode('Low fps'));
 
         const setting_cont = $('div');
         setting_cont.classList.add('posex_setting_cont');
@@ -159,6 +163,8 @@ const { init, init_3d } = await _import();
             joint_marker,
             limb_width_label,
             elliptic_limbs_label,
+            other_marker,
+            low_fps_label,
         );
 
         const canvas_cont = $('div');
@@ -247,6 +253,7 @@ const { init, init_3d } = await _import();
             reset_bg,
             limb_width,
             elliptic_limbs,
+            low_fps,
             save,
             copy,
             save_pose,

js/app.js

@@ -94,6 +94,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         elliptic_limbs: document.querySelector('#elliptic_limbs'),
         //joint_radius: document.querySelector('#joint_radius'),
         limb_width: document.querySelector('#limb_width'),
+        low_fps: document.querySelector('#low_fps'),
         save: document.querySelector('#save_button'),
         copy: document.querySelector('#copy_button'),
         save_pose: document.querySelector('#save_pose'),

js/posex.js

@@ -607,9 +607,22 @@ function init_3d(ui) {
         mesh.geometry.setPoints(limb_vecs, elliptic_limbs ? elliptic_limb_width : stick_limb_width);
     }
 
+    let low_fps = ui.low_fps ? !!ui.low_fps.checked : false;
+    if (ui.low_fps)
+        ui.low_fps.addEventListener('change', () => {
+            low_fps = !!ui.low_fps.checked;
+        }, false);
+
     let last_zoom = camera.zoom;
     let running = true;
+    //const frames = [0,0,0,0,0,0,0,0,0,0], frame_index = 0;
+    let last_tick = globalThis.performance.now();
     const animate = () => {
+        const t0 = globalThis.performance.now();
+        //frames[(frame_index++)%frames.length] = t0 - last_tick;
+        //last_tick = t0;
+        //console.log(frames.reduce((acc, cur) => acc + cur) / frames.length);
+
         requestAnimationFrame(animate);
         if (!running) return;
 
@@ -620,6 +633,9 @@ function init_3d(ui) {
         }
         controls.update();
 
+        if (low_fps && t0 - last_tick < 30) return; // nearly 30fps
+        last_tick = t0;
+
         for (let [name, body] of bodies) {
             const { joints, limbs, group } = body;