Skip to content

Commit b9bbf1c

Browse files
ggerganovggerganov
committed
ref #1 : websocket updates per draw list
Effectively, changing the content in a window does not trigger update of the draw data for other windows. This reduces bandwidth significantly in some cases.
1 parent a3a0ab0 commit b9bbf1c

File tree

6 files changed

+170
-118
lines changed

6 files changed

+170
-118
lines changed

‎examples/headless-with-input/index.html

+11-4
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,23 @@
4040
imgui_ws.init_font(tex_font_abuf);
4141
}
4242

43-
var draw_data_abuf = incppect.get_abuf('imgui.draw_data');
44-
if (draw_data_abuf.byteLength < 1) return;
43+
var n_draw_lists = incppect.get_int32('imgui.n_draw_lists');
44+
if (n_draw_lists < 1) return;
45+
46+
var draw_lists_abuf = {};
47+
for (var i = 0; i < n_draw_lists; ++i) {
48+
draw_lists_abuf[i] = incppect.get_abuf('imgui.draw_list[%d]', i);
49+
}
50+
51+
if (draw_lists_abuf[n_draw_lists - 1] && draw_lists_abuf[n_draw_lists - 1].byteLength < 1) return;
4552

4653
imgui_ws.gl.clearColor(0.0, 0.0, 0.0, 1.0);
4754
imgui_ws.gl.clear(imgui_ws.gl.COLOR_BUFFER_BIT);
4855
imgui_ws.gl.viewport(0, 0, imgui_ws.canvas.width, imgui_ws.canvas.height);
4956

50-
imgui_ws.render(draw_data_abuf);
57+
imgui_ws.render(n_draw_lists, draw_lists_abuf);
5158

52-
var my_id = this.get_int32('my_id[%d]', -1);
59+
var my_id = this.get_int32('my_id[%d]', -1) || 0;
5360

5461
output.innerHTML = '';
5562
output.innerHTML += 'Your client Id: ' + my_id;

‎examples/headless/index.html

+11-4
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,23 @@
2525
imgui_ws.init_font(tex_font_abuf);
2626
}
2727

28-
var draw_data_abuf = incppect.get_abuf('imgui.draw_data');
29-
if (draw_data_abuf.byteLength < 1) return;
28+
var n_draw_lists = incppect.get_int32('imgui.n_draw_lists');
29+
if (n_draw_lists < 1) return;
30+
31+
var draw_lists_abuf = {};
32+
for (var i = 0; i < n_draw_lists; ++i) {
33+
draw_lists_abuf[i] = incppect.get_abuf('imgui.draw_list[%d]', i);
34+
}
35+
36+
if (draw_lists_abuf[n_draw_lists - 1] && draw_lists_abuf[n_draw_lists - 1].byteLength < 1) return;
3037

3138
imgui_ws.gl.clearColor(0.0, 0.0, 0.0, 1.0);
3239
imgui_ws.gl.clear(imgui_ws.gl.COLOR_BUFFER_BIT);
3340
imgui_ws.gl.viewport(0, 0, imgui_ws.canvas.width, imgui_ws.canvas.height);
3441

35-
imgui_ws.render(draw_data_abuf);
42+
imgui_ws.render(n_draw_lists, draw_lists_abuf);
3643

37-
var my_id = this.get_int32('my_id[%d]', -1);
44+
var my_id = this.get_int32('my_id[%d]', -1) || 0;
3845

3946
output.innerHTML = '';
4047
output.innerHTML += 'Your client Id: ' + my_id;

‎examples/sdl2-basic/index.html

+57-24
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,23 @@
2525
imgui_ws.init_font(tex_font_abuf);
2626
}
2727

28-
var draw_data_abuf = incppect.get_abuf('imgui.draw_data');
29-
if (draw_data_abuf.byteLength < 1) return;
28+
var n_draw_lists = incppect.get_int32('imgui.n_draw_lists');
29+
if (n_draw_lists < 1) return;
30+
31+
var draw_lists_abuf = {};
32+
for (var i = 0; i < n_draw_lists; ++i) {
33+
draw_lists_abuf[i] = incppect.get_abuf('imgui.draw_list[%d]', i);
34+
}
35+
36+
if (draw_lists_abuf[n_draw_lists - 1] && draw_lists_abuf[n_draw_lists - 1].byteLength < 1) return;
3037

