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

SDF bull fixed boxes + passed stroke width to shader

ssao
A.Olokhtonov 1 year ago
parent
69feb482a2
commit
f72cbf5941
4 changed files with 58 additions and 51 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/tools.js
  2. 56
      client/webgl_draw.js
  3. 35
      client/webgl_geometry.js
  4. 16
      client/webgl_shaders.js

2
client/tools.js
Unescape View File

@ -48,7 +48,7 @@ function hide_stroke_preview() {
function switch_stroke_width(e, state) { function switch_stroke_width(e, state) {
if (!state.online) return; if (!state.online) return;
const value = e.target.value; const value = parseInt(e.target.value);
state.players[state.me].width = value; state.players[state.me].width = value;
show_stroke_preview(state, value); show_stroke_preview(state, value);

56
client/webgl_draw.js
Unescape View File

@ -31,41 +31,43 @@ function draw(state, context) {
gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_pos']);
gl.enableVertexAttribArray(locations['a_color']); gl.enableVertexAttribArray(locations['a_color']);
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 4 * 3, 0); gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, 4 * 4, 0);
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 4 * 3, 4 * 2); gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 4 * 4, 4 * 3);
gl.activeTexture(gl.TEXTURE0 + 0); gl.activeTexture(gl.TEXTURE0 + 0);
gl.bindTexture(gl.TEXTURE_2D, textures['points']); gl.bindTexture(gl.TEXTURE_2D, textures['points']);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
const npoints = context.point_serializer.offset / (4 * 2); const npoints = context.point_serializer.offset / (4 * 2);
const nstrokes = context.quad_serializer.offset / (6 * 3 * 4); const nstrokes = context.quad_serializer.offset / (6 * 4 * 4);
// TOOD: if points changed if (npoints > 0) {
if (true) { // TOOD: if points changed
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, npoints, 1, 0, gl.RG, gl.FLOAT, new Float32Array(context.point_serializer.buffer, 0, context.point_serializer.offset / 4)); if (true) {
} gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, npoints, 1, 0, gl.RG, gl.FLOAT, new Float32Array(context.point_serializer.buffer, 0, context.point_serializer.offset / 4));
}
gl.activeTexture(gl.TEXTURE0 + 1);
gl.bindTexture(gl.TEXTURE_2D, textures['indices']); gl.activeTexture(gl.TEXTURE0 + 1);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, textures['indices']);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// TOOD: if points changed
if (true) { // TOOD: if points changed
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32UI, nstrokes, 1, 0, gl.RG_INTEGER, gl.UNSIGNED_INT, new Uint32Array(context.index_serializer.buffer, 0, context.index_serializer.offset / 4)); if (true) {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32UI, nstrokes, 1, 0, gl.RG_INTEGER, gl.UNSIGNED_INT, new Uint32Array(context.index_serializer.buffer, 0, context.index_serializer.offset / 4));
}
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_points'], 0);
gl.uniform1i(locations['u_texture_indices'], 1);
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.quad_serializer.buffer, 0, context.quad_serializer.offset), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES, 0, nstrokes * 6);
} }
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_points'], 0);
gl.uniform1i(locations['u_texture_indices'], 1);
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.quad_serializer.buffer, 0, context.quad_serializer.offset), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES, 0, nstrokes * 6);
// Images // Images
// locations = context.locations['image']; // locations = context.locations['image'];
// buffers = context.buffers['image']; // buffers = context.buffers['image'];

35
client/webgl_geometry.js
Unescape View File

