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

Depth prepass with simplified opaque shapes

ssao
A.Olokhtonov 1 year ago
parent
7e3b6156c0
commit
e86ffd6508
6 changed files with 175 additions and 186 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/client_recv.js
  2. 8
      client/index.js
  3. 2
      client/math.js
  4. 158
      client/webgl_draw.js
  5. 3
      client/webgl_listeners.js
  6. 166
      client/webgl_shaders.js

2
client/client_recv.js
Unescape View File

@ -177,6 +177,8 @@ function handle_event(state, context, event) {
geometry_add_stroke(state, context, event, state.events.length); geometry_add_stroke(state, context, event, state.events.length);
state.stroke_count++;
break; break;
} }

8
client/index.js
Unescape View File

@ -3,9 +3,9 @@
document.addEventListener('DOMContentLoaded', main); document.addEventListener('DOMContentLoaded', main);
const config = { const config = {
ws_url: 'wss://192.168.100.2/ws/', ws_url: 'wss://desk.some.website/ws/',
ping_url: 'https://192.168.100.2/api/ping', ping_url: 'https://desk.some.website/api/ping',
image_url: 'https://192.168.100.2/images/', image_url: 'https://desk.some.website/images/',
sync_timeout: 1000, sync_timeout: 1000,
ws_reconnect_timeout: 2000, ws_reconnect_timeout: 2000,
brush_preview_timeout: 1000, brush_preview_timeout: 1000,
@ -157,6 +157,7 @@ function main() {
'queue': [], 'queue': [],
'events': [], 'events': [],
'stroke_count': 0,
'tools': { 'tools': {
'active': null, 'active': null,
@ -181,6 +182,7 @@ function main() {
'canvas': null, 'canvas': null,
'gl': null, 'gl': null,
'debug_mode': false, 'debug_mode': false,
'do_prepass': true,
'frametime_window': [], 'frametime_window': [],
'frametime_window_head': 0, 'frametime_window_head': 0,

2
client/math.js
Unescape View File

@ -227,8 +227,10 @@ function segments_onscreen(state, context) {
} }
} }
if (total_points > 0) {
state.onscreen_segments = new Uint32Array(total_points * 6); state.onscreen_segments = new Uint32Array(total_points * 6);
} }
}
let at = 0; let at = 0;

158
client/webgl_draw.js
Unescape View File

@ -11,6 +11,27 @@ function schedule_draw(state, context) {
} }
} }
function upload_if_needed(context) {
const gl = context.gl;
if (context.need_static_allocate) {
if (config.debug_print) console.debug('static allocate');
gl.bufferData(gl.ARRAY_BUFFER, context.static_serializer.size, gl.DYNAMIC_DRAW);
context.need_static_allocate = false;
context.static_upload_from = 0;
context.need_static_upload = true;
}
if (context.need_static_upload) {
if (config.debug_print) console.debug('static upload');
const upload_offset = context.static_upload_from;
const upload_size = context.static_serializer.offset - upload_offset;
gl.bufferSubData(gl.ARRAY_BUFFER, upload_offset, new Uint8Array(context.static_serializer.buffer, upload_offset, upload_size));
context.need_static_upload = false;
context.static_upload_from = context.static_serializer.offset;
}
}
function draw(state, context) { function draw(state, context) {
state.timers.raf = false; state.timers.raf = false;
@ -20,12 +41,6 @@ function draw(state, context) {
let query = null; let query = null;
if (context._DRAW_TO_TEXTURE) {
gl.bindFramebuffer(gl.FRAMEBUFFER, context.framebuffers['sdf'].tiles);
} else {
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}
if (context.gpu_timer_ext !== null) { if (context.gpu_timer_ext !== null) {
query = gl.createQuery(); query = gl.createQuery();
gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query); gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
@ -34,94 +49,85 @@ function draw(state, context) {
let locations; let locations;
let buffers; let buffers;
buffers = context.buffers['sdf'];
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_static']);
upload_if_needed(context);
if (!context._DRAW_TO_TEXTURE) {
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);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clearDepth(0.0);
} else { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gl.clearBufferuiv(gl.COLOR, 0, new Uint8Array([0, 0, 0, 1]));
gl.viewport(0, 0, Math.ceil(context.canvas.width / config.tile_size), Math.ceil(context.canvas.height / config.tile_size));
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
}
// SDF
buffers = context.buffers['sdf'];
if (!context._DRAW_TO_TEXTURE) {
locations = context.locations['sdf'].main;
gl.useProgram(context.programs['sdf'].main);
} else {
locations = context.locations['sdf'].tiles;
gl.useProgram(context.programs['sdf'].tiles);
}
gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height); const before_clip = performance.now();
gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom); const index_count = segments_onscreen(state, context);
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); const after_clip = performance.now();
//console.debug('clip', after_clip - before_clip);
if (!context._DRAW_TO_TEXTURE) { if (index_count > 0) {
gl.uniform1i(locations['u_debugmode'], context.debug_mode ? 1 : 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']);
}
const index_buffer = new Uint32Array(state.onscreen_segments.buffer, 0, index_count);
const static_points = context.static_serializer.offset / config.bytes_per_point; const static_points = context.static_serializer.offset / config.bytes_per_point;
const dynamic_points = context.dynamic_serializer.offset / config.bytes_per_point; //const dynamic_points = context.dynamic_serializer.offset / config.bytes_per_point;
if (static_points > 0) { if (static_points > 0) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_static']); // DEPTH PREPASS
gl.enableVertexAttribArray(locations['a_pos']); if (context.do_prepass) {
gl.enableVertexAttribArray(locations['a_line']); gl.drawBuffers([gl.NONE]);
if (!context._DRAW_TO_TEXTURE) { locations = context.locations['sdf'].opaque;
gl.enableVertexAttribArray(locations['a_color']);
} gl.useProgram(context.programs['sdf'].opaque);
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.stroke_count);
if (context._DRAW_TO_TEXTURE) { gl.enableVertexAttribArray(locations['a_pos']);
gl.enableVertexAttribArray(locations['a_line']);
gl.enableVertexAttribArray(locations['a_stroke_id']); gl.enableVertexAttribArray(locations['a_stroke_id']);
}
gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0); gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0);
gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3); gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4);
if (!context._DRAW_TO_TEXTURE) { gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4);
}
if (context._DRAW_TO_TEXTURE) { gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.UNSIGNED_INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4);
} }
if (context.need_static_allocate) { index_buffer.reverse();
if (config.debug_print) console.debug('static allocate');
gl.bufferData(gl.ARRAY_BUFFER, context.static_serializer.size, gl.DYNAMIC_DRAW);
context.need_static_allocate = false;
context.static_upload_from = 0;
context.need_static_upload = true;
}
if (context.need_static_upload) { // MAIN PASS
if (config.debug_print) console.debug('static upload'); gl.drawBuffers([gl.BACK]);
const upload_offset = context.static_upload_from;
const upload_size = context.static_serializer.offset - upload_offset;
gl.bufferSubData(gl.ARRAY_BUFFER, upload_offset, new Uint8Array(context.static_serializer.buffer, upload_offset, upload_size));
context.need_static_upload = false;
context.static_upload_from = context.static_serializer.offset;
}
const before_clip = performance.now(); locations = context.locations['sdf'].main;
const index_count = segments_onscreen(state, context);
const after_clip = performance.now();
//console.debug('clip', after_clip - before_clip);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']); gl.useProgram(context.programs['sdf'].main);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(state.onscreen_segments.buffer, 0, index_count), gl.DYNAMIC_DRAW);
const after_index_uploads = performance.now(); gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height);
// console.debug('index upload', after_index_uploads - after_clip); 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.stroke_count);
gl.enableVertexAttribArray(locations['a_pos']);
gl.enableVertexAttribArray(locations['a_line']);
gl.enableVertexAttribArray(locations['a_color']);
gl.enableVertexAttribArray(locations['a_stroke_id']);
gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0);
gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3);
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4);
index_buffer.reverse();
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.DYNAMIC_DRAW);
gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0); gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0);
} }
}
/* /*
if (dynamic_points > 0) { if (dynamic_points > 0) {
@ -143,22 +149,6 @@ function draw(state, context) {
gl.drawArrays(gl.TRIANGLES, 0, dynamic_points); gl.drawArrays(gl.TRIANGLES, 0, dynamic_points);
} }
*/ */
/*
const next_tick = () => {
const wait_status = gl.clientWaitSync(sync, 0, 0);
const frame_end = performance.now();
if (wait_status === gl.ALREADY_SIGNALED || wait_status === gl.CONDITION_SATISFIED) {
const frametime_ms = frame_end - frame_start;
gl.deleteSync(sync);
if (config.debug_print) console.debug(frametime_ms);
} else {
setTimeout(next_tick, 0);
}
}
setTimeout(next_tick, 0);
*/
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);

