|
|
@ -25,6 +25,8 @@ function upload_if_needed(gl, buffer_kind, serializer) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function upload_square_rgba16ui_texture(gl, serializer, texture_size) { |
|
|
|
function upload_square_rgba16ui_texture(gl, serializer, texture_size) { |
|
|
|
|
|
|
|
// TODO: only subupload what's needed
|
|
|
|
|
|
|
|
|
|
|
|
const bpp = 2 * 4; |
|
|
|
const bpp = 2 * 4; |
|
|
|
const data_size = serializer.offset; |
|
|
|
const data_size = serializer.offset; |
|
|
|
const data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here
|
|
|
|
const data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here
|
|
|
@ -76,19 +78,11 @@ function draw_html(state) { |
|
|
|
async function draw(state, context) { |
|
|
|
async function draw(state, context) { |
|
|
|
const cpu_before = performance.now(); |
|
|
|
const cpu_before = performance.now(); |
|
|
|
|
|
|
|
|
|
|
|
state.timers.raf = false; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gl = context.gl; |
|
|
|
const gl = context.gl; |
|
|
|
const width = window.innerWidth; |
|
|
|
const width = window.innerWidth; |
|
|
|
const height = window.innerHeight; |
|
|
|
const height = window.innerHeight; |
|
|
|
|
|
|
|
|
|
|
|
let query = null; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (context.gpu_timer_ext !== null) { |
|
|
|
|
|
|
|
query = gl.createQuery(); |
|
|
|
|
|
|
|
gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
locations = context.locations['sdf'].main; |
|
|
|
locations = context.locations['sdf'].main; |
|
|
|
buffers = context.buffers['sdf']; |
|
|
|
buffers = context.buffers['sdf']; |
|
|
|
|
|
|
|
|
|
|
@ -98,6 +92,13 @@ async function draw(state, context) { |
|
|
|
const dynamic_segment_count = context.dynamic_segment_count; |
|
|
|
const dynamic_segment_count = context.dynamic_segment_count; |
|
|
|
const dynamic_stroke_count = context.dynamic_stroke_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?
|
|
|
|
// 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.viewport(0, 0, context.canvas.width, context.canvas.height); |
|
|
|
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
|
|
|
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
|
|
@ -229,6 +230,7 @@ async function draw(state, context) { |
|
|
|
|
|
|
|
|
|
|
|
const cpu_after = performance.now(); |
|
|
|
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'; |
|
|
|
document.querySelector('.debug-timings .cpu').innerHTML = 'Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms'; |
|
|
|
|
|
|
|
|
|
|
|