Freezes when switching to fullscreen mode

Question

Freezes when switching to fullscreen mode

Nps-rf opened this issue 7 months ago · comments

Issue: Application Stops Rendering in Full-Screen Mode

Behavior

When switching to full-screen mode with the terminal, the application stops rendering, but terminal control is not blocked. Commands can be written and executed from memory.

Plugin Code (from example)

const { readFileSync } = require('fs');
const { resolve } = require('path');
const three = require('three');
const postprocessing = require('postprocessing');

module.exports = ({ hyperTerm, xTerm }) => {
    const effects = [];

    effects.push(new postprocessing.BloomEffect({
        kernelSize: 3,
        distinction: 1,
        blendFunction: postprocessing.BlendFunction.ADD
    }));

    effects.push(new postprocessing.ScanlineEffect({ density: 1.3 }));
    effects.push(new postprocessing.SepiaEffect({ intensity: 0.5 }));
    effects.push(new postprocessing.VignetteEffect({
        darkness: 0.6,
        offset: 0
    }));

    effects.push(new postprocessing.Effect(
        'sampling',
        readFileSync(resolve(__dirname, './glsl/sampling.glsl')).toString(),
        { blendFunction: postprocessing.BlendFunction.NORMAL }
    ));

    return {
        passes: [new postprocessing.EffectPass(null, ...effects)],
        three,
        postprocessing
    };
};

Hyper.js Configuration

module.exports = {
    config: {
        // ...
        hyperPostprocessing: {
            entry: 'plugin.js'
        }
    },
    plugins: [
        'hyper-postprocessing'
    ],
    localPlugins: [],
};

Context

Observed only with the hyper-postprocessing plugin.
Disabling the plugin resolves the issue.
Reproducibility on other machines is unknown.

Environment

OS: Windows 11
Hyper Version: 3.4.1

Hyper logs

