Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make rendering optimization dependent on FPS and scale, especialy text #446

Closed
wants to merge 1 commit into from
Closed

Make rendering optimization dependent on FPS and scale, especialy text #446

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 38 additions & 4 deletions src/litegraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5429,6 +5429,8 @@ LGraphNode.prototype.executeAction = function(action)

this.viewport = options.viewport || null; //to constraint render area to a portion of the canvas

this.low_quality_rendering_threshold = 5; //amount of slow fps to switch to low quality rendering

//link canvas and graph
if (graph) {
graph.attachCanvas(this);
Expand Down Expand Up @@ -5465,6 +5467,7 @@ LGraphNode.prototype.executeAction = function(action)
this.last_draw_time = 0;
this.render_time = 0;
this.fps = 0;
this.low_quality_rendering_counter = 0;

//this.scale = 1;
//this.offset = [0,0];
Expand Down Expand Up @@ -5914,6 +5917,16 @@ LGraphNode.prototype.executeAction = function(action)
*/
};

/**
* returns ture if low qualty rendering requered at requested scale
* */
LGraphCanvas.prototype.lowQualityRenderingRequired = function(activation_scale) {
if ( this.ds.scale < activation_scale) {
return this.low_quality_rendering_counter > this.low_quality_rendering_threshold;
}
return false;
};

/* LiteGraphCanvas input */

//used to block future mouse events (because of im gui)
Expand Down Expand Up @@ -7836,12 +7849,33 @@ LGraphNode.prototype.executeAction = function(action)
this.drawBackCanvas();
}

if (this.dirty_canvas || force_canvas) {
var draw_front_canvas = this.dirty_canvas || force_canvas;
if (draw_front_canvas) {
this.drawFrontCanvas();
}

this.fps = this.render_time ? 1.0 / this.render_time : 0;
this.frame += 1;

// update low qualty counter
if (this.ds.scale < 0.7) {
if (draw_front_canvas) {
// count only slow frames with havy rendering
var threshold = this.low_quality_rendering_threshold;
const acceptable_fps = 45;
if (this.fps < acceptable_fps) {
this.low_quality_rendering_counter += acceptable_fps / this.fps;
this.low_quality_rendering_counter = Math.min(this.low_quality_rendering_counter, 2 * threshold); //clamp counter
} else {
// make 100 slower the recovery as there are a lot of cahced rendering calls
this.low_quality_rendering_counter -= this.fps / acceptable_fps * 0.01;
this.low_quality_rendering_counter = Math.max(this.low_quality_rendering_counter, 0); //clamp counter
}
}
} else {
// force reset to high quality when zoomed in
this.low_quality_rendering_counter = 0;
}
};

/**
Expand Down Expand Up @@ -8646,7 +8680,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.textAlign = horizontal ? "center" : "left";
ctx.font = this.inner_text_font;

var render_text = !low_quality;
var render_text = !this.lowQualityRenderingRequired(0.6);

var out_slot = this.connecting_output;
var in_slot = this.connecting_input;
Expand Down Expand Up @@ -9041,7 +9075,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.fillStyle = bgcolor;

var title_height = LiteGraph.NODE_TITLE_HEIGHT;
var low_quality = this.ds.scale < 0.5;
var low_quality = this.lowQualityRenderingRequired(0.5);

//render node area depending on shape
var shape =
Expand Down Expand Up @@ -9873,7 +9907,7 @@ LGraphNode.prototype.executeAction = function(action)
var widgets = node.widgets;
posY += 2;
var H = LiteGraph.NODE_WIDGET_HEIGHT;
var show_text = this.ds.scale > 0.5;
var show_text = !this.lowQualityRenderingRequired(0.5);
ctx.save();
ctx.globalAlpha = this.editor_alpha;
var outline_color = LiteGraph.WIDGET_OUTLINE_COLOR;
Expand Down