You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.7 KiB
159 lines
6.7 KiB
function schedule_draw(state, context) { |
|
if (!state.timers.raf) { |
|
window.requestAnimationFrame(() => draw(state, context)); |
|
state.timers.raf = true; |
|
} |
|
} |
|
|
|
function draw(state, context) { |
|
state.timers.raf = false; |
|
|
|
const gl = context.gl; |
|
const width = window.innerWidth; |
|
const height = window.innerHeight; |
|
|
|
let locations; |
|
let buffers; |
|
|
|
gl.viewport(0, 0, context.canvas.width, context.canvas.height); |
|
gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); |
|
gl.clear(gl.COLOR_BUFFER_BIT); |
|
|
|
// Draw images |
|
locations = context.locations['quad']; |
|
buffers = context.buffers['quad']; |
|
|
|
gl.useProgram(context.programs['quad']); |
|
|
|
gl.enableVertexAttribArray(locations['a_pos']); |
|
gl.enableVertexAttribArray(locations['a_texcoord']); |
|
|
|
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_layer'], 0); |
|
gl.uniform1i(locations['u_texture'], 0); |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
|
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, context.quad_positions_f32, gl.STATIC_DRAW); |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); |
|
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, context.quad_texcoords_f32, gl.STATIC_DRAW); |
|
|
|
const count = Object.keys(context.textures).length; |
|
let active_image_index = -1; |
|
|
|
gl.uniform1i(locations['u_layer'], 0); |
|
gl.uniform1i(locations['u_outline'], 0); |
|
|
|
for (let key = 0; key < count; ++key) { |
|
if (context.textures[key].image_id === context.active_image) { |
|
active_image_index = key; |
|
continue; |
|
} |
|
|
|
gl.bindTexture(gl.TEXTURE_2D, context.textures[key].texture); |
|
gl.drawArrays(gl.TRIANGLES, key * 6, 6); |
|
} |
|
|
|
if (active_image_index !== -1) { |
|
gl.uniform1i(locations['u_layer'], 1); |
|
gl.uniform1i(locations['u_outline'], 1); |
|
gl.bindTexture(gl.TEXTURE_2D, context.textures[active_image_index].texture); |
|
gl.drawArrays(gl.TRIANGLES, active_image_index * 6, 6); |
|
} |
|
|
|
// Strokes |
|
locations = context.locations['stroke']; |
|
buffers = context.buffers['stroke']; |
|
|
|
gl.useProgram(context.programs['stroke']); |
|
|
|
gl.enableVertexAttribArray(locations['a_pos']); |
|
gl.enableVertexAttribArray(locations['a_color']); |
|
|
|
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_layer'], 1); |
|
|
|
const total_pos_size = context.static_positions_f32.byteLength + context.dynamic_positions_f32.byteLength; |
|
const total_color_size = context.static_colors_u8.byteLength + context.dynamic_colors_u8.byteLength; |
|
const total_point_count = (context.static_positions.length + total_dynamic_positions(context)) / 2; |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
|
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, total_pos_size, gl.DYNAMIC_DRAW); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_positions_f32); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_positions_f32.byteLength, context.dynamic_positions_f32); |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_color']); |
|
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, total_color_size, gl.DYNAMIC_DRAW); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_colors_u8); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_colors_u8.byteLength, context.dynamic_colors_u8); |
|
|
|
gl.drawArrays(gl.TRIANGLES, 0, total_point_count); |
|
|
|
// Circles |
|
locations = context.locations['circle']; |
|
buffers = context.buffers['circle']; |
|
|
|
gl.useProgram(context.programs['circle']); |
|
|
|
gl.enableVertexAttribArray(locations['a_pos']); |
|
gl.enableVertexAttribArray(locations['a_texcoord']); |
|
gl.enableVertexAttribArray(locations['a_color']); |
|
|
|
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_layer'], 1); |
|
|
|
const total_circle_pos_size = context.static_circle_positions_f32.byteLength + context.dynamic_circle_positions_f32.byteLength; |
|
const total_circle_color_size = context.static_circle_colors_u8.byteLength + context.dynamic_circle_colors_u8.byteLength; |
|
const total_circle_point_count = (context.static_circle_positions.length + total_dynamic_circle_positions(context)) / 2; |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); |
|
gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, total_circle_pos_size, gl.DYNAMIC_DRAW); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_circle_positions_f32); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_circle_positions_f32.byteLength, context.dynamic_circle_positions_f32); |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_color']); |
|
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, total_circle_color_size, gl.DYNAMIC_DRAW); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_circle_colors_u8); |
|
gl.bufferSubData(gl.ARRAY_BUFFER, context.static_circle_colors_u8.byteLength, context.dynamic_circle_colors_u8); |
|
|
|
// TODO: move this somewhere? |
|
const circle_quad_uv = new Float32Array(total_circle_point_count * 2); |
|
|
|
for (let quad = 0; quad < total_circle_point_count / 6; ++quad) { |
|
circle_quad_uv[quad * 12 + 0] = 0; |
|
circle_quad_uv[quad * 12 + 1] = 0; |
|
|
|
circle_quad_uv[quad * 12 + 2] = 0; |
|
circle_quad_uv[quad * 12 + 3] = 1; |
|
|
|
circle_quad_uv[quad * 12 + 4] = 1; |
|
circle_quad_uv[quad * 12 + 5] = 0; |
|
|
|
circle_quad_uv[quad * 12 + 6] = 1; |
|
circle_quad_uv[quad * 12 + 7] = 1; |
|
|
|
circle_quad_uv[quad * 12 + 8] = 1; |
|
circle_quad_uv[quad * 12 + 9] = 0; |
|
|
|
circle_quad_uv[quad * 12 + 10] = 0; |
|
circle_quad_uv[quad * 12 + 11] = 1; |
|
} |
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); |
|
gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, circle_quad_uv, gl.DYNAMIC_DRAW); |
|
|
|
gl.drawArrays(gl.TRIANGLES, 0, total_circle_point_count); |
|
} |