bundle.js:1 (re)loading renderer plugins
bundle.js:1 Plugin hyper-postprocessing (4.0.0) loaded.
index.html:36 total init time 94.5
C:\Users\divin\node_modules\three\build\three.cjs:53036 WARNING: Multiple instances of Three.js being imported.
(anonymous) @ C:\Users\divin\node_modules\three\build\three.cjs:53036
DevTools failed to load source map: Could not parse content for file:///C:/Users/divin/AppData/Local/Programs/Hyper/resources/app.asar/utility.js.map: Unexpected end of JSON input
[.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions.
[.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions.
[.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions.
[.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions.
...
[.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions.
index.html:1 WebGL: too many errors, no more errors will be reported to the console for this context. 
(I've deleted about 100 of them)

Error [.WebGL-0000021C00B3E300] GL_INVALID_VALUE: Offset overflows texture dimensions. happens when window resized

Nikolai Pikalov · Answer 1 · Thu Jan 04 2024 00:29:13 GMT+0800 (China Standard Time)

Also happens on reload

Scott McKenzie · Answer 2 · Fri Jan 05 2024 09:53:16 GMT+0800 (China Standard Time)

The reload issue with _reactInternalFiber happens for me on a fresh install on windows so it's unrelated.

That error happens for me when using versions of three and/or postprocessing that are different than what's in the package.json, if I use those versions then there's no error for me. Are you using those versions? Did you clone the repo and run npm install from the root or did you set it up another way?

Nikolai Pikalov · Answer 3 · Sat Jan 06 2024 06:02:32 GMT+0800 (China Standard Time)

Installing using 'hyper-postprocessing': 'latest' did not yield the expected behavior because it automatically resolves to version 6.28.*. Manually setting the versions and installing them with:

"dependencies": {
    "hyper-postprocessing": "latest",
    "postprocessing": "6.22.5",
    "three": "0.132.2"
}

Also did not fix the problem. Am I wrong?

`.hyper_plugins/node_modules/three/package.json`

{
  "name": "three",
  "version": "0.132.2",
  "description": "JavaScript 3D library",
  ...
}

`.hyper_plugins/node_modules/postprocessing/package.json`

{
	"name": "postprocessing",
	"version": "6.22.5",
	"description": "A post processing library that provides the means to implement image filter effects for three.js.",
        ...
}

`.hyper_plugins/node_modules/hyper-postprocessing/package.json` the same as `master/package.json`

Rebuild with other deps versions doesn't help

And about final questions:

Are you using those versions?

Yes.

Did you clone the repo and run npm install from the root or did you set it up another way?

Yes, i've cloned this and run npm install (I've tested it with different versions)

Nikolai Pikalov · Answer 4 · Sat Jan 06 2024 06:12:28 GMT+0800 (China Standard Time)

Also, I noticed that this behavior occurs only when the window size in one of the coordinates exceeds the screen size, i.e. nativeWidth = 2560, AppWidth = 2561 "freezes" the application

In other cases, resize works correctly.

Scott McKenzie · Answer 5 · Sat Jan 06 2024 07:24:48 GMT+0800 (China Standard Time)

Where is plugin.js located? And did you copy+paste the ./glsl/sampling.glsl file next to plugin.js? Unless those files are inside of .hyper_plugins/node_modules/hyper-postprocessing (which I don't recommend) then you'd need to install those deps inside of that containing folder.

The least painful way to set it up is to git clone hyper-postprocessing somewhere, cd inside and run npm install so the examples can load the dependencies, then set the entry location to one of the examples.

module.exports = {
    config: {
        hyperPostprocessing: {
            entry: '/somewhere/hyper-postprocessing/examples/effects/glitch/index.js'
        }
    }
};

The dependency versions don't need to be exact, postprocessing v7 was bad but I think most 6.x.x versions were OK.

Nikolai Pikalov · Answer 6 · Sat Jan 06 2024 08:27:27 GMT+0800 (China Standard Time)

plugin.js located in the root of the Hyper application.

Like this:

`.hyper_plugins`

Entry:

module.exports = {
    config: {
        hyperPostprocessing: {
            entry: 'C:\\Users\\username\\AppData\\Roaming\\Hyper\\plugin.js'
        }
    }
};

At the same time plugin.js - modified version of effects/glitch/index.js

All seems to be ok

The least painful way to set it up is to git clone hyper-postprocessing somewhere, cd inside and run npm install so the examples can load the dependencies

I've already tried this

Scott McKenzie · Answer 7 · Sat Jan 06 2024 10:08:47 GMT+0800 (China Standard Time)

git clone hyper-postprocessing somewhere, cd inside and run npm install

You need to git clone it, sounds like you installed it through npm since you're accessing through node_modules, in which case the examples folder isn't present. So to be clear you need hyper-postprocessing twice, one to be loaded via Hyper and one to hold the code you want run as effects, yes i know it's dumb :). Set the entry in the config file to the repo that was git cloned.

Also make sure that node_modules is a sibling folder or inside an ancestor folder of plugin.js, right now it's in a child folder .hyper_plugins so those dependencies must be loading from somewhere else on your machine (if the entry points directly to an effect from the git cloned repo you can ignore as long as you ran npm install in the root of the repo)

Nikolai Pikalov · Answer 8 · Sat Jan 06 2024 11:02:58 GMT+0800 (China Standard Time)

Is that what you meant?

`.hyper.js`

module.exports = {
    config: {
        hyperPostprocessing: {
            entry: 'C:\\Users\\username\\AppData\\Roaming\\Hyper\\hyper-postprocessing-clonned\\examples\\effects\\glitch\\index.js'
        }
    }
};

Scott McKenzie · Answer 9 · Sat Jan 06 2024 11:16:38 GMT+0800 (China Standard Time)

Yup that looks right to me

Nikolai Pikalov · Answer 10 · Sat Jan 06 2024 11:43:02 GMT+0800 (China Standard Time)

Yup that looks right to me

Oh, I forgot to write that it doesn't work either. 🙂

Scott McKenzie · Answer 11 · Sun Jan 07 2024 08:44:37 GMT+0800 (China Standard Time)

What's the error?

Nikolai Pikalov · Answer 12 · Sun Jan 07 2024 10:00:25 GMT+0800 (China Standard Time)

What's the error?

Still the same

Nikolai Pikalov · Answer 13 · Sun Jan 07 2024 11:00:06 GMT+0800 (China Standard Time)

To make sure that I'm using the right versions exactly, I added dependency version logging to the constructor

console.info('[VERSIONS] Three.js', this.constructor.THREE.REVISION, 'postprocessing', this.constructor.PP.version);

Output

[VERSIONS] Three.js 160 postprocessing 6.34.1

Scott McKenzie · Answer 14 · Sun Jan 07 2024 13:49:23 GMT+0800 (China Standard Time)

Where did you put that console log statement? This is hard for me to debug. Looks like you put it somewhere in .hyper_plugins/node_modules/hyper-postprocessing. Instead, put it in hyper-postprocessing-clonned/examples/effects/glitch/index.js or just look inside node_modules in the "clonned" repo for the versions being used

Nikolai Pikalov · Answer 15 · Mon Jan 08 2024 02:11:26 GMT+0800 (China Standard Time)

I put this in hyper-postprocessing-cloned XTermEffect class:

	constructor(options) {
		this.options = options;

		this._onResize = this._onResize.bind(this);
		this._unResize = null;
		this._onMouseEvent = this._onMouseEvent.bind(this);

		this._xTermScreen = null; // xterm's container for render layers
		this._xTermScreenOpacity = null; // holds xTerm's opacity, which we will change to 0
		this._xTermLayerMap = new Map(); // map for each render layer and the material we will create
		this._animationId = null; // id of the next animation frame
		this.scene = this.renderer = this.camera = this.composer = null; // threejs + postprocessing stuff
		this.passes = []; // all of the passes for EffectComposer
		this._shaderPasses = []; // a subset of all passes that are not an EffectPass

		this.clock = new this.constructor.THREE.Clock({ autoStart: false});
		this.canvas = document.createElement('canvas'); // the canvas we will inject
		this.canvas.classList.add('hyper-postprocessing', 'canvas');

		console.info('[VERSIONS] Three.js', this.constructor.THREE.REVISION, 'postprocessing', this.constructor.PP.version);

		this.prep();
		this.setPasses(options.passes);
	}

Then i build it and moved into .hyper_plugins/node_modules/hyper-postprocessing/dist

Scott McKenzie · Answer 16 · Mon Jan 08 2024 03:38:20 GMT+0800 (China Standard Time)

How about setting things up from scratch, so do a fresh install of hyper-postprocessing:

$ cd .hyper_plugins
$ npm uninstall hyper-postprocessing
$ npm install hyper-postprocessing

Avoid modifying any files in .hyper_plugins/node_modules. Then cd outside of .hyper_plugins, I think the parent directory Hyper should be OK, and freshly git clone this repo:

$ cd Hyper
$ rm -rf hyper-postprocessing-clonned
$ git clone https://github.com/slammayjammay/hyper-postprocessing
$ mv hyper-postprocessing myjs

And change the hyperPostprocessing.entry to reflect this change:

module.exports = {
    config: {
        hyperPostprocessing: {
            entry: 'C:\\Users\\username\\AppData\\Roaming\\Hyper\\myjs\\examples\\effects\\glitch\\index.js'
        }
    }
};

Open a Hyper terminal and you should see an error about not loading three or postprocessing dependencies which is good AKA hyper-postprocessing is working correctly. The error comes from your entry point inside myjs, the glitch effect here, which correctly doesn't load dependencies from the hyper-postprocessing plugin. It needs to load dependencies from myjs which currently doesn't have any:

$ cd myjs
$ npm install

Consider the dependencies for hyper-postprocessing and myjs as separate even though they're the same versions of the same dependencies. hyper-postprocessing dependency versions are correct so avoid changing them. The render error you were seeing and the GL_INVALID_VALUE: Offset overflows texture dimensions warning wasn't due to hyper-postprocessing dependency versions, it was due to the dependency versions you were loading from your entry point (hyper-postprocessing-clonned).

Nikolai Pikalov · Answer 17 · Mon Jan 08 2024 07:42:15 GMT+0800 (China Standard Time)

Omg, my bad, for some reason, Hyper just refers to global `node_modules` folder. That's why dependencies weren't updated as expected.

After putting things in order and repeating the steps indicated in the message above, everything worked, thank you very much! I am very grateful for your help!

Fixed in 198f427

Freezes when switching to fullscreen mode

Issue: Application Stops Rendering in Full-Screen Mode

Behavior

Plugin Code (from example)

Hyper.js Configuration

Context

Environment

Hyper logs

.hyper_plugins/node_modules/three/package.json

.hyper_plugins/node_modules/postprocessing/package.json

.hyper_plugins/node_modules/hyper-postprocessing/package.json the same as master/package.json

And about final questions:

In other cases, resize works correctly.

Like this:

.hyper_plugins

Entry:

Is that what you meant?

.hyper.js

To make sure that I'm using the right versions exactly, I added dependency version logging to the constructor

Output

Omg, my bad, for some reason, Hyper just refers to global node_modules folder. That's why dependencies weren't updated as expected.

`.hyper_plugins/node_modules/three/package.json`

`.hyper_plugins/node_modules/postprocessing/package.json`

`.hyper_plugins/node_modules/hyper-postprocessing/package.json` the same as `master/package.json`

`.hyper_plugins`

`.hyper.js`

Omg, my bad, for some reason, Hyper just refers to global `node_modules` folder. That's why dependencies weren't updated as expected.