3
client/webgl_listeners.js
Unescape View File

@ -71,6 +71,9 @@ function keydown(e, state, context) {
} else if (e.code === 'KeyD') { } else if (e.code === 'KeyD') {
context.debug_mode = !context.debug_mode; context.debug_mode = !context.debug_mode;
schedule_draw(state, context); schedule_draw(state, context);
} else if (e.code === 'KeyP') {
context.do_prepass = !context.do_prepass;
schedule_draw(state, context);
} }
} }

166
client/webgl_shaders.js
Unescape View File

@ -1,19 +1,71 @@
const opaque_vs_src = `#version 300 es
in vec3 a_pos; // .z is radius
in vec4 a_line;
in int a_stroke_id;
uniform vec2 u_scale;
uniform vec2 u_res;
uniform vec2 u_translation;
uniform int u_stroke_count;
flat out int v_stroke_id;
void main() {
// Do not inflate quad (as opposed to the full sdf shader), thus only leaving the opaque part
// Shrink to not include the caps
vec2 line_dir = normalize(a_line.zw - a_line.xy);
int vertex_index = gl_VertexID % 4;
vec2 pos = a_pos.xy;
if (vertex_index == 0 || vertex_index == 2) {
// vertices on the "beginning" side of the line
pos.xy += line_dir * a_pos.z / 2.0;
} else {
// on the "ending" side of the line
pos.xy -= line_dir * a_pos.z / 2.0;
}
vec2 screen01 = (pos * u_scale + u_translation) / u_res;
vec2 screen02 = screen01 * 2.0;
screen02.y = 2.0 - screen02.y;
v_stroke_id = a_stroke_id;
gl_Position = vec4(screen02 - 1.0, (float(a_stroke_id) / float(u_stroke_count)) * 2.0 - 1.0, 1.0);
}
`;
const nop_fs_src = `#version 300 es
precision highp float;
flat in int v_stroke_id;
out vec4 FragColor;
void main() {
vec3 color = vec3(float(v_stroke_id * 3245 % 255) / 255.0, float(v_stroke_id * 7343 % 255) / 255.0, float(v_stroke_id * 5528 % 255) / 255.0);
FragColor = vec4(color, 1.0);
}
`;
const sdf_vs_src = `#version 300 es const sdf_vs_src = `#version 300 es
in vec3 a_pos; // .z is radius in vec3 a_pos; // .z is radius
in vec4 a_line; in vec4 a_line;
in vec3 a_color; in vec3 a_color;
in uint a_stroke_id; in int a_stroke_id;
uniform vec2 u_scale; uniform vec2 u_scale;
uniform vec2 u_res; uniform vec2 u_res;
uniform vec2 u_translation; uniform vec2 u_translation;
uniform int u_stroke_count;
out vec4 v_line; out vec4 v_line;
out vec2 v_texcoord; out vec2 v_texcoord;
out vec3 v_color; out vec3 v_color;
flat out uint v_stroke_id;
flat out float v_thickness; flat out float v_thickness;
void main() { void main() {
@ -51,9 +103,8 @@ const sdf_vs_src = `#version 300 es
v_line = a_line; v_line = a_line;
v_color = a_color; v_color = a_color;
v_thickness = a_pos.z; v_thickness = a_pos.z;
v_stroke_id = a_stroke_id;
gl_Position = vec4(screen02 - 1.0, 0.0, 1); gl_Position = vec4(screen02 - 1.0, (float(a_stroke_id) / float(u_stroke_count)) * 2.0 - 1.0, 1);
} }
`; `;
@ -79,41 +130,16 @@ const sdf_fs_src = `#version 300 es
float dist = length(pa - ba * h) - v_thickness / 2.0; float dist = length(pa - ba * h) - v_thickness / 2.0;
float fade = 0.5 * length(fwidth(v_texcoord)); float fade = 0.5 * length(fwidth(v_texcoord));
float alpha = 1.0 - smoothstep(-fade, fade, dist); float alpha = 1.0 - smoothstep(0.0, fade, dist);
// float alpha = 1.0 - step(0.0, dist);
if (u_debug_mode == 1) { if (u_debug_mode == 1) {
FragColor = vec4(1.0, 0.0, 0.0, 0.1); FragColor = vec4(1.0, 0.0, 0.0, 0.1);
} else { } else {
FragColor = vec4(v_color * alpha, alpha); FragColor = vec4(v_color * alpha, alpha);
// FragColor = vec4(v_color * alpha, 0.1 + alpha);
} }
} }
`; `;
const tiles_fs_src = `#version 300 es
precision highp float;
uniform int u_debug_mode;
in vec4 v_line;
in vec2 v_texcoord;
in vec3 v_color;
flat in uint v_stroke_id;
flat in float v_thickness;
//out uint TileId;
out vec4 FragColor;
void main() {
//TileId = uint(1);
vec3 color = vec3(float(v_stroke_id * 3245u % 255u) / 255.0, float(v_stroke_id * 7343u % 255u) / 255.0, float(v_stroke_id * 5528u % 255u) / 255.0);
FragColor = vec4(color, 1);
}
`;
const tquad_vs_src = `#version 300 es const tquad_vs_src = `#version 300 es
in vec2 a_pos; in vec2 a_pos;
in vec2 a_texcoord; in vec2 a_texcoord;
@ -166,7 +192,13 @@ function init_webgl(state, context) {
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.GEQUAL);
context.gpu_timer_ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); context.gpu_timer_ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
if (context.gpu_timer_ext === null) {
context.gpu_timer_ext = gl.getExtension('EXT_disjoint_timer_query');
}
const quad_vs = create_shader(gl, gl.VERTEX_SHADER, tquad_vs_src); const quad_vs = create_shader(gl, gl.VERTEX_SHADER, tquad_vs_src);
const quad_fs = create_shader(gl, gl.FRAGMENT_SHADER, tquad_fs_src); const quad_fs = create_shader(gl, gl.FRAGMENT_SHADER, tquad_fs_src);
@ -174,26 +206,27 @@ function init_webgl(state, context) {
const sdf_vs = create_shader(gl, gl.VERTEX_SHADER, sdf_vs_src); const sdf_vs = create_shader(gl, gl.VERTEX_SHADER, sdf_vs_src);
const sdf_fs = create_shader(gl, gl.FRAGMENT_SHADER, sdf_fs_src); const sdf_fs = create_shader(gl, gl.FRAGMENT_SHADER, sdf_fs_src);
const tiles_fs = create_shader(gl, gl.FRAGMENT_SHADER, tiles_fs_src); const opaque_vs = create_shader(gl, gl.VERTEX_SHADER, opaque_vs_src);
const nop_fs = create_shader(gl, gl.FRAGMENT_SHADER, nop_fs_src);
context.programs['image'] = create_program(gl, quad_vs, quad_fs); context.programs['image'] = create_program(gl, quad_vs, quad_fs);
context.programs['sdf'] = { context.programs['sdf'] = {
'opaque': create_program(gl, opaque_vs, nop_fs),
'main': create_program(gl, sdf_vs, sdf_fs), 'main': create_program(gl, sdf_vs, sdf_fs),
'tiles': create_program(gl, sdf_vs, tiles_fs), // same vertex shader
};
context.locations['image'] = {
'a_pos': gl.getAttribLocation(context.programs['image'], 'a_pos'),
'a_texcoord': gl.getAttribLocation(context.programs['image'], 'a_texcoord'),
'u_res': gl.getUniformLocation(context.programs['image'], 'u_res'),
'u_scale': gl.getUniformLocation(context.programs['image'], 'u_scale'),
'u_translation': gl.getUniformLocation(context.programs['image'], 'u_translation'),
'u_outline': gl.getUniformLocation(context.programs['image'], 'u_outline'),
'u_texture': gl.getUniformLocation(context.programs['image'], 'u_texture'),
}; };
context.locations['sdf'] = { context.locations['sdf'] = {
'opaque': {
'a_pos': gl.getAttribLocation(context.programs['sdf'].opaque, 'a_pos'),
'a_line': gl.getAttribLocation(context.programs['sdf'].opaque, 'a_line'),
'a_stroke_id': gl.getAttribLocation(context.programs['sdf'].opaque, 'a_stroke_id'),
'u_res': gl.getUniformLocation(context.programs['sdf'].opaque, 'u_res'),
'u_scale': gl.getUniformLocation(context.programs['sdf'].opaque, 'u_scale'),
'u_translation': gl.getUniformLocation(context.programs['sdf'].opaque, 'u_translation'),
'u_stroke_count': gl.getUniformLocation(context.programs['sdf'].opaque, 'u_stroke_count'),
},
'main': { 'main': {
'a_pos': gl.getAttribLocation(context.programs['sdf'].main, 'a_pos'), 'a_pos': gl.getAttribLocation(context.programs['sdf'].main, 'a_pos'),
'a_line': gl.getAttribLocation(context.programs['sdf'].main, 'a_line'), 'a_line': gl.getAttribLocation(context.programs['sdf'].main, 'a_line'),
@ -203,31 +236,12 @@ function init_webgl(state, context) {
'u_res': gl.getUniformLocation(context.programs['sdf'].main, 'u_res'), 'u_res': gl.getUniformLocation(context.programs['sdf'].main, 'u_res'),
'u_scale': gl.getUniformLocation(context.programs['sdf'].main, 'u_scale'), 'u_scale': gl.getUniformLocation(context.programs['sdf'].main, 'u_scale'),
'u_translation': gl.getUniformLocation(context.programs['sdf'].main, 'u_translation'), 'u_translation': gl.getUniformLocation(context.programs['sdf'].main, 'u_translation'),
'u_texture_points': gl.getUniformLocation(context.programs['sdf'].main, 'u_texture_points'),
'u_texture_indices': gl.getUniformLocation(context.programs['sdf'].main, 'u_texture_indices'),
'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].main, 'u_debug_mode'), 'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].main, 'u_debug_mode'),
}, 'u_tile_size': gl.getUniformLocation(context.programs['sdf'].main, 'u_tile_size'),
'u_stroke_count': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_count'),
'tiles': {
'a_pos': gl.getAttribLocation(context.programs['sdf'].tiles, 'a_pos'),
'a_line': gl.getAttribLocation(context.programs['sdf'].tiles, 'a_line'),
'a_color': gl.getAttribLocation(context.programs['sdf'].tiles, 'a_color'),
'a_stroke_id': gl.getAttribLocation(context.programs['sdf'].tiles, 'a_stroke_id'),
'u_res': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_res'),
'u_scale': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_scale'),
'u_translation': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_translation'),
'u_texture_points': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_texture_points'),
'u_texture_indices': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_texture_indices'),
'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].tiles, 'u_debug_mode'),
} }
}; };
context.buffers['image'] = {
'b_pos': context.gl.createBuffer(),
'b_texcoord': context.gl.createBuffer(),
};
context.buffers['sdf'] = { context.buffers['sdf'] = {
'b_packed_static': gl.createBuffer(), 'b_packed_static': gl.createBuffer(),
'b_packed_dynamic': gl.createBuffer(), 'b_packed_dynamic': gl.createBuffer(),
@ -235,27 +249,6 @@ function init_webgl(state, context) {
'b_packed_dynamic_index': gl.createBuffer(), 'b_packed_dynamic_index': gl.createBuffer(),
}; };
context.textures['sdf'] = {
'tiles': gl.createTexture(),
};
context.framebuffers['sdf'] = {
'tiles': gl.createFramebuffer(),
};
gl.bindTexture(gl.TEXTURE_2D, context.textures['sdf'].tiles);
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32UI, context.canvas.width, context.canvas.height, 0, gl.RED_INTEGER, gl.UNSIGNED_INT, null);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, Math.ceil(context.canvas.width / config.tile_size), Math.ceil(context.canvas.height / config.tile_size), 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.bindFramebuffer(gl.FRAMEBUFFER, context.framebuffers['sdf'].tiles);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, context.textures['sdf'].tiles, 0);
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
context.textures['image'] = {};
const resize_canvas = (entries) => { const resize_canvas = (entries) => {
// https://www.khronos.org/webgl/wiki/HandlingHighDPI // https://www.khronos.org/webgl/wiki/HandlingHighDPI
const entry = entries[0]; const entry = entries[0];
@ -275,9 +268,6 @@ function init_webgl(state, context) {
context.canvas.width = width; context.canvas.width = width;
context.canvas.height = height; context.canvas.height = height;
gl.bindTexture(gl.TEXTURE_2D, context.textures['sdf'].tiles);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, Math.ceil(context.canvas.width / config.tile_size), Math.ceil(context.canvas.height / config.tile_size), 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
schedule_draw(state, context); schedule_draw(state, context);
} }

Write Preview
Loading…
Cancel
Save