Compare commits
No commits in common. 'master' and 'infinite' have entirely different histories.
53 changed files with 1846 additions and 7051 deletions
@ -1,24 +0,0 @@
@@ -1,24 +0,0 @@
|
||||
This is free and unencumbered software released into the public domain. |
||||
|
||||
Anyone is free to copy, modify, publish, use, compile, sell, or |
||||
distribute this software, either in source code form or as a compiled |
||||
binary, for any purpose, commercial or non-commercial, and by any |
||||
means. |
||||
|
||||
In jurisdictions that recognize copyright laws, the author or authors |
||||
of this software dedicate any and all copyright interest in the |
||||
software to the public domain. We make this dedication for the benefit |
||||
of the public at large and to the detriment of our heirs and |
||||
successors. We intend this dedication to be an overt act of |
||||
relinquishment in perpetuity of all present and future rights to this |
||||
software under copyright law. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. |
||||
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR |
||||
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, |
||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
||||
OTHER DEALINGS IN THE SOFTWARE. |
||||
|
||||
For more information, please refer to <http://unlicense.org> |
||||
@ -1,116 +0,0 @@
@@ -1,116 +0,0 @@
|
||||
Release: |
||||
* Engine |
||||
+ Benchmark harness |
||||
+ Reuse points, pack "nodraw" in high bit of stroke id (probably have at least one more bit, so up to 4 flag configurations) |
||||
+ Draw dynamic data (strokes in progress) |
||||
+ Webassembly for core LOD generation |
||||
+ Webassembly for final buffers |
||||
+ Do not copy memory to wasm, instead use wasm memory to store data in the first place |
||||
+ SIMD for LOD? |
||||
+ Multithreading for LOD |
||||
+ Textured quads (pictures, code already written in older version |
||||
+ Resize and move pictures (draw handles) |
||||
+ Frame-independent lerp where applicable |
||||
- Dedup images on server, so we don't download the same image too many times |
||||
- No lag while downloading images |
||||
+ Bugs |
||||
+ GC stalls!!! |
||||
+ Stroke previews get connected when drawn without panning on touch devices |
||||
+ Redraw HTML (cursors) on local canvas moves |
||||
+ New strokes dissapear on the HMH desk |
||||
+ Undo history of moving and scaling images seems messed up |
||||
- Nothing get's drawn if we enable snapping and draw a curve where first and last point match |
||||
- Weird clipping on HMH desk full zoomout after running "benchmark" |
||||
- Stuck in color picker mode when mouse leaves screen |
||||
- Debug |
||||
* Debug view for BVH |
||||
- Restore ability to limit event range |
||||
* Listeners/events/multiplayer |
||||
+ Fix multiplayer LUL |
||||
+ Fix blinking own stroke inbetween SYN->server and SYN->client |
||||
+ Drag with mouse button 3 |
||||
+ Investigate skipped inputs on mobile (panning, zooming) [Events were not actually getting skipped. The stroke previews were just not being drawn] |
||||
+ Smooth zoom |
||||
+ Infinite background pattern |
||||
+ Be able to have multiple "current" strokes per player. In case of bad internet this can happen! |
||||
- Do NOT use session id as player id LUL |
||||
- Save events to indexeddb (as some kind of a blob), restore on reconnect and page reload |
||||
- Handle out of space |
||||
- Local prediction for tools! |
||||
- Immediately commit a stroke to the canvas, change order if earlier strokes arrive |
||||
- Show my own image immediately, show placeholders while images are loading (add bitmap size to event) |
||||
- undo immediately, this one can not arrive out of order, because noone else is going to undo MY actions |
||||
* Missing features I do not consider bonus |
||||
+ Player pointers |
||||
+ Pretty player pointers |
||||
+ Player list |
||||
+ Follow player |
||||
+ Color picker (or at the very least an Open Color color pallete) |
||||
+ EYE DROPPER! |
||||
+ Dynamic svg cursor to represent the brush |
||||
+ Eraser |
||||
* Line drawing |
||||
+ Live preview |
||||
~ Alignment (horizontal, vertical, diagonal, etc) [kinda gets covered by the snapping? question mark?] |
||||
+ Undo |
||||
+ Undo for eraser |
||||
+ Undo for images (add, move, scale) |
||||
- Redo |
||||
+ Snapping to grid |
||||
- Snapping to other points? |
||||
- Color picker should work for ruler |
||||
- Show previous color in color picker preview |
||||
- Stick picker preview to cursor |
||||
* Polish |
||||
+ Use typedvector where appropriate |
||||
- Show what's happening while the desk is loading (downloading, processing, uploading to gpu) |
||||
- Settings panel for config values (including the setting for "offline mode") |
||||
- Set up VAOs |
||||
- We are calling "geometry_prepare_stroke" twice for some reason |
||||
- Replace "geometry_add_dummy_stroke" with something not [so] cursed |
||||
+ Automatically extract locations from shaders (see nitka project for code examples) |
||||
- Presentation / "marketing" |
||||
- Title (InfiNotes? MegaDesk?) |
||||
- Icon |
||||
- Product page (github readme, demo videos) |
||||
|
||||
Bonus: |
||||
* Handle pressure |
||||
+ Add pressure data to quads |
||||
+ Account for pressure in quad/bbox calc |
||||
+ Adjust curve simplification to include pressure info |
||||
+ Migrate old non-pressure desks |
||||
+ Check out e.pressure on touch devices |
||||
- Send pressure in PREDRAW event |
||||
+ Stroke smoothing |
||||
- Curve modification |
||||
- Select curves (with a lasso?) |
||||
- Move whole curve |
||||
- Move single point |
||||
- Move multiple points |
||||
* Customizable background |
||||
+ Dots pattern |
||||
+ Grid pattern |
||||
- Menu option |
||||
- Offline mode |
||||
- Only one user |
||||
- No server, everything applied immediately |
||||
- Allow export to file |
||||
- Save to browser storage (probaby indexed db + recent events in localstorage) |
||||
|
||||
Bonus-bonus: |
||||
- Actually infinite canvas (replace floats with something, some kind of fixed point scheme? chunks? multilevel scheme?) |
||||
|
||||
Shiplist: |
||||
- Fix mess |
||||
- Redo |
||||
- User-friendly config |
||||
+ min 1px wide lines with transparency fade |
||||
- offline-only version |
||||
- select and manupulate curves with selection tool |
||||
- deduplicate pictures |
||||
- No lag while downloading images |
||||
- Show previous color in color picker preview |
||||
- Color picker should work for ruler |
||||
- Color picker precision and pick order seems off |
||||
+ Stuck in color picker mode when mouse leaves screen |
||||
@ -0,0 +1,100 @@
@@ -0,0 +1,100 @@
|
||||
function ui_offline() { |
||||
document.body.classList.add('offline'); |
||||
document.querySelector('.offline-toast').classList.remove('hidden'); |
||||
} |
||||
|
||||
function ui_online() { |
||||
document.body.classList.remove('offline'); |
||||
document.querySelector('.offline-toast').classList.add('hidden'); |
||||
} |
||||
|
||||
async function insert_image(state, context, file) { |
||||
const bitmap = await createImageBitmap(file); |
||||
|
||||
const p = { 'x': state.cursor.x, 'y': state.cursor.y }; |
||||
const canvasp = screen_to_canvas(state, p); |
||||
|
||||
canvasp.x -= bitmap.width / 2; |
||||
canvasp.y -= bitmap.height / 2; |
||||
|
||||
const form_data = new FormData(); |
||||
form_data.append('file', file); |
||||
|
||||
const resp = await fetch(`/api/image?deskId=${state.desk_id}`, { |
||||
method: 'post', |
||||
body: form_data, |
||||
}) |
||||
|
||||
if (resp.ok) { |
||||
const image_id = await resp.text(); |
||||
const event = image_event(image_id, canvasp.x, canvasp.y); |
||||
await queue_event(state, event); |
||||
} |
||||
} |
||||
|
||||
function event_size(event) { |
||||
let size = 1 + 3; // type + padding
|
||||
|
||||
switch (event.type) { |
||||
case EVENT.PREDRAW: { |
||||
size += 4 * 2; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.SET_COLOR: { |
||||
size += 4; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.SET_WIDTH: { |
||||
size += 2; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.STROKE: { |
||||
size += 4 + 2 + 2 + 4 + event.points.length * 4 * 2; // u32 stroke id + u16 (count) + u16 (width) + u32 (color + count * (f32, f32) points
|
||||
break; |
||||
} |
||||
|
||||
case EVENT.UNDO: |
||||
case EVENT.REDO: { |
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE: |
||||
case EVENT.IMAGE_MOVE: { |
||||
size += 4 + 4 + 4; // file id + x + y
|
||||
break; |
||||
} |
||||
|
||||
case EVENT.ERASER: { |
||||
size += 4; // stroke id
|
||||
break; |
||||
} |
||||
|
||||
default: { |
||||
console.error('fuck'); |
||||
} |
||||
} |
||||
|
||||
return size; |
||||
} |
||||
|
||||
function find_touch(touchlist, id) { |
||||
for (const touch of touchlist) { |
||||
if (touch.identifier === id) { |
||||
return touch; |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function find_image(state, image_id) { |
||||
for (let i = state.events.length - 1; i >= 0; --i) { |
||||
const event = state.events[i]; |
||||
if (event.type === EVENT.IMAGE && !event.deleted && event.image_id === image_id) { |
||||
return event; |
||||
} |
||||
} |
||||
} |
||||
@ -1,427 +0,0 @@
@@ -1,427 +0,0 @@
|
||||
function bvh_make_leaf(bvh, index, stroke) { |
||||
const leaf = { |
||||
'stroke_index': index, |
||||
'bbox': stroke.bbox, |
||||
'area': stroke.area, |
||||
'parent_index': null, |
||||
'is_leaf': true, |
||||
}; |
||||
|
||||
bvh.nodes.push(leaf); |
||||
|
||||
return bvh.nodes.length - 1; |
||||
} |
||||
|
||||
function bvh_make_internal(bvh) { |
||||
const node = { |
||||
'child1': null, |
||||
'child2': null, |
||||
'parent_index': null, |
||||
'is_leaf': false, |
||||
}; |
||||
|
||||
bvh.nodes.push(node); |
||||
|
||||
return bvh.nodes.length - 1; |
||||
} |
||||
|
||||
function bvh_compute_sah(bvh, new_leaf, potential_sibling, only_parent = false) { |
||||
let cost = 0; |
||||
let union_box; |
||||
|
||||
if (!only_parent) { |
||||
union_box = quad_union(new_leaf.bbox, potential_sibling.bbox); |
||||
|
||||
const internal_node_would_be = { 'bbox': union_box }; |
||||
const new_internal_node_cost = (union_box.x2 - union_box.x1) * (union_box.y2 - union_box.y1); |
||||
|
||||
cost += new_internal_node_cost; |
||||
} else { |
||||
union_box = new_leaf.bbox; |
||||
} |
||||
|
||||
let parent_index = potential_sibling.parent_index; |
||||
|
||||
while (parent_index !== null) { |
||||
const current_node = bvh.nodes[parent_index]; |
||||
const old_cost = current_node.area; |
||||
union_box = quad_union(current_node.bbox, union_box); |
||||
const new_cost = (union_box.x2 - union_box.x1) * (union_box.y2 - union_box.y1); |
||||
cost += new_cost - old_cost; |
||||
parent_index = current_node.parent_index; |
||||
} |
||||
|
||||
return cost; |
||||
} |
||||
|
||||
function bvh_find_best_sibling(bvh, leaf_index) { |
||||
// branch and bound
|
||||
|
||||
const leaf = bvh.nodes[leaf_index]; |
||||
const leaf_cost = (leaf.bbox.x2 - leaf.bbox.x1) * (leaf.bbox.y2 - leaf.bbox.y1); |
||||
|
||||
let best_cost = bvh_compute_sah(bvh, leaf, bvh.nodes[bvh.root]); |
||||
let best_index = bvh.root; |
||||
|
||||
bvh.pqueue.clear(); |
||||
bvh.pqueue.push(best_index, best_cost); |
||||
|
||||
while (bvh.pqueue.size > 0) { |
||||
const current_index = bvh.pqueue.pop(); |
||||
const current_node = bvh.nodes[current_index]; |
||||
const cost = bvh_compute_sah(bvh, current_node, leaf); |
||||
|
||||
if (cost < best_cost) { |
||||
best_cost = cost; |
||||
best_index = current_index; |
||||
} |
||||
|
||||
if (!current_node.is_leaf) { |
||||
const child1 = bvh.nodes[current_node.child1]; |
||||
const lower_bound_for_children = bvh_compute_sah(bvh, child1, leaf, true) + leaf_cost; |
||||
if (lower_bound_for_children < best_cost) { |
||||
bvh.pqueue.push(current_node.child1, lower_bound_for_children); |
||||
bvh.pqueue.push(current_node.child2, lower_bound_for_children); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return best_index; |
||||
} |
||||
|
||||
function bvh_add_stroke(state, bvh, index, stroke) { |
||||
const leaf_index = bvh_make_leaf(bvh, index, stroke); |
||||
|
||||
stroke.bvh_node = leaf_index; |
||||
|
||||
if (bvh.nodes.length === 1) { |
||||
bvh.root = leaf_index; |
||||
return; |
||||
} |
||||
|
||||
if (bvh.pqueue.capacity < Math.ceil(bvh.nodes.length * 1.2)) { |
||||
bvh.pqueue = new MinQueue(bvh.nodes.length * 2); |
||||
} |
||||
|
||||
// It's as easy as 1-2-3
|
||||
|
||||
// 1. Find best sibling for leaf
|
||||
const sibling = bvh_find_best_sibling(bvh, leaf_index); |
||||
|
||||
// 2. Create new parent
|
||||
const old_parent = bvh.nodes[sibling].parent_index; |
||||
const new_parent = bvh_make_internal(bvh); |
||||
|
||||
bvh.nodes[new_parent].parent_index = old_parent; |
||||
bvh.nodes[new_parent].bbox = quad_union(stroke.bbox, bvh.nodes[sibling].bbox); |
||||
|
||||
if (old_parent !== null) { |
||||
// The sibling was not the root
|
||||
if (bvh.nodes[old_parent].child1 === sibling) { |
||||
bvh.nodes[old_parent].child1 = new_parent; |
||||
} else { |
||||
bvh.nodes[old_parent].child2 = new_parent; |
||||
} |
||||
|
||||
bvh.nodes[new_parent].child1 = sibling; |
||||
bvh.nodes[new_parent].child2 = leaf_index; |
||||
|
||||
bvh.nodes[sibling].parent_index = new_parent; |
||||
bvh.nodes[leaf_index].parent_index = new_parent; |
||||
} else { |
||||
// The sibling was the root
|
||||
bvh.nodes[new_parent].child1 = sibling; |
||||
bvh.nodes[new_parent].child2 = leaf_index; |
||||
|
||||
bvh.nodes[sibling].parent_index = new_parent; |
||||
bvh.nodes[leaf_index].parent_index = new_parent; |
||||
|
||||
bvh.root = new_parent; |
||||
} |
||||
|
||||
const new_bbox = quad_union(bvh.nodes[bvh.nodes[new_parent].child1].bbox, bvh.nodes[bvh.nodes[new_parent].child2].bbox); |
||||
bvh.nodes[new_parent].bbox = new_bbox; |
||||
bvh.nodes[new_parent].area = (new_bbox.x2 - new_bbox.x1) * (new_bbox.y2 - new_bbox.y1); |
||||
|
||||
// 3. Refit and insert in fullnode
|
||||
let refit_index = bvh.nodes[leaf_index].parent_index; |
||||
while (refit_index !== null) { |
||||
const child1 = bvh.nodes[refit_index].child1; |
||||
const child2 = bvh.nodes[refit_index].child2; |
||||
|
||||
bvh.nodes[refit_index].bbox = quad_union(bvh.nodes[child1].bbox, bvh.nodes[child2].bbox); |
||||
|
||||
if (bvh.nodes[refit_index].is_fullnode) { |
||||
tv_add2(bvh.nodes[refit_index].stroke_indices, index); |
||||
} |
||||
|
||||
refit_index = bvh.nodes[refit_index].parent_index; |
||||
} |
||||
} |
||||
|
||||
function bvh_delete_stroke(state, stroke) { |
||||
let node = state.bvh.nodes[stroke.bvh_node]; |
||||
|
||||
while (node.parent_index !== null) { |
||||
if (node.is_fullnode) { |
||||
let index_index = tv_data(node.stroke_indices).indexOf(stroke.index); |
||||
if (index_index !== -1) { |
||||
node.stroke_indices.data[index_index] = node.stroke_indices.data[node.stroke_indices.size - 1]; |
||||
tv_pop(node.stroke_indices); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
node = state.bvh.nodes[node.parent_index]; |
||||
} |
||||
} |
||||
|
||||
function bvh_undelete_stroke(state, stroke) { |
||||
let node = state.bvh.nodes[stroke.bvh_node]; |
||||
|
||||
while (node.parent_index !== null) { |
||||
if (node.is_fullnode) { |
||||
tv_add2(node.stroke_indices, stroke.index); |
||||
break; |
||||
} |
||||
|
||||
node = state.bvh.nodes[node.parent_index]; |
||||
} |
||||
} |
||||
|
||||
function bvh_copy_fullnode(quad, node, result_buffer) { |
||||
if (quad_fully_inside(quad, node.bbox)) { |
||||
tv_append(result_buffer, tv_data(node.stroke_indices)); |
||||
return true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
function bvh_intersect_quad(state, bvh, quad, result_buffer) { |
||||
if (bvh.root === null) { |
||||
return; |
||||
} |
||||
|
||||
tv_clear(bvh.traverse_stack); |
||||
tv_add(bvh.traverse_stack, bvh.root); |
||||
|
||||
while (bvh.traverse_stack.size > 0) { |
||||
const node_index = tv_pop(bvh.traverse_stack); |
||||
const node = bvh.nodes[node_index]; |
||||
|
||||
if (!quads_intersect(node.bbox, quad)) { |
||||
continue; |
||||
} |
||||
|
||||
if (node.is_fullnode) { |
||||
const fully_inside = bvh_copy_fullnode(quad, node, result_buffer); |
||||
if (fully_inside) { |
||||
continue; |
||||
} |
||||
} |
||||
|
||||
if (node.is_leaf) { |
||||
if (state.events[node.stroke_index].deleted !== true) { |
||||
tv_add(result_buffer, node.stroke_index); |
||||
} |
||||
} else { |
||||
tv_add(bvh.traverse_stack, node.child1); |
||||
tv_add(bvh.traverse_stack, node.child2); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function bvh_clip(state, context) { |
||||
if (state.stroke_count === 0) { |
||||
return; |
||||
} |
||||
|
||||
tv_ensure(context.clipped_indices, round_to_pow2(state.stroke_count, 4096)) |
||||
tv_ensure(state.bvh.traverse_stack, round_to_pow2(state.stroke_count, 4096)); |
||||
|
||||
tv_clear(context.clipped_indices); |
||||
|
||||
const screen_topleft = screen_to_canvas(state, {'x': 0, 'y': 0}); |
||||
const screen_bottomright = screen_to_canvas(state, {'x': context.canvas.width, 'y': context.canvas.height}); |
||||
const screen_topright = { 'x': screen_bottomright.x, 'y': screen_topleft.y }; |
||||
const screen_bottomleft = { 'x': screen_topleft.x, 'y': screen_bottomright.y }; |
||||
|
||||
const screen = { |
||||
'x1': screen_topleft.x, |
||||
'y1': screen_topleft.y, |
||||
'x2': screen_bottomright.x, |
||||
'y2': screen_bottomright.y |
||||
}; |
||||
|
||||
bvh_intersect_quad(state, state.bvh, screen, context.clipped_indices); |
||||
|
||||
tv_data(context.clipped_indices).sort(); // we need to draw back to front still!
|
||||
} |
||||
|
||||
function bvh_point(state, p) { |
||||
const bvh = state.bvh; |
||||
const stack = []; |
||||
const indices = []; |
||||
|
||||
if (bvh.root === null) { |
||||
return null; |
||||
} |
||||
|
||||
stack.push(bvh.root); |
||||
|
||||
while (stack.length > 0) { |
||||
const node_index = stack.pop(); |
||||
const node = bvh.nodes[node_index]; |
||||
|
||||
if (!point_in_bbox(p, node.bbox)) { |
||||
continue; |
||||
} |
||||
|
||||
if (node.is_leaf) { |
||||
const stroke = state.events[node.stroke_index]; |
||||
const xs = state.wasm.buffers['xs'].tv.data.subarray(stroke.coords_from, stroke.coords_to); |
||||
const ys = state.wasm.buffers['ys'].tv.data.subarray(stroke.coords_from, stroke.coords_to); |
||||
const pressures = state.wasm.buffers['pressures'].tv.data.subarray(stroke.coords_from, stroke.coords_to); |
||||
|
||||
if (stroke.deleted !== true && point_in_stroke(p, xs, ys, pressures, stroke.width)) { |
||||
indices.push(node.stroke_index); |
||||
} |
||||
} else { |
||||
stack.push(node.child1); |
||||
stack.push(node.child2); |
||||
} |
||||
} |
||||
|
||||
if (indices.length > 0) { |
||||
indices.sort(); |
||||
return indices[indices.length - 1]; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function bvh_construct_rec(state, bvh, strokes, depth) { |
||||
if (strokes.length > 1) { |
||||
// internal
|
||||
let sorted_strokes; |
||||
|
||||
let min_x = strokes[0].bbox.cx; |
||||
let min_y = strokes[0].bbox.cy; |
||||
let max_x = strokes[0].bbox.cx; |
||||
let max_y = strokes[0].bbox.cy; |
||||
|
||||
for (let i = 0; i < strokes.length; ++i) { |
||||
const stroke = strokes[i]; |
||||
const cx = stroke.bbox.cx; |
||||
const cy = stroke.bbox.cy; |
||||
|
||||
if (cx < min_x) { |
||||
min_x = cx; |
||||
} |
||||
|
||||
if (cy < min_y) { |
||||
min_y = cx; |
||||
} |
||||
|
||||
if (cx > max_x) { |
||||
max_x = cx; |
||||
} |
||||
|
||||
if (cy > max_y) { |
||||
max_y = cy; |
||||
} |
||||
} |
||||
|
||||
const vertical = (max_y - min_y) > (max_x - min_x); |
||||
|
||||
if (vertical) { |
||||
sorted_strokes = [...strokes].sort(); |
||||
} else { |
||||
sorted_strokes = [...strokes].sort(); |
||||
} |
||||
|
||||
const node_index = bvh_make_internal(bvh); |
||||
const left_of_split_count = Math.floor(strokes.length / 2); |
||||
|
||||
const child1 = bvh_construct_rec(state, bvh, sorted_strokes.slice(0, left_of_split_count), depth + 1); |
||||
const child2 = bvh_construct_rec(state, bvh, sorted_strokes.slice(left_of_split_count, sorted_strokes.length), depth + 1); |
||||
|
||||
bvh.nodes[child1].parent_index = node_index; |
||||
bvh.nodes[child2].parent_index = node_index; |
||||
|
||||
bvh.nodes[node_index].child1 = child1; |
||||
bvh.nodes[node_index].child2 = child2; |
||||
bvh.nodes[node_index].bbox = quad_union(bvh.nodes[child1].bbox, bvh.nodes[child2].bbox); |
||||
|
||||
if (depth === config.bvh_fullnode_depth) { |
||||
const indices = tv_create(Int32Array, round_to_pow2(strokes.length, 32)); |
||||
|
||||
for (let i = 0; i < strokes.length; ++i) { |
||||
tv_add(indices, strokes[i].index); |
||||
} |
||||
|
||||
bvh.nodes[node_index].stroke_indices = indices; |
||||
bvh.nodes[node_index].is_fullnode = true; |
||||
} |
||||
|
||||
return node_index; |
||||
} else { |
||||
// leaf
|
||||
const leaf_index = bvh_make_leaf(bvh, strokes[0].index, strokes[0]); |
||||
state.events[strokes[0].index].bvh_node = leaf_index; |
||||
return leaf_index; |
||||
} |
||||
} |
||||
|
||||
function bvh_construct(state) { |
||||
const strokes = state.events.filter(e => e.type === EVENT.STROKE && e.deleted !== true); |
||||
if (strokes.length > 0) { |
||||
state.bvh.root = bvh_construct_rec(state, state.bvh, strokes, 0); |
||||
} |
||||
} |
||||
|
||||
function bvh_get_fullnodes_debug(state, context) { |
||||
const bvh = state.bvh; |
||||
const result = []; |
||||
const stack = []; |
||||
|
||||
const screen_topleft = screen_to_canvas(state, {'x': 0, 'y': 0}); |
||||
const screen_bottomright = screen_to_canvas(state, {'x': context.canvas.width, 'y': context.canvas.height}); |
||||
const screen_topright = { 'x': screen_bottomright.x, 'y': screen_topleft.y }; |
||||
const screen_bottomleft = { 'x': screen_topleft.x, 'y': screen_bottomright.y }; |
||||
|
||||
const quad = { |
||||
'x1': screen_topleft.x, |
||||
'y1': screen_topleft.y, |
||||
'x2': screen_bottomright.x, |
||||
'y2': screen_bottomright.y |
||||
}; |
||||
|
||||
if (bvh.root === null) { |
||||
return; |
||||
} |
||||
|
||||
stack.push({'depth': 0, 'node_index': bvh.root}); |
||||
|
||||
while (stack.length > 0) { |
||||
const entry = stack.pop(); |
||||
const node = bvh.nodes[entry.node_index]; |
||||
|
||||
if (!quads_intersect(node.bbox, quad)) { |
||||
continue; |
||||
} |
||||
|
||||
if (node.is_fullnode) { |
||||
result.push({...node.bbox}); |
||||
continue; |
||||
} |
||||
|
||||
if (!node.is_leaf && entry.depth < config.bvh_fullnode_depth) { |
||||
stack.push({'depth': entry.depth + 1, 'node_index': node.child1}); |
||||
stack.push({'depth': entry.depth + 1, 'node_index': node.child2}); |
||||
} |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
|
||||
@ -1,52 +0,0 @@
@@ -1,52 +0,0 @@
|
||||
const config = { |
||||
ws_url: `wss://${window.location.host}/ws/`, |
||||
ping_url: `https://${window.location.host}/api/ping`, |
||||
image_url: `https://${window.location.host}/images/`, |
||||
sync_timeout: 1000, |
||||
ws_reconnect_timeout: 2000, |
||||
brush_preview_timeout: 1000, |
||||
second_finger_timeout: 500, |
||||
// animation_decay: 16,
|
||||
animation_decay: 10, |
||||
vertical_zoom_speed_multiplier: 3, |
||||
debug_print: false, |
||||
draw_bvh: false, |
||||
draw_fullnodes: false, |
||||
zoom_delta: 0.05, |
||||
min_zoom_level: -275, |
||||
max_zoom_level: 200, |
||||
initial_offline_timeout: 1000, |
||||
default_color: 0x00, |
||||
default_width: 8, |
||||
bytes_per_instance: 4 * 2 + 4, // axy, stroke_id
|
||||
bytes_per_stroke: 2 * 3 + 2, // r, g, b, width
|
||||
initial_static_bytes: 4096 * 16, |
||||
initial_dynamic_bytes: 4096, |
||||
initial_wasm_bytes: 4096, |
||||
stroke_texture_size: 1024, // means no more than 1024^2 = 1M strokes in total (this is a LOT. HMH blackboard has like 80K)
|
||||
ui_texture_size: 16, |
||||
bvh_fullnode_depth: 6, |
||||
pattern_fadeout_min: 0.3, |
||||
pattern_fadeout_max: 0.75, |
||||
min_pressure: 50, |
||||
benchmark: { |
||||
zoom_level: -18, |
||||
offset: { x: 654, y: 372 }, |
||||
frames: 500, |
||||
}, |
||||
debug_force_lod: null, |
||||
demetri_ms: 40, |
||||
p: 'avg', |
||||
avg_window: 10, |
||||
|
||||
// WR is the weight ratio of the most recent point vs the oldest point used
|
||||
// to fit, linearly interpolated for the rest; 1.0 means even weighting of all
|
||||
// data, 5.0 means fitting the most recent point matters 5x in the optimization
|
||||
wr: 1.0, |
||||
|
||||
/* |
||||
* points of interest (desk/zoomlevel/x/y) |
||||
* 1/32/-2075/1020 |
||||
*/ |
||||
}; |
||||
|
||||
@ -0,0 +1,327 @@
@@ -0,0 +1,327 @@
|
||||
function on_down(e) { |
||||
const x = Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom); |
||||
const y = Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom); |
||||
|
||||
// Scroll wheel (mouse button 3)
|
||||
if (e.button === 1) { |
||||
// storage.state.moving = true;
|
||||
// storage.state.mousedown = true;
|
||||
return; |
||||
} |
||||
|
||||
// Right mouse button
|
||||
if (e.button === 2) { |
||||
const image_hit = image_at(x, y); |
||||
activate_image(image_hit); |
||||
e.preventDefault(); |
||||
return; |
||||
} |
||||
|
||||
// Left mouse button
|
||||
if (e.button === 0) { |
||||
const image_hit = image_at(x, y); |
||||
|
||||
if (elements.active_image !== null && image_hit !== null) { |
||||
const image_id = image_hit.getAttribute('data-image-id'); |
||||
const image_position = storage.images[image_id]; |
||||
storage.state.moving_image = true; |
||||
storage.moving_image_original_x = image_position.x; |
||||
storage.moving_image_original_y = image_position.y; |
||||
return; |
||||
} |
||||
|
||||
if (storage.state.moving) { |
||||
storage.state.mousedown = true; |
||||
return; |
||||
} |
||||
|
||||
storage.state.drawing = true; |
||||
|
||||
if (storage.ctx1.lineWidth !== storage.cursor.width) { |
||||
storage.ctx1.lineWidth = storage.cursor.width; |
||||
} |
||||
|
||||
storage.cursor.x = x; |
||||
storage.cursor.y = y; |
||||
|
||||
if (storage.tools.active === 'pencil') { |
||||
const predraw = predraw_event(x, y); |
||||
storage.current_stroke.push(predraw); |
||||
fire_event(predraw); |
||||
} else if (storage.tools.active === 'ruler') { |
||||
storage.ruler_origin.x = x; |
||||
storage.ruler_origin.y = y; |
||||
} |
||||
} |
||||
} |
||||
|
||||
function on_move(e) { |
||||
const last_x = storage.cursor.x; |
||||
const last_y = storage.cursor.y; |
||||
|
||||
const x = storage.cursor.x = Math.max(Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom), 0); |
||||
const y = storage.cursor.y = Math.max(Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom), 0); |
||||
|
||||
const old_offset_x = storage.canvas.offset_x; |
||||
const old_offset_y = storage.canvas.offset_y; |
||||
|
||||
if (elements.active_image && storage.state.moving_image) { |
||||
const dx = Math.round(e.movementX / storage.canvas.zoom); |
||||
const dy = Math.round(e.movementY / storage.canvas.zoom); |
||||
|
||||
const image_id = elements.active_image.getAttribute('data-image-id'); |
||||
|
||||
const ix = storage.images[image_id].x += dx; |
||||
const iy = storage.images[image_id].y += dy; |
||||
|
||||
elements.active_image.style.transform = `translate(${ix}px, ${iy}px)`; |
||||
|
||||
return; |
||||
} |
||||
|
||||
if (storage.state.drawing) { |
||||
if (storage.tools.active === 'pencil') { |
||||
const width = storage.cursor.width; |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(last_x, last_y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
|
||||
const predraw = predraw_event(x, y); |
||||
storage.current_stroke.push(predraw); |
||||
|
||||
fire_event(predraw); |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const erased = strokes_intersect_line(last_x, last_y, x, y); |
||||
storage.erased.push(...erased); |
||||
|
||||
if (erased.length > 0) { |
||||
for (const other_event of storage.events) { |
||||
for (const stroke_id of erased) { |
||||
if (stroke_id === other_event.stroke_id) { |
||||
if (!other_event.deleted) { |
||||
other_event.deleted = true; |
||||
const stats = stroke_stats(other_event.points, storage.cursor.width); |
||||
redraw_region(stats.bbox); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const old_ruler = [ |
||||
{'x': storage.ruler_origin.x, 'y': storage.ruler_origin.y}, |
||||
{'x': last_x, 'y': last_y} |
||||
]; |
||||
|
||||
const stats = stroke_stats(old_ruler, storage.cursor.width); |
||||
const bbox = stats.bbox; |
||||
|
||||
storage.ctx1.clearRect(bbox.xmin, bbox.ymin, bbox.xmax - bbox.xmin, bbox.ymax - bbox.ymin); |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(storage.ruler_origin.x, storage.ruler_origin.y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
} else if (storage.state.moving && storage.state.mousedown) { |
||||
storage.canvas.offset_x -= e.movementX; |
||||
storage.canvas.offset_y -= e.movementY; |
||||
|
||||
if (storage.canvas.offset_x !== old_offset_x || storage.canvas.offset_y !== old_offset_y) { |
||||
move_canvas(); |
||||
} |
||||
|
||||
// if (storage.canvas.offset_x > storage.canvas.max_scroll_x) storage.canvas.offset_x = storage.canvas.max_scroll_x;
|
||||
// if (storage.canvas.offset_x < 0) storage.canvas.offset_x = 0;
|
||||
// if (storage.canvas.offset_y > storage.canvas.max_scroll_y) storage.canvas.offset_y = storage.canvas.max_scroll_y;
|
||||
// if (storage.canvas.offset_y < 0) storage.canvas.offset_y = 0;
|
||||
} |
||||
|
||||
e.preventDefault(); |
||||
} |
||||
|
||||
async function on_up(e) { |
||||
if (storage.state.moving_image && e.button === 0) { |
||||
storage.state.moving_image = false; |
||||
const image_id = elements.active_image.getAttribute('data-image-id'); |
||||
const position = storage.images[image_id]; |
||||
// Store delta instead of new position for easy undo
|
||||
const event = image_move_event(image_id, position.x - storage.moving_image_original_x, position.y - storage.moving_image_original_y); |
||||
await queue_event(event); |
||||
storage.moving_image_original_x = null; |
||||
storage.moving_image_original_y = null; |
||||
return; |
||||
} |
||||
|
||||
if (storage.state.moving && (e.button === 1 || e.button === 0)) { |
||||
storage.state.mousedown = false; |
||||
if (!storage.state.spacedown) { |
||||
storage.state.moving = false; |
||||
return; |
||||
} |
||||
} |
||||
|
||||
if (storage.state.drawing && e.button === 0) { |
||||
if (storage.tools.active === 'pencil') { |
||||
const event = stroke_event(); |
||||
storage.current_stroke = []; |
||||
await queue_event(event); |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const events = eraser_events(); |
||||
storage.erased = []; |
||||
if (events.length > 0) { |
||||
for (const event of events) { |
||||
await queue_event(event); |
||||
} |
||||
} |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const event = ruler_event(storage.cursor.x, storage.cursor.y); |
||||
await queue_event(event); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
|
||||
storage.state.drawing = false; |
||||
|
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_keydown(e) { |
||||
if (e.code === 'Space' && !storage.state.drawing) { |
||||
storage.state.moving = true; |
||||
storage.state.spacedown = true; |
||||
return; |
||||
} |
||||
|
||||
if (e.code === 'KeyZ' && e.ctrlKey) { |
||||
undo(); |
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_keyup(e) { |
||||
if (e.code === 'Space' && storage.state.moving) { |
||||
storage.state.moving = false; |
||||
storage.state.spacedown = false; |
||||
} |
||||
} |
||||
|
||||
function on_leave(e) { |
||||
// TODO: broken when "moving"
|
||||
if (storage.state.moving) { |
||||
storage.state.moving = false; |
||||
storage.state.holding = false; |
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_resize(e) { |
||||
const width = window.innerWidth; |
||||
const height = window.innerHeight; |
||||
|
||||
elements.canvas0.width = elements.canvas1.width = width; |
||||
elements.canvas0.height = elements.canvas1.height = height; |
||||
|
||||
storage.ctx1.lineJoin = storage.ctx1.lineCap = storage.ctx0.lineJoin = storage.ctx0.lineCap = 'round'; |
||||
storage.ctx1.lineWidth = storage.ctx0.lineWidth = storage.cursor.width; |
||||
|
||||
redraw_region({'xmin': 0, 'xmax': width, 'ymin': 0, 'ymax': width}); |
||||
// storage.canvas.max_scroll_x = storage.canvas.width - window.innerWidth;
|
||||
// storage.canvas.max_scroll_y = storage.canvas.height - window.innerHeight;
|
||||
} |
||||
|
||||
async function on_drop(e) { |
||||
e.preventDefault(); |
||||
const file = e.dataTransfer.files[0]; |
||||
const bitmap = await createImageBitmap(file); |
||||
|
||||
const x = storage.cursor.x - Math.round(bitmap.width / 2); |
||||
const y = storage.cursor.y - Math.round(bitmap.height / 2); |
||||
|
||||
// storage.ctx0.drawImage(bitmap, x, y);
|
||||
|
||||
const form_data = new FormData(); |
||||
form_data.append('file', file); |
||||
|
||||
const resp = await fetch(`/api/image?deskId=${storage.desk_id}`, { |
||||
method: 'post', |
||||
body: form_data, |
||||
}) |
||||
|
||||
if (resp.ok) { |
||||
const image_id = await resp.text(); |
||||
const event = image_event(image_id, x, y); |
||||
await queue_event(event); |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
function on_wheel(e) { |
||||
return; |
||||
|
||||
const x = Math.round((e.clientX + storage.canvas.offset_x) / storage.canvas.zoom); |
||||
const y = Math.round((e.clientY + storage.canvas.offset_y) / storage.canvas.zoom); |
||||
|
||||
const dz = (e.deltaY < 0 ? 0.1 : -0.1); |
||||
|
||||
storage.canvas.zoom += dz; |
||||
|
||||
if (storage.canvas.zoom > storage.max_zoom) { |
||||
storage.canvas.zoom = storage.max_zoom; |
||||
return; |
||||
} |
||||
|
||||
if (storage.canvas.zoom < storage.min_zoom) { |
||||
storage.canvas.zoom = storage.min_zoom; |
||||
return; |
||||
} |
||||
|
||||
const zoom_offset_x = Math.round(dz * x); |
||||
const zoom_offset_y = Math.round(dz * y); |
||||
|
||||
storage.canvas.offset_x += zoom_offset_x; |
||||
storage.canvas.offset_y += zoom_offset_y; |
||||
|
||||
move_canvas(); |
||||
} |
||||
|
||||
function cancel(e) { |
||||
e.preventDefault(); |
||||
return false; |
||||
} |
||||
|
||||
function update_brush() { |
||||
elements.brush_preview.classList.remove('dhide'); |
||||
|
||||
const color = elements.brush_color.value; |
||||
const width = elements.brush_width.value; |
||||
|
||||
storage.cursor.color = color; |
||||
storage.cursor.width = width; |
||||
|
||||
const x = Math.round(storage.cursor.x - width / 2); |
||||
const y = Math.round(storage.cursor.y - width / 2); |
||||
|
||||
elements.brush_preview.style.transform = `translate(${x}px, ${y}px)`; |
||||
elements.brush_preview.style.width = width + 'px'; |
||||
elements.brush_preview.style.height = width + 'px'; |
||||
elements.brush_preview.style.background = color; |
||||
|
||||
if (storage.timers.brush_preview) { |
||||
clearTimeout(storage.timers.brush_preview); |
||||
} |
||||
|
||||
storage.timers.brush_preview = setTimeout(() => { |
||||
elements.brush_preview.classList.add('dhide'); |
||||
}, 1000); |
||||
} |
||||
@ -1,130 +0,0 @@
@@ -1,130 +0,0 @@
|
||||
// translated by esbuild to js. original typescript source MIT licensed at https://github.com/luciopaiva/heapify
|
||||
|
||||
const ROOT_INDEX = 1; |
||||
class MinQueue { |
||||
constructor(capacity = 64, keys = [], priorities = [], KeysBackingArrayType = Uint32Array, PrioritiesBackingArrayType = Uint32Array) { |
||||
this._capacity = capacity; |
||||
this._keys = new KeysBackingArrayType(capacity + ROOT_INDEX); |
||||
this._priorities = new PrioritiesBackingArrayType(capacity + ROOT_INDEX); |
||||
this._hasPoppedElement = false; |
||||
if (keys.length !== priorities.length) { |
||||
throw new Error("Number of keys does not match number of priorities provided."); |
||||
} |
||||
if (capacity < keys.length) { |
||||
throw new Error("Capacity less than number of provided keys."); |
||||
} |
||||
for (let i = 0; i < keys.length; i++) { |
||||
this._keys[i + ROOT_INDEX] = keys[i]; |
||||
this._priorities[i + ROOT_INDEX] = priorities[i]; |
||||
} |
||||
this.length = keys.length; |
||||
for (let i = keys.length >>> 1; i >= ROOT_INDEX; i--) { |
||||
this.bubbleDown(i); |
||||
} |
||||
} |
||||
get capacity() { |
||||
return this._capacity; |
||||
} |
||||
clear() { |
||||
this.length = 0; |
||||
this._hasPoppedElement = false; |
||||
} |
||||
bubbleUp(index) { |
||||
const key = this._keys[index]; |
||||
const priority = this._priorities[index]; |
||||
while (index > ROOT_INDEX) { |
||||
const parentIndex = index >>> 1; |
||||
if (this._priorities[parentIndex] <= priority) { |
||||
break; |
||||
} |
||||
this._keys[index] = this._keys[parentIndex]; |
||||
this._priorities[index] = this._priorities[parentIndex]; |
||||
index = parentIndex; |
||||
} |
||||
this._keys[index] = key; |
||||
this._priorities[index] = priority; |
||||
} |
||||
bubbleDown(index) { |
||||
const key = this._keys[index]; |
||||
const priority = this._priorities[index]; |
||||
const halfLength = ROOT_INDEX + (this.length >>> 1); |
||||
const lastIndex = this.length + ROOT_INDEX; |
||||
while (index < halfLength) { |
||||
const left = index << 1; |
||||
let childPriority = this._priorities[left]; |
||||
let childKey = this._keys[left]; |
||||
let childIndex = left; |
||||
const right = left + 1; |
||||
if (right < lastIndex) { |
||||
const rightPriority = this._priorities[right]; |
||||
if (rightPriority < childPriority) { |
||||
childPriority = rightPriority; |
||||
childKey = this._keys[right]; |
||||
childIndex = right; |
||||
} |
||||
} |
||||
if (childPriority >= priority) { |
||||
break; |
||||
} |
||||
this._keys[index] = childKey; |
||||
this._priorities[index] = childPriority; |
||||
index = childIndex; |
||||
} |
||||
this._keys[index] = key; |
||||
this._priorities[index] = priority; |
||||
} |
||||
push(key, priority) { |
||||
if (this.length === this._capacity) { |
||||
throw new Error("Heap has reached capacity, can't push new items"); |
||||
} |
||||
if (this._hasPoppedElement) { |
||||
this._keys[ROOT_INDEX] = key; |
||||
this._priorities[ROOT_INDEX] = priority; |
||||
this.length++; |
||||
this.bubbleDown(ROOT_INDEX); |
||||
this._hasPoppedElement = false; |
||||
} else { |
||||
const pos = this.length + ROOT_INDEX; |
||||
this._keys[pos] = key; |
||||
this._priorities[pos] = priority; |
||||
this.length++; |
||||
this.bubbleUp(pos); |
||||
} |
||||
} |
||||
pop() { |
||||
if (this.length === 0) { |
||||
return void 0; |
||||
} |
||||
this.removePoppedElement(); |
||||
this.length--; |
||||
this._hasPoppedElement = true; |
||||
return this._keys[ROOT_INDEX]; |
||||
} |
||||
peekPriority() { |
||||
this.removePoppedElement(); |
||||
return this._priorities[ROOT_INDEX]; |
||||
} |
||||
peek() { |
||||
this.removePoppedElement(); |
||||
return this._keys[ROOT_INDEX]; |
||||
} |
||||
removePoppedElement() { |
||||
if (this._hasPoppedElement) { |
||||
this._keys[ROOT_INDEX] = this._keys[this.length + ROOT_INDEX]; |
||||
this._priorities[ROOT_INDEX] = this._priorities[this.length + ROOT_INDEX]; |
||||
this.bubbleDown(ROOT_INDEX); |
||||
this._hasPoppedElement = false; |
||||
} |
||||
} |
||||
get size() { |
||||
return this.length; |
||||
} |
||||
dumpRawPriorities() { |
||||
this.removePoppedElement(); |
||||
const result = Array(this.length - ROOT_INDEX); |
||||
for (let i = 0; i < this.length; i++) { |
||||
result[i] = this._priorities[i + ROOT_INDEX]; |
||||
} |
||||
return `[${result.join(" ")}]`; |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
@ -1,36 +0,0 @@
@@ -1,36 +0,0 @@
|
||||
This is pdfTeX, Version 3.141592653-2.6-1.40.24 (TeX Live 2022/Debian) (preloaded format=pdflatex 2023.4.13) 27 APR 2023 21:39 |
||||
entering extended mode |
||||
restricted \write18 enabled. |
||||
%&-line parsing enabled. |
||||
**/code/desk2/client/index.js |
||||
(/code/desk2/client/index.js |
||||
LaTeX2e <2022-11-01> patch level 1 |
||||
L3 programming layer <2023-01-16> |
||||
|
||||
! LaTeX Error: Missing \begin{document}. |
||||
|
||||
See the LaTeX manual or LaTeX Companion for explanation. |
||||
Type H <return> for immediate help. |
||||
... |
||||
|
||||
l.1 d |
||||
ocument.addEventListener('DOMContentLoaded', main); |
||||
? |
||||
! Emergency stop. |
||||
... |
||||
|
||||
l.1 d |
||||
ocument.addEventListener('DOMContentLoaded', main); |
||||
You're in trouble here. Try typing <return> to proceed. |
||||
If that doesn't work, type X <return> to quit. |
||||
|
||||
|
||||
Here is how much of TeX's memory you used: |
||||
18 strings out of 476091 |
||||
566 string characters out of 5794081 |
||||
1849330 words of memory out of 5000000 |
||||
20499 multiletter control sequences out of 15000+600000 |
||||
512287 words of font info for 32 fonts, out of 8000000 for 9000 |
||||
1141 hyphenation exceptions out of 8191 |
||||
13i,0n,12p,112b,14s stack positions out of 10000i,1000n,20000p,200000b,200000s |
||||
! ==> Fatal error occurred, no output PDF file produced! |
||||
@ -1,49 +0,0 @@
@@ -1,49 +0,0 @@
|
||||
let thread_id = null; |
||||
let exports = null; |
||||
|
||||
async function init(tid, memory, heap_base) { |
||||
thread_id = tid; |
||||
|
||||
const result = await WebAssembly.instantiateStreaming(fetch('wasm/lod.wasm'), { |
||||
env: { 'memory': memory } |
||||
}); |
||||
|
||||
exports = result.instance.exports; |
||||
exports.set_sp(heap_base - thread_id * 16 * 4096); // 64K stack
|
||||
|
||||
postMessage({ 'type': 'init_done' }); |
||||
} |
||||
|
||||
function work(indices_base, indices_count, zoom, offsets) { |
||||
try { |
||||
exports.do_lod( |
||||
indices_base, indices_count, zoom, |
||||
offsets['coords_from'], |
||||
offsets['width'], |
||||
offsets['xs'], |
||||
offsets['ys'], |
||||
offsets['pressures'], |
||||
offsets['result_buffers'] + thread_id * 4, |
||||
offsets['result_counts'] + thread_id * 4, |
||||
offsets['result_batch_counts'] + thread_id * 4, |
||||
); |
||||
} catch (e) { |
||||
console.error('WASM:', e); |
||||
} |
||||
|
||||
postMessage({ 'type': 'lod_done' }); |
||||
} |
||||
|
||||
onmessage = (e) => { |
||||
const d = e.data; |
||||
|
||||
if (d.type === 'init') { |
||||
init(d.thread_id, d.memory, d.heap_base); |
||||
} else if (d.type === 'lod') { |
||||
work(d.indices_base, d.indices_count, d.zoom, d.offsets); |
||||
} else { |
||||
console.error('unexpected worker command:', d.type); |
||||
} |
||||
} |
||||
|
||||
|
||||
@ -1,9 +0,0 @@
@@ -1,9 +0,0 @@
|
||||
|
||||
<script> |
||||
async function getFile() { |
||||
// Open file picker and destructure the result the first handle |
||||
const [fileHandle] = await window.showOpenFilePicker(); |
||||
const file = await fileHandle.getFile(); |
||||
return file; |
||||
} |
||||
</script> |
||||
@ -1,264 +0,0 @@
@@ -1,264 +0,0 @@
|
||||
function ui_offline() { |
||||
document.body.classList.add('offline'); |
||||
document.querySelector('.offline-toast').classList.remove('hidden'); |
||||
} |
||||
|
||||
function ui_online() { |
||||
document.body.classList.remove('offline'); |
||||
document.querySelector('.offline-toast').classList.add('hidden'); |
||||
} |
||||
|
||||
async function insert_image(state, context, file) { |
||||
const bitmap = await createImageBitmap(file); |
||||
|
||||
const p = { 'x': state.cursor.x, 'y': state.cursor.y }; |
||||
const canvasp = screen_to_canvas(state, p); |
||||
|
||||
canvasp.x -= bitmap.width / 2; |
||||
canvasp.y -= bitmap.height / 2; |
||||
|
||||
const form_data = new FormData(); |
||||
form_data.append('file', file); |
||||
|
||||
const resp = await fetch(`/api/image?deskId=${state.desk_id}`, { |
||||
method: 'post', |
||||
body: form_data, |
||||
}) |
||||
|
||||
if (resp.ok) { |
||||
const image_id = await resp.text(); |
||||
const event = image_event(image_id, canvasp.x, canvasp.y, bitmap.width, bitmap.height); |
||||
queue_event(state, event); |
||||
} |
||||
} |
||||
|
||||
function event_size(event) { |
||||
let size = 4; // type
|
||||
|
||||
switch (event.type) { |
||||
case EVENT.PREDRAW: |
||||
case EVENT.MOVE_CURSOR: { |
||||
size += 4 * 2; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.MOVE_CANVAS: { |
||||
size += 4 * 2 + 4; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.ZOOM_CANVAS: { |
||||
size += 4 + 4 * 2; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.USER_JOINED: |
||||
case EVENT.LEAVE: |
||||
case EVENT.CLEAR: |
||||
case EVENT.LIFT: { |
||||
break; |
||||
} |
||||
|
||||
case EVENT.SET_COLOR: { |
||||
size += 4; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.SET_WIDTH: { |
||||
size += 2; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.STROKE: { |
||||
// u32 stroke id + u16 (count) + u16 (width) + u32 (color) + count * (f32, f32) points + count (u8) pressures
|
||||
size += 4 + 2 + 2 + 4 + event.points.length * 4 * 2 + round_to_pow2(event.points.length, 4); |
||||
break; |
||||
} |
||||
|
||||
case EVENT.UNDO: |
||||
case EVENT.REDO: { |
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE: |
||||
case EVENT.IMAGE_MOVE: { |
||||
size += 4 + 4 + 4 + 4 + 4; // file id + x + y + width + height
|
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE_SCALE: { |
||||
size += 4 + 4 + 4 + 4; // file_id + corner + x + y
|
||||
break; |
||||
} |
||||
|
||||
case EVENT.ERASER: { |
||||
size += 4; // stroke id
|
||||
break; |
||||
} |
||||
|
||||
default: { |
||||
console.error('fuck'); |
||||
} |
||||
} |
||||
|
||||
return size; |
||||
} |
||||
|
||||
function find_image(state, image_id) { |
||||
for (let i = state.events.length - 1; i >= 0; --i) { |
||||
const event = state.events[i]; |
||||
if (event.type === EVENT.IMAGE && !event.deleted && event.image_id === image_id) { |
||||
return event; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// TODO: move these to a file? TypedVector
|
||||
function tv_create(class_name, capacity) { |
||||
return { |
||||
'class_name': class_name, |
||||
'data': new class_name(capacity), |
||||
'capacity': capacity, |
||||
'size': 0, |
||||
}; |
||||
} |
||||
|
||||
function tv_create_on(class_name, capacity, buffer, offset) { |
||||
return { |
||||
'class_name': class_name, |
||||
'data': new class_name(buffer, offset, capacity), |
||||
'capacity': capacity, |
||||
'size': 0, |
||||
}; |
||||
} |
||||
|
||||
function tv_wrap(view) { |
||||
const result = tv_create_on(view.constructor, view.length, view.buffer, 0); |
||||
result.size = view.length; |
||||
return result; |
||||
} |
||||
|
||||
function tv_data(tv) { |
||||
return tv.data.subarray(0, tv.size); |
||||
} |
||||
|
||||
function tv_bytes(tv) { |
||||
return new Uint8Array(tv.data.buffer, 0, tv.size * tv.data.BYTES_PER_ELEMENT); |
||||
} |
||||
|
||||
function tv_ensure(tv, capacity) { |
||||
if (tv.capacity < capacity) { |
||||
const new_data = new tv.class_name(capacity); |
||||
new_data.set(tv_data(tv)); |
||||
tv.capacity = capacity; |
||||
tv.data = new_data; |
||||
} |
||||
} |
||||
|
||||
function tv_ensure_by(tv, by) { |
||||
tv_ensure(tv, round_to_pow2(tv.size + by, 4096)); |
||||
} |
||||
|
||||
function tv_add(tv, item) { |
||||
tv.data[tv.size++] = item; |
||||
} |
||||
|
||||
function tv_add2(tv, item) { |
||||
tv_ensure_by(tv, 1); |
||||
tv_add(tv, item); |
||||
} |
||||
|
||||
function tv_pop(tv) { |
||||
const result = tv.data[tv.size - 1]; |
||||
tv.size--; |
||||
return result; |
||||
} |
||||
|
||||
function tv_append(tv, typedarray) { |
||||
tv.data.set(typedarray, tv.size); |
||||
tv.size += typedarray.length; |
||||
} |
||||
|
||||
function tv_clear(tv) { |
||||
tv.size = 0; |
||||
} |
||||
|
||||
function HTML(html) { |
||||
const template = document.createElement('template'); |
||||
template.innerHTML = html.trim(); |
||||
return template.content.firstChild; |
||||
} |
||||
|
||||
function toggle_follow_player(state, player_id) { |
||||
document.querySelectorAll('.player-list .player').forEach(p => p.classList.remove('following')); |
||||
|
||||
if (state.following_player === null) { |
||||
state.following_player = player_id; |
||||
} else { |
||||
if (player_id === state.following_player) { |
||||
state.following_player = null; |
||||
} else { |
||||
state.following_player = player_id; |
||||
} |
||||
} |
||||
|
||||
const player_element = document.querySelector(`.player-list .player[data-player-id="${state.following_player}"]`); |
||||
if (player_element) player_element.classList.add('following'); |
||||
|
||||
send_follow(state.following_player); |
||||
} |
||||
|
||||
function insert_player_cursor(state, player_id) { |
||||
const color = random_bright_color_from_seed(parseInt(player_id)); |
||||
const path_copy = state.cursor_path.cloneNode(); |
||||
|
||||
path_copy.style.fill = color; |
||||
|
||||
const cursor = HTML(`<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="player-cursor" data-player-id="${player_id}">${path_copy.outerHTML}</svg>`); |
||||
const player = HTML(`<div class="player" data-player-id="${player_id}"><img src="icons/player.svg"></div>`); |
||||
|
||||
player.style.background = color; |
||||
|
||||
player.addEventListener('click', () => { |
||||
toggle_follow_player(state, player_id); |
||||
}); |
||||
|
||||
document.querySelector('.html-hud').appendChild(cursor); |
||||
document.querySelector('.player-list').appendChild(player); |
||||
|
||||
document.querySelector('.player-list').classList.remove('vhide'); |
||||
|
||||
return cursor; |
||||
} |
||||
|
||||
async function load_player_cursor_template(state) { |
||||
const resp = await fetch('icons/player-cursor.svg'); |
||||
const text = await resp.text(); |
||||
const parser = new DOMParser(); |
||||
const parsed_xml = parser.parseFromString(text, 'image/svg+xml'); |
||||
const path = parsed_xml.querySelector('path'); |
||||
|
||||
state.cursor_path = path; |
||||
} |
||||
|
||||
function get_image(context, key) { |
||||
for (const entry of context.images) { |
||||
if (entry.key === key) { |
||||
return entry; |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function grid_snap_step(state) { |
||||
const zoom_log2 = Math.log2(state.canvas.zoom); |
||||
const zoom_previous = Math.pow(2, Math.floor(zoom_log2)); |
||||
const zoom_next = Math.pow(2, Math.ceil(zoom_log2)); |
||||
|
||||
if (Math.abs(state.canvas.zoom - zoom_previous) < Math.abs(state.canvas.zoom - zoom_next)) { |
||||
return 32 / zoom_previous; |
||||
} else { |
||||
return 32 / zoom_next; |
||||
} |
||||
} |
||||
@ -1,278 +0,0 @@
@@ -1,278 +0,0 @@
|
||||
function worker_message(worker, message) { |
||||
return new Promise((resolve) => { |
||||
worker.onmessage = (e) => resolve(e.data); |
||||
worker.postMessage(message); |
||||
}); |
||||
} |
||||
|
||||
function workers_messages(workers, messages) { |
||||
const promises = []; |
||||
|
||||
for (let i = 0; i < workers.length; ++i) { |
||||
promises.push(worker_message(workers[i], messages[i])); |
||||
} |
||||
|
||||
return Promise.all(promises); |
||||
} |
||||
|
||||
function workers_thread_message(workers, message, thread_field=null) { |
||||
const messages = []; |
||||
|
||||
for (let i = 0; i < workers.length; ++i) { |
||||
if (thread_field !== null) { |
||||
const m = {}; |
||||
for (const key in message) { |
||||
m[key] = message[key]; |
||||
} |
||||
m[thread_field] = i; |
||||
messages.push(m); |
||||
} else { |
||||
messages.push(message); |
||||
} |
||||
} |
||||
|
||||
return workers_messages(workers, messages); |
||||
} |
||||
|
||||
async function init_wasm(state) { |
||||
const memory = new WebAssembly.Memory({ |
||||
initial: 4096, // F U
|
||||
maximum: 4096, // 256MiB
|
||||
shared: true, |
||||
}); |
||||
|
||||
let master_wasm; |
||||
if (WebAssembly.hasOwnProperty('instantiateStreaming')) { |
||||
// "Master thread" to do maintance on (static allocations, merging results etc)
|
||||
master_wasm = await WebAssembly.instantiateStreaming(fetch('wasm/lod.wasm'), { |
||||
env: { 'memory': memory } |
||||
}); |
||||
} else { |
||||
const f = await fetch('wasm/lod.wasm'); |
||||
const bytes = await f.arrayBuffer(); |
||||
master_wasm = await WebAssembly.instantiate(bytes, { |
||||
env: { 'memory': memory } |
||||
}); |
||||
} |
||||
|
||||
const nworkers = navigator.hardwareConcurrency; |
||||
|
||||
state.wasm.exports = master_wasm.instance.exports; |
||||
state.wasm.heap_base = state.wasm.exports.alloc_static(0); |
||||
state.wasm.workers = []; |
||||
state.wasm.memory = memory; |
||||
|
||||
for (let i = 0; i < nworkers; ++i) { |
||||
const w = new Worker('lod_worker.js'); |
||||
state.wasm.workers.push(w); |
||||
} |
||||
|
||||
await workers_thread_message(state.wasm.workers, { |
||||
'type': 'init', |
||||
'heap_base': state.wasm.heap_base, |
||||
'memory': memory, |
||||
}, 'thread_id'); |
||||
|
||||
const initial = config.initial_wasm_bytes; |
||||
|
||||
state.wasm.buffers = { |
||||
'xs': { |
||||
'used': 0, |
||||
'cap': initial |
||||
}, |
||||
'ys': { |
||||
'used': 0, |
||||
'cap': initial |
||||
}, |
||||
'coords_from': { |
||||
'used': 0, |
||||
'cap': initial |
||||
}, |
||||
'pressures': { |
||||
'used': 0, |
||||
'cap': initial |
||||
}, |
||||
'width': { |
||||
'used': 0, |
||||
'cap': initial |
||||
} |
||||
}; |
||||
|
||||
state.wasm.buffers['xs'].offset = state.wasm.exports.alloc_static(initial); |
||||
state.wasm.buffers['ys'].offset = state.wasm.exports.alloc_static(initial); |
||||
state.wasm.buffers['pressures'].offset = state.wasm.exports.alloc_static(initial); |
||||
state.wasm.buffers['coords_from'].offset = state.wasm.exports.alloc_static(initial); |
||||
state.wasm.buffers['width'].offset = state.wasm.exports.alloc_static(initial); |
||||
|
||||
const mem = state.wasm.memory.buffer; |
||||
|
||||
state.wasm.buffers['xs'].tv = tv_create_on(Float32Array, initial / 4, |
||||
mem, state.wasm.buffers['xs'].offset); |
||||
state.wasm.buffers['ys'].tv = tv_create_on(Float32Array, initial / 4, |
||||
mem, state.wasm.buffers['ys'].offset); |
||||
state.wasm.buffers['pressures'].tv = tv_create_on(Uint8Array, initial, |
||||
mem, state.wasm.buffers['pressures'].offset); |
||||
state.wasm.buffers['coords_from'].tv = tv_create_on(Uint32Array, initial / 4, |
||||
mem, state.wasm.buffers['coords_from'].offset); |
||||
state.wasm.buffers['width'].tv = tv_create_on(Uint32Array, initial / 4, |
||||
mem, state.wasm.buffers['width'].offset); |
||||
|
||||
tv_add(state.wasm.buffers['coords_from'].tv, 0); |
||||
state.wasm.buffers['coords_from'].used = 4; |
||||
} |
||||
|
||||
function wasm_ensure_by(state, nstrokes, ncoords) { |
||||
const buffers = state.wasm.buffers; |
||||
|
||||
const old_ys_offset = buffers['ys'].offset; |
||||
const old_coords_from_offset = buffers['coords_from'].offset; |
||||
const old_pressures_offset = buffers['pressures'].offset; |
||||
const old_width_offset = buffers['width'].offset; |
||||
|
||||
let realloc = false; |
||||
let coords_bytes = buffers['xs'].cap; |
||||
let stroke_bytes = buffers['coords_from'].cap; |
||||
|
||||
if (buffers['xs'].used + ncoords * 4 > buffers['xs'].cap) { |
||||
coords_bytes = round_to_pow2(buffers['xs'].cap + ncoords * 4, 4096 * 16); // 1 wasm page (although it doesn't matter here)
|
||||
realloc = true; |
||||
} |
||||
|
||||
if (buffers['coords_from'].used + nstrokes * 4 > buffers['coords_from'].cap) { |
||||
stroke_bytes = round_to_pow2(buffers['coords_from'].cap + nstrokes * 4, 4096 * 16); |
||||
realloc = true; |
||||
} |
||||
|
||||
if (realloc) { |
||||
if (config.debug_print) console.debug('WASM static data re-layout'); |
||||
|
||||
state.wasm.exports.free_static(); |
||||
|
||||
const mem = state.wasm.memory.buffer; |
||||
const memv = new Uint8Array(mem); |
||||
|
||||
buffers['xs'].offset = state.wasm.exports.alloc_static(coords_bytes); |
||||
buffers['ys'].offset = state.wasm.exports.alloc_static(coords_bytes); |
||||
buffers['pressures'].offset = state.wasm.exports.alloc_static(coords_bytes); |
||||
buffers['coords_from'].offset = state.wasm.exports.alloc_static(stroke_bytes); |
||||
buffers['width'].offset = state.wasm.exports.alloc_static(stroke_bytes); |
||||
|
||||
buffers['xs'].tv = tv_create_on(Float32Array, coords_bytes / 4, mem, buffers['xs'].offset); |
||||
buffers['ys'].tv = tv_create_on(Float32Array, coords_bytes / 4, mem, buffers['ys'].offset); |
||||
buffers['pressures'].tv = tv_create_on(Uint8Array, coords_bytes, mem, buffers['pressures'].offset); |
||||
buffers['coords_from'].tv = tv_create_on(Uint32Array, stroke_bytes / 4, mem, buffers['coords_from'].offset); |
||||
buffers['width'].tv = tv_create_on(Uint32Array, stroke_bytes / 4, mem, buffers['width'].offset); |
||||
|
||||
// TODO: this should have been automatic maybe?
|
||||
buffers['xs'].tv.size = buffers['xs'].used / 4; |
||||
buffers['ys'].tv.size = buffers['ys'].used / 4; |
||||
buffers['pressures'].tv.size = buffers['pressures'].used; |
||||
buffers['coords_from'].tv.size = buffers['coords_from'].used / 4; |
||||
buffers['width'].tv.size = buffers['width'].used / 4; |
||||
|
||||
// TODO: this is SUS, should all the caps really be coords_bytes?
|
||||
buffers['xs'].cap = buffers['ys'].cap = buffers['pressures'].cap = coords_bytes; |
||||
buffers['coords_from'].cap = buffers['width'].cap = stroke_bytes; |
||||
|
||||
const tmp = new Uint8Array(Math.max(coords_bytes, stroke_bytes)); |
||||
|
||||
// Copy from back to front (otherwise we will overwrite)
|
||||
tmp.set(new Uint8Array(mem, old_width_offset, buffers['width'].used)); |
||||
memv.set(new Uint8Array(tmp.buffer, 0, buffers['width'].used), buffers['width'].offset); |
||||
|
||||
tmp.set(new Uint8Array(mem, old_coords_from_offset, buffers['coords_from'].used)); |
||||
memv.set(new Uint8Array(tmp.buffer, 0, buffers['coords_from'].used), buffers['coords_from'].offset); |
||||
|
||||
tmp.set(new Uint8Array(mem, old_pressures_offset, buffers['pressures'].used)); |
||||
memv.set(new Uint8Array(tmp.buffer, 0, buffers['pressures'].used), buffers['pressures'].offset); |
||||
|
||||
tmp.set(new Uint8Array(mem, old_ys_offset, buffers['ys'].used)); |
||||
memv.set(new Uint8Array(tmp.buffer, 0, buffers['ys'].used), buffers['ys'].offset); |
||||
} |
||||
} |
||||
|
||||
async function do_lod(state, context) { |
||||
state.wasm.exports.free_dynamic(); |
||||
|
||||
const buffers = state.wasm.buffers; |
||||
const result_buffers = state.wasm.exports.alloc_dynamic(state.wasm.workers.length * 4); |
||||
const result_counts = state.wasm.exports.alloc_dynamic(state.wasm.workers.length * 4); |
||||
const result_batch_counts = state.wasm.exports.alloc_dynamic(state.wasm.workers.length * 4); |
||||
const clipped_indices = state.wasm.exports.alloc_dynamic(context.clipped_indices.size * 4); |
||||
const mem = new Uint8Array(state.wasm.memory.buffer); |
||||
|
||||
// Dynamic input data that should (by design) never be too big
|
||||
mem.set(tv_bytes(context.clipped_indices), clipped_indices); |
||||
|
||||
// NOTE: this static partitioning scheme turned out to be "good enough" (i.e., trying
|
||||
// to allocate approximately the same amount of points per job wasn't any faster)
|
||||
const indices_per_thread = Math.floor(context.clipped_indices.size / state.wasm.workers.length); |
||||
const offsets = { |
||||
'coords_from': buffers['coords_from'].offset, |
||||
'width': buffers['width'].offset, |
||||
'xs': buffers['xs'].offset, |
||||
'ys': buffers['ys'].offset, |
||||
'pressures': buffers['pressures'].offset, |
||||
'result_buffers': result_buffers, |
||||
'result_counts': result_counts, |
||||
'result_batch_counts': result_batch_counts, |
||||
}; |
||||
|
||||
const jobs = []; |
||||
|
||||
for (let i = 0; i < state.wasm.workers.length; ++i) { |
||||
let count = indices_per_thread; |
||||
|
||||
if (i === state.wasm.workers.length - 1) { |
||||
count += context.clipped_indices.size % state.wasm.workers.length; |
||||
} |
||||
|
||||
jobs.push({ |
||||
'type': 'lod', |
||||
'indices_base': clipped_indices + i * 4 * indices_per_thread, |
||||
'indices_count': count, |
||||
'zoom': state.canvas.zoom, |
||||
'offsets': offsets |
||||
}); |
||||
} |
||||
|
||||
await workers_messages(state.wasm.workers, jobs); |
||||
|
||||
const result_offset = state.wasm.exports.merge_results( |
||||
result_counts, |
||||
result_batch_counts, |
||||
result_buffers, |
||||
state.wasm.workers.length |
||||
); |
||||
|
||||
const segment_count = new Int32Array(state.wasm.memory.buffer, result_counts, 1)[0]; // by convention
|
||||
const batch_count = new Int32Array(state.wasm.memory.buffer, result_batch_counts, 1)[0]; // by convention
|
||||
|
||||
// Use results without copying from WASM memory
|
||||
const wasm_points = new Float32Array(state.wasm.memory.buffer, |
||||
result_offset, segment_count * 2); |
||||
const wasm_ids = new Uint32Array(state.wasm.memory.buffer, |
||||
result_offset + segment_count * 2 * 4, segment_count); |
||||
const wasm_pressures = new Uint8Array(state.wasm.memory.buffer, |
||||
result_offset + segment_count * 3 * 4, segment_count); |
||||
const wasm_batches = new Int32Array(state.wasm.memory.buffer, |
||||
result_offset + round_to_pow2(segment_count * (3 * 4 + 1), 4), batch_count * 2); |
||||
|
||||
context.instance_data_points.data = wasm_points; |
||||
context.instance_data_points.size = segment_count * 2; |
||||
context.instance_data_points.capacity = segment_count * 2; |
||||
|
||||
context.instance_data_ids.data = wasm_ids; |
||||
context.instance_data_ids.size = segment_count; |
||||
context.instance_data_ids.capacity = segment_count; |
||||
|
||||
context.instance_data_pressures.data = wasm_pressures; |
||||
context.instance_data_pressures.size = segment_count; |
||||
context.instance_data_pressures.capacity = segment_count; |
||||
|
||||
context.instance_data_batches.data = wasm_batches; |
||||
context.instance_data_batches.size = batch_count * 2; |
||||
context.instance_data_batches.capacity = batch_count * 2; |
||||
|
||||
return segment_count; |
||||
} |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
@media (pointer:none), (pointer:coarse) { |
||||
.tool:hover { |
||||
background: #333; |
||||
} |
||||
} |
||||
@ -0,0 +1,359 @@
@@ -0,0 +1,359 @@
|
||||
function on_touchstart(e) { |
||||
e.preventDefault(); |
||||
|
||||
if (storage.touch.drawing) { |
||||
return; |
||||
} |
||||
|
||||
// First finger(s) down?
|
||||
if (storage.touch.ids.length === 0) { |
||||
// We only handle 1 and 2
|
||||
if (e.changedTouches.length > 2) { |
||||
return; |
||||
} |
||||
|
||||
storage.touch.ids.length = 0; |
||||
|
||||
for (const touch of e.changedTouches) { |
||||
storage.touch.ids.push(touch.identifier); |
||||
} |
||||
|
||||
if (e.changedTouches.length === 1) { |
||||
const touch = e.changedTouches[0]; |
||||
const x = Math.round((touch.clientX + storage.canvas.offset_x) / storage.canvas.zoom); |
||||
const y = Math.round((touch.clientY + storage.canvas.offset_y) / storage.canvas.zoom); |
||||
|
||||
storage.touch.position.x = x; |
||||
storage.touch.position.y = y; |
||||
|
||||
// We give a bit of time to add a second finger
|
||||
storage.touch.waiting_for_second_finger = true; |
||||
storage.touch.moves = 0; |
||||
storage.touch.buffered.length = 0; |
||||
storage.ruler_origin.x = x; |
||||
storage.ruler_origin.y = y; |
||||
|
||||
setTimeout(() => { |
||||
storage.touch.waiting_for_second_finger = false; |
||||
}, config.second_finger_timeout); |
||||
} |
||||
|
||||
return; |
||||
} |
||||
|
||||
// There are touches already
|
||||
if (storage.touch.waiting_for_second_finger) { |
||||
if (e.changedTouches.length === 1) { |
||||
const changed_touch = e.changedTouches[0]; |
||||
|
||||
storage.touch.screen_position.x = changed_touch.clientX; |
||||
storage.touch.screen_position.y = changed_touch.clientY; |
||||
|
||||
storage.touch.ids.push(e.changedTouches[0].identifier); |
||||
|
||||
let first_finger_position = null; |
||||
let second_finger_position = null; |
||||
|
||||
// A separate loop because touches might be in different order ? (question mark)
|
||||
// IMPORTANT: e.touches, not e.changedTouches!
|
||||
for (const touch of e.touches) { |
||||
const x = touch.clientX; |
||||
const y = touch.clientY; |
||||
|
||||
if (touch.identifier === storage.touch.ids[0]) { |
||||
first_finger_position = {'x': x, 'y': y}; |
||||
} |
||||
|
||||
if (touch.identifier === storage.touch.ids[1]) { |
||||
second_finger_position = {'x': x, 'y': y}; |
||||
} |
||||
} |
||||
|
||||
storage.touch.finger_distance = dist_v2( |
||||
first_finger_position, second_finger_position); |
||||
|
||||
// console.log(storage.touch.finger_distance);
|
||||
} |
||||
|
||||
return; |
||||
} |
||||
} |
||||
|
||||
function on_touchmove(e) { |
||||
if (storage.touch.ids.length === 1 && !storage.touch.moving) { |
||||
storage.touch.moves += 1; |
||||
|
||||
if (storage.touch.moves > config.buffer_first_touchmoves) { |
||||
storage.touch.waiting_for_second_finger = false; // Immediately start drawing on move
|
||||
storage.touch.drawing = true; |
||||
|
||||
if (storage.ctx1.lineWidth !== storage.cursor.width) { |
||||
storage.ctx1.lineWidth = storage.cursor.width; |
||||
} |
||||
} else { |
||||
let drawing_touch = null; |
||||
|
||||
for (const touch of e.changedTouches) { |
||||
if (touch.identifier === storage.touch.ids[0]) { |
||||
drawing_touch = touch; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if (!drawing_touch) { |
||||
return; |
||||
} |
||||
|
||||
const last_x = storage.touch.position.x; |
||||
const last_y = storage.touch.position.y; |
||||
|
||||
const x = Math.max(Math.round((drawing_touch.clientX + storage.canvas.offset_x) / storage.canvas.zoom), 0); |
||||
const y = Math.max(Math.round((drawing_touch.clientY + storage.canvas.offset_y) / storage.canvas.zoom), 0); |
||||
|
||||
storage.touch.buffered.push({ |
||||
'last_x': last_x, |
||||
'last_y': last_y, |
||||
'x': x, |
||||
'y': y, |
||||
}); |
||||
|
||||
storage.touch.position.x = x; |
||||
storage.touch.position.y = y; |
||||
} |
||||
} |
||||
|
||||
if (storage.touch.drawing) { |
||||
let drawing_touch = null; |
||||
|
||||
for (const touch of e.changedTouches) { |
||||
if (touch.identifier === storage.touch.ids[0]) { |
||||
drawing_touch = touch; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if (!drawing_touch) { |
||||
return; |
||||
} |
||||
|
||||
const last_x = storage.touch.position.x; |
||||
const last_y = storage.touch.position.y; |
||||
|
||||
const x = storage.touch.position.x = Math.max(Math.round((drawing_touch.clientX + storage.canvas.offset_x) / storage.canvas.zoom), 0); |
||||
const y = storage.touch.position.y = Math.max(Math.round((drawing_touch.clientY + storage.canvas.offset_y) / storage.canvas.zoom), 0); |
||||
|
||||
if (storage.tools.active === 'pencil') { |
||||
if (storage.touch.buffered.length > 0) { |
||||
for (const p of storage.touch.buffered) { |
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(p.last_x, p.last_y); |
||||
storage.ctx1.lineTo(p.x, p.y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
|
||||
const predraw = predraw_event(p.x, p.y); |
||||
storage.current_stroke.push(predraw); |
||||
|
||||
fire_event(predraw); |
||||
} |
||||
|
||||
storage.touch.buffered.length = 0; |
||||
} |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(last_x, last_y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
|
||||
const predraw = predraw_event(x, y); |
||||
storage.current_stroke.push(predraw); |
||||
|
||||
fire_event(predraw); |
||||
|
||||
storage.touch.position.x = x; |
||||
storage.touch.position.y = y; |
||||
|
||||
return; |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const erase_step = (last_x, last_y, x, y) => { |
||||
const erased = strokes_intersect_line(last_x, last_y, x, y); |
||||
storage.erased.push(...erased); |
||||
|
||||
if (erased.length > 0) { |
||||
for (const other_event of storage.events) { |
||||
for (const stroke_id of erased) { |
||||
if (stroke_id === other_event.stroke_id) { |
||||
if (!other_event.deleted) { |
||||
other_event.deleted = true; |
||||
const stats = stroke_stats(other_event.points, storage.cursor.width); |
||||
redraw_region(stats.bbox); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
if (storage.touch.buffered.length > 0) { |
||||
for (const p of storage.touch.buffered) { |
||||
erase_step(p.last_x, p.last_y, p.x, p.y); |
||||
} |
||||
|
||||
storage.touch.buffered.length = 0; |
||||
} |
||||
|
||||
erase_step(last_x, last_y, x, y); |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const old_ruler = [ |
||||
{'x': storage.ruler_origin.x, 'y': storage.ruler_origin.y}, |
||||
{'x': last_x, 'y': last_y} |
||||
]; |
||||
|
||||
const stats = stroke_stats(old_ruler, storage.cursor.width); |
||||
const bbox = stats.bbox; |
||||
|
||||
storage.ctx1.clearRect(bbox.xmin, bbox.ymin, bbox.xmax - bbox.xmin, bbox.ymax - bbox.ymin); |
||||
|
||||
storage.ctx1.beginPath(); |
||||
|
||||
storage.ctx1.moveTo(storage.ruler_origin.x, storage.ruler_origin.y); |
||||
storage.ctx1.lineTo(x, y); |
||||
|
||||
storage.ctx1.stroke(); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
} |
||||
|
||||
if (storage.touch.ids.length === 2) { |
||||
storage.touch.moving = true; |
||||
|
||||
let first_finger_position_screen = null; |
||||
let second_finger_position_screen = null; |
||||
|
||||
let first_finger_position_canvas = null; |
||||
let second_finger_position_canvas = null; |
||||
|
||||
// A separate loop because touches might be in different order ? (question mark)
|
||||
// IMPORTANT: e.touches, not e.changedTouches!
|
||||
for (const touch of e.touches) { |
||||
const x = touch.clientX; |
||||
const y = touch.clientY; |
||||
|
||||
const xc = Math.max(Math.round((touch.clientX + storage.canvas.offset_x) / storage.canvas.zoom), 0); |
||||
const yc = Math.max(Math.round((touch.clientY + storage.canvas.offset_y) / storage.canvas.zoom), 0); |
||||
|
||||
if (touch.identifier === storage.touch.ids[0]) { |
||||
first_finger_position_screen = {'x': x, 'y': y}; |
||||
first_finger_position_canvas = {'x': xc, 'y': yc}; |
||||
} |
||||
|
||||
if (touch.identifier === storage.touch.ids[1]) { |
||||
second_finger_position_screen = {'x': x, 'y': y}; |
||||
second_finger_position_canvas = {'x': xc, 'y': yc}; |
||||
} |
||||
} |
||||
|
||||
const new_finger_distance = dist_v2( |
||||
first_finger_position_screen, second_finger_position_screen); |
||||
|
||||
const zoom_center = { |
||||
'x': (first_finger_position_canvas.x + second_finger_position_canvas.x) / 2.0, |
||||
'y': (first_finger_position_canvas.y + second_finger_position_canvas.y) / 2.0 |
||||
}; |
||||
|
||||
for (const touch of e.changedTouches) { |
||||
// The second finger to be down is considered the "main" one
|
||||
// Movement of the second finger is ignored
|
||||
if (touch.identifier === storage.touch.ids[1]) { |
||||
const x = Math.round(touch.clientX); |
||||
const y = Math.round(touch.clientY); |
||||
|
||||
const dx = x - storage.touch.screen_position.x; |
||||
const dy = y - storage.touch.screen_position.y; |
||||
|
||||
const old_zoom = storage.canvas.zoom; |
||||
const old_offset_x = storage.canvas.offset_x; |
||||
const old_offset_y = storage.canvas.offset_y; |
||||
|
||||
storage.canvas.offset_x -= dx; |
||||
storage.canvas.offset_y -= dy; |
||||
|
||||
// console.log(new_finger_distance, storage.touch.finger_distance);
|
||||
|
||||
const scale_by = new_finger_distance / storage.touch.finger_distance; |
||||
const dz = storage.canvas.zoom * (scale_by - 1.0); |
||||
|
||||
const zoom_offset_y = Math.round(dz * zoom_center.y); |
||||
const zoom_offset_x = Math.round(dz * zoom_center.x); |
||||
|
||||
if (storage.min_zoom <= storage.canvas.zoom * scale_by && storage.canvas.zoom * scale_by <= storage.max_zoom) { |
||||
storage.canvas.zoom *= scale_by; |
||||
storage.canvas.offset_x += zoom_offset_x; |
||||
storage.canvas.offset_y += zoom_offset_y; |
||||
} |
||||
|
||||
storage.touch.finger_distance = new_finger_distance; |
||||
|
||||
|
||||
if (storage.canvas.offset_x !== old_offset_x || storage.canvas.offset_y !== old_offset_y || old_zoom !== storage.canvas.zoom) { |
||||
move_canvas(); |
||||
} |
||||
|
||||
storage.touch.screen_position.x = x; |
||||
storage.touch.screen_position.y = y; |
||||
|
||||
break; |
||||
} |
||||
} |
||||
|
||||
return; |
||||
} |
||||
} |
||||
|
||||
async function on_touchend(e) { |
||||
for (const touch of e.changedTouches) { |
||||
if (storage.touch.drawing) { |
||||
if (storage.touch.ids[0] == touch.identifier) { |
||||
storage.touch.drawing = false; |
||||
|
||||
if (storage.tools.active === 'pencil') { |
||||
const event = stroke_event(); |
||||
storage.current_stroke = []; |
||||
await queue_event(event); |
||||
} else if (storage.tools.active === 'eraser') { |
||||
const events = eraser_events(); |
||||
storage.erased = []; |
||||
if (events.length > 0) { |
||||
for (const event of events) { |
||||
await queue_event(event); |
||||
} |
||||
} |
||||
} else if (storage.tools.active === 'ruler') { |
||||
const event = ruler_event(storage.touch.position.x, storage.touch.position.y); |
||||
await queue_event(event); |
||||
} else { |
||||
console.error('fuck'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
const index = storage.touch.ids.indexOf(touch.identifier); |
||||
|
||||
if (index !== -1) { |
||||
storage.touch.ids.splice(index, 1); |
||||
} |
||||
|
||||
if (storage.touch.moving && storage.touch.ids.length === 0) { |
||||
// Only allow drawing again when ALL fingers have been lifted
|
||||
storage.touch.moving = false; |
||||
} |
||||
} |
||||
|
||||
if (storage.touch.ids.length === 0) { |
||||
waiting_for_second_finger = false; |
||||
} |
||||
} |
||||
@ -1,132 +0,0 @@
@@ -1,132 +0,0 @@
|
||||
function undo(state, context, event, options) { |
||||
let need_draw = false; |
||||
|
||||
// Remove effect of latest own event, in a way that is recoverable
|
||||
|
||||
// Iterate back to front to find the _latest_ event
|
||||
for (let i = state.events.length - 1; i >=0; --i) { |
||||
const other_event = state.events[i]; |
||||
let skipped = false; |
||||
|
||||
// Users can only undo their own, undeleted (not already undone) events
|
||||
if (other_event.user_id === event.user_id && !other_event.deleted) { |
||||
// All "persistent" events (those that are pushed using SYN messages) should be handled here
|
||||
// "Transient" events are by design droppable, and should not be undone, nor saved in state.events at all
|
||||
switch (other_event.type) { |
||||
case EVENT.STROKE: { |
||||
other_event.deleted = true; |
||||
if (other_event.bvh_node && !options.skip_bvh) { |
||||
bvh_delete_stroke(state, other_event); |
||||
} |
||||
need_draw = true; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.UNDO: { |
||||
// do not undo an undo, we are not Notepad
|
||||
skipped = true; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE: { |
||||
other_event.deleted = true; |
||||
const image = get_image(context, other_event.image_id); |
||||
if (image !== null) { |
||||
image.deleted = true; |
||||
} |
||||
need_draw = true; |
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE_MOVE: { |
||||
other_event.deleted = true; |
||||
const image = get_image(context, other_event.image_id); |
||||
if (image !== null) { |
||||
pop_image_transform(image); |
||||
need_draw = true; |
||||
} else { |
||||
console.warning('Undo image move for a non-existent image'); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case EVENT.IMAGE_SCALE: { |
||||
other_event.deleted = true; |
||||
const image = get_image(context, other_event.image_id); |
||||
if (image !== null) { |
||||
pop_image_transform(image); |
||||
need_draw = true; |
||||
} else { |
||||
console.warning('Undo image scale for a non-existent image'); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case EVENT.ERASER: { |
||||
other_event.deleted = true; |
||||
const stroke = state.events[other_event.stroke_id]; |
||||
stroke.deleted = false; |
||||
if (!options.skip_bvh) { |
||||
bvh_undelete_stroke(state, stroke); |
||||
} |
||||
need_draw = true; |
||||
break; |
||||
} |
||||
|
||||
default: { |
||||
console.error('cant undo event type', other_event.type); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if (!skipped) { |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return need_draw; |
||||
} |
||||
|
||||
function redo() { |
||||
console.log('TODO'); |
||||
} |
||||
|
||||
function push_image_move(image, x, y) { |
||||
if (image.transform_head < image.transform_history.length) { |
||||
image.transform_history[image.transform_head] = image.at.x; |
||||
image.transform_history[image.transform_head + 1] = image.at.y; |
||||
image.transform_history[image.transform_head + 2] = image.width; |
||||
image.transform_history[image.transform_head + 3] = image.height; |
||||
} else { |
||||
image.transform_history.push(image.at.x, image.at.y, image.width, image.height); |
||||
} |
||||
|
||||
image.at.x = x; |
||||
image.at.y = y; |
||||
|
||||
image.transform_head += 4; |
||||
} |
||||
|
||||
function push_image_scale(image, corner, x, y) { |
||||
if (image.transform_head < image.transform_history.length) { |
||||
image.transform_history[image.transform_head] = image.at.x; |
||||
image.transform_history[image.transform_head + 1] = image.at.y; |
||||
image.transform_history[image.transform_head + 2] = image.width; |
||||
image.transform_history[image.transform_head + 3] = image.height; |
||||
} else { |
||||
image.transform_history.push(image.at.x, image.at.y, image.width, image.height); |
||||
} |
||||
|
||||
scale_image(image, corner, {'x': x, 'y': y}); |
||||
|
||||
image.transform_head += 4; |
||||
} |
||||
|
||||
function pop_image_transform(image, corner, x, y) { |
||||
image.transform_head -= 4; |
||||
image.at.x = image.transform_history[image.transform_head - 4]; |
||||
image.at.y = image.transform_history[image.transform_head - 3]; |
||||
image.width = image.transform_history[image.transform_head - 2]; |
||||
image.height = image.transform_history[image.transform_head - 1]; |
||||
} |
||||
@ -1 +0,0 @@
@@ -1 +0,0 @@
|
||||
clang -Oz --target=wasm32 -nostdlib -msimd128 -mbulk-memory -matomics -Wl,--no-entry,--import-memory,--shared-memory,--export-all,--max-memory=$((1024 * 1024 * 1024)) -z stack-size=$((1024 * 1024)) lod.c -o lod.wasm |
||||
@ -1,419 +0,0 @@
@@ -1,419 +0,0 @@
|
||||
#ifndef FORCE_SCALAR |
||||
#include <wasm_simd128.h> |
||||
#endif |
||||
|
||||
extern char __heap_base; |
||||
|
||||
static int allocated_static; |
||||
static int allocated_dynamic; |
||||
|
||||
void |
||||
set_sp(char *sp) |
||||
{ |
||||
__asm__ __volatile__( |
||||
".globaltype __stack_pointer, i32\n" |
||||
"local.get %0\n" |
||||
"global.set __stack_pointer\n" |
||||
: : "r"(sp) |
||||
); |
||||
} |
||||
|
||||
void |
||||
free_static(void) |
||||
{ |
||||
allocated_static = 0; |
||||
} |
||||
|
||||
void |
||||
free_dynamic(void) |
||||
{ |
||||
allocated_dynamic = 0; |
||||
} |
||||
|
||||
void * |
||||
alloc_static(int size) |
||||
{ |
||||
// This IS NOT thread-safe
|
||||
void *result = &__heap_base + allocated_static; |
||||
allocated_static += size; |
||||
return(result); |
||||
} |
||||
|
||||
static int |
||||
round_to_pow2(int value, int multiple) |
||||
{ |
||||
return((value + multiple - 1) & -multiple); |
||||
} |
||||
|
||||
void * |
||||
alloc_dynamic(int size) |
||||
{ |
||||
// Very ad-van-ced thread-safe allocator
|
||||
// CAN be called from multiple threads
|
||||
size = round_to_pow2(size, 4); |
||||
int original_allocated_dynamic = __atomic_fetch_add(&allocated_dynamic, size, __ATOMIC_SEQ_CST); |
||||
void *result = &__heap_base + allocated_static + original_allocated_dynamic; |
||||
return(result); |
||||
} |
||||
|
||||
static int |
||||
rdp_find_max(float *xs, float *ys, unsigned char *pressures, float zoom, int coords_from, |
||||
int segment_start, int segment_end) |
||||
{ |
||||
int result = -1; |
||||
|
||||
if (segment_start == segment_end) { |
||||
return(result); |
||||
} |
||||
|
||||
float EPS = 0.125f / zoom * 255.0f; |
||||
float max_dist = 0.0f; |
||||
|
||||
float ax = xs[coords_from + segment_start]; |
||||
float ay = ys[coords_from + segment_start]; |
||||
float bx = xs[coords_from + segment_end]; |
||||
float by = ys[coords_from + segment_end]; |
||||
|
||||
unsigned char ap = pressures[coords_from / 2 + segment_start]; |
||||
unsigned char bp = pressures[coords_from / 2 + segment_end]; |
||||
|
||||
float dx = bx - ax; |
||||
float dy = by - ay; |
||||
|
||||
float dist_ab = __builtin_sqrtf(dx * dx + dy * dy); |
||||
float dir_nx = dy / dist_ab * 255.0f; |
||||
float dir_ny = -dx / dist_ab * 255.0f; |
||||
|
||||
#ifdef FORCE_SCALAR |
||||
// Scalar version preserved for reference
|
||||
|
||||
for (int i = segment_start + 1; i < segment_end; ++i) { |
||||
float px = xs[coords_from + i]; |
||||
float py = ys[coords_from + i]; |
||||
|
||||
unsigned char pp = pressures[coords_from + i]; |
||||
|
||||
float apx = px - ax; |
||||
float apy = py - ay; |
||||
|
||||
float dist = __builtin_fabsf(apx * dir_nx + apy * dir_ny) |
||||
+ __builtin_abs(pp - ap) + __builtin_abs(pp - bp); |
||||
|
||||
if (dist > EPS && dist > max_dist) { |
||||
result = i; |
||||
max_dist = dist; |
||||
} |
||||
} |
||||
#else |
||||
v128_t ax_x4 = wasm_f32x4_splat(ax); |
||||
v128_t ay_x4 = wasm_f32x4_splat(ay); |
||||
v128_t ap_x4 = wasm_f32x4_splat(ap); |
||||
v128_t bp_x4 = wasm_f32x4_splat(bp); |
||||
v128_t dir_nx_x4 = wasm_f32x4_splat(dir_nx); |
||||
v128_t dir_ny_x4 = wasm_f32x4_splat(dir_ny); |
||||
|
||||
v128_t index_x4 = wasm_u32x4_make(segment_start + 1, segment_start + 2, segment_start + 3, segment_start + 4); |
||||
v128_t four_x4 = wasm_u32x4_const_splat(4); |
||||
v128_t max_dist_x4 = wasm_f32x4_splat(EPS); |
||||
v128_t max_index_x4 = wasm_u32x4_const_splat(-1); |
||||
|
||||
for (int i = segment_start + 1; i < segment_end - 3; i += 4) { |
||||
v128_t px_x4 = wasm_v128_load(xs + coords_from + i); |
||||
v128_t py_x4 = wasm_v128_load(ys + coords_from + i); |
||||
|
||||
v128_t pp_x4 = wasm_f32x4_make( |
||||
pressures[coords_from / 2 + i + 0], |
||||
pressures[coords_from / 2 + i + 1], |
||||
pressures[coords_from / 2 + i + 2], |
||||
pressures[coords_from / 2 + i + 3] |
||||
); |
||||
|
||||
v128_t apx_x4 = wasm_f32x4_sub(px_x4, ax_x4); |
||||
v128_t apy_x4 = wasm_f32x4_sub(py_x4, ay_x4); |
||||
|
||||
v128_t dist_x4 = wasm_f32x4_add( |
||||
wasm_f32x4_add( |
||||
wasm_f32x4_abs(wasm_f32x4_sub(pp_x4, ap_x4)), |
||||
wasm_f32x4_abs(wasm_f32x4_sub(pp_x4, bp_x4)) |
||||
), |
||||
wasm_f32x4_abs( |
||||
wasm_f32x4_add( |
||||
wasm_f32x4_mul(apx_x4, dir_nx_x4), |
||||
wasm_f32x4_mul(apy_x4, dir_ny_x4) |
||||
) |
||||
) |
||||
); |
||||
|
||||
v128_t mask = wasm_f32x4_gt(dist_x4, max_dist_x4); |
||||
|
||||
max_index_x4 = wasm_v128_bitselect(index_x4, max_index_x4, mask); |
||||
max_dist_x4 = wasm_v128_bitselect(dist_x4, max_dist_x4, mask); |
||||
|
||||
index_x4 = wasm_i32x4_add(index_x4, four_x4); |
||||
} |
||||
|
||||
int indices[4]; |
||||
float values[4]; |
||||
|
||||
wasm_v128_store(indices, max_index_x4); |
||||
wasm_v128_store(values, max_dist_x4); |
||||
|
||||
for (int i = 0; i < 4; ++i) { |
||||
if (indices[i] != -1) { |
||||
if (values[i] > max_dist) { |
||||
result = indices[i]; |
||||
max_dist = values[i]; |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (max_dist == EPS) { |
||||
max_dist = 0.0f; |
||||
result = -1; |
||||
} |
||||
|
||||
int remainder = (segment_end - segment_start - 1) % 4; |
||||
|
||||
for (int i = segment_end - remainder; i < segment_end; ++i) { |
||||
float px = xs[coords_from + i]; |
||||
float py = ys[coords_from + i]; |
||||
|
||||
unsigned char pp = pressures[coords_from + i]; |
||||
|
||||
float apx = px - ax; |
||||
float apy = py - ay; |
||||
|
||||
float dist = __builtin_fabsf(apx * dir_nx + apy * dir_ny) |
||||
+ __builtin_abs(pp - ap) + __builtin_abs(pp - bp); |
||||
|
||||
if (dist > EPS && dist > max_dist) { |
||||
result = i; |
||||
max_dist = dist; |
||||
} |
||||
} |
||||
#endif |
||||
|
||||
return(result); |
||||
} |
||||
|
||||
void |
||||
do_lod(int *clipped_indices, int clipped_count, float zoom, |
||||
int *stroke_coords_from, |
||||
int *width, |
||||
float *xs, |
||||
float *ys, |
||||
unsigned char *pressures, |
||||
char **result_buffer, |
||||
int *result_count, |
||||
int *result_batch_count) |
||||
{ |
||||
if (clipped_count == 0) { |
||||
result_count[0] = 0; |
||||
result_batch_count[0] = 0; |
||||
return; |
||||
} |
||||
|
||||
int first_stroke = clipped_indices[0]; |
||||
int last_stroke = clipped_indices[clipped_count - 1]; |
||||
int total_points = 0; |
||||
|
||||
for (int i = 0; i < clipped_count; ++i) { |
||||
int stroke_index = clipped_indices[i]; |
||||
total_points += stroke_coords_from[stroke_index + 1] - stroke_coords_from[stroke_index]; |
||||
} |
||||
|
||||
int *segments_from = alloc_dynamic((clipped_count + 1) * 4); |
||||
int *segments = alloc_dynamic(total_points * 4); // TODO: this is a very conservative estimate, we can lower memory usage if we get this tighter
|
||||
|
||||
int segments_head = 0; |
||||
int stack[4096]; // TODO: what's a reasonable max size for this?
|
||||
int max_stack_size = 0; |
||||
|
||||
for (int i = 0; i < clipped_count; ++i) { |
||||
int stroke_index = clipped_indices[i]; |
||||
|
||||
// TODO: convert to a proper CSR, save half the memory
|
||||
int coords_from = stroke_coords_from[stroke_index]; |
||||
int coords_to = stroke_coords_from[stroke_index + 1]; |
||||
|
||||
int point_count = coords_to - coords_from; |
||||
|
||||
// Basic CSR crap
|
||||
segments_from[i] = segments_head; |
||||
|
||||
int segment_count = 2; |
||||
int stack_head = 0; |
||||
|
||||
segments[segments_head++] = 0; |
||||
|
||||
stack[stack_head++] = 0; |
||||
stack[stack_head++] = 0; |
||||
stack[stack_head++] = point_count - 1; |
||||
|
||||
while (stack_head > 0) { |
||||
if (stack_head > max_stack_size) { max_stack_size = stack_head; } |
||||
int end = stack[--stack_head]; |
||||
int start = stack[--stack_head]; |
||||
int type = stack[--stack_head]; |
||||
|
||||
if (type == 1) { |
||||
segments[segments_head++] = start; |
||||
} else { |
||||
int max = rdp_find_max(xs, ys, pressures, zoom, coords_from, start, end); |
||||
if (max != -1) { |
||||
segment_count += 1; |
||||
|
||||
stack[stack_head++] = 0; |
||||
stack[stack_head++] = max; |
||||
stack[stack_head++] = end; |
||||
|
||||
stack[stack_head++] = 1; |
||||
stack[stack_head++] = max; |
||||
stack[stack_head++] = -1; |
||||
|
||||
stack[stack_head++] = 0; |
||||
stack[stack_head++] = start; |
||||
stack[stack_head++] = max; |
||||
} |
||||
} |
||||
} |
||||
|
||||
segments[segments_head++] = point_count - 1; |
||||
} |
||||
|
||||
segments_from[clipped_count] = segments_head; |
||||
|
||||
// Write actual coordinates (points) and stroke ids
|
||||
// Do this in one allocation so that they're not interleaved between threads
|
||||
char *output = alloc_dynamic(round_to_pow2(segments_head * (3 * 4 + 1), 4) + clipped_count * 4 * 2); // max two ints per stroke for batch info (realistically, much less)
|
||||
float *points = (float *) output; |
||||
int *ids = (int *) (output + segments_head * 4 * 2); |
||||
unsigned char *pressures_res = (unsigned char *) (output + segments_head * 4 * 3); |
||||
int *batches = (int *) (output + round_to_pow2(segments_head * (4 * 3 + 1), 4)); |
||||
|
||||
int phead = 0; |
||||
int ihead = 0; |
||||
float sqrt_zoom = __builtin_sqrtf(zoom); |
||||
int last_lod = -100; |
||||
int batch_count = 0; |
||||
int batch_size = 0; |
||||
|
||||
for (int i = 0; i < clipped_count; ++i) { |
||||
int stroke_index = clipped_indices[i]; |
||||
|
||||
int base_stroke = stroke_coords_from[stroke_index]; |
||||
int from = segments_from[i]; |
||||
int to = segments_from[i + 1]; |
||||
|
||||
for (int j = from; j < to; ++j) { |
||||
int point_index = segments[j]; |
||||
float x = xs[base_stroke + point_index]; |
||||
float y = ys[base_stroke + point_index]; |
||||
|
||||
points[phead++] = x; |
||||
points[phead++] = y; |
||||
|
||||
pressures_res[ihead] = pressures[base_stroke + point_index]; |
||||
|
||||
if (j != to - 1) { |
||||
ids[ihead++] = stroke_index; |
||||
} else { |
||||
ids[ihead++] = stroke_index | (1 << 31); |
||||
} |
||||
} |
||||
|
||||
int segment_count = to - from; |
||||
|
||||
// Compute recommended LOD level, add to current batch or start new batch
|
||||
int lod; |
||||
float perceptual_width = width[stroke_index] * zoom; |
||||
// The LOD levels have been picked manually based on "COM" (Careful Observation Method) @lod
|
||||
if (perceptual_width < 1.9f) { |
||||
lod = 0; |
||||
} else if (perceptual_width < 4.56f) { |
||||
lod = 1; |
||||
} else if (perceptual_width < 6.12f) { |
||||
lod = 2; |
||||
} else if (perceptual_width < 25.08f) { |
||||
lod = 3; |
||||
} else if (perceptual_width < 122.74f) { |
||||
lod = 4; |
||||
} else if (perceptual_width < 1710.0f) { |
||||
lod = 5; |
||||
} else { |
||||
lod = 6; |
||||
} |
||||
|
||||
if (batch_size > 0 && lod != last_lod) { |
||||
// Start new batch
|
||||
batches[batch_count * 2 + 0] = batch_size; |
||||
batches[batch_count * 2 + 1] = last_lod; |
||||
++batch_count; |
||||
batch_size = 0; |
||||
} |
||||
|
||||
batch_size += segment_count; |
||||
last_lod = lod; |
||||
} |
||||
|
||||
if (batch_size > 0) { |
||||
batches[batch_count * 2 + 0] = batch_size; |
||||
batches[batch_count * 2 + 1] = last_lod; |
||||
++batch_count; |
||||
} |
||||
|
||||
result_buffer[0] = output; |
||||
result_count[0] = segments_head; |
||||
result_batch_count[0] = batch_count; |
||||
} |
||||
|
||||
// NOT thread-safe, only call from one thread
|
||||
char * |
||||
merge_results(int *segment_counts, int *batch_counts, char **buffers, int nthreads) |
||||
{ |
||||
int total_segments = 0; |
||||
int total_batches = 0; |
||||
|
||||
for (int i = 0; i < nthreads; ++i) { |
||||
total_segments += segment_counts[i]; |
||||
total_batches += batch_counts[i]; |
||||
} |
||||
|
||||
char *merged = alloc_dynamic(round_to_pow2(total_segments * (3 * 4 + 1), 4) + total_batches * 4); |
||||
|
||||
float *points = (float *) merged; |
||||
int *ids = (int *) (merged + total_segments * 4 * 2); |
||||
unsigned char *pressures = (unsigned char *) (merged + total_segments * 4 * 3); |
||||
int *batches = (int *) (merged + round_to_pow2(total_segments * (3 * 4 + 1), 4)); |
||||
int batch_base = 0; |
||||
int last_batch_lod = -99; |
||||
int bhead = 0; |
||||
int written_batches = 0; |
||||
|
||||
for (int i = 0; i < nthreads; ++i) { |
||||
int segments = segment_counts[i]; |
||||
int nbatches = batch_counts[i]; |
||||
int *thread_batches = (int *) (buffers[i] + round_to_pow2(segments * (4 * 3 + 1), 4)); |
||||
|
||||
if (segments > 0) { |
||||
__builtin_memcpy(points, buffers[i], segments * 4 * 2); |
||||
__builtin_memcpy(ids, buffers[i] + segments * 4 * 2, segments * 4); |
||||
__builtin_memcpy(pressures, buffers[i] + segments * 4 * 3, segments); |
||||
|
||||
for (int j = 0; j < nbatches * 2; j += 2) { |
||||
batches[bhead++] = written_batches; |
||||
batches[bhead++] = thread_batches[j + 1]; |
||||
written_batches += thread_batches[j + 0]; |
||||
} |
||||
|
||||
points += segments * 2; |
||||
ids += segments; |
||||
pressures += segments; |
||||
} |
||||
} |
||||
|
||||
segment_counts[0] = total_segments; |
||||
batch_counts[0] = total_batches; |
||||
|
||||
return(merged); |
||||
} |
||||
Binary file not shown.
@ -1,664 +1,92 @@
@@ -1,664 +1,92 @@
|
||||
function schedule_draw(state, context, animate = false) { |
||||
function schedule_draw(state, context) { |
||||
if (!state.timers.raf) { |
||||
window.requestAnimationFrame(async (ts) => { |
||||
await draw(state, context, animate, ts); |
||||
}); |
||||
window.requestAnimationFrame(() => draw(state, context)); |
||||
state.timers.raf = true; |
||||
} |
||||
} |
||||
|
||||
function upload_if_needed(gl, buffer_kind, serializer) { |
||||
if (serializer.need_gpu_allocate) { |
||||
if (config.debug_print) console.debug('gpu allocate'); |
||||
gl.bufferData(buffer_kind, serializer.size, gl.DYNAMIC_DRAW); |
||||
serializer.need_gpu_allocate = false; |
||||
serializer.gpu_upload_from = 0; |
||||
} |
||||
|
||||
if (serializer.gpu_upload_from < serializer.offset) { |
||||
if (config.debug_print) console.debug('gpu upload'); |
||||
const upload_offset = serializer.gpu_upload_from; |
||||
const upload_size = serializer.offset - upload_offset; |
||||
gl.bufferSubData(buffer_kind, upload_offset, new Uint8Array(serializer.buffer, upload_offset, upload_size)); |
||||
serializer.gpu_upload_from = serializer.offset; |
||||
} |
||||
} |
||||
function upload_square_rgba16ui_texture(gl, serializer, texture_size) { |
||||
// TODO: only subupload what's needed
|
||||
const bpp = 2 * 4; |
||||
const data_size = serializer.offset; |
||||
const data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here
|
||||
const rows = Math.ceil(data_pixels / texture_size); |
||||
const last_row = data_pixels % texture_size; |
||||
const whole_upload = (rows - 1) * texture_size * bpp; |
||||
|
||||
// Upload whole rows
|
||||
if (rows > 1) { |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, texture_size, rows - 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, 0, whole_upload / 2)); |
||||
} |
||||
|
||||
// Upload last row
|
||||
if (last_row > 0) { |
||||
const last_row_upload = last_row * bpp; |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, rows - 1, last_row, 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, whole_upload, last_row_upload / 2)); |
||||
} |
||||
} |
||||
|
||||
/* |
||||
PLS FIX ME |
||||
function upload_square_rgba16ui_texture(gl, serializer, texture_size) { |
||||
const bpp = 2 * 4; |
||||
const data_size = serializer.offset - serializer.gpu_upload_from; |
||||
|
||||
let data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here
|
||||
|
||||
const pixels_already_uploaded = serializer.gpu_upload_from / bpp; |
||||
let rows_uploaded = Math.floor(pixels_already_uploaded / texture_size); |
||||
const rows_remainder = pixels_already_uploaded % texture_size; |
||||
|
||||
// Upload first non-whole row (if last upload was not a whole number of rows)
|
||||
if (rows_remainder > 0) { |
||||
const row_upload_to_full = texture_size - rows_remainder; |
||||
const first_upload = Math.min(row_upload_to_full, data_pixels); |
||||
|
||||
if (first_upload > 0) { |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, rows_remainder, rows_uploaded, first_upload, 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, serializer.gpu_upload_from, first_upload * 4)); |
||||
|
||||
data_pixels -= first_upload; |
||||
serializer.gpu_upload_from += first_upload; |
||||
rows_uploaded += 1; |
||||
} |
||||
} |
||||
|
||||
const rows = Math.ceil(data_pixels / texture_size); |
||||
const last_row = data_pixels % texture_size; |
||||
const whole_upload = (rows - 1) * texture_size; |
||||
|
||||
// Upload whole rows
|
||||
if (rows > 1) { |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, rows_uploaded, texture_size, rows - 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, serializer.gpu_upload_from, whole_upload * 4)); |
||||
rows_uploaded += rows - 1; |
||||
} |
||||
|
||||
// Upload last row
|
||||
if (last_row > 0) { |
||||
const last_row_upload = last_row * bpp; |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, rows_uploaded, last_row, 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, whole_upload, last_row_upload / 2)); |
||||
} |
||||
|
||||
serializer.gpu_upload_from = serializer.offset; |
||||
} |
||||
*/ |
||||
|
||||
function draw_html(state) { |
||||
// HUD-like things. Player cursors, screens
|
||||
for (const player_id in state.players) { |
||||
if (player_id === state.me) continue; |
||||
|
||||
const player = state.players[player_id]; |
||||
let player_cursor_element = document.querySelector(`.player-cursor[data-player-id="${player_id}"]`); |
||||
|
||||
if (player_cursor_element === null && player.online) { |
||||
player_cursor_element = insert_player_cursor(state, player_id); |
||||
} |
||||
|
||||
if (!player.online && player_cursor_element !== null) { |
||||
player_cursor_element.remove(); |
||||
const player_list_item = document.querySelector(`.player-list .player[data-player-id="${player_id}"]`); |
||||
if (player_list_item) player_list_item.remove(); |
||||
if (document.querySelector('.player-list').childElementCount === 0) { |
||||
document.querySelector('.player-list').classList.add('vhide'); |
||||
} |
||||
} |
||||
|
||||
if (player_cursor_element && player.online) { |
||||
const screenp = canvas_to_screen(state, player.cursor); |
||||
player_cursor_element.style.transform = `translate(${Math.round(screenp.x)}px, ${Math.round(screenp.y)}px) rotate(-30deg)`; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
function draw_strokes(state, width, height, programs, gl, lod_levels, segment_count, |
||||
total_lod_floats, total_lod_indices, |
||||
batches_tv, |
||||
points_tv, |
||||
ids_tv, |
||||
pressures_tv, |
||||
vbo, |
||||
ebo, |
||||
stroke_texture, |
||||
stroke_texture_size, |
||||
stroke_data, |
||||
stroke_count, |
||||
opacity_multiplier, |
||||
) { |
||||
const pr = programs['main']; |
||||
|
||||
// Last pair (lod unused) to have a proper from;to
|
||||
tv_add2(batches_tv, segment_count); |
||||
tv_add2(batches_tv, -1); |
||||
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT); // draw strokes above the images
|
||||
gl.useProgram(pr.program); |
||||
|
||||
const total_size = points_tv.size * 4 + |
||||
ids_tv.size * 4 + |
||||
round_to_pow2(pressures_tv.size, 4) + |
||||
total_lod_floats * 4; |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); |
||||
gl.bufferData(gl.ARRAY_BUFFER, total_size, gl.STREAM_DRAW); |
||||
|
||||
// Segment points, segment stroke ids, segment pressures
|
||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(points_tv)); |
||||
gl.bufferSubData(gl.ARRAY_BUFFER, points_tv.size * 4, tv_data(ids_tv)); |
||||
gl.bufferSubData(gl.ARRAY_BUFFER, points_tv.size * 4 + ids_tv.size * 4, tv_data(pressures_tv)); |
||||
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebo); |
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, total_lod_indices * 4, gl.STREAM_DRAW); |
||||
|
||||
// Upload all variants of LOD vertices/indices
|
||||
const base_lod_points_offset = points_tv.size * 4 + ids_tv.size * 4 + round_to_pow2(pressures_tv.size, 4); |
||||
|
||||
for (const level of lod_levels) { |
||||
gl.bufferSubData(gl.ARRAY_BUFFER, base_lod_points_offset + level.vertices_offset, tv_data(level.data.points)); |
||||
gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, level.indices_offset, tv_data(level.data.indices)); |
||||
} |
||||
|
||||
// Per-stroke data (base width, color)
|
||||
gl.bindTexture(gl.TEXTURE_2D, stroke_texture); |
||||
upload_square_rgba16ui_texture(gl, stroke_data, stroke_texture_size); |
||||
|
||||
gl.uniform2f(pr.locations['u_res'], width, height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
gl.uniform1i(pr.locations['u_stroke_count'], stroke_count); |
||||
gl.uniform1i(pr.locations['u_debug_mode'], state.debug.red); |
||||
gl.uniform1i(pr.locations['u_stroke_data'], 0); |
||||
gl.uniform1i(pr.locations['u_stroke_texture_size'], config.stroke_texture_size); |
||||
gl.uniform1f(pr.locations['u_opacity_multipliter'], opacity_multiplier); |
||||
|
||||
gl.enableVertexAttribArray(pr.locations['a_pos']); |
||||
gl.enableVertexAttribArray(pr.locations['a_a']); |
||||
gl.enableVertexAttribArray(pr.locations['a_b']); |
||||
gl.enableVertexAttribArray(pr.locations['a_stroke_id']); |
||||
gl.enableVertexAttribArray(pr.locations['a_pressure']); |
||||
|
||||
gl.vertexAttribDivisor(pr.locations['a_pos'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_a'], 1); |
||||
gl.vertexAttribDivisor(pr.locations['a_b'], 1); |
||||
gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 1); |
||||
gl.vertexAttribDivisor(pr.locations['a_pressure'], 1); |
||||
|
||||
for (let b = 0; b < batches_tv.size - 2; b += 2) { |
||||
const batch_from = batches_tv.data[b + 0]; |
||||
const batch_size = batches_tv.data[b + 2] - batch_from; |
||||
let lod_level = batches_tv.data[b + 1]; |
||||
|
||||
if (config.debug_force_lod !== null) { |
||||
lod_level = config.debug_force_lod; |
||||
} |
||||
|
||||
const level = lod_levels[lod_level]; |
||||
|
||||
if (batch_size > 0) { |
||||
//stat_total_vertices += batch_size * level.data.indices.size;
|
||||
|
||||
gl.uniform1i(pr.locations['u_circle_points'], level.data.points.size / 2 - 4); |
||||
gl.uniform3f(pr.locations['u_debug_color'], |
||||
(lod_level * 785892 + 125127) % 8 / 7, |
||||
(lod_level * 901824 + 985835) % 8 / 7, |
||||
(lod_level * 232181 + 838533) % 8 / 7, |
||||
); |
||||
|
||||
// Points (a, b) and stroke ids are stored in separate cpu buffers so that points can be reused (look at stride and offset values)
|
||||
gl.vertexAttribPointer(pr.locations['a_a'], 2, gl.FLOAT, false, 2 * 4, batch_from * 2 * 4); |
||||
gl.vertexAttribPointer(pr.locations['a_b'], 2, gl.FLOAT, false, 2 * 4, batch_from * 2 * 4 + 2 * 4); |
||||
gl.vertexAttribIPointer(pr.locations['a_stroke_id'], 1, gl.INT, 4, points_tv.size * 4 + batch_from * 4); |
||||
gl.vertexAttribPointer(pr.locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, points_tv.size * 4 + ids_tv.size * 4 + batch_from); |
||||
gl.vertexAttribPointer(pr.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, base_lod_points_offset + level.vertices_offset, 4); |
||||
|
||||
gl.drawElementsInstanced(gl.TRIANGLES, level.data.indices.size, gl.UNSIGNED_INT, level.indices_offset, batch_size); |
||||
} |
||||
} |
||||
|
||||
// I don't really know why I need to do this, but it
|
||||
// makes background patter drawcall work properly
|
||||
gl.vertexAttribDivisor(pr.locations['a_pos'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_a'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_b'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_pressure'], 0); |
||||
|
||||
tv_pop(batches_tv); |
||||
tv_pop(batches_tv); |
||||
} |
||||
|
||||
async function draw(state, context, animate, ts, external_draw = false) { |
||||
const dt = ts - context.last_frame_ts; |
||||
const cpu_before = performance.now(); |
||||
|
||||
context.last_frame_ts = ts; |
||||
function draw(state, context) { |
||||
state.timers.raf = false; |
||||
|
||||
const gl = context.gl; |
||||
const width = window.innerWidth; |
||||
const height = window.innerHeight; |
||||
|
||||
let locations; |
||||
let buffers; |
||||
|
||||
bvh_clip(state, context); |
||||
|
||||
const segment_count = await geometry_write_instances(state, context); |
||||
const dynamic_segment_count = context.dynamic_segment_count; |
||||
const dynamic_stroke_count = context.dynamic_stroke_count; |
||||
|
||||
let query = null; |
||||
|
||||
if (context.gpu_timer_ext !== null) { |
||||
query = gl.createQuery(); |
||||
gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query); |
||||
} |
||||
|
||||
// Only clear once we have the data, this might not always be on the same frame?
|
||||
gl.viewport(0, 0, context.canvas.width, context.canvas.height); |
||||
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
||||
gl.clearDepth(0.0); |
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
||||
|
||||
const locations = context.locations; |
||||
const buffers = context.buffers; |
||||
const programs = context.programs; |
||||
const textures = context.textures; |
||||
|
||||
// Draw the background pattern
|
||||
if (state.background_pattern === 'dots') { |
||||
const pr = programs['dots']; |
||||
gl.useProgram(pr.program); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); |
||||
gl.enableVertexAttribArray(pr.locations['a_center']); |
||||
gl.vertexAttribPointer(pr.locations['a_center'], 2, gl.FLOAT, false, 2 * 4, 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_center'], 1); |
||||
|
||||
gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
|
||||
const zoom = state.canvas.zoom; |
||||
const zoom_log2 = Math.log2(zoom); |
||||
const zoom_previous = Math.pow(2, Math.floor(zoom_log2)); |
||||
const zoom_next = Math.pow(2, Math.ceil(zoom_log2)); |
||||
|
||||
// Previous level
|
||||
{ |
||||
const one_dot = new Float32Array(geometry_gen_quad(0, 0, 1 / zoom_previous)); |
||||
const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_previous, 32 / zoom_previous)); |
||||
const t = Math.min(1.0, 1.0 - (zoom / zoom_previous) / 2.0); |
||||
|
||||
gl.uniform1f(pr.locations['u_fadeout'], t); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dot_instances.length / 2); |
||||
} |
||||
|
||||
// Next level
|
||||
if (zoom_previous != zoom_next) { |
||||
const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_next, 32 / zoom_next)); |
||||
const t = Math.min(1.0, 1.0 - (zoom_next / zoom) / 2.0); |
||||
|
||||
gl.uniform1f(pr.locations['u_fadeout'], t); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dot_instances.length / 2); |
||||
} |
||||
} else if (state.background_pattern === 'grid') { |
||||
const pr = programs['grid']; |
||||
const zoom = state.canvas.zoom; |
||||
|
||||
let zoom_log8 = Math.log(zoom) / Math.log(8); |
||||
//if (zoom_log2 === Math.floor(zoom_log2)) {
|
||||
// zoom_log2 -= 0.001;
|
||||
//}
|
||||
|
||||
const zoom_previous = Math.pow(8, Math.floor(zoom_log8)); |
||||
let zoom_next = Math.pow(8, Math.ceil(zoom_log8)); |
||||
|
||||
if (zoom_next === zoom_previous) { |
||||
zoom_next = zoom_previous * 8; |
||||
} |
||||
|
||||
gl.useProgram(pr.program); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); |
||||
gl.enableVertexAttribArray(pr.locations['a_data']); |
||||
gl.vertexAttribPointer(pr.locations['a_data'], 2, gl.FLOAT, false, 2 * 4, 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_data'], 1); |
||||
|
||||
gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
gl.uniform1f(pr.locations['u_fadeout'], 1.0); |
||||
|
||||
// Previous level (major lines)
|
||||
{ |
||||
const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 32 / zoom_previous, 32 / zoom_previous)); |
||||
let t = (zoom / zoom_previous - 1) / -7 + 1; |
||||
t = 0.25; |
||||
|
||||
gl.uniform1f(pr.locations['u_fadeout'], t); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, grid_instances.length / 2); |
||||
} |
||||
|
||||
// Next level (minor lines)
|
||||
{ |
||||
const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 32 / zoom_next, 32 / zoom_next)); |
||||
let t = (zoom_next / zoom - 1) / 7; |
||||
t = Math.min(0.1, -t + 1); // slight fade-in
|
||||
|
||||
gl.uniform1f(pr.locations['u_fadeout'], t); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, grid_instances.length / 2); |
||||
} |
||||
} |
||||
gl.clear(gl.COLOR_BUFFER_BIT); |
||||
|
||||
// Images
|
||||
{ |
||||
const pr = programs['image']; |
||||
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT); // draw images above the background pattern
|
||||
gl.useProgram(pr.program); |
||||
|
||||
let offset = 0; |
||||
|
||||
const quads = geometry_image_quads(state, context); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_images']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, quads, gl.STATIC_DRAW); |
||||
gl.vertexAttribDivisor(pr.locations['a_pos'], 0); |
||||
|
||||
gl.enableVertexAttribArray(pr.locations['a_pos']); |
||||
gl.vertexAttribPointer(pr.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, 0); |
||||
|
||||
for (const entry of context.images) { |
||||
if (!entry.deleted) { |
||||
gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
gl.uniform1i(pr.locations['u_texture'], 0); // Only 1 active texture for each drawcall
|
||||
gl.uniform1i(pr.locations['u_solid'], 0); |
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, entry.texture); |
||||
gl.drawArrays(gl.TRIANGLES, offset, 6); |
||||
|
||||
// Highlight active image
|
||||
if (entry.key === state.active_image) { |
||||
gl.uniform1i(pr.locations['u_solid'], 1); |
||||
gl.uniform4f(pr.locations['u_color'], 0.133 * 0.5, 0.545 * 0.5, 0.902 * 0.5, 0.5); |
||||
gl.drawArrays(gl.TRIANGLES, offset, 6); |
||||
} |
||||
} |
||||
|
||||
offset += 6; |
||||
} |
||||
} |
||||
|
||||
// TODO: @speed we can do this once at startup
|
||||
const lod_levels = []; |
||||
let total_lod_floats = 0; |
||||
let total_lod_indices = 0; |
||||
let stat_total_vertices = 0; |
||||
for (let i = 0; i <= 6; ++i) { |
||||
const d = geometry_good_circle_and_dummy(i); |
||||
lod_levels.push({ |
||||
'data': d, |
||||
'vertices_offset': total_lod_floats * 4, |
||||
'indices_offset': total_lod_indices * 4, |
||||
}); |
||||
total_lod_floats += d.points.size; |
||||
total_lod_indices += d.indices.size; |
||||
} |
||||
|
||||
// "Static" data upload
|
||||
if (segment_count > 0) { |
||||
draw_strokes(state, context.canvas.width, context.canvas.height, programs, gl, lod_levels, segment_count, |
||||
total_lod_floats, |
||||
total_lod_indices, |
||||
context.instance_data_batches, |
||||
context.instance_data_points, |
||||
context.instance_data_ids, |
||||
context.instance_data_pressures, |
||||
buffers['b_strokes_static'], |
||||
buffers['i_strokes_static'], |
||||
textures['stroke_data'], |
||||
config.stroke_texture_size, |
||||
context.stroke_data, |
||||
state.events.length, // not really
|
||||
1.0, |
||||
); |
||||
} |
||||
|
||||
|
||||
// Dynamic draw (strokes currently being drawn)
|
||||
if (dynamic_segment_count > 0) { |
||||
// Dynamic strokes should be drawn above static strokes
|
||||
gl.clear(gl.DEPTH_BUFFER_BIT); |
||||
|
||||
draw_strokes(state, context.canvas.width, context.canvas.height, programs, gl, lod_levels, dynamic_segment_count, |
||||
total_lod_floats, |
||||
total_lod_indices, |
||||
context.dynamic_instance_batches, |
||||
context.dynamic_instance_points, |
||||
context.dynamic_instance_ids, |
||||
context.dynamic_instance_pressure, |
||||
buffers['b_strokes_dynamic'], |
||||
buffers['i_strokes_dynamic'], |
||||
textures['dynamic_stroke_data'], |
||||
config.stroke_texture_size, |
||||
context.dynamic_stroke_data, |
||||
context.dynamic_stroke_count, |
||||
0.5, |
||||
); |
||||
} |
||||
|
||||
// HUD: resize handles, etc
|
||||
if (state.active_image !== null) { |
||||
gl.clear(gl.DEPTH_BUFFER_BIT); |
||||
|
||||
const handles = geometry_generate_handles(state, context, state.active_image); |
||||
const ui_segments = 7 * 4 - 1; // each square = 4, each line = 1, square->line = 1, line->square = 1
|
||||
const hud_batches = tv_create(Uint32Array, 4); |
||||
|
||||
tv_add(hud_batches, 0); |
||||
tv_add(hud_batches, compute_circle_lod(state.canvas.zoom * 2)); |
||||
tv_add(hud_batches, ui_segments); |
||||
tv_add(hud_batches, -1); |
||||
locations = context.locations['quad']; |
||||
buffers = context.buffers['quad']; |
||||
|
||||
draw_strokes(state, context.canvas.width, context.canvas.height, programs, gl, lod_levels, ui_segments, |
||||
total_lod_floats, |
||||
total_lod_indices, |
||||
hud_batches, |
||||
handles.points, |
||||
handles.ids, |
||||
handles.pressures, |
||||
buffers['b_hud'], |
||||
buffers['i_hud'], |
||||
textures['ui'], |
||||
config.ui_texture_size, |
||||
handles.stroke_data, |
||||
8, |
||||
1.0, |
||||
); |
||||
} |
||||
gl.useProgram(context.programs['quad']); |
||||
|
||||
if (config.draw_bvh) { |
||||
const pr = programs['iquad']; |
||||
const bboxes = tv_create(Float32Array, context.clipped_indices.size * 4); |
||||
// Debug BVH viz
|
||||
for (let i = 0; i < context.clipped_indices.size; ++i) { |
||||
const stroke_id = context.clipped_indices.data[i]; |
||||
const stroke = state.events[stroke_id]; |
||||
tv_add(bboxes, stroke.bbox.x1); |
||||
tv_add(bboxes, stroke.bbox.y1); |
||||
tv_add(bboxes, stroke.bbox.x2); |
||||
tv_add(bboxes, stroke.bbox.y2); |
||||
} |
||||
|
||||
const quad_count = bboxes.size / 4; |
||||
gl.enableVertexAttribArray(locations['a_pos']); |
||||
gl.enableVertexAttribArray(locations['a_texcoord']); |
||||
|
||||
gl.useProgram(pr.program); |
||||
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
gl.uniform1i(locations['u_texture'], 0); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_iquads']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, tv_data(bboxes), gl.STREAM_DRAW); |
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
||||
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
||||
gl.bufferData(gl.ARRAY_BUFFER, context.quad_positions_f32, gl.STATIC_DRAW); |
||||
|
||||
gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); |
||||
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); |
||||
gl.bufferData(gl.ARRAY_BUFFER, context.quad_texcoords_f32, gl.STATIC_DRAW); |
||||
|
||||
gl.enableVertexAttribArray(pr.locations['a_topleft']); |
||||
gl.enableVertexAttribArray(pr.locations['a_bottomright']); |
||||
const count = Object.keys(context.textures).length; |
||||
let active_image_index = -1; |
||||
|
||||
gl.vertexAttribPointer(pr.locations['a_topleft'], 2, gl.FLOAT, false, 4 * 4, 0); |
||||
gl.vertexAttribPointer(pr.locations['a_bottomright'], 2, gl.FLOAT, false, 4 * 4, 2 * 4); |
||||
gl.uniform1i(locations['u_outline'], 0); |
||||
|
||||
gl.vertexAttribDivisor(pr.locations['a_topleft'], 1); |
||||
gl.vertexAttribDivisor(pr.locations['a_bottomright'], 1); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, quad_count); |
||||
|
||||
gl.vertexAttribDivisor(pr.locations['a_topleft'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_bottomright'], 0); |
||||
} |
||||
|
||||
if (config.draw_fullnodes) { |
||||
const quads = bvh_get_fullnodes_debug(state, context); |
||||
const pr = programs['iquad']; |
||||
const bboxes = tv_create(Float32Array, quads.length * 4); |
||||
|
||||
for (let i = 0; i < quads.length; ++i) { |
||||
const bbox = quads[i]; |
||||
tv_add(bboxes, bbox.x1); |
||||
tv_add(bboxes, bbox.y1); |
||||
tv_add(bboxes, bbox.x2); |
||||
tv_add(bboxes, bbox.y2); |
||||
for (let key = 0; key < count; ++key) { |
||||
if (context.textures[key].image_id === context.active_image) { |
||||
active_image_index = key; |
||||
continue; |
||||
} |
||||
|
||||
const quad_count = bboxes.size / 4; |
||||
|
||||
gl.useProgram(pr.program); |
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_iquads']); |
||||
gl.bufferData(gl.ARRAY_BUFFER, tv_data(bboxes), gl.STREAM_DRAW); |
||||
|
||||
gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
|
||||
gl.enableVertexAttribArray(pr.locations['a_topleft']); |
||||
gl.enableVertexAttribArray(pr.locations['a_bottomright']); |
||||
|
||||
gl.vertexAttribPointer(pr.locations['a_topleft'], 2, gl.FLOAT, false, 4 * 4, 0); |
||||
gl.vertexAttribPointer(pr.locations['a_bottomright'], 2, gl.FLOAT, false, 4 * 4, 2 * 4); |
||||
|
||||
gl.vertexAttribDivisor(pr.locations['a_topleft'], 1); |
||||
gl.vertexAttribDivisor(pr.locations['a_bottomright'], 1); |
||||
|
||||
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, quad_count); |
||||
|
||||
gl.vertexAttribDivisor(pr.locations['a_topleft'], 0); |
||||
gl.vertexAttribDivisor(pr.locations['a_bottomright'], 0); |
||||
gl.bindTexture(gl.TEXTURE_2D, context.textures[key].texture); |
||||
gl.drawArrays(gl.TRIANGLES, key * 6, 6); |
||||
} |
||||
|
||||
document.getElementById('debug-stats').innerHTML = ` |
||||
<span>Strokes onscreen: ${context.clipped_indices.size}</span> |
||||
<span>Segments onscreen: ${segment_count}</span> |
||||
<span>Total vertices: ${stat_total_vertices}</span> |
||||
<span>Canvas offset: (${Math.round(state.canvas.offset.x * 100) / 100}, ${Math.round(state.canvas.offset.y * 100) / 100})</span> |
||||
<span>Canvas zoom level: ${state.canvas.zoom_level}</span> |
||||
<span>Canvas zoom: ${Math.round(state.canvas.zoom * 10000) / 10000}</span>`; |
||||
|
||||
if (context.gpu_timer_ext) { |
||||
gl.endQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT); |
||||
|
||||
const next_tick = () => { |
||||
if (query) { |
||||
// At some point in the future, after returning control to the browser
|
||||
const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE); |
||||
const disjoint = gl.getParameter(context.gpu_timer_ext.GPU_DISJOINT_EXT); |
||||
|
||||
if (available && !disjoint) { |
||||
// See how much time the rendering of the object took in nanoseconds.
|
||||
const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); |
||||
//console.debug(timeElapsed / 1000000);
|
||||
document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'; |
||||
} |
||||
|
||||
if (available || disjoint) { |
||||
// Clean up the query object.
|
||||
gl.deleteQuery(query); |
||||
// Don't re-enter this polling loop.
|
||||
query = null; |
||||
} else if (!available) { |
||||
setTimeout(next_tick, 0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
setTimeout(next_tick, 0); |
||||
} |
||||
|
||||
const cpu_after = performance.now(); |
||||
|
||||
state.timers.raf = false; |
||||
|
||||
document.querySelector('.debug-timings .cpu').innerHTML = 'Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms'; |
||||
|
||||
if (state.debug.benchmark_mode) { |
||||
const redraw = state.debug.on_benchmark(); |
||||
if (redraw) { |
||||
schedule_draw(state, context); |
||||
} |
||||
} |
||||
|
||||
if (state.canvas.target_zoom != state.canvas.zoom) { |
||||
update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom, animate ? dt : 0); |
||||
if (!external_draw) { |
||||
schedule_draw(state, context, true); |
||||
} |
||||
if (active_image_index !== -1) { |
||||
gl.uniform1i(locations['u_outline'], 1); |
||||
gl.bindTexture(gl.TEXTURE_2D, context.textures[active_image_index].texture); |
||||
gl.drawArrays(gl.TRIANGLES, active_image_index * 6, 6); |
||||
} |
||||
} |
||||
|
||||
// https://www.youtube.com/watch?v=LSNQuFEDOyQ
|
||||
function exp_decay(a, b, decay, dt) { |
||||
return b + (a - b) * Math.exp(-decay * dt); |
||||
} |
||||
|
||||
function update_canvas_zoom(state, current, target, dt) { |
||||
let decay = config.animation_decay; |
||||
// Strokes
|
||||
locations = context.locations['stroke']; |
||||
buffers = context.buffers['stroke']; |
||||
|
||||
gl.useProgram(context.programs['stroke']); |
||||
|
||||
gl.enableVertexAttribArray(locations['a_type']); |
||||
gl.enableVertexAttribArray(locations['a_pos']); |
||||
gl.enableVertexAttribArray(locations['a_texcoord']); |
||||
gl.enableVertexAttribArray(locations['a_color']); |
||||
|
||||
if (state.zoomdown) { |
||||
decay *= config.vertical_zoom_speed_multiplier; // to make it feel more responsive at fast speed
|
||||
} |
||||
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); |
||||
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); |
||||
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); |
||||
|
||||
if (Math.abs(1.0 - current / target) > 0.01) { |
||||
state.canvas.zoom = exp_decay(state.canvas.zoom, target, decay, dt / 1000.0); |
||||
} else { |
||||
state.canvas.zoom = target; |
||||
} |
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed']); |
||||
|
||||
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, config.bytes_per_point, 0); |
||||
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, config.bytes_per_point, 8); |
||||
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 16); |
||||
gl.vertexAttribPointer(locations['a_type'], 1, gl.UNSIGNED_BYTE, false, config.bytes_per_point, 19); |
||||
|
||||
// https://gist.github.com/aolo2/a373363419bd5a9283977ab9f8841f78
|
||||
const zc = state.canvas.zoom_screenp; |
||||
state.canvas.offset.x = zc.x - (zc.x - state.canvas.offset.x) * state.canvas.zoom / current; |
||||
state.canvas.offset.y = zc.y - (zc.y - state.canvas.offset.y) * state.canvas.zoom / current; |
||||
gl.bufferData(gl.ARRAY_BUFFER, context.static_stroke_serializer.buffer, gl.STATIC_DRAW); |
||||
gl.drawArrays(gl.TRIANGLES, 0, context.static_stroke_serializer.offset / config.bytes_per_point); |
||||
|
||||
update_cursor(state); |
||||
} |
||||
gl.bufferData(gl.ARRAY_BUFFER, context.dynamic_stroke_serializer.buffer, gl.STATIC_DRAW); |
||||
gl.drawArrays(gl.TRIANGLES, 0, context.dynamic_stroke_serializer.offset / config.bytes_per_point); |
||||
} |
||||
@ -1,829 +1,244 @@
@@ -1,829 +1,244 @@
|
||||
function geometry_prepare_stroke(state) { |
||||
if (!state.online) { |
||||
return null; |
||||
} |
||||
|
||||
const player = state.players[state.me]; |
||||
const stroke = player.strokes[player.strokes.length - 1]; // MY OWN player.strokes should never be bigger than 1 element
|
||||
|
||||
if (stroke.points.length === 0) { |
||||
return null; |
||||
} |
||||
|
||||
const points = process_stroke2(state.canvas.zoom, stroke.points); |
||||
|
||||
return { |
||||
'color': stroke.color, |
||||
'width': stroke.width, |
||||
'points': points, |
||||
'user_id': state.me, |
||||
}; |
||||
} |
||||
|
||||
async function geometry_write_instances(state, context, callback) { |
||||
state.stats.rdp_max_count = 0; |
||||
state.stats.rdp_segments = 0; |
||||
|
||||
const segment_count = await do_lod(state, context); |
||||
|
||||
if (config.debug_print) console.debug('instances:', segment_count, 'rdp max:', state.stats.rdp_max_count, 'rdp segments:', state.stats.rdp_segments); |
||||
|
||||
return segment_count; |
||||
} |
||||
|
||||
function geometry_add_dummy_stroke(state, context) { |
||||
context.stroke_data = ser_ensure_by(context.stroke_data, config.bytes_per_stroke); |
||||
ser_u16(context.stroke_data, 0); |
||||
ser_u16(context.stroke_data, 0); |
||||
ser_u16(context.stroke_data, 0); |
||||
ser_u16(context.stroke_data, 0); |
||||
|
||||
tv_add(state.wasm.buffers['width'].tv, 0); |
||||
state.wasm.buffers['width'].used += 4; |
||||
} |
||||
|
||||
// Real stroke, add forever
|
||||
function geometry_add_stroke(state, context, stroke, stroke_index, skip_bvh = false) { |
||||
if (!state.online || !stroke || stroke.coords_to - stroke.coords_from === 0 || stroke.deleted) return; |
||||
|
||||
stroke.bbox = stroke_bbox(state, stroke); |
||||
stroke.area = box_area(stroke.bbox); |
||||
|
||||
context.stroke_data = ser_ensure_by(context.stroke_data, config.bytes_per_stroke); |
||||
|
||||
function push_point(s, x, y, u, v, r, g, b, type) { |
||||
ser_f32(s, x); |
||||
ser_f32(s, y); |
||||
ser_f32(s, u); |
||||
ser_f32(s, v); |
||||
// ser_u8(s, Math.floor(Math.random() * 255));
|
||||
// ser_u8(s, Math.floor(Math.random() * 255));
|
||||
// ser_u8(s, Math.floor(Math.random() * 255));
|
||||
ser_u8(s, r); |
||||
ser_u8(s, g); |
||||
ser_u8(s, b); |
||||
ser_u8(s, type); |
||||
} |
||||
|
||||
function push_circle(s, cx, cy, radius, r, g, b) { |
||||
push_point(s, cx - radius, cy - radius, 0, 0, r, g, b, 1); |
||||
push_point(s, cx - radius, cy + radius, 0, 1, r, g, b, 1); |
||||
push_point(s, cx + radius, cy - radius, 1, 0, r, g, b, 1); |
||||
|
||||
push_point(s, cx + radius, cy + radius, 1, 1, r, g, b, 1); |
||||
push_point(s, cx + radius, cy - radius, 1, 0, r, g, b, 1); |
||||
push_point(s, cx - radius, cy + radius, 0, 1, r, g, b, 1); |
||||
} |
||||
|
||||
function push_quad(s, p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y, r, g, b) { |
||||
push_point(s, p1x, p1y, 0, 0, r, g, b, 0); |
||||
push_point(s, p2x, p2y, 0, 1, r, g, b, 0); |
||||
push_point(s, p3x, p3y, 1, 0, r, g, b, 0); |
||||
|
||||
push_point(s, p4x, p4y, 1, 1, r, g, b, 0); |
||||
push_point(s, p3x, p3y, 1, 0, r, g, b, 0); |
||||
push_point(s, p2x, p2y, 0, 1, r, g, b, 0); |
||||
} |
||||
|
||||
function push_stroke(s, stroke) { |
||||
const stroke_width = stroke.width; |
||||
const points = stroke.points; |
||||
const color_u32 = stroke.color; |
||||
|
||||
const r = (color_u32 >> 16) & 0xFF; |
||||
const g = (color_u32 >> 8) & 0xFF; |
||||
const b = color_u32 & 0xFF; |
||||
|
||||
ser_u16(context.stroke_data, r); |
||||
ser_u16(context.stroke_data, g); |
||||
ser_u16(context.stroke_data, b); |
||||
ser_u16(context.stroke_data, stroke.width); |
||||
|
||||
tv_add(state.wasm.buffers['width'].tv, stroke.width); |
||||
state.wasm.buffers['width'].used += 4; |
||||
|
||||
if (!skip_bvh) bvh_add_stroke(state, state.bvh, stroke_index, stroke); |
||||
} |
||||
|
||||
function recompute_dynamic_data(state, context) { |
||||
let total_points = 0; |
||||
let total_strokes = 0; |
||||
|
||||
for (const player_id in state.players) { |
||||
const player = state.players[player_id]; |
||||
for (const stroke of player.strokes) { |
||||
if (!stroke.empty && stroke.points.length > 0) { |
||||
total_points += stroke.points.length; |
||||
total_strokes += 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
tv_ensure(context.dynamic_instance_points, round_to_pow2(total_points * 2, 4096)); |
||||
tv_ensure(context.dynamic_instance_pressure, round_to_pow2(total_points, 4096)); |
||||
tv_ensure(context.dynamic_instance_ids, round_to_pow2(total_points, 4096)); |
||||
tv_ensure(context.dynamic_instance_batches, round_to_pow2(total_strokes * 2, 4096)); |
||||
|
||||
tv_clear(context.dynamic_instance_points); |
||||
tv_clear(context.dynamic_instance_pressure); |
||||
tv_clear(context.dynamic_instance_ids); |
||||
tv_clear(context.dynamic_instance_batches); |
||||
|
||||
context.dynamic_stroke_data = ser_ensure(context.dynamic_stroke_data, config.bytes_per_stroke * total_strokes); |
||||
ser_clear(context.dynamic_stroke_data); |
||||
|
||||
let stroke_index = 0; |
||||
let last_lod = -100; |
||||
let batch_size = 0; |
||||
|
||||
for (const player_id in state.players) { |
||||
// player has the same data as their current stroke: points, color, width
|
||||
const player = state.players[player_id]; |
||||
|
||||
for (const stroke of player.strokes) { |
||||
if (!stroke.empty && stroke.points.length > 0) { |
||||
for (let i = 0; i < stroke.points.length; ++i) { |
||||
const p = stroke.points[i]; |
||||
|
||||
tv_add(context.dynamic_instance_points, p.x); |
||||
tv_add(context.dynamic_instance_points, p.y); |
||||
tv_add(context.dynamic_instance_pressure, p.pressure); |
||||
|
||||
if (i !== stroke.points.length - 1) { |
||||
tv_add(context.dynamic_instance_ids, stroke_index); |
||||
} else { |
||||
tv_add(context.dynamic_instance_ids, stroke_index | (1 << 31)); |
||||
} |
||||
} |
||||
|
||||
const color_u32 = stroke.color; |
||||
const r = (color_u32 >> 16) & 0xFF; |
||||
const g = (color_u32 >> 8) & 0xFF; |
||||
const b = color_u32 & 0xFF; |
||||
|
||||
ser_u16(context.dynamic_stroke_data, r); |
||||
ser_u16(context.dynamic_stroke_data, g); |
||||
ser_u16(context.dynamic_stroke_data, b); |
||||
ser_u16(context.dynamic_stroke_data, stroke.width); |
||||
|
||||
const perceptual_width = stroke.width * state.canvas.zoom; |
||||
const lod = compute_circle_lod(perceptual_width); |
||||
|
||||
// Copypaste from the WASM version @lod
|
||||
if (batch_size > 0 && lod !== last_lod) { |
||||
tv_add(context.dynamic_instance_batches, batch_size); |
||||
tv_add(context.dynamic_instance_batches, last_lod); |
||||
batch_size = 0; |
||||
} |
||||
|
||||
batch_size += stroke.points.length; |
||||
last_lod = lod; |
||||
|
||||
stroke_index += 1; // TODO: proper player Z order
|
||||
} |
||||
} |
||||
if (points.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
if (batch_size > 0) { |
||||
tv_add(context.dynamic_instance_batches, batch_size); |
||||
tv_add(context.dynamic_instance_batches, last_lod); |
||||
if (points.length === 1) { |
||||
push_circle(s, points[0].x, points[0].y, stroke_width / 2, r, g, b); |
||||
return; |
||||
} |
||||
|
||||
context.dynamic_segment_count = total_points; |
||||
context.dynamic_stroke_count = total_strokes; |
||||
|
||||
let batch_base = 0; |
||||
for (let i = 0; i < points.length - 1; ++i) { |
||||
const px = points[i].x; |
||||
const py = points[i].y; |
||||
|
||||
for (let i = 0; i < context.dynamic_instance_batches.size; i += 2) { |
||||
const nbatches = context.dynamic_instance_batches.data[i * 2 + 0]; |
||||
context.dynamic_instance_batches.data[i * 2 + 0] = batch_base; |
||||
batch_base += nbatches; |
||||
} |
||||
} |
||||
|
||||
function compute_circle_lod(perceptual_width) { |
||||
let lod; |
||||
|
||||
if (perceptual_width < 1.9) { |
||||
lod = 0; |
||||
} else if (perceptual_width < 4.56) { |
||||
lod = 1; |
||||
} else if (perceptual_width < 6.12) { |
||||
lod = 2; |
||||
} else if (perceptual_width < 25.08) { |
||||
lod = 3; |
||||
} else if (perceptual_width < 122.74) { |
||||
lod = 4; |
||||
} else if (perceptual_width < 1710.0) { |
||||
lod = 5; |
||||
} else { |
||||
lod = 6; |
||||
} |
||||
const nextpx = points[i + 1].x; |
||||
const nextpy = points[i + 1].y; |
||||
|
||||
return lod; |
||||
} |
||||
const d1x = nextpx - px; |
||||
const d1y = nextpy - py; |
||||
|
||||
function geometry_start_prestroke(state, player_id) { |
||||
if (!state.online) return; |
||||
// Perpendicular to (d1x, d1y), points to the LEFT
|
||||
let perp1x = -d1y; |
||||
let perp1y = d1x; |
||||
|
||||
const player = state.players[player_id]; |
||||
const perpnorm1 = Math.sqrt(perp1x * perp1x + perp1y * perp1y); |
||||
|
||||
player.strokes.push({ |
||||
'empty': false, |
||||
'points': [], |
||||
'raw_points': [], |
||||
'head': null, |
||||
'color': player.color, |
||||
'width': player.width, |
||||
}); |
||||
perp1x /= perpnorm1; |
||||
perp1y /= perpnorm1; |
||||
|
||||
player.current_prestroke = true; |
||||
} |
||||
const s1x = px + perp1x * stroke_width / 2; |
||||
const s1y = py + perp1y * stroke_width / 2; |
||||
const s2x = px - perp1x * stroke_width / 2; |
||||
const s2y = py - perp1y * stroke_width / 2; |
||||
|
||||
function geometry_end_prestroke(state, player_id) { |
||||
if (!state.online) return; |
||||
const player = state.players[player_id]; |
||||
player.current_prestroke = false; |
||||
} |
||||
const s3x = nextpx + perp1x * stroke_width / 2; |
||||
const s3y = nextpy + perp1y * stroke_width / 2; |
||||
const s4x = nextpx - perp1x * stroke_width / 2; |
||||
const s4y = nextpy - perp1y * stroke_width / 2; |
||||
|
||||
function geometry_add_prepoint(state, context, player_id, point, is_pen, raw = false) { |
||||
if (config.p === 'demetri') { |
||||
return geometry_add_prepoint_demetri(state, context, player_id, point, is_pen, raw); |
||||
} else if (config.p == 'raw') { |
||||
return geometry_add_prepoint_raw(state, context, player_id, point, is_pen, raw); |
||||
} else if (config.p == 'avg') { |
||||
return geometry_add_prepoint_new(state, context, player_id, point, is_pen, raw); |
||||
} else if (config.p == 'perf') { |
||||
return geometry_add_prepoint_old(state, context, player_id, point, is_pen, raw); |
||||
push_quad(s, s2x, s2y, s1x, s1y, s4x, s4y, s3x, s3y, r, g, b); |
||||
push_circle(s, px, py, stroke_width / 2, r, g, b); |
||||
} |
||||
} |
||||
|
||||
function geometry_add_prepoint_demetri(state, context, player_id, point, is_pen, raw = false) { |
||||
if (!state.online) return; |
||||
const lastp = points[points.length - 1]; |
||||
|
||||
const player = state.players[player_id]; |
||||
const stroke = player.strokes[player.strokes.length - 1]; |
||||
|
||||
stroke.raw_points.push(point); |
||||
stroke.points = smooth_curve(stroke.raw_points); |
||||
|
||||
if (point.pressure < config.min_pressure) { |
||||
point.pressure = config.min_pressure; |
||||
} |
||||
|
||||
recompute_dynamic_data(state, context); |
||||
push_circle(s, lastp.x, lastp.y, stroke_width / 2, r, g, b); |
||||
} |
||||
|
||||
function geometry_add_prepoint_raw(state, context, player_id, point, is_pen, raw = false) { |
||||
if (!state.online) return; |
||||
|
||||
const player = state.players[player_id]; |
||||
const stroke = player.strokes[player.strokes.length - 1]; |
||||
const points = stroke.points; |
||||
|
||||
if (point.pressure < config.min_pressure) { |
||||
point.pressure = config.min_pressure; |
||||
function geometry_prepare_stroke(state) { |
||||
if (!state.online) { |
||||
return null; |
||||
} |
||||
|
||||
points.push(point); |
||||
|
||||
recompute_dynamic_data(state, context); |
||||
return { |
||||
'color': state.players[state.me].color, |
||||
'width': state.players[state.me].width, |
||||
'points': process_stroke(state, state.players[state.me].points), |
||||
'user_id': state.me, |
||||
}; |
||||
} |
||||
|
||||
function average_screen_speed(state, points, last, range=10) { |
||||
let screen_last = canvas_to_screen(state, points[points.length - 1]); |
||||
let sum_speed = 0; |
||||
let n = 0; |
||||
function geometry_add_stroke(state, context, stroke) { |
||||
if (!state.online || !stroke) return; |
||||
|
||||
for (let i = points.length - 1; i >= 0 && i >= points.length - range; --i) { |
||||
const point = points[i]; |
||||
const screen_this = canvas_to_screen(state, point); |
||||
const screen_dx = Math.abs(screen_this.x - screen_last.x); |
||||
const screen_dy = Math.abs(screen_this.y - screen_last.y); |
||||
const screen_speed = Math.sqrt(screen_dx * screen_dx + screen_dy * screen_dy); |
||||
const bytes_left = context.static_stroke_serializer.size - context.static_stroke_serializer.offset; |
||||
const bytes_needed = (stroke.points.length * 12 + 6) * config.bytes_per_point; |
||||
|
||||
sum_speed += screen_speed; |
||||
n++; |
||||
if (bytes_left < bytes_needed) { |
||||
const old_view = context.static_stroke_serializer.strview; |
||||
const old_offset = context.static_stroke_serializer.offset; |
||||
|
||||
screen_last = screen_this; |
||||
} |
||||
const new_size = Math.ceil((context.static_stroke_serializer.size + bytes_needed) * 1.62); |
||||
|
||||
if (n === 0) { |
||||
return 0; |
||||
context.static_stroke_serializer = serializer_create(new_size); |
||||
context.static_stroke_serializer.strview.set(old_view); |
||||
context.static_stroke_serializer.offset = old_offset; |
||||
} |
||||
|
||||
return sum_speed / n; |
||||
push_stroke(context.static_stroke_serializer, stroke); |
||||
} |
||||
|
||||
function geometry_add_prepoint_new(state, context, player_id, point, is_pen, raw = false) { |
||||
if (!state.online) return; |
||||
|
||||
const player = state.players[player_id]; |
||||
const stroke = player.strokes[player.strokes.length - 1]; |
||||
const points = stroke.points; |
||||
const raw_points = stroke.raw_points; |
||||
|
||||
if (point.pressure < config.min_pressure) { |
||||
point.pressure = config.min_pressure; |
||||
} |
||||
|
||||
let avg_window = 0; |
||||
|
||||
if (raw_points.length > 0) { |
||||
const screen_speed = average_screen_speed(state, raw_points, point); |
||||
|
||||
// Empirically chosen.
|
||||
// TODO: dpi scaling?
|
||||
const bot = 1; |
||||
const top = 10; |
||||
|
||||
const max_avg_window = config.avg_window; |
||||
function recompute_dynamic_data(state, context) { |
||||
let bytes_needed = 0; |
||||
|
||||
if (screen_speed <= bot) { |
||||
avg_window = max_avg_window; |
||||
} else if (screen_speed >= top) { |
||||
avg_window = 0; |
||||
} else { |
||||
const onezero = 1.0 - (screen_speed - bot) / (top - bot); |
||||
avg_window = Math.floor(onezero * max_avg_window); |
||||
for (const player_id in state.players) { |
||||
const player = state.players[player_id]; |
||||
if (player.points.length > 0) { |
||||
bytes_needed += (player.points.length * 12 + 6) * config.bytes_per_point; |
||||
} |
||||
} |
||||
|
||||
avg_window = Math.min(avg_window, raw_points.length); |
||||
|
||||
let xsum = 0; |
||||
let ysum = 0; |
||||
|
||||
for (let i = raw_points.length - avg_window; i < raw_points.length; ++i) { |
||||
xsum += raw_points[i].x; |
||||
ysum += raw_points[i].y; |
||||
} |
||||
|
||||
xsum += point.x; |
||||
ysum += point.y; |
||||
|
||||
points.push({ |
||||
'x': xsum / (avg_window + 1), |
||||
'y': ysum / (avg_window + 1), |
||||
'pressure': point.pressure |
||||
}); |
||||
|
||||
stroke.raw_points.push(point); |
||||
|
||||
|
||||
recompute_dynamic_data(state, context); |
||||
} |
||||
|
||||
function geometry_add_prepoint_old(state, context, player_id, point, is_pen, raw = false) { |
||||
if (!state.online) return; |
||||
|
||||
const player = state.players[player_id]; |
||||
const stroke = player.strokes[player.strokes.length - 1]; |
||||
const points = stroke.points; |
||||
|
||||
if (point.pressure < config.min_pressure) { |
||||
point.pressure = config.min_pressure; |
||||
if (bytes_needed > context.dynamic_stroke_serializer.size) { |
||||
context.dynamic_stroke_serializer = serializer_create(Math.ceil(bytes_needed * 1.62)); |
||||
} else { |
||||
context.dynamic_stroke_serializer.offset = 0; |
||||
} |
||||
|
||||
if (points.length > 0 && !raw) { |
||||
// pulled from "perfect-freehand" package. MIT
|
||||
// https://github.com/steveruizok/perfect-freehand/
|
||||
const streamline = 0.75; |
||||
const t = 0.15 + (1 - streamline) * 0.85 |
||||
const smooth_pressure = exponential_smoothing(points, point, 3); |
||||
|
||||
points.push({ |
||||
'x': stroke.head.x * t + point.x * (1 - t), |
||||
'y': stroke.head.y * t + point.y * (1 - t), |
||||
'pressure': is_pen ? stroke.head.pressure * t + smooth_pressure * (1 - t) : point.pressure, |
||||
}); |
||||
|
||||
if (is_pen) { |
||||
point.pressure = smooth_pressure; |
||||
for (const player_id in state.players) { |
||||
// player has the same data as their current stroke: points, color, width
|
||||
const player = state.players[player_id]; |
||||
if (player.points.length > 0) { |
||||
push_stroke(context.dynamic_stroke_serializer, player); |
||||
} |
||||
} else { |
||||
points.push(point); |
||||
} |
||||
|
||||
stroke.head = point; |
||||
|
||||
recompute_dynamic_data(state, context); |
||||
} |
||||
|
||||
// Remove prestroke from dynamic data (usually because it's now a real stroke)
|
||||
function geometry_clear_oldest_prestroke(state, context, player_id) { |
||||
function geometry_add_point(state, context, player_id, point) { |
||||
if (!state.online) return; |
||||
|
||||
const player = state.players[player_id]; |
||||
player.strokes.shift(); |
||||
|
||||
if (player.strokes.length === 0) { |
||||
player.current_prestroke = false; |
||||
} |
||||
|
||||
state.players[player_id].points.push(point); |
||||
recompute_dynamic_data(state, context); |
||||
} |
||||
|
||||
function geometry_clear_newest_prestroke(state, context, player_id) { |
||||
function geometry_clear_player(state, context, player_id) { |
||||
if (!state.online) return; |
||||
|
||||
const player = state.players[player_id]; |
||||
player.strokes.pop(); |
||||
|
||||
if (player.strokes.length === 0) { |
||||
player.current_prestroke = false; |
||||
} |
||||
|
||||
state.players[player_id].points.length = 0; |
||||
recompute_dynamic_data(state, context); |
||||
} |
||||
|
||||
function add_image(context, image_id, bitmap, p, width, height) { |
||||
function add_image(context, image_id, bitmap, p) { |
||||
const x = p.x; |
||||
const y = p.y; |
||||
const gl = context.gl; |
||||
let entry = null; |
||||
|
||||
// If bitmap not available yet - create placeholder
|
||||
// Otherwise - upload actual bitmap
|
||||
if (bitmap === null) { |
||||
entry = { |
||||
'texture': gl.createTexture(), |
||||
'key': image_id, |
||||
'at': {...p}, |
||||
'raw_at': {...p}, |
||||
'width': width, |
||||
'height': height, |
||||
'transform_history': [ p.x, p.y, width, height ], |
||||
'transform_head': 4, |
||||
}; |
||||
|
||||
context.images.push(entry); |
||||
} else { |
||||
entry = get_image(context, image_id); |
||||
} |
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, entry.texture); |
||||
|
||||
if (bitmap !== null) { |
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, bitmap); |
||||
gl.generateMipmap(gl.TEXTURE_2D); |
||||
} else { |
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4 * width * height)); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
||||
gl.generateMipmap(gl.TEXTURE_2D); |
||||
} |
||||
} |
||||
|
||||
function scale_image(image, corner, canvasp) { |
||||
let new_width, new_height; |
||||
|
||||
const old_x2 = image.at.x + image.width; |
||||
const old_y2 = image.at.y + image.height; |
||||
|
||||
if (corner === 0) { |
||||
image.at.x = canvasp.x; |
||||
image.at.y = canvasp.y; |
||||
new_width = old_x2 - image.at.x; |
||||
new_height = old_y2 - image.at.y; |
||||
} else if (corner === 1) { |
||||
image.at.y = canvasp.y; |
||||
new_width = canvasp.x - image.at.x; |
||||
new_height = old_y2 - image.at.y; |
||||
} else if (corner === 2) { |
||||
new_width = canvasp.x - image.at.x; |
||||
new_height = canvasp.y - image.at.y; |
||||
} else if (corner === 3) { |
||||
image.at.x = canvasp.x; |
||||
new_width = old_x2 - image.at.x; |
||||
new_height = canvasp.y - image.at.y; |
||||
} |
||||
|
||||
image.width = new_width; |
||||
image.height = new_height; |
||||
} |
||||
|
||||
function image_at(context, x, y) { |
||||
// Iterate back to front to pick the image at the front first
|
||||
for (let i = context.images.length - 1; i >= 0; --i) { |
||||
const image = context.images[i]; |
||||
if (!image.deleted) { |
||||
const at = image.at; |
||||
const w = image.width; |
||||
const h = image.height; |
||||
|
||||
const in_x = (at.x <= x && x <= at.x + w) || (at.x + w <= x && x <= at.x); |
||||
const in_y = (at.y <= y && y <= at.y + h) || (at.y + h <= y && y <= at.y); |
||||
|
||||
if (in_x && in_y) { |
||||
return image; |
||||
} |
||||
} |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function image_corner(state, image, canvasp) { |
||||
const sp = canvas_to_screen(state, canvasp); |
||||
const at = canvas_to_screen(state, image.at); |
||||
const w = image.width * state.canvas.zoom; |
||||
const h = image.height * state.canvas.zoom; |
||||
|
||||
const width = 8; |
||||
|
||||
if (at.x - width <= sp.x && sp.x <= at.x + width && at.y - width <= sp.y && sp.y <= at.y + width) { |
||||
return 0; |
||||
} |
||||
|
||||
if (at.x + w - width <= sp.x && sp.x <= at.x + w + width && at.y - width <= sp.y && sp.y <= at.y + width) { |
||||
return 1; |
||||
} |
||||
|
||||
if (at.x + w - width <= sp.x && sp.x <= at.x + w + width && at.y + h - width <= sp.y && sp.y <= at.y + h + width) { |
||||
return 2; |
||||
} |
||||
|
||||
if (at.x - width <= sp.x && sp.x <= at.x + width && at.y + h - width <= sp.y && sp.y <= at.y + h + width) { |
||||
return 3; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
function geometry_gen_circle(cx, cy, r, n) { |
||||
const step = 2 * Math.PI / n; |
||||
const result = []; |
||||
|
||||
for (let i = 0; i < n; ++i) { |
||||
const theta = i * step; |
||||
const next_theta = (i < n - 1 ? (i + 1) * step : 0); |
||||
const x = cx + r * Math.cos(theta); |
||||
const y = cy + r * Math.sin(theta); |
||||
const next_x = cx + r * Math.cos(next_theta); |
||||
const next_y = cy + r * Math.sin(next_theta); |
||||
result.push(cx, cy, x, y, next_x, next_y); |
||||
} |
||||
const id = Object.keys(context.textures).length; |
||||
|
||||
return result; |
||||
} |
||||
|
||||
function geometry_gen_quad(cx, cy, r) { |
||||
const result = [ |
||||
cx - r, |
||||
cy - r, |
||||
cx + r, |
||||
cy - r, |
||||
cx - r, |
||||
cy + r, |
||||
cx + r, |
||||
cy + r, |
||||
cx - r, |
||||
cy + r, |
||||
cx + r, |
||||
cy - r, |
||||
]; |
||||
|
||||
return result; |
||||
} |
||||
|
||||
function geometry_gen_fullscreen_grid(state, context, step_x, step_y) { |
||||
const result = []; |
||||
const width = context.canvas.width; |
||||
const height = context.canvas.height; |
||||
const topleft = screen_to_canvas(state, {'x': 0, 'y': 0}); |
||||
const bottomright = screen_to_canvas(state, {'x': width, 'y': height}); |
||||
|
||||
topleft.x = Math.floor(topleft.x / step_x) * step_x; |
||||
topleft.y = Math.ceil(topleft.y / step_y) * step_y; |
||||
|
||||
bottomright.x = Math.floor(bottomright.x / step_x) * step_x; |
||||
bottomright.y = Math.ceil(bottomright.y / step_y) * step_y; |
||||
|
||||
for (let y = topleft.y; y <= bottomright.y; y += step_y) { |
||||
for (let x = topleft.x; x <= bottomright.x; x += step_x) { |
||||
result.push(x, y); |
||||
} |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
|
||||
function geometry_gen_fullscreen_grid_1d(state, context, step_x, step_y) { |
||||
const result = []; |
||||
const width = context.canvas.width; |
||||
const height = context.canvas.height; |
||||
const topleft = screen_to_canvas(state, {'x': 0, 'y': 0}); |
||||
const bottomright = screen_to_canvas(state, {'x': width, 'y': height}); |
||||
context.textures[id] = { |
||||
'texture': gl.createTexture(), |
||||
'image_id': image_id |
||||
}; |
||||
|
||||
topleft.x = Math.floor(topleft.x / step_x) * step_x; |
||||
topleft.y = Math.floor(topleft.y / step_y) * step_y; |
||||
gl.bindTexture(gl.TEXTURE_2D, context.textures[id].texture); |
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, bitmap); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
||||
|
||||
bottomright.x = Math.ceil(bottomright.x / step_x) * step_x; |
||||
bottomright.y = Math.ceil(bottomright.y / step_y) * step_y; |
||||
context.quad_positions.push(...[ |
||||
x, y, |
||||
x, y + bitmap.height, |
||||
x + bitmap.width, y + bitmap.height, |
||||
|
||||
for (let x = topleft.x; x <= bottomright.x; x += step_x) { |
||||
result.push(1, x); |
||||
} |
||||
x + bitmap.width, y, |
||||
x, y, |
||||
x + bitmap.width, y + bitmap.height, |
||||
]); |
||||
|
||||
for (let y = topleft.y; y <= bottomright.y; y += step_y) { |
||||
result.push(-1, y); |
||||
} |
||||
context.quad_texcoords.push(...[ |
||||
0, 0, |
||||
0, 1, |
||||
1, 1, |
||||
1, 0, |
||||
0, 0, |
||||
1, 1, |
||||
]); |
||||
|
||||
return result; |
||||
context.quad_positions_f32 = new Float32Array(context.quad_positions); |
||||
context.quad_texcoords_f32 = new Float32Array(context.quad_texcoords); |
||||
} |
||||
|
||||
function geometry_image_quads(state, context) { |
||||
const result = new Float32Array(context.images.length * 12); |
||||
|
||||
for (let i = 0; i < context.images.length; ++i) { |
||||
const entry = context.images[i]; |
||||
function move_image(context, image_event) { |
||||
const x = image_event.x; |
||||
const y = image_event.y; |
||||
|
||||
result[i * 12 + 0] = entry.at.x; |
||||
result[i * 12 + 1] = entry.at.y; |
||||
const count = Object.keys(context.textures).length; |
||||
|
||||
result[i * 12 + 2] = entry.at.x + entry.width; |
||||
result[i * 12 + 3] = entry.at.y; |
||||
for (let id = 0; id < count; ++id) { |
||||
const image = context.textures[id]; |
||||
if (image.image_id === image_event.image_id) { |
||||
context.quad_positions[id * 12 + 0] = x; |
||||
context.quad_positions[id * 12 + 1] = y; |
||||
context.quad_positions[id * 12 + 2] = x; |
||||
context.quad_positions[id * 12 + 3] = y + image_event.height; |
||||
context.quad_positions[id * 12 + 4] = x + image_event.width; |
||||
context.quad_positions[id * 12 + 5] = y + image_event.height; |
||||
|
||||
result[i * 12 + 4] = entry.at.x; |
||||
result[i * 12 + 5] = entry.at.y + entry.height; |
||||
context.quad_positions[id * 12 + 6] = x + image_event.width; |
||||
context.quad_positions[id * 12 + 7] = y; |
||||
context.quad_positions[id * 12 + 8] = x; |
||||
context.quad_positions[id * 12 + 9] = y; |
||||
context.quad_positions[id * 12 + 10] = x + image_event.width; |
||||
context.quad_positions[id * 12 + 11] = y + image_event.height; |
||||
|
||||
result[i * 12 + 6] = entry.at.x + entry.width; |
||||
result[i * 12 + 7] = entry.at.y + entry.height; |
||||
|
||||
result[i * 12 + 8] = entry.at.x; |
||||
result[i * 12 + 9] = entry.at.y + entry.height; |
||||
|
||||
result[i * 12 + 10] = entry.at.x + entry.width; |
||||
result[i * 12 + 11] = entry.at.y; |
||||
} |
||||
context.quad_positions_f32 = new Float32Array(context.quad_positions); |
||||
|
||||
return result; |
||||
} |
||||
|
||||
function geometry_generate_handles(state, context, active_image) { |
||||
let image = null; |
||||
|
||||
for (const entry of context.images) { |
||||
if (entry.key === active_image) { |
||||
image = entry; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
const x1 = image.at.x; |
||||
const y1 = image.at.y; |
||||
const x2 = image.at.x + image.width; |
||||
const y2 = image.at.y + image.height; |
||||
|
||||
const width = 4 / state.canvas.zoom; |
||||
|
||||
const points = new Float32Array([ |
||||
// top-left handle
|
||||
x1 - width, y1 - width, |
||||
x1 + width, y1 - width, |
||||
x1 + width, y1 + width, |
||||
x1 - width, y1 + width, |
||||
x1 - width, y1 - width, |
||||
|
||||
// -> top-right
|
||||
x1 + width, y1, |
||||
x2 - width, y1, |
||||
|
||||
// top-right handle
|
||||
x2 - width, y1 - width, |
||||
x2 + width, y1 - width, |
||||
x2 + width, y1 + width, |
||||
x2 - width, y1 + width, |
||||
x2 - width, y1 - width, |
||||
|
||||
// -> bottom-right
|
||||
x2, y1 + width, |
||||
x2, y2 - width, |
||||
|
||||
// bottom-right handle
|
||||
x2 - width, y2 - width, |
||||
x2 + width, y2 - width, |
||||
x2 + width, y2 + width, |
||||
x2 - width, y2 + width, |
||||
x2 - width, y2 - width, |
||||
|
||||
// -> bottom-left
|
||||
x2 - width, y2, |
||||
x1 + width, y2, |
||||
|
||||
// bottom-left handle
|
||||
x1 - width, y2 - width, |
||||
x1 + width, y2 - width, |
||||
x1 + width, y2 + width, |
||||
x1 - width, y2 + width, |
||||
x1 - width, y2 - width, |
||||
|
||||
// -> top-left
|
||||
x1, y2 - width, |
||||
x1, y1 + width, |
||||
]); |
||||
|
||||
const ids = new Uint32Array([ |
||||
0, 0, 0, 0, 0 | (1 << 31), |
||||
1, 1 | (1 << 31), |
||||
2, 2, 2, 2, 2 | (1 << 31), |
||||
3, 3 | (1 << 31), |
||||
4, 4, 4, 4, 4 | (1 << 31), |
||||
5, 5 | (1 << 31), |
||||
6, 6, 6, 6, 6 | (1 << 31), |
||||
7, 7 | (1 << 31), |
||||
]); |
||||
|
||||
const pressures = new Uint8Array([ |
||||
128, 128, 128, 128, 128, |
||||
128, 128, 128, |
||||
128, 128, 128, 128, 128, |
||||
128, 128, 128, |
||||
128, 128, 128, 128, 128, |
||||
128, 128, 128, |
||||
128, 128, 128, 128, 128, |
||||
128, 128, 128, |
||||
]); |
||||
|
||||
const stroke_data = serializer_create(8 * 4 * 2); |
||||
|
||||
for (let i = 0; i < 8; ++i) { |
||||
ser_u16(stroke_data, 34); |
||||
ser_u16(stroke_data, 139); |
||||
ser_u16(stroke_data, 230); |
||||
ser_u16(stroke_data, 2); |
||||
} |
||||
|
||||
return { |
||||
'points': tv_wrap(points), |
||||
'ids': tv_wrap(ids), |
||||
'pressures': tv_wrap(pressures), |
||||
'stroke_data': stroke_data, |
||||
}; |
||||
} |
||||
|
||||
function geometry_line_segments_with_two_circles(circle_segments) { |
||||
const results = new Float32Array((circle_segments * 3 + 6) * 2); // triangle fan circle + two triangles, all 2D (x + y)
|
||||
|
||||
// Generate circle as triangle fan at 0, 0 with radius 1
|
||||
// This circle will be offset/scaled in the vertex shader
|
||||
let last_phi = ((circle_segments - 1) / circle_segments) * 2 * Math.PI; |
||||
for (let i = 0; i < circle_segments; ++i) { |
||||
const phi = i / circle_segments * 2 * Math.PI; |
||||
const x1 = Math.cos(phi); |
||||
const y1 = Math.sin(phi); |
||||
const x2 = Math.cos(last_phi); |
||||
const y2 = Math.sin(last_phi); |
||||
|
||||
results[i * 6 + 0] = x1; |
||||
results[i * 6 + 1] = y1; |
||||
results[i * 6 + 2] = x2; |
||||
results[i * 6 + 3] = y2; |
||||
results[i * 6 + 4] = 0; |
||||
results[i * 6 + 5] = 0; |
||||
|
||||
last_phi = phi; |
||||
} |
||||
|
||||
return results; |
||||
} |
||||
|
||||
function geometry_good_circle_and_dummy(lod) { |
||||
const total_points = 3 * Math.pow(2, lod) + 4; // 3, 6, 12, 24, ... + Dummy for line segment
|
||||
const total_indices = 3 * (Math.pow(3, lod + 1) - 1) / 2 + 6; // 3, 3 + 9, 3 + 9 + 18, ... + Dummy for line segment
|
||||
const points = tv_create(Float32Array, total_points * 2); |
||||
const indices = tv_create(Uint32Array, total_indices); |
||||
|
||||
// Initital triangle, added even for lod = 0
|
||||
tv_add(indices, 0); |
||||
tv_add(indices, 1); |
||||
tv_add(indices, 2); |
||||
|
||||
if (lod >= 1) { |
||||
tv_add(indices, 0); |
||||
tv_add(indices, 3); |
||||
tv_add(indices, 1); |
||||
|
||||
tv_add(indices, 1); |
||||
tv_add(indices, 4); |
||||
tv_add(indices, 2); |
||||
|
||||
tv_add(indices, 2); |
||||
tv_add(indices, 5); |
||||
tv_add(indices, 0); |
||||
} |
||||
|
||||
let last_base = 3; |
||||
let last_offset = 0; |
||||
|
||||
for (let i = 0; i <= lod; ++i) { |
||||
// generate 3 * Math.pow(2, i) points on a circle
|
||||
const npoints = 3 * Math.pow(2, i); |
||||
const base = indices.size; |
||||
|
||||
for (let j = 0; j < npoints; ++j) { |
||||
// use every second point (except level 0, where all points are used)
|
||||
if (i === 0 || (j % 2 === 1)) { |
||||
const phi = j / npoints * Math.PI * 2; |
||||
const x = Math.sin(phi); |
||||
const y = Math.cos(phi); |
||||
|
||||
tv_add(points, x); |
||||
tv_add(points, y); |
||||
|
||||
if (i > 1) { |
||||
tv_add(indices, indices.data[last_base + last_offset++]); |
||||
tv_add(indices, points.size / 2 - 1); // the middle of the trianle is always the newly added point
|
||||
tv_add(indices, indices.data[last_base + last_offset]); |
||||
|
||||
if (j % 4 == 3) { |
||||
last_offset++; |
||||
} |
||||
function image_at(state, x, y) { |
||||
for (let i = state.events.length - 1; i >= 0; --i) { |
||||
const event = state.events[i]; |
||||
if (event.type === EVENT.IMAGE && !event.deleted) { |
||||
if ('height' in event && 'width' in event) { |
||||
if (event.x <= x && x <= event.x + event.width && event.y <= y && y <= event.y + event.height) { |
||||
return event; |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (i > 1) { |
||||
last_base = base; |
||||
last_offset = 0; |
||||
} |
||||
} |
||||
|
||||
// 4 dummy points (8 indices) for the line segment
|
||||
const dummy_base = points.size / 2; |
||||
points.size += 8; |
||||
tv_add(indices, dummy_base + 0); |
||||
tv_add(indices, dummy_base + 1); |
||||
tv_add(indices, dummy_base + 2); |
||||
tv_add(indices, dummy_base + 3); |
||||
tv_add(indices, dummy_base + 2); |
||||
tv_add(indices, dummy_base + 1); |
||||
|
||||
return { |
||||
'points': points, |
||||
'indices': indices |
||||
}; |
||||
} |
||||
return null; |
||||
} |
||||
Binary file not shown.
@ -1,85 +0,0 @@
@@ -1,85 +0,0 @@
|
||||
import * as storage from './storage.js' |
||||
import * as math from './math.js' |
||||
|
||||
import { SESSION, MESSAGE, EVENT } from './enums'; |
||||
|
||||
let first_point_x = null; |
||||
let first_point_y = null; |
||||
|
||||
function parse_and_insert_stroke(desk_id, line) { |
||||
const words = line.split(' '); |
||||
const width = parseInt(words.shift()); |
||||
const data = new Float32Array(words.map(i => parseFloat(i))); |
||||
|
||||
const points = new Float32Array(data.length / 3 * 2); |
||||
const pressures = new Uint8Array(data.length / 3); |
||||
|
||||
if (first_point_x === null) { |
||||
first_point_x = points[0]; |
||||
first_point_y = points[1]; |
||||
} |
||||
|
||||
for (let i = 0; i < data.length; i += 3) { |
||||
points[i / 3 * 2 + 0] = data[i + 0]; |
||||
points[i / 3 * 2 + 1] = data[i + 1]; |
||||
pressures[i / 3 + 0] = Math.floor(data[i + 2] * 255); |
||||
} |
||||
|
||||
const stroke_res = storage.queries.insert_stroke.get({ |
||||
'$width': width, |
||||
'$color': 0, |
||||
'$points': points, |
||||
'$pressures': pressures, |
||||
}); |
||||
|
||||
storage.queries.insert_event.run({ |
||||
'$type': EVENT.STROKE, |
||||
'$desk_id': desk_id, |
||||
'$session_id': 0, |
||||
'$stroke_id': stroke_res.id, |
||||
'$image_id': 0, |
||||
'$corner': 0, |
||||
'$x': 0, |
||||
'$y': 0, |
||||
'$width': 0, |
||||
'$height': 0, |
||||
}); |
||||
} |
||||
|
||||
async function import_milton_file_to_sqlite(fullpath) { |
||||
storage.startup(); |
||||
|
||||
const desk_id = 9881; // math.fast_random32();
|
||||
|
||||
console.log(`Importing ${fullpath} into desk ${desk_id}`); |
||||
|
||||
storage.queries.insert_desk.run({ |
||||
'$id': desk_id, |
||||
'$title': `Desk ${desk_id}` |
||||
}); |
||||
|
||||
const input_file = Bun.file(fullpath); |
||||
const input_text = await input_file.text(); |
||||
const input_lines = input_text.split('\n'); |
||||
|
||||
for (let i = 0; i < input_lines.length; ++i) { |
||||
console.log(`Importing ${i}/${input_lines.length}`); |
||||
parse_and_insert_stroke(desk_id, input_lines[i]); |
||||
} |
||||
|
||||
console.log(`Finished importing desk ${desk_id}`); |
||||
} |
||||
|
||||
async function set_dimentions_to_images(fullpath) { |
||||
const images = [ |
||||
//
|
||||
]; |
||||
|
||||
storage.startup(); |
||||
|
||||
for (const image of images) { |
||||
storage.db.run(`UPDATE events SET width = ${image.w}, height = ${image.h} WHERE image_id = ${image.t};`); |
||||
} |
||||
} |
||||
|
||||
set_dimentions_to_images(); |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
This is pdfTeX, Version 3.141592653-2.6-1.40.24 (TeX Live 2022/Debian) (preloaded format=pdflatex 2023.4.13) 16 APR 2023 21:20 |
||||
entering extended mode |
||||
restricted \write18 enabled. |
||||
%&-line parsing enabled. |
||||
** |
||||
|
||||
! Emergency stop. |
||||
<*> |
||||
|
||||
End of file on the terminal! |
||||
|
||||
|
||||
Here is how much of TeX's memory you used: |
||||
3 strings out of 476091 |
||||
111 string characters out of 5794081 |
||||
1849330 words of memory out of 5000000 |
||||
20488 multiletter control sequences out of 15000+600000 |
||||
512287 words of font info for 32 fonts, out of 8000000 for 9000 |
||||
1141 hyphenation exceptions out of 8191 |
||||
0i,0n,0p,1b,6s stack positions out of 10000i,1000n,20000p,200000b,200000s |
||||
! ==> Fatal error occurred, no output PDF file produced! |
||||
Loading…
Reference in new issue