Freezes when switching to fullscreen mode
Nps-rf opened this issue · 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
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?
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)
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.
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.
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
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)
Yup that looks right to me
Yup that looks right to me
Oh, I forgot to write that it doesn't work either. 🙂
What's the error?
What's the error?
Still the same
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
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
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
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
).
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