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

Remove subframe logic, instead use ffmpeg to blur frames afterwards

master
Aleksey Olokhtonov 1 day ago
parent
0384ac6246
commit
d6f2fc5548
1 changed files with 23 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 83
      client/webgl_listeners.js

83
client/webgl_listeners.js
Unescape View File

@ -62,25 +62,10 @@ function debug_panel_init(state, context) { @@ -62,25 +62,10 @@ function debug_panel_init(state, context) {
const render_framerate = 240;
const render_frames = 720;
const render_output_framerate = 60;
const start_movement_frame = 240;
const start_movement2_frame = 480;
let updated_zoom = false;
if (render_framerate % render_output_framerate !== 0) {
console.error('Render framerate MUST be divisible by output framerate');
return;
}
const render_ratio = render_framerate / render_output_framerate;
if (render_frames % render_ratio !== 0) {
console.error('Render frames MUST be divisible render ratio');
return;
}
const render_output_frames = render_frames / render_ratio;
const encoder_config = {
codec: "vp8",
width: canvas.width,
@ -88,7 +73,7 @@ function debug_panel_init(state, context) { @@ -88,7 +73,7 @@ function debug_panel_init(state, context) {
displayWidth: canvas.width,
displayHeight: canvas.height,
bitrate: 100_000_000,
framerate: render_output_framerate,
framerate: render_framerate,
};
const { supported } = await VideoEncoder.isConfigSupported(encoder_config);
@ -103,53 +88,31 @@ function debug_panel_init(state, context) { @@ -103,53 +88,31 @@ function debug_panel_init(state, context) {
state.canvas.zoom_level = zoom_level;
state.canvas.target_zoom = Math.pow(1.0 + dz, Math.abs(zoom_level))
const dst = new Uint8Array(canvas.width * canvas.height * 4);
const accum = new Uint16Array(canvas.width * canvas.height * 4); // double the size to fit many samples
const accum_final = new Uint8Array(canvas.width * canvas.height * 4);
for (let i = 0; i < render_output_frames; ++i) {
const time_now = i / render_output_framerate;
for (let i = 0; i < render_frames; ++i) {
const time_now = i / render_framerate;
accum.fill(0);
for (let subframe = 0; subframe < render_ratio; ++subframe) {
await draw(state, context, i > 0 || subframe > 0, (time_now + (subframe / render_ratio) / render_output_framerate) * 1000, true);
context.gl.readPixels(0, 0, canvas.width, canvas.height, context.gl.RGBA, context.gl.UNSIGNED_BYTE, dst);
for (let j = 0; j < dst.byteLength; ++j) {
accum[j] += dst[j];
}
if (start_movement_frame <= i * render_ratio && i * render_ratio < start_movement2_frame) {
state.canvas.offset.x += (1000 - state.canvas.offset.x) * 0.05;
state.canvas.offset.y += (1000 - state.canvas.offset.y) * 0.05;
}
await draw(state, context, i > 0, time_now * 1000, true);
const frame = new VideoFrame(canvas, { timestamp: time_now });
encoder.encode(frame, {keyFrame: true});
frame.close();
await encoder.flush();
if (i * render_ratio > start_movement2_frame) {
if (!updated_zoom) {
zoom_level = -25;
const dz = (zoom_level > 0 ? config.zoom_delta : -config.zoom_delta);
state.canvas.zoom_level = zoom_level;
state.canvas.target_zoom = Math.pow(1.0 + dz, Math.abs(zoom_level))
updated_zoom = true;
}
//state.canvas.offset.x += (3500 - state.canvas.offset.x) * 0.05;
//state.canvas.offset.y += (5000 - state.canvas.offset.y) * 0.05;
}
if (start_movement_frame <= i && i < start_movement2_frame) {
state.canvas.offset.x += (1000 - state.canvas.offset.x) * 0.05;
state.canvas.offset.y += (1000 - state.canvas.offset.y) * 0.05;
}
for (let y = 0; y < canvas.height; ++y) {
for (let x = 0; x < canvas.width; ++x) {
for (let c = 0; c < 4; ++c) {
accum_final[(canvas.height - 1 - y) * canvas.width * 4 + x * 4 + c] = Math.round(accum[y * canvas.width * 4 + x * 4 + c] / render_ratio);
}
if (i > start_movement2_frame) {
if (!updated_zoom) {
zoom_level = -25;
const dz = (zoom_level > 0 ? config.zoom_delta : -config.zoom_delta);
state.canvas.zoom_level = zoom_level;
state.canvas.target_zoom = Math.pow(1.0 + dz, Math.abs(zoom_level))
updated_zoom = true;
}
//state.canvas.offset.x += (3500 - state.canvas.offset.x) * 0.05;
//state.canvas.offset.y += (5000 - state.canvas.offset.y) * 0.05;
}
const frame = new VideoFrame(accum_final, { timestamp: time_now, codedWidth: canvas.width, codedHeight: canvas.height, format: 'RGBA'});
encoder.encode(frame, {keyFrame: true});
frame.close();
await encoder.flush();
}
const data = new Uint8Array(32 + render_frames * 12 + total_chunk_bytes);
@ -171,14 +134,14 @@ function debug_panel_init(state, context) { @@ -171,14 +134,14 @@ function debug_panel_init(state, context) {
data[14] = encoder_config.height & 0xFF;
data[15] = (encoder_config.height >> 8) & 0xFF;
data[16] = render_output_framerate; // timebase denom
data[16] = render_framerate; // timebase denom
data[20] = 1; // timebase numenator..?
data[24] = render_output_frames; // frame count
data[24] = render_frames; // frame count
let offset = 32;
for (let i = 0; i < render_output_frames; ++i) {
for (let i = 0; i < render_frames; ++i) {
const chunk = encoded_chunks[i];
// frame header
// frame length

Write Preview
Loading…
Cancel
Save