@ -3,23 +3,24 @@ function push_point_xy(s, x, y) {
ser_f32(s, y); ser_f32(s, y);
} }
function push_point_xyrgb(s, x, y, r, g, b) { function push_point_xyzrgb(s, x, y, z, r, g, b) {
ser_f32(s, x); ser_f32(s, x);
ser_f32(s, y); ser_f32(s, y);
ser_f32(s, z);
ser_u8(s, r); ser_u8(s, r);
ser_u8(s, g); ser_u8(s, g);
ser_u8(s, b); ser_u8(s, b);
ser_align(s, 4); ser_align(s, 4);
} }
function push_quad_xyrgb(s, p1x, p1y, p4x, p4y, r, g, b) { function push_quad_xyzrgb(s, p1x, p1y, p4x, p4y, z, r, g, b) {
push_point_xyrgb(s, p1x, p1y, r, g, b); push_point_xyzrgb(s, p1x, p1y, z, r, g, b);
push_point_xyrgb(s, p4x, p1y, r, g, b); push_point_xyzrgb(s, p4x, p1y, z, r, g, b);
push_point_xyrgb(s, p1x, p4y, r, g, b); push_point_xyzrgb(s, p1x, p4y, z, r, g, b);
push_point_xyrgb(s, p4x, p4y, r, g, b); push_point_xyzrgb(s, p4x, p4y, z, r, g, b);
push_point_xyrgb(s, p1x, p4y, r, g, b); push_point_xyzrgb(s, p1x, p4y, z, r, g, b);
push_point_xyrgb(s, p4x, p1y, r, g, b); push_point_xyzrgb(s, p4x, p1y, z, r, g, b);
} }
function push_stroke(context, stroke) { function push_stroke(context, stroke) {
@ -43,21 +44,21 @@ function push_stroke(context, stroke) {
let min_x, min_y, max_x, max_y; let min_x, min_y, max_x, max_y;
min_x = Math.floor(points[0].x); min_x = Math.floor(points[0].x - stroke_width / 2);
max_x = Math.ceil(points[0].x); max_x = Math.ceil(points[0].x + stroke_width / 2);
min_y = Math.floor(points[0].y); min_y = Math.floor(points[0].y - stroke_width / 2);
max_y = Math.ceil(points[0].y); max_y = Math.ceil(points[0].y + stroke_width / 2);
for (const p of points) { for (const p of points) {
min_x = Math.min(min_x, Math.floor(p.x)); min_x = Math.min(min_x, Math.floor(p.x - stroke_width / 2));
min_y = Math.min(min_y, Math.floor(p.y)); min_y = Math.min(min_y, Math.floor(p.y - stroke_width / 2));
max_x = Math.max(max_x, Math.ceil(p.x)); max_x = Math.max(max_x, Math.ceil(p.x + stroke_width / 2));
max_y = Math.max(max_y, Math.ceil(p.y)); max_y = Math.max(max_y, Math.ceil(p.y + stroke_width / 2));
push_point_xy(context.point_serializer, p.x, p.y); push_point_xy(context.point_serializer, p.x, p.y);
} }
push_quad_xyrgb(context.quad_serializer, min_x, min_y, max_x, max_y, r, g, b); push_quad_xyzrgb(context.quad_serializer, min_x, min_y, max_x, max_y, stroke_width / 2, r, g, b);
} }
function geometry_prepare_stroke(state) { function geometry_prepare_stroke(state) {

16
client/webgl_shaders.js
Unescape View File

@ -1,5 +1,5 @@
const sdf_vs_src = `#version 300 es const sdf_vs_src = `#version 300 es
in vec2 a_pos; in vec3 a_pos;
in vec3 a_color; in vec3 a_color;
uniform vec2 u_scale; uniform vec2 u_scale;
@ -8,16 +8,19 @@ const sdf_vs_src = `#version 300 es
out vec2 v_texcoord; out vec2 v_texcoord;
out vec3 v_color; out vec3 v_color;
flat out float v_thickness;
flat out int v_vertexid; flat out int v_vertexid;
void main() { void main() {
vec2 screen01 = (a_pos * u_scale + u_translation) / u_res; vec2 screen01 = (a_pos.xy * u_scale + u_translation) / u_res;
vec2 screen02 = screen01 * 2.0; vec2 screen02 = screen01 * 2.0;
screen02.y = 2.0 - screen02.y; screen02.y = 2.0 - screen02.y;
v_texcoord = a_pos + vec2(0.5); v_texcoord = a_pos.xy;
v_vertexid = gl_VertexID; v_vertexid = gl_VertexID;
v_color = a_color; v_color = a_color;
v_thickness = a_pos.z;
gl_Position = vec4(screen02 - 1.0, 0, 1); gl_Position = vec4(screen02 - 1.0, 0, 1);
} }
@ -31,13 +34,14 @@ const sdf_fs_src = `#version 300 es
in vec2 v_texcoord; in vec2 v_texcoord;
in vec3 v_color; in vec3 v_color;
flat in float v_thickness;
flat in int v_vertexid; flat in int v_vertexid;
out vec4 FragColor; out vec4 FragColor;
void main() { void main() {
float mindist = 99999.9; float mindist = 99999.9;
float th = 5.0;
uvec4 indices = texelFetch(u_texture_indices, ivec2(v_vertexid / 6, 0), 0); uvec4 indices = texelFetch(u_texture_indices, ivec2(v_vertexid / 6, 0), 0);
@ -50,7 +54,7 @@ const sdf_fs_src = `#version 300 es
vec2 pa = v_texcoord - a.xy, ba = b.xy - a.xy; vec2 pa = v_texcoord - a.xy, ba = b.xy - a.xy;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
float dist = length(pa - ba * h) - th; float dist = length(pa - ba * h) - v_thickness;
mindist = min(mindist, dist); mindist = min(mindist, dist);
} }
@ -58,7 +62,7 @@ const sdf_fs_src = `#version 300 es
float fade = 0.5 * length(fwidth(v_texcoord)); float fade = 0.5 * length(fwidth(v_texcoord));
float alpha = 1.0 - smoothstep(-fade, fade, mindist); float alpha = 1.0 - smoothstep(-fade, fade, mindist);
FragColor = vec4(v_color * alpha, 0.1 + alpha); FragColor = vec4(v_color * alpha, alpha);
// FragColor = vec4(v_color, 1.0); // FragColor = vec4(v_color, 1.0);
} }
`; `;

Write Preview
Loading…
Cancel
Save