marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move WebGL2's drawFrame() function to animate() function

Browse Source
This commit is contained in:
redphx 2024-10-26 21:53:03 +07:00
parent 4a8f66f2a1
commit 5653914d19
4 changed files with 75 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dist/better-xcloud.lite.user.js vendored
View File

@ -5427,28 +5427,32 @@ class WebGL2Player {
let gl = this.gl, program = this.program;
gl.uniform2f(gl.getUniformLocation(program, "iResolution"), this.$canvas.width, this.$canvas.height), gl.uniform1i(gl.getUniformLocation(program, "filterId"), this.options.filterId), gl.uniform1f(gl.getUniformLocation(program, "sharpenFactor"), this.options.sharpenFactor), gl.uniform1f(gl.getUniformLocation(program, "brightness"), this.options.brightness), gl.uniform1f(gl.getUniformLocation(program, "contrast"), this.options.contrast), gl.uniform1f(gl.getUniformLocation(program, "saturation"), this.options.saturation);
}
drawFrame(force = !1) {
if (!force) {
if (this.targetFps === 0) return;
if (this.targetFps < 60) {
let currentTime = performance.now();
if (currentTime - this.lastFrameTime < this.frameInterval) return;
this.lastFrameTime = currentTime;
}
}
forceDrawFrame() {
let gl = this.gl;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video), gl.drawArrays(gl.TRIANGLES, 0, 6);
}
setupRendering() {
let animate;
let frameCallback;
if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
let $video = this.$video;
animate = () => {
if (!this.stopped) this.drawFrame(), this.animFrameId = $video.requestVideoFrameCallback(animate);
}, this.animFrameId = $video.requestVideoFrameCallback(animate);
} else animate = () => {
if (!this.stopped) this.drawFrame(), this.animFrameId = requestAnimationFrame(animate);
}, this.animFrameId = requestAnimationFrame(animate);
frameCallback = $video.requestVideoFrameCallback.bind($video);
} else frameCallback = requestAnimationFrame;
let animate = () => {
if (this.stopped) return;
let draw = !0;
if (this.targetFps === 0) draw = !1;
else if (this.targetFps < 60) {
let currentTime = performance.now();
if (currentTime - this.lastFrameTime < this.frameInterval) draw = !1;
else this.lastFrameTime = currentTime;
}
if (draw) {
let gl = this.gl;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video), gl.drawArrays(gl.TRIANGLES, 0, 6);
}
this.animFrameId = frameCallback(animate);
};
this.animFrameId = frameCallback(animate);
}
setupShaders() {
BxLogger.info(this.LOG_TAG, "Setting up", getPref("video_power_preference"));

38
dist/better-xcloud.user.js vendored
View File

@ -1842,7 +1842,7 @@ class ScreenshotManager {
if (!$player || !$player.isConnected) return;
$player.parentElement.addEventListener("animationend", this.onAnimationEnd, { once: !0 }), $player.parentElement.classList.add("bx-taking-screenshot");
let canvasContext = this.canvasContext;
if ($player instanceof HTMLCanvasElement) streamPlayer.getWebGL2Player().drawFrame(!0);
if ($player instanceof HTMLCanvasElement) streamPlayer.getWebGL2Player().forceDrawFrame();
if (canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height), AppInterface) {
let data = $canvas.toDataURL("image/png").split(";base64,")[1];
AppInterface.saveScreenshot(currentStream.titleSlug, data), canvasContext.clearRect(0, 0, $canvas.width, $canvas.height), callback && callback();
@ -7043,28 +7043,32 @@ class WebGL2Player {
let gl = this.gl, program = this.program;
gl.uniform2f(gl.getUniformLocation(program, "iResolution"), this.$canvas.width, this.$canvas.height), gl.uniform1i(gl.getUniformLocation(program, "filterId"), this.options.filterId), gl.uniform1f(gl.getUniformLocation(program, "sharpenFactor"), this.options.sharpenFactor), gl.uniform1f(gl.getUniformLocation(program, "brightness"), this.options.brightness), gl.uniform1f(gl.getUniformLocation(program, "contrast"), this.options.contrast), gl.uniform1f(gl.getUniformLocation(program, "saturation"), this.options.saturation);
}
drawFrame(force = !1) {
if (!force) {
if (this.targetFps === 0) return;
if (this.targetFps < 60) {
let currentTime = performance.now();
if (currentTime - this.lastFrameTime < this.frameInterval) return;
this.lastFrameTime = currentTime;
}
}
forceDrawFrame() {
let gl = this.gl;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video), gl.drawArrays(gl.TRIANGLES, 0, 6);
}
setupRendering() {
let animate;
let frameCallback;
if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
let $video = this.$video;
animate = () => {
if (!this.stopped) this.drawFrame(), this.animFrameId = $video.requestVideoFrameCallback(animate);
}, this.animFrameId = $video.requestVideoFrameCallback(animate);
} else animate = () => {
if (!this.stopped) this.drawFrame(), this.animFrameId = requestAnimationFrame(animate);
}, this.animFrameId = requestAnimationFrame(animate);
frameCallback = $video.requestVideoFrameCallback.bind($video);
} else frameCallback = requestAnimationFrame;
let animate = () => {
if (this.stopped) return;
let draw = !0;
if (this.targetFps === 0) draw = !1;
else if (this.targetFps < 60) {
let currentTime = performance.now();
if (currentTime - this.lastFrameTime < this.frameInterval) draw = !1;
else this.lastFrameTime = currentTime;
}
if (draw) {
let gl = this.gl;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video), gl.drawArrays(gl.TRIANGLES, 0, 6);
}
this.animFrameId = frameCallback(animate);
};
this.animFrameId = frameCallback(animate);
}
setupShaders() {
BxLogger.info(this.LOG_TAG, "Setting up", getPref("video_power_preference"));

66
src/modules/player/webgl2-player.ts
View File

@ -94,52 +94,52 @@ export class WebGL2Player {
gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation);
}
drawFrame(force=false) {
if (!force) {
// Don't draw when FPS is 0
if (this.targetFps === 0) {
return;
}
// Limit FPS
if (this.targetFps < 60) {
const currentTime = performance.now();
const timeSinceLastFrame = currentTime - this.lastFrameTime;
if (timeSinceLastFrame < this.frameInterval) {
return;
}
this.lastFrameTime = currentTime;
}
}
forceDrawFrame() {
const gl = this.gl!;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
private setupRendering() {
let animate: any;
let frameCallback: any;
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
const $video = this.$video;
animate = () => {
if (!this.stopped) {
this.drawFrame();
this.animFrameId = $video.requestVideoFrameCallback(animate);
}
}
this.animFrameId = $video.requestVideoFrameCallback(animate);
frameCallback = $video.requestVideoFrameCallback.bind($video);
} else {
animate = () => {
if (!this.stopped) {
this.drawFrame();
this.animFrameId = requestAnimationFrame(animate);
frameCallback = requestAnimationFrame;
}
let animate = () => {
if (this.stopped) {
return;
}
let draw = true;
// Don't draw when FPS is 0
if (this.targetFps === 0) {
draw = false;
} else if (this.targetFps < 60) {
// Limit FPS
const currentTime = performance.now();
const timeSinceLastFrame = currentTime - this.lastFrameTime;
if (timeSinceLastFrame < this.frameInterval) {
draw = false;
} else {
this.lastFrameTime = currentTime;
}
}
this.animFrameId = requestAnimationFrame(animate);
if (draw) {
const gl = this.gl!;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.$video);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
this.animFrameId = frameCallback(animate);
}
this.animFrameId = frameCallback(animate);
}
private setupShaders() {

2
src/utils/screenshot-manager.ts
View File

@ -65,7 +65,7 @@ export class ScreenshotManager {
const canvasContext = this.canvasContext;
if ($player instanceof HTMLCanvasElement) {
streamPlayer.getWebGL2Player().drawFrame(true);
streamPlayer.getWebGL2Player().forceDrawFrame();
}
canvasContext.drawImage($player, 0, 0, $canvas.width, $canvas.height);