diff --git a/README.txt b/README.txt index 3785770..0e8beab 100644 --- a/README.txt +++ b/README.txt @@ -8,7 +8,6 @@ Release: + Do not copy memory to wasm, instead use wasm memory to store data in the first place + SIMD for LOD? + Multithreading for LOD - - Move BVH to WASM side - Z-prepass fringe bug (also, when do we enable the prepass?) - Textured quads (pictures, code already written in older version) - Resize and move pictures (draw handles) @@ -38,7 +37,7 @@ Release: + Follow player + Color picker (or at the very least an Open Color color pallete) + EYE DROPPER! - * Dynamic svg cursor to represent the brush + + Dynamic svg cursor to represent the brush - Eraser - Line drawing - Undo/redo @@ -66,8 +65,9 @@ Bonus: - Move whole curve - Move single point - Move multiple points - - Customizable background - - Color, textures, procedural + * Customizable background + + Dots pattern + * Grid pattern Bonus-bonus: - Actually infinite canvas (replace floats with something, some kind of fixed point scheme? chunks? multilevel scheme?) diff --git a/client/index.js b/client/index.js index c686b5e..5333281 100644 --- a/client/index.js +++ b/client/index.js @@ -266,6 +266,8 @@ async function main() { 'gpu_timer_ext': null, 'active_image': null, + 'last_frame_ts': 0, + 'last_frame_dt': 0, }; load_player_cursor_template(state); diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 9b9e83b..5862f82 100644 --- a/client/webgl_draw.js +++ b/client/webgl_draw.js @@ -1,7 +1,7 @@ -function schedule_draw(state, context) { +function schedule_draw(state, context, animate = false) { if (!state.timers.raf) { - window.requestAnimationFrame(async () => { - await draw(state, context); + window.requestAnimationFrame(async (ts) => { + await draw(state, context, animate, ts); }); state.timers.raf = true; } @@ -76,9 +76,12 @@ function draw_html(state) { } -async function draw(state, context) { +async function draw(state, context, animate, ts) { + const dt = ts - context.last_frame_ts; const cpu_before = performance.now(); + context.last_frame_ts = ts; + const gl = context.gl; const width = window.innerWidth; const height = window.innerHeight; @@ -346,14 +349,18 @@ async function draw(state, context) { } if (state.canvas.target_zoom != state.canvas.zoom) { - update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom); - schedule_draw(state, context); + update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom, animate ? dt : context.last_frame_dt); + schedule_draw(state, context, true); } + + context.last_frame_dt = dt; } -function update_canvas_zoom(state, current, target) { +function update_canvas_zoom(state, current, target, dt) { + const rate = Math.min(1.0, dt / 16.66 * 0.2); + if (Math.abs(1.0 - current / target) > 0.01) { - state.canvas.zoom = current + (target - current) * 0.2; + state.canvas.zoom = current + (target - current) * rate; } else { state.canvas.zoom = target; }