aolo2
/
desk2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix bvh fullnodes returning full buffer instead of tv_data. Skip handling of empty strokes

ssao
A.Olokhtonov 7 months ago
parent
c3f66d966c
commit
221e2a5aed
5 changed files with 161 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      client/bvh.js
  2. 5
      client/client_recv.js
  3. 34
      client/index.html
  4. 1
      client/speed.js
  5. 273
      client/webgl_draw.js

2
client/bvh.js
Unescape View File

@ -175,7 +175,7 @@ function bvh_intersect_quad(bvh, quad, result_buffer) {
if (node.is_fullnode) { if (node.is_fullnode) {
if (quad_fully_inside(quad, node.bbox)) { if (quad_fully_inside(quad, node.bbox)) {
tv_append(result_buffer, node.stroke_indices.data); tv_append(result_buffer, tv_data(node.stroke_indices));
continue; continue;
} }
} }

5
client/client_recv.js
Unescape View File

@ -112,7 +112,6 @@ function des_event(d, state = null) {
// TODO: remove, this is duplicate data // TODO: remove, this is duplicate data
event.stroke_id = stroke_id; event.stroke_id = stroke_id;
event.color = color; event.color = color;
@ -242,6 +241,10 @@ function handle_event(state, context, event, options = {}) {
case EVENT.STROKE: { case EVENT.STROKE: {
const point_count = event.coords.length / 2; const point_count = event.coords.length / 2;
if (point_count === 0) {
break;
}
wasm_ensure_by(state, 1, event.coords.length); wasm_ensure_by(state, 1, event.coords.length);
const pressures = state.wasm.buffers['pressures']; const pressures = state.wasm.buffers['pressures'];

34
client/index.html
Unescape View File

@ -7,23 +7,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon"> <link rel="shortcut icon" href="icons/favicon.svg" id="favicon">
<link rel="stylesheet" type="text/css" href="default.css?v=73"> <link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript" src="aux.js?v=73"></script> <script type="text/javascript" src="aux.js"></script>
<script type="text/javascript" src="heapify.js?v=73"></script> <script type="text/javascript" src="heapify.js"></script>
<script type="text/javascript" src="bvh.js?v=73"></script> <script type="text/javascript" src="bvh.js"></script>
<script type="text/javascript" src="math.js?v=73"></script> <script type="text/javascript" src="math.js"></script>
<script type="text/javascript" src="tools.js?v=73"></script> <script type="text/javascript" src="tools.js"></script>
<script type="text/javascript" src="speed.js?v=73"></script> <script type="text/javascript" src="speed.js"></script>
<script type="text/javascript" src="webgl_geometry.js?v=73"></script> <script type="text/javascript" src="webgl_geometry.js"></script>
<script type="text/javascript" src="webgl_shaders.js?v=73"></script> <script type="text/javascript" src="webgl_shaders.js"></script>
<script type="text/javascript" src="webgl_listeners.js?v=73"></script> <script type="text/javascript" src="webgl_listeners.js"></script>
<script type="text/javascript" src="webgl_draw.js?v=73"></script> <script type="text/javascript" src="webgl_draw.js"></script>
<script type="text/javascript" src="index.js?v=73"></script> <script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="client_send.js?v=73"></script> <script type="text/javascript" src="client_send.js"></script>
<script type="text/javascript" src="client_recv.js?v=73"></script> <script type="text/javascript" src="client_recv.js"></script>
<script type="text/javascript" src="websocket.js?v=73"></script> <script type="text/javascript" src="websocket.js"></script>
</head> </head>
<body> <body>
<div class="main"> <div class="main">

1
client/speed.js
Unescape View File

@ -200,6 +200,7 @@ async function do_lod(state, context) {
} }
await workers_messages(state.wasm.workers, jobs); await workers_messages(state.wasm.workers, jobs);
const result_offset = state.wasm.exports.merge_results( const result_offset = state.wasm.exports.merge_results(
result_counts, result_counts,
result_buffers, result_buffers,

273
client/webgl_draw.js
Unescape View File

@ -78,155 +78,158 @@ function draw_html(state) {
async function draw(state, context) { async function draw(state, context) {
const cpu_before = performance.now(); const cpu_before = performance.now();
try {
const gl = context.gl;
const width = window.innerWidth;
const height = window.innerHeight;
const gl = context.gl; locations = context.locations['sdf'].main;
const width = window.innerWidth; buffers = context.buffers['sdf'];
const height = window.innerHeight;
locations = context.locations['sdf'].main;
buffers = context.buffers['sdf'];
bvh_clip(state, context); 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; 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;
if (context.gpu_timer_ext !== null) { let query = 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);
gl.useProgram(context.programs['sdf'].main);
// "Static" data upload
if (segment_count > 0) {
const total_static_size = context.instance_data_points.size * 4 +
context.instance_data_ids.size * 4 +
context.instance_data_pressures.size;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']);
gl.bufferData(gl.ARRAY_BUFFER, total_static_size, gl.STREAM_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.instance_data_points));
gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4, tv_data(context.instance_data_ids));
gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4,
tv_data(context.instance_data_pressures));
gl.bindTexture(gl.TEXTURE_2D, context.textures['stroke_data']);
upload_square_rgba16ui_texture(gl, context.stroke_data, config.stroke_texture_size);
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_stroke_count'], state.events.length);
gl.uniform1i(locations['u_debug_mode'], state.debug.red);
gl.uniform1i(locations['u_stroke_data'], 0);
gl.uniform1i(locations['u_stroke_texture_size'], config.stroke_texture_size);
gl.enableVertexAttribArray(locations['a_a']);
gl.enableVertexAttribArray(locations['a_b']);
gl.enableVertexAttribArray(locations['a_stroke_id']);
gl.enableVertexAttribArray(locations['a_pressure']);
// 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4);
gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
gl.vertexAttribDivisor(locations['a_a'], 1);
gl.vertexAttribDivisor(locations['a_b'], 1);
gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
gl.vertexAttribDivisor(locations['a_pressure'], 1);
// Static draw (everything already bound)
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count);
}
// Dynamic strokes should be drawn above static strokes if (context.gpu_timer_ext !== null) {
gl.clear(gl.DEPTH_BUFFER_BIT); query = gl.createQuery();
gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
// Dynamic draw (strokes currently being drawn) }
if (dynamic_segment_count > 0) {
gl.uniform1i(locations['u_stroke_count'], dynamic_stroke_count); // Only clear once we have the data, this might not always be on the same frame?
gl.uniform1i(locations['u_stroke_data'], 0); gl.viewport(0, 0, context.canvas.width, context.canvas.height);
gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size); gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1);
gl.clearDepth(0.0);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_dynamic_instance']); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Dynamic data upload gl.useProgram(context.programs['sdf'].main);
const total_dynamic_size =
context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4 + // "Static" data upload
context.dynamic_instance_pressure.size; if (segment_count > 0) {
const total_static_size = context.instance_data_points.size * 4 +
gl.bufferData(gl.ARRAY_BUFFER, total_dynamic_size, gl.STREAM_DRAW); context.instance_data_ids.size * 4 +
gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.dynamic_instance_points)); context.instance_data_pressures.size;
gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4, tv_data(context.dynamic_instance_ids));
gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4, gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']);
tv_data(context.dynamic_instance_pressure)); gl.bufferData(gl.ARRAY_BUFFER, total_static_size, gl.STREAM_DRAW);
gl.bindTexture(gl.TEXTURE_2D, context.textures['dynamic_stroke_data']); gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.instance_data_points));
upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_stroke_texture_size); gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4, tv_data(context.instance_data_ids));
gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4,
gl.enableVertexAttribArray(locations['a_a']); tv_data(context.instance_data_pressures));
gl.enableVertexAttribArray(locations['a_b']); gl.bindTexture(gl.TEXTURE_2D, context.textures['stroke_data']);
gl.enableVertexAttribArray(locations['a_stroke_id']); upload_square_rgba16ui_texture(gl, context.stroke_data, config.stroke_texture_size);
gl.enableVertexAttribArray(locations['a_pressure']);
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height);
// 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.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom);
gl.vertexAttribPointer(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0); gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y);
gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4); gl.uniform1i(locations['u_stroke_count'], state.events.length);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.dynamic_instance_points.size * 4); gl.uniform1i(locations['u_debug_mode'], state.debug.red);
gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4); gl.uniform1i(locations['u_stroke_data'], 0);
gl.uniform1i(locations['u_stroke_texture_size'], config.stroke_texture_size);
gl.vertexAttribDivisor(locations['a_a'], 1);
gl.vertexAttribDivisor(locations['a_b'], 1); gl.enableVertexAttribArray(locations['a_a']);
gl.vertexAttribDivisor(locations['a_stroke_id'], 1); gl.enableVertexAttribArray(locations['a_b']);
gl.vertexAttribDivisor(locations['a_pressure'], 1); gl.enableVertexAttribArray(locations['a_stroke_id']);
gl.enableVertexAttribArray(locations['a_pressure']);
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count);
} // 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4);
gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
gl.vertexAttribDivisor(locations['a_a'], 1);
gl.vertexAttribDivisor(locations['a_b'], 1);
gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
gl.vertexAttribDivisor(locations['a_pressure'], 1);
// Static draw (everything already bound)
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count);
}
document.getElementById('debug-stats').innerHTML = ` // Dynamic strokes should be drawn above static strokes
gl.clear(gl.DEPTH_BUFFER_BIT);
// Dynamic draw (strokes currently being drawn)
if (dynamic_segment_count > 0) {
gl.uniform1i(locations['u_stroke_count'], dynamic_stroke_count);
gl.uniform1i(locations['u_stroke_data'], 0);
gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_dynamic_instance']);
// Dynamic data upload
const total_dynamic_size =
context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4 +
context.dynamic_instance_pressure.size;
gl.bufferData(gl.ARRAY_BUFFER, total_dynamic_size, gl.STREAM_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.dynamic_instance_points));
gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4, tv_data(context.dynamic_instance_ids));
gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4,
tv_data(context.dynamic_instance_pressure));
gl.bindTexture(gl.TEXTURE_2D, context.textures['dynamic_stroke_data']);
upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_stroke_texture_size);
gl.enableVertexAttribArray(locations['a_a']);
gl.enableVertexAttribArray(locations['a_b']);
gl.enableVertexAttribArray(locations['a_stroke_id']);
gl.enableVertexAttribArray(locations['a_pressure']);
// 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.dynamic_instance_points.size * 4);
gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
gl.vertexAttribDivisor(locations['a_a'], 1);
gl.vertexAttribDivisor(locations['a_b'], 1);
gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
gl.vertexAttribDivisor(locations['a_pressure'], 1);
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count);
}
document.getElementById('debug-stats').innerHTML = `
<span>Segments onscreen: ${segment_count}</span> <span>Segments onscreen: ${segment_count}</span>
<span>Canvas offset: (${Math.round(state.canvas.offset.x * 100) / 100}, ${Math.round(state.canvas.offset.y * 100) / 100})</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 level: ${state.canvas.zoom_level}</span>
<span>Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}</span>`; <span>Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}</span>`;
if (context.gpu_timer_ext) { if (context.gpu_timer_ext) {
gl.endQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT); gl.endQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT);
const next_tick = () => { const next_tick = () => {
if (query) { if (query) {
// At some point in the future, after returning control to the browser // At some point in the future, after returning control to the browser
const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE); const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
const disjoint = gl.getParameter(context.gpu_timer_ext.GPU_DISJOINT_EXT); const disjoint = gl.getParameter(context.gpu_timer_ext.GPU_DISJOINT_EXT);
if (available && !disjoint) { if (available && !disjoint) {
// See how much time the rendering of the object took in nanoseconds. // See how much time the rendering of the object took in nanoseconds.
const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
//console.debug(timeElapsed / 1000000); //console.debug(timeElapsed / 1000000);
document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'; document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms';
} }
if (available || disjoint) { if (available || disjoint) {
// Clean up the query object. // Clean up the query object.
gl.deleteQuery(query); gl.deleteQuery(query);
// Don't re-enter this polling loop. // Don't re-enter this polling loop.
query = null; query = null;
} else if (!available) { } else if (!available) {
setTimeout(next_tick, 0); setTimeout(next_tick, 0);
}
} }
} }
}
setTimeout(next_tick, 0); setTimeout(next_tick, 0);
}
} catch (e) {
console.error('Draw failed:', e);
} }
const cpu_after = performance.now(); const cpu_after = performance.now();

Write Preview
Loading…
Cancel
Save