diff --git a/docs/emgui_wasm.js b/docs/emgui_wasm.js index a9c002cf0..d149981b0 100644 --- a/docs/emgui_wasm.js +++ b/docs/emgui_wasm.js @@ -23,54 +23,6 @@ WASM_VECTOR_LEN = buf.length; return ptr; } - - let cachedTextDecoder = new TextDecoder('utf-8'); - - function getStringFromWasm(ptr, len) { - return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len)); - } - - let cachedGlobalArgumentPtr = null; - function globalArgumentPtr() { - if (cachedGlobalArgumentPtr === null) { - cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr(); - } - return cachedGlobalArgumentPtr; - } - - let cachegetUint32Memory = null; - function getUint32Memory() { - if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) { - cachegetUint32Memory = new Uint32Array(wasm.memory.buffer); - } - return cachegetUint32Memory; - } - /** - * @param {string} arg0 - * @returns {string} - */ - __exports.show_gui = function(arg0) { - const ptr0 = passStringToWasm(arg0); - const len0 = WASM_VECTOR_LEN; - const retptr = globalArgumentPtr(); - try { - wasm.show_gui(retptr, ptr0, len0); - const mem = getUint32Memory(); - const rustptr = mem[retptr / 4]; - const rustlen = mem[retptr / 4 + 1]; - - const realRet = getStringFromWasm(rustptr, rustlen).slice(); - wasm.__wbindgen_free(rustptr, rustlen * 1); - return realRet; - - - } finally { - wasm.__wbindgen_free(ptr0, len0 * 1); - - } - - }; - /** * @param {string} arg0 * @returns {Painter} @@ -114,6 +66,12 @@ function getObject(idx) { return heap[idx]; } +let cachedTextDecoder = new TextDecoder('utf-8'); + +function getStringFromWasm(ptr, len) { + return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len)); +} + let heap_next = heap.length; function addHeapObject(obj) { @@ -149,6 +107,14 @@ const __widl_f_get_context_HTMLCanvasElement_target = typeof HTMLCanvasElement = throw new Error(`wasm-bindgen: HTMLCanvasElement.getContext does not exist`); }; +let cachegetUint32Memory = null; +function getUint32Memory() { + if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) { + cachegetUint32Memory = new Uint32Array(wasm.memory.buffer); + } + return cachegetUint32Memory; +} + __exports.__widl_f_get_context_HTMLCanvasElement = function(arg0, arg1, arg2, exnptr) { let varg1 = getStringFromWasm(arg1, arg2); try { @@ -201,6 +167,34 @@ __exports.__widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext = fu __widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2), arg3); }; +function getArrayU8FromWasm(ptr, len) { + return getUint8Memory().subarray(ptr / 1, ptr / 1 + len); +} + +const __widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texImage2D || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.texImage2D does not exist`); +}; + +__exports.__widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, exnptr) { + let varg9 = arg9 == 0 ? undefined : getArrayU8FromWasm(arg9, arg10); + try { + __widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, varg9); + } catch (e) { + const view = getUint32Memory(); + view[exnptr / 4] = 1; + view[exnptr / 4 + 1] = addHeapObject(e); + + } +}; + +const __widl_f_active_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.activeTexture || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.activeTexture does not exist`); +}; + +__exports.__widl_f_active_texture_WebGLRenderingContext = function(arg0, arg1) { + __widl_f_active_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1); +}; + const __widl_f_attach_shader_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.attachShader || function() { throw new Error(`wasm-bindgen: WebGLRenderingContext.attachShader does not exist`); }; @@ -217,6 +211,14 @@ __exports.__widl_f_bind_buffer_WebGLRenderingContext = function(arg0, arg1, arg2 __widl_f_bind_buffer_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2)); }; +const __widl_f_bind_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.bindTexture || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.bindTexture does not exist`); +}; + +__exports.__widl_f_bind_texture_WebGLRenderingContext = function(arg0, arg1, arg2) { + __widl_f_bind_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2)); +}; + const __widl_f_blend_func_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.blendFunc || function() { throw new Error(`wasm-bindgen: WebGLRenderingContext.blendFunc does not exist`); }; @@ -282,6 +284,17 @@ __exports.__widl_f_create_shader_WebGLRenderingContext = function(arg0, arg1) { }; +const __widl_f_create_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.createTexture || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.createTexture does not exist`); +}; + +__exports.__widl_f_create_texture_WebGLRenderingContext = function(arg0) { + + const val = __widl_f_create_texture_WebGLRenderingContext_target.call(getObject(arg0)); + return isLikeNone(val) ? 0 : addHeapObject(val); + +}; + const __widl_f_draw_elements_with_i32_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.drawElements || function() { throw new Error(`wasm-bindgen: WebGLRenderingContext.drawElements does not exist`); }; @@ -388,6 +401,22 @@ __exports.__widl_f_shader_source_WebGLRenderingContext = function(arg0, arg1, ar __widl_f_shader_source_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), varg2); }; +const __widl_f_tex_parameteri_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texParameteri || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.texParameteri does not exist`); +}; + +__exports.__widl_f_tex_parameteri_WebGLRenderingContext = function(arg0, arg1, arg2, arg3) { + __widl_f_tex_parameteri_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3); +}; + +const __widl_f_uniform1i_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform1i || function() { + throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform1i does not exist`); +}; + +__exports.__widl_f_uniform1i_WebGLRenderingContext = function(arg0, arg1, arg2) { + __widl_f_uniform1i_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), arg2); +}; + const __widl_f_uniform2f_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform2f || function() { throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform2f does not exist`); }; @@ -463,6 +492,14 @@ __exports.__wbg_subarray_705096b76e15e94e = function(arg0, arg1, arg2) { return addHeapObject(getObject(arg0).subarray(arg1, arg2)); }; +__exports.__wbg_new_3153ff3e90269012 = function(arg0) { + return addHeapObject(new Uint16Array(getObject(arg0))); +}; + +__exports.__wbg_subarray_6f181829e5fd3854 = function(arg0, arg1, arg2) { + return addHeapObject(getObject(arg0).subarray(arg1, arg2)); +}; + __exports.__wbg_instanceof_Memory_d223615e29613829 = function(idx) { return getObject(idx) instanceof WebAssembly.Memory ? 1 : 0; }; @@ -511,6 +548,21 @@ __exports.__wbindgen_string_new = function(p, l) { return addHeapObject(getStringFromWasm(p, l)); }; +__exports.__wbindgen_number_get = function(n, invalid) { + let obj = getObject(n); + if (typeof(obj) === 'number') return obj; + getUint8Memory()[invalid] = 1; + return 0; +}; + +__exports.__wbindgen_is_null = function(idx) { + return getObject(idx) === null ? 1 : 0; +}; + +__exports.__wbindgen_is_undefined = function(idx) { + return getObject(idx) === undefined ? 1 : 0; +}; + __exports.__wbindgen_boolean_get = function(i) { let v = getObject(i); if (typeof(v) === 'boolean') { @@ -520,6 +572,18 @@ __exports.__wbindgen_boolean_get = function(i) { } }; +__exports.__wbindgen_is_symbol = function(i) { + return typeof(getObject(i)) === 'symbol' ? 1 : 0; +}; + +__exports.__wbindgen_string_get = function(i, len_ptr) { + let obj = getObject(i); + if (typeof(obj) !== 'string') return 0; + const ptr = passStringToWasm(obj); + getUint32Memory()[len_ptr / 4] = WASM_VECTOR_LEN; + return ptr; +}; + __exports.__wbindgen_memory = function() { return addHeapObject(wasm.memory); }; function takeObject(idx) { diff --git a/docs/emgui_wasm_bg.wasm b/docs/emgui_wasm_bg.wasm index 91399a394..f9fd3d1df 100644 Binary files a/docs/emgui_wasm_bg.wasm and b/docs/emgui_wasm_bg.wasm differ diff --git a/docs/frontend.js b/docs/frontend.js index 690b0a3c1..ff2f2b4ca 100644 --- a/docs/frontend.js +++ b/docs/frontend.js @@ -111,8 +111,7 @@ function paint_gui(canvas, input) { var commands = rust_gui(input); for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) { var cmd = commands_1[_i]; - var commands_2 = rust_gui(input); - commands_2.unshift({ + commands.unshift({ fill_color: { r: 0, g: 0, b: 0, a: 0 }, kind: "clear" }); diff --git a/docs/frontend.ts b/docs/frontend.ts index 9213b2c45..6a3d33c95 100644 --- a/docs/frontend.ts +++ b/docs/frontend.ts @@ -206,14 +206,12 @@ function paint_gui(canvas, input: RawInput) { } wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input)); } else { - let commands = rust_gui(input); + const commands = rust_gui(input); for (const cmd of commands) { - const commands = rust_gui(input); commands.unshift({ fill_color: { r: 0, g: 0, b: 0, a: 0 }, kind: "clear", }); - paint_command(canvas, cmd); } } diff --git a/emgui/src/emgui.rs b/emgui/src/emgui.rs index 1ab04aa40..d57a258c3 100644 --- a/emgui/src/emgui.rs +++ b/emgui/src/emgui.rs @@ -1,7 +1,7 @@ use crate::{layout, style, types::*}; /// Encapsulates input, layout and painting for ease of use. -#[derive(Clone, Debug, Default)] +#[derive(Clone)] pub struct Emgui { pub last_input: RawInput, pub layout: layout::Layout, @@ -9,6 +9,14 @@ pub struct Emgui { } impl Emgui { + pub fn new() -> Emgui { + Emgui { + last_input: Default::default(), + layout: layout::Layout::new(), + style: Default::default(), + } + } + pub fn new_frame(&mut self, new_input: RawInput) { let gui_input = GuiInput::from_last_and_new(&self.last_input, &new_input); self.last_input = new_input; diff --git a/emgui/src/font.rs b/emgui/src/font.rs index cf7a49abb..df9619f17 100644 --- a/emgui/src/font.rs +++ b/emgui/src/font.rs @@ -5,19 +5,20 @@ use rusttype::{point, Scale}; #[derive(Clone, Copy, Debug, PartialEq)] pub struct GlyphInfo { /// X offset for nice rendering - offset_x: u16, + pub offset_x: u16, /// Y offset for nice rendering - offset_y: u16, + pub offset_y: u16, - min_x: u16, - min_y: u16, + // Texture coordinates: + pub min_x: u16, + pub min_y: u16, /// Inclusive. - max_x: u16, + pub max_x: u16, /// Inclusive - max_y: u16, + pub max_y: u16, } /// Printable ascii characters [33, 126], which excludes 32 (space) and 127 (DEL) @@ -26,6 +27,7 @@ const FIRST_ASCII: usize = 33; /// Inclusive const LAST_ASCII: usize = 126; +// TODO: break out texture atlas into separate struct, and fill it dynamically, potentially from multiple fonts. #[derive(Clone)] pub struct Font { /// Maximum character height @@ -138,8 +140,12 @@ impl Font { (FIRST_ASCII..=LAST_ASCII).map(|c| c as u8 as char) } - pub fn texture(&self) -> (usize, usize, &[u8]) { - (self.atlas_width, self.atlas_height, &self.atlas) + pub fn texture(&self) -> (u16, u16, &[u8]) { + ( + self.atlas_width as u16, + self.atlas_height as u16, + &self.atlas, + ) } pub fn pixel(&self, x: u16, y: u16) -> u8 { @@ -159,6 +165,19 @@ impl Font { } } + /// Returns the start (X) of each character, starting at zero, plus the total width. + /// i.e. returns text.chars().count() + 1 numbers. + pub fn layout_single_line(&self, text: &str) -> Vec { + let mut x_offsets = Vec::new(); + let mut x = 0.0; + for c in text.chars() { + x_offsets.push(x); + x += 7.0; // TODO: kerning + } + x_offsets.push(x); + x_offsets + } + pub fn debug_print_atlas_ascii_art(&self) { for y in 0..self.atlas_height { println!( diff --git a/emgui/src/layout.rs b/emgui/src/layout.rs index ccff0bf04..9e9079b70 100644 --- a/emgui/src/layout.rs +++ b/emgui/src/layout.rs @@ -1,6 +1,6 @@ use std::collections::HashSet; -use crate::{math::*, types::*}; +use crate::{font::Font, math::*, types::*}; // ---------------------------------------------------------------------------- @@ -95,7 +95,10 @@ struct Memory { // ---------------------------------------------------------------------------- struct TextFragment { - rect: Rect, + /// The start of each character, starting at zero. + x_offsets: Vec, + /// 0 for the first line, n * line_spacing for the rest + y_offset: f32, text: String, } @@ -149,9 +152,10 @@ impl Layouter { type Id = u64; -#[derive(Clone, Debug, Default)] +#[derive(Clone)] pub struct Layout { options: LayoutOptions, + font: Font, // TODO: Arc? input: GuiInput, memory: Memory, id: Id, @@ -161,6 +165,19 @@ pub struct Layout { } impl Layout { + pub fn new() -> Layout { + Layout { + options: Default::default(), + font: Font::new(13), + input: Default::default(), + memory: Default::default(), + id: Default::default(), + layouter: Default::default(), + graphics: Default::default(), + hovering_graphics: Default::default(), + } + } + pub fn input(&self) -> &GuiInput { &self.input } @@ -388,6 +405,7 @@ impl Layout { let mut popup_layout = Layout { options: self.options, input: self.input, + font: self.font.clone(), memory: self.memory.clone(), // TODO: Arc id: self.id, layouter: Default::default(), @@ -450,11 +468,11 @@ impl Layout { let mut max_width = 0.0; let mut text_fragments = Vec::new(); for line in text.split('\n') { - // TODO: break long lines - let line_width = char_size.x * (line.len() as f32); - + let x_offsets = self.font.layout_single_line(&line); + let line_width = *x_offsets.last().unwrap(); text_fragments.push(TextFragment { - rect: Rect::from_min_size(vec2(0.0, cursor_y), vec2(line_width, char_size.y)), + x_offsets, + y_offset: cursor_y, text: line.into(), }); @@ -468,9 +486,10 @@ impl Layout { fn add_text(&mut self, pos: Vec2, text: Vec) { for fragment in text { self.graphics.push(GuiCmd::Text { - pos: pos + vec2(fragment.rect.pos.x, fragment.rect.center().y), + pos: pos + vec2(0.0, fragment.y_offset), style: TextStyle::Label, text: fragment.text, + x_offsets: fragment.x_offsets, }); } } diff --git a/emgui/src/math.rs b/emgui/src/math.rs index eff4bce7c..e333aa498 100644 --- a/emgui/src/math.rs +++ b/emgui/src/math.rs @@ -92,6 +92,11 @@ pub fn lerp(min: f32, max: f32, t: f32) -> f32 { (1.0 - t) * min + t * max } +pub fn remap(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 { + let t = (from - from_min) / (from_max - from_min); + lerp(to_min, to_max, t) +} + pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 { let t = if from <= from_min { 0.0 @@ -102,3 +107,5 @@ pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: }; lerp(to_min, to_max, t) } + +pub const TAU: f32 = 2.0 * std::f32::consts::PI; diff --git a/emgui/src/painter.rs b/emgui/src/painter.rs index 76df9aae1..66406a37e 100644 --- a/emgui/src/painter.rs +++ b/emgui/src/painter.rs @@ -1,6 +1,7 @@ /// Outputs render info in a format suitable for e.g. OpenGL. use crate::{ font::Font, + math::{remap, Vec2, TAU}, types::{Color, PaintCmd}, }; @@ -21,11 +22,102 @@ pub struct Vertex { #[derive(Clone, Debug, Default)] pub struct Frame { pub clear_color: Option, - /// One big triangle strip + /// Draw as triangles (i.e. the length is a multiple of three) pub indices: Vec, pub vertices: Vec, } +impl Frame { + /// Uniformly colored rectangle + pub fn add_rect(&mut self, top_left: Vertex, bottom_right: Vertex) { + let idx = self.vertices.len() as u32; + self.indices.push(idx + 0); + self.indices.push(idx + 1); + self.indices.push(idx + 2); + self.indices.push(idx + 2); + self.indices.push(idx + 1); + self.indices.push(idx + 3); + + let top_right = Vertex { + x: bottom_right.x, + y: top_left.y, + u: bottom_right.u, + v: top_left.v, + color: top_left.color, + }; + let botom_left = Vertex { + x: top_left.x, + y: bottom_right.y, + u: top_left.u, + v: bottom_right.v, + color: top_left.color, + }; + self.vertices.push(top_left); + self.vertices.push(top_right); + self.vertices.push(botom_left); + self.vertices.push(bottom_right); + } + + pub fn fill_closed_path(&mut self, points: &[Vec2], normals: &[Vec2], color: Color) { + self.vertices.extend(points.iter().map(|p| Vertex { + x: p.x, + y: p.y, + u: 0, + v: 0, + color, + })); + // TODO: use normals for anti-aliasing + assert_eq!(points.len(), normals.len()); + let n = points.len() as u32; + let idx = self.vertices.len() as u32; + for i in 2..n { + self.indices.push(idx); + self.indices.push(idx + i - 1); + self.indices.push(idx + i); + } + } + + pub fn draw_closed_path( + &mut self, + points: &[Vec2], + normals: &[Vec2], + width: f32, + color: Color, + ) { + // TODO: anti-aliasing + assert_eq!(points.len(), normals.len()); + let n = points.len() as u32; + let hw = width / 2.0; + + let idx = self.vertices.len() as u32; + for i in 0..n { + self.indices.push(idx + (2 * i + 0) % (2 * n)); + self.indices.push(idx + (2 * i + 1) % (2 * n)); + self.indices.push(idx + (2 * i + 2) % (2 * n)); + self.indices.push(idx + (2 * i + 2) % (2 * n)); + self.indices.push(idx + (2 * i + 1) % (2 * n)); + self.indices.push(idx + (2 * i + 3) % (2 * n)); + } + + for (p, n) in points.iter().zip(normals) { + self.vertices.push(Vertex { + x: p.x + hw * n.x, + y: p.y + hw * n.x, + u: 0, + v: 0, + color, + }); + self.vertices.push(Vertex { + x: p.x - hw * n.x, + y: p.y - hw * n.x, + u: 0, + v: 0, + color, + }); + } + } +} + #[derive(Clone)] pub struct Painter { font: Font, @@ -39,48 +131,132 @@ impl Painter { } /// 8-bit row-major font atlas texture, (width, height, pixels). - pub fn texture(&self) -> (usize, usize, &[u8]) { + pub fn texture(&self) -> (u16, u16, &[u8]) { self.font.texture() } pub fn paint(&self, commands: &[PaintCmd]) -> Frame { + // let mut path_points = Vec::new(); + // let mut path_normals = Vec::new(); + let mut frame = Frame::default(); for cmd in commands { match cmd { - PaintCmd::Circle { .. } => {} // TODO + PaintCmd::Circle { + center, + fill_color, + outline, + radius, + } => { + let n = 64; // TODO: parameter + if let Some(color) = fill_color { + let idx = frame.vertices.len() as u32; + for i in 2..n { + frame.indices.push(idx); + frame.indices.push(idx + i - 1); + frame.indices.push(idx + i); + } + + for i in 0..n { + let angle = remap(i as f32, 0.0, n as f32, 0.0, TAU); + frame.vertices.push(Vertex { + x: center.x + radius * angle.cos(), + y: center.y + radius * angle.sin(), + u: 0, + v: 0, + color: *color, + }); + } + } + if let Some(_outline) = outline { + // TODO + } + } PaintCmd::Clear { fill_color } => { frame.clear_color = Some(*fill_color); } PaintCmd::Line { .. } => {} // TODO PaintCmd::Rect { + fill_color, + outline, pos, size, - fill_color, .. } => { - // TODO: rounded corners, colors etc. - let idx = frame.vertices.len() as u32; - frame.indices.push(idx + 0); - frame.indices.push(idx + 0); - frame.indices.push(idx + 1); - frame.indices.push(idx + 2); - frame.indices.push(idx + 3); - frame.indices.push(idx + 3); - - let vert = |x, y| Vertex { - x, - y, - u: 0, - v: 0, - color: fill_color.unwrap_or(Color::WHITE), - }; - - frame.vertices.push(vert(pos.x, pos.y)); - frame.vertices.push(vert(pos.x + size.x, pos.y)); - frame.vertices.push(vert(pos.x, pos.y + size.y)); - frame.vertices.push(vert(pos.x + size.x, pos.y + size.y)); + // TODO: rounded corners + // TODO: anti-aliasing + // TODO: FilledRect and RectOutline as separate commands? + if let Some(color) = fill_color { + let vert = |pos: Vec2| Vertex { + x: pos.x, + y: pos.y, + u: 0, + v: 0, + color: *color, + }; + frame.add_rect(vert(*pos), vert(*pos + *size)); + } + if let Some(outline) = outline { + let vert = |x, y| Vertex { + x, + y, + u: 0, + v: 0, + color: outline.color, + }; + + // Draw this counter-clockwise from top-left corner, + // outer to inner on each step. + let hw = outline.width / 2.0; + + let idx = frame.vertices.len() as u32; + for i in 0..4 { + frame.indices.push(idx + (2 * i + 0) % 8); + frame.indices.push(idx + (2 * i + 1) % 8); + frame.indices.push(idx + (2 * i + 2) % 8); + frame.indices.push(idx + (2 * i + 2) % 8); + frame.indices.push(idx + (2 * i + 1) % 8); + frame.indices.push(idx + (2 * i + 3) % 8); + } + + let min = *pos; + let max = *pos + *size; + frame.vertices.push(vert(min.x - hw, min.y - hw)); + frame.vertices.push(vert(min.x + hw, min.y + hw)); + frame.vertices.push(vert(max.x + hw, min.y - hw)); + frame.vertices.push(vert(max.x - hw, min.y + hw)); + frame.vertices.push(vert(max.x + hw, max.y + hw)); + frame.vertices.push(vert(max.x - hw, max.y - hw)); + frame.vertices.push(vert(min.x - hw, max.y + hw)); + frame.vertices.push(vert(min.x + hw, max.y - hw)); + } + } + PaintCmd::Text { + color, + pos, + text, + x_offsets, + } => { + for (c, x_offset) in text.chars().zip(x_offsets.iter()) { + if let Some(glyph) = self.font.glyph_info(c) { + let top_left = Vertex { + x: pos.x + x_offset + (glyph.offset_x as f32), + y: pos.y + (glyph.offset_y as f32), + u: glyph.min_x, + v: glyph.min_y, + color: *color, + }; + let bottom_right = Vertex { + x: top_left.x + (1 + glyph.max_x - glyph.min_x) as f32, + y: top_left.y + (1 + glyph.max_y - glyph.min_y) as f32, + u: glyph.max_x + 1, + v: glyph.max_y + 1, + color: *color, + }; + frame.add_rect(top_left, bottom_right); + } + } } - PaintCmd::Text { .. } => {} // TODO } } frame diff --git a/emgui/src/style.rs b/emgui/src/style.rs index 6ed72e703..3bb677470 100644 --- a/emgui/src/style.rs +++ b/emgui/src/style.rs @@ -241,18 +241,18 @@ fn translate_cmd(out_commands: &mut Vec, style: &Style, cmd: GuiCmd) { } GuiCmd::Text { pos, - text, style: text_style, + text, + x_offsets, } => { - let fill_color = match text_style { + let color = match text_style { TextStyle::Label => style.text_color(), }; out_commands.push(PaintCmd::Text { - fill_color, - font_name: style.font_name.clone(), - font_size: style.font_size, + color, pos, text, + x_offsets, }); } GuiCmd::Window { rect } => { diff --git a/emgui/src/types.rs b/emgui/src/types.rs index 276b4588a..ec6b65294 100644 --- a/emgui/src/types.rs +++ b/emgui/src/types.rs @@ -123,6 +123,8 @@ pub enum GuiCmd { pos: Vec2, style: TextStyle, text: String, + /// Start each character in the text, as offset from pos. + x_offsets: Vec, }, /// Background of e.g. a popup Window { @@ -162,16 +164,14 @@ pub enum PaintCmd { pos: Vec2, size: Vec2, }, - /// Paint a single line of mono-space text. - /// The text should start at the given position and flow to the right. - /// The text should be vertically centered at the given position. + /// Paint a single line of text Text { - fill_color: Color, - /// Name, e.g. Palatino - font_name: String, - /// Height in pixels, e.g. 12 - font_size: f32, + color: Color, + /// Top left corner of the first character. pos: Vec2, text: String, + /// Start each character in the text, as offset from pos. + x_offsets: Vec, + // TODO: font info }, } diff --git a/emgui_wasm/Cargo.toml b/emgui_wasm/Cargo.toml index 6425783d0..59bfb1ddf 100644 --- a/emgui_wasm/Cargo.toml +++ b/emgui_wasm/Cargo.toml @@ -26,6 +26,7 @@ features = [ 'WebGlProgram', 'WebGlRenderingContext', 'WebGlShader', + 'WebGlTexture', 'WebGlUniformLocation', 'Window', ] diff --git a/emgui_wasm/src/lib.rs b/emgui_wasm/src/lib.rs index 0e9a544b8..734c0ba30 100644 --- a/emgui_wasm/src/lib.rs +++ b/emgui_wasm/src/lib.rs @@ -16,35 +16,36 @@ use wasm_bindgen::prelude::*; mod app; mod webgl; -#[wasm_bindgen] -pub fn show_gui(raw_input_json: &str) -> String { - // TODO: faster interface than JSON - let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap(); +// #[wasm_bindgen] +// pub fn show_gui(raw_input_json: &str) -> String { +// // TODO: faster interface than JSON +// let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap(); - lazy_static::lazy_static! { - static ref APP: Mutex = Default::default(); - static ref EMGUI: Mutex = Default::default(); - } +// lazy_static::lazy_static! { +// static ref APP: Mutex = Default::default(); +// static ref EMGUI: Mutex = Default::default(); +// } - let mut emgui = EMGUI.lock().unwrap(); - emgui.new_frame(raw_input); +// let mut emgui = EMGUI.lock().unwrap(); +// emgui.new_frame(raw_input); - use crate::app::GuiSettings; - APP.lock().unwrap().show_gui(&mut emgui.layout); +// use crate::app::GuiSettings; +// APP.lock().unwrap().show_gui(&mut emgui.layout); - let mut style = emgui.style.clone(); - emgui.layout.foldable("Style", |gui| { - style.show_gui(gui); - }); - emgui.style = style; +// let mut style = emgui.style.clone(); +// emgui.layout.foldable("Style", |gui| { +// style.show_gui(gui); +// }); +// emgui.style = style; - let commands = emgui.paint(); - serde_json::to_string(&commands).unwrap() -} +// let commands = emgui.paint(); +// serde_json::to_string(&commands).unwrap() +// } #[wasm_bindgen] pub fn new_webgl_painter(canvas_id: &str) -> Result { - webgl::Painter::new(canvas_id) + let emgui_painter = emgui::Painter::new(); // TODO: don't create this twice + webgl::Painter::new(canvas_id, emgui_painter.texture()) } struct State { @@ -57,7 +58,7 @@ impl State { fn new() -> State { State { app: Default::default(), - emgui: Default::default(), + emgui: Emgui::new(), emgui_painter: emgui::Painter::new(), } } diff --git a/emgui_wasm/src/webgl.rs b/emgui_wasm/src/webgl.rs index ae8eae040..7ccb724ef 100644 --- a/emgui_wasm/src/webgl.rs +++ b/emgui_wasm/src/webgl.rs @@ -1,23 +1,33 @@ +#![allow(dead_code)] + use { js_sys::WebAssembly, wasm_bindgen::{prelude::*, JsCast}, - web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader}, + web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader, WebGlTexture}, }; use emgui::Frame; +type Gl = WebGlRenderingContext; + #[wasm_bindgen] pub struct Painter { canvas: web_sys::HtmlCanvasElement, gl: WebGlRenderingContext, + texture: WebGlTexture, program: WebGlProgram, index_buffer: WebGlBuffer, pos_buffer: WebGlBuffer, + tc_buffer: WebGlBuffer, color_buffer: WebGlBuffer, + tex_size: (u16, u16), } impl Painter { - pub fn new(canvas_id: &str) -> Result { + pub fn new( + canvas_id: &str, + (tex_width, tex_height, pixels): (u16, u16, &[u8]), + ) -> Result { let document = web_sys::window().unwrap().document().unwrap(); let canvas = document.get_element_by_id(canvas_id).unwrap(); let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::()?; @@ -27,19 +37,47 @@ impl Painter { .unwrap() .dyn_into::()?; - gl.enable(WebGlRenderingContext::BLEND); - gl.blend_func( - WebGlRenderingContext::SRC_ALPHA, - WebGlRenderingContext::ONE_MINUS_SRC_ALPHA, - ); + // -------------------------------------------------------------------- + + let texture = gl.create_texture().unwrap(); + gl.bind_texture(Gl::TEXTURE_2D, Some(&texture)); + + // TODO: remove once https://github.com/rustwasm/wasm-bindgen/issues/1005 is fixed. + let mut pixels: Vec<_> = pixels.iter().cloned().collect(); + + let level = 0; + let internal_format = Gl::ALPHA; + let border = 0; + let src_format = Gl::ALPHA; + let src_type = Gl::UNSIGNED_BYTE; + gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array( + Gl::TEXTURE_2D, + level, + internal_format as i32, + tex_width as i32, + tex_height as i32, + border, + src_format, + src_type, + Some(&mut pixels), + ) + .unwrap(); + gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_S, Gl::CLAMP_TO_EDGE as i32); + gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_T, Gl::CLAMP_TO_EDGE as i32); + gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32); + + // -------------------------------------------------------------------- let vert_shader = compile_shader( &gl, - WebGlRenderingContext::VERTEX_SHADER, + Gl::VERTEX_SHADER, r#" uniform vec2 u_screen_size; + uniform vec2 u_tex_size; attribute vec2 a_pos; + attribute vec2 a_tc; attribute vec4 a_color; + varying vec2 v_tc; varying vec4 v_color; void main() { gl_Position = vec4( @@ -47,34 +85,41 @@ impl Painter { 1.0 - 2.0 * a_pos.y / u_screen_size.y, 0.0, 1.0); - // v_color = vec4(1.0, 0.0, 0.0, 0.5); + v_tc = a_tc / u_tex_size; v_color = a_color; } "#, )?; let frag_shader = compile_shader( &gl, - WebGlRenderingContext::FRAGMENT_SHADER, + Gl::FRAGMENT_SHADER, r#" + uniform sampler2D u_sampler; precision highp float; + varying vec2 v_tc; varying vec4 v_color; void main() { gl_FragColor = v_color; + gl_FragColor *= texture2D(u_sampler, v_tc).a; } "#, )?; let program = link_program(&gl, [vert_shader, frag_shader].iter())?; let index_buffer = gl.create_buffer().ok_or("failed to create index_buffer")?; let pos_buffer = gl.create_buffer().ok_or("failed to create pos_buffer")?; + let tc_buffer = gl.create_buffer().ok_or("failed to create tc_buffer")?; let color_buffer = gl.create_buffer().ok_or("failed to create color_buffer")?; Ok(Painter { canvas, gl, + texture, program, index_buffer, pos_buffer, + tc_buffer, color_buffer, + tex_size: (tex_width, tex_height), }) } @@ -83,19 +128,26 @@ impl Painter { // -------------------------------------------------------------------- + gl.enable(Gl::BLEND); + gl.blend_func(Gl::SRC_ALPHA, Gl::ONE_MINUS_SRC_ALPHA); gl.use_program(Some(&self.program)); + gl.active_texture(Gl::TEXTURE0); + gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture)); // -------------------------------------------------------------------- let indices: Vec = frame.indices.iter().map(|idx| *idx as u16).collect(); - let mut positions = Vec::with_capacity(2 * frame.vertices.len()); + let mut positions: Vec = Vec::with_capacity(2 * frame.vertices.len()); + let mut tex_coords: Vec = Vec::with_capacity(2 * frame.vertices.len()); for v in &frame.vertices { positions.push(v.x); positions.push(v.y); + tex_coords.push(v.u); + tex_coords.push(v.v); } - let mut colors = Vec::with_capacity(4 * frame.vertices.len()); + let mut colors: Vec = Vec::with_capacity(4 * frame.vertices.len()); for v in &frame.vertices { colors.push(v.color.r); colors.push(v.color.g); @@ -112,14 +164,11 @@ impl Painter { let indices_array = js_sys::Int16Array::new(&indices_memory_buffer) .subarray(indices_ptr, indices_ptr + indices.len() as u32); - gl.bind_buffer( - WebGlRenderingContext::ELEMENT_ARRAY_BUFFER, - Some(&self.index_buffer), - ); + gl.bind_buffer(Gl::ELEMENT_ARRAY_BUFFER, Some(&self.index_buffer)); gl.buffer_data_with_array_buffer_view( - WebGlRenderingContext::ELEMENT_ARRAY_BUFFER, + Gl::ELEMENT_ARRAY_BUFFER, &indices_array, - WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ? + Gl::STREAM_DRAW, ); // -------------------------------------------------------------------- @@ -131,29 +180,47 @@ impl Painter { let pos_array = js_sys::Float32Array::new(&pos_memory_buffer) .subarray(pos_ptr, pos_ptr + positions.len() as u32); - gl.bind_buffer(WebGlRenderingContext::ARRAY_BUFFER, Some(&self.pos_buffer)); - gl.buffer_data_with_array_buffer_view( - WebGlRenderingContext::ARRAY_BUFFER, - &pos_array, - WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ? - ); + gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.pos_buffer)); + gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &pos_array, Gl::STREAM_DRAW); let a_pos_loc = gl.get_attrib_location(&self.program, "a_pos"); assert!(a_pos_loc >= 0); let a_pos_loc = a_pos_loc as u32; + let normalize = false; + let stride = 0; + let offset = 0; + gl.vertex_attrib_pointer_with_i32(a_pos_loc, 2, Gl::FLOAT, normalize, stride, offset); + gl.enable_vertex_attrib_array(a_pos_loc); + + // -------------------------------------------------------------------- + + let tc_memory_buffer = wasm_bindgen::memory() + .dyn_into::()? + .buffer(); + let tc_ptr = tex_coords.as_ptr() as u32 / 2; + let tc_array = js_sys::Uint16Array::new(&tc_memory_buffer) + .subarray(tc_ptr, tc_ptr + tex_coords.len() as u32); + + gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.tc_buffer)); + gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &tc_array, Gl::STREAM_DRAW); + + let a_tc_loc = gl.get_attrib_location(&self.program, "a_tc"); + assert!(a_tc_loc >= 0); + let a_tc_loc = a_tc_loc as u32; + let normalize = false; let stride = 0; let offset = 0; gl.vertex_attrib_pointer_with_i32( - a_pos_loc, + a_tc_loc, 2, - WebGlRenderingContext::FLOAT, + Gl::UNSIGNED_SHORT, normalize, stride, offset, ); - gl.enable_vertex_attrib_array(a_pos_loc); + gl.enable_vertex_attrib_array(a_tc_loc); // -------------------------------------------------------------------- @@ -164,15 +231,8 @@ impl Painter { let colors_array = js_sys::Uint8Array::new(&colors_memory_buffer) .subarray(colors_ptr, colors_ptr + colors.len() as u32); - gl.bind_buffer( - WebGlRenderingContext::ARRAY_BUFFER, - Some(&self.color_buffer), - ); - gl.buffer_data_with_array_buffer_view( - WebGlRenderingContext::ARRAY_BUFFER, - &colors_array, - WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ? - ); + gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.color_buffer)); + gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &colors_array, Gl::STREAM_DRAW); let a_color_loc = gl.get_attrib_location(&self.program, "a_color"); assert!(a_color_loc >= 0); @@ -184,7 +244,7 @@ impl Painter { gl.vertex_attrib_pointer_with_i32( a_color_loc, 4, - WebGlRenderingContext::UNSIGNED_BYTE, + Gl::UNSIGNED_BYTE, normalize, stride, offset, @@ -201,17 +261,23 @@ impl Painter { self.canvas.width() as f32, self.canvas.height() as f32, ); - // gl.uniform2f(Some(&u_screen_size_loc), 4.0, 1.0); + + let u_tex_size_loc = gl + .get_uniform_location(&self.program, "u_tex_size") + .unwrap(); + gl.uniform2f( + Some(&u_tex_size_loc), + self.tex_size.0 as f32, + self.tex_size.1 as f32, + ); + + let u_sampler_loc = gl.get_uniform_location(&self.program, "u_sampler").unwrap(); + gl.uniform1i(Some(&u_sampler_loc), 0); gl.clear_color(0.05, 0.05, 0.05, 1.0); - gl.clear(WebGlRenderingContext::COLOR_BUFFER_BIT); + gl.clear(Gl::COLOR_BUFFER_BIT); - gl.draw_elements_with_i32( - WebGlRenderingContext::TRIANGLE_STRIP, - indices.len() as i32, - WebGlRenderingContext::UNSIGNED_SHORT, - 0, - ); + gl.draw_elements_with_i32(Gl::TRIANGLES, indices.len() as i32, Gl::UNSIGNED_SHORT, 0); Ok(()) } @@ -229,7 +295,7 @@ fn compile_shader( gl.compile_shader(&shader); if gl - .get_shader_parameter(&shader, WebGlRenderingContext::COMPILE_STATUS) + .get_shader_parameter(&shader, Gl::COMPILE_STATUS) .as_bool() .unwrap_or(false) { @@ -254,7 +320,7 @@ fn link_program<'a, T: IntoIterator>( gl.link_program(&program); if gl - .get_program_parameter(&program, WebGlRenderingContext::LINK_STATUS) + .get_program_parameter(&program, Gl::LINK_STATUS) .as_bool() .unwrap_or(false) {