3138
imgui_ws.gl.clearColor(0.0, 0.0, 0.0, 1.0);
3239
imgui_ws.gl.clear(imgui_ws.gl.COLOR_BUFFER_BIT);
3340
imgui_ws.gl.viewport(0, 0, imgui_ws.canvas.width, imgui_ws.canvas.height);
3441

35-
imgui_ws.render(draw_data_abuf);
42+
imgui_ws.render(n_draw_lists, draw_lists_abuf);
3643

37-
var my_id = this.get_int32('my_id[%d]', -1);
44+
var my_id = this.get_int32('my_id[%d]', -1) || 0;
3845

3946
output.innerHTML = '';
4047
output.innerHTML += 'Your client Id: ' + my_id;
@@ -55,41 +62,67 @@
5562
incppect.k_requests_update_freq_ms = document.getElementById('update_freq_ms').value;
5663
incppect.init();
5764

58-
imgui_ws.canvas_on_pointermove = function(event) {
59-
const device_pixel_ratio = window.device_pixel_ratio || 1;
60-
this.io.mouse_x = event.offsetX * device_pixel_ratio;
61-
this.io.mouse_y = event.offsetY * device_pixel_ratio;
65+
imgui_ws.canvas_on_keyup = function(event) {
66+
incppect.send('6 ' + event.keyCode);
67+
};
68+
69+
imgui_ws.canvas_on_keydown = function(event) {
70+
incppect.send('5 ' + event.keyCode);
71+
};
72+
73+
imgui_ws.canvas_on_keypress = function(event) {
74+
incppect.send('4 ' + event.keyCode);
6275

6376
if (this.io.want_capture_mouse) {
6477
event.preventDefault();
6578
}
79+
};
80+
81+
imgui_ws.canvas_on_pointermove = function(event) {
82+
this.io.mouse_x = event.offsetX * this.device_pixel_ratio;
83+
this.io.mouse_y = event.offsetY * this.device_pixel_ratio;
6684

6785
incppect.send('0 ' + this.io.mouse_x + ' ' + this.io.mouse_y);
86+
87+
if (this.io.want_capture_keyboard) {
88+
event.preventDefault();
89+
}
6890
};
6991

7092
imgui_ws.canvas_on_pointerdown = function(event) {
71-
const device_pixel_ratio = window.device_pixel_ratio || 1;
72-
this.io.mouse_x = event.offsetX * device_pixel_ratio;
73-
this.io.mouse_y = event.offsetY * device_pixel_ratio;
74-
75-
//console.log('left mouse down: ' + this.io.mouse_x + ' ' + this.io.mouse_y + ' event.button = ' + event.button);
76-
if (event.button == 0) {
77-
this.io.mouse_left_down = 1;
78-
}
93+
this.io.mouse_x = event.offsetX * this.device_pixel_ratio;
94+
this.io.mouse_y = event.offsetY * this.device_pixel_ratio;
7995

8096
incppect.send('1 ' + event.button);
81-
//this.io.MouseDown[mouse_button_map[event.button]] = true;
82-
// if (this.io.want_capture_mouse) {
83-
// event.preventDefault();
84-
// }
8597
};
8698

8799
imgui_ws.canvas_on_pointerup = function(event) {
88-
if (event.button == 0) {
89-
this.io.mouse_left_down = 1;
90-
}
91100
incppect.send('2 ' + event.button);
92-
//this.io.MouseDown[mouse_button_map[event.button]] = false;
101+
102+
if (this.io.want_capture_mouse) {
103+
event.preventDefault();
104+
}
105+
};
106+
107+
imgui_ws.canvas_on_wheel = function(event) {
108+
let scale = 1.0;
109+
switch (event.deltaMode) {
110+
case event.DOM_DELTA_PIXEL:
111+
scale = 0.01;
112+
break;
113+
case event.DOM_DELTA_LINE:
114+
scale = 0.2;
115+
break;
116+
case event.DOM_DELTA_PAGE:
117+
scale = 1.0;
118+
break;
119+
}
120+
121+
var wheel_x = event.deltaX * scale;
122+
var wheel_y = -event.deltaY * scale;
123+
124+
incppect.send('3 ' + wheel_x + ' ' + wheel_y);
125+
93126
if (this.io.want_capture_mouse) {
94127
event.preventDefault();
95128
}

‎src/common.h

+11-17
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ var imgui_ws = {
135135
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
136136
},
137137
138-
render: function(draw_data_abuf) {
138+
render: function(n_cmd_lists, draw_lists_abuf) {
139139
// Backup GL state
140140
const last_active_texture = this.gl.getParameter(this.gl.ACTIVE_TEXTURE) || null;
141141
const last_program = this.gl.getParameter(this.gl.CURRENT_PROGRAM) || null;
@@ -155,12 +155,6 @@ var imgui_ws = {
155155
const last_enable_depth_test = this.gl.getParameter(this.gl.DEPTH_TEST) || null;
156156
const last_enable_scissor_test = this.gl.getParameter(this.gl.SCISSOR_TEST) || null;
157157
158-
var draw_data_offset = 0;
159-
var draw_data_uint8 = new Uint8Array(draw_data_abuf);
160-
var draw_data_uint16 = new Uint16Array(draw_data_abuf);
161-
var draw_data_uint32 = new Uint32Array(draw_data_abuf);
162-
var draw_data_float = new Float32Array(draw_data_abuf);
163-
164158
this.gl.enable(this.gl.BLEND);
165159
this.gl.blendEquation(this.gl.FUNC_ADD);
166160
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
@@ -196,17 +190,17 @@ var imgui_ws = {
196190
this.gl.vertexAttribPointer(this.attribute_location_uv, 2, this.gl.FLOAT, false, 5*4, 2*4);
197191
this.gl.vertexAttribPointer(this.attribute_location_color, 4, this.gl.UNSIGNED_BYTE, true, 5*4, 4*4);
198192
199-
var p = null;
200-
var n_cmd_lists = draw_data_uint32[draw_data_offset]; draw_data_offset += 4;
201193
for (var i_list = 0; i_list < n_cmd_lists; ++i_list) {
202-
p = new Float32Array(draw_data_abuf, draw_data_offset, 2);
194+
var draw_data_offset = 0;
195+
196+
var p = new Float32Array(draw_lists_abuf[i_list], draw_data_offset, 2);
203197
var offset_x = p[0]; draw_data_offset += 4;
204198
var offset_y = p[1]; draw_data_offset += 4;
205199
206-
p = new Uint32Array(draw_data_abuf, draw_data_offset, 1);
200+
p = new Uint32Array(draw_lists_abuf[i_list], draw_data_offset, 1);
207201
var n_vertices = p[0]; draw_data_offset += 4;
208202
209-
var av = new Float32Array(draw_data_abuf, draw_data_offset, 5*n_vertices);
203+
var av = new Float32Array(draw_lists_abuf[i_list], draw_data_offset, 5*n_vertices);
210204
211205
for (var k = 0; k < n_vertices; ++k) {
212206
av[5*k + 0] += offset_x;
@@ -223,25 +217,25 @@ var imgui_ws = {
223217
224218
draw_data_offset += 5*4*n_vertices;
225219
226-
p = new Uint32Array(draw_data_abuf, draw_data_offset, 1);
220+
p = new Uint32Array(draw_lists_abuf[i_list], draw_data_offset, 1);
227221
var n_indices = p[0]; draw_data_offset += 4;
228222
229-
var ai = new Uint16Array(draw_data_abuf, draw_data_offset, n_indices);
223+
var ai = new Uint16Array(draw_lists_abuf[i_list], draw_data_offset, n_indices);
230224
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.index_buffer);
231225
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, ai, this.gl.STREAM_DRAW);
232226
draw_data_offset += 2*n_indices;
233227
234-
p = new Uint32Array(draw_data_abuf, draw_data_offset, 1);
228+
p = new Uint32Array(draw_lists_abuf[i_list], draw_data_offset, 1);
235229
var n_cmd = p[0]; draw_data_offset += 4;
236230
237231
for (var i_cmd = 0; i_cmd < n_cmd; ++i_cmd) {
238-
var pi = new Uint32Array(draw_data_abuf, draw_data_offset, 4);
232+
var pi = new Uint32Array(draw_lists_abuf[i_list], draw_data_offset, 4);
239233
var n_elements = pi[0]; draw_data_offset += 4;
240234
var texture_id = pi[1]; draw_data_offset += 4;
241235
var offset_vtx = pi[2]; draw_data_offset += 4;
242236
var offset_idx = pi[3]; draw_data_offset += 4;
243237
244-
var pf = new Float32Array(draw_data_abuf, draw_data_offset, 4);
238+
var pf = new Float32Array(draw_lists_abuf[i_list], draw_data_offset, 4);
245239
var clip_x = pf[0] - clip_off_x; draw_data_offset += 4;
246240
var clip_y = pf[1] - clip_off_y; draw_data_offset += 4;
247241
var clip_z = pf[2] - clip_off_x; draw_data_offset += 4;

0 commit comments

Comments
 (0)