Issues with getting it working
jooles opened this issue · comments
Hi there!
First of all: this plugin looks awesome, can't wait to have it up and running :)
Then: Using a MacBook Pro 2018 and latest macOS I can't get it working.
I added the plugin to the config, added the entry-point config and modified the entry point - file to reflect an example from the repository but I don't see any effects - but no errors, too.
I think I must be missing something..
Thanks for help!
Cheers,
Julian
What version of hyper-postprocessing is logged to the dev tools? Is it a black screen or is it your usual, functioning hyper terminal?
Plugin hyper-postprocessing (2.0.1) loaded.
It's just the usual functioning hyper terminal.
Thanks for looking into this!
Hmm. Can you post the contents of the entry file?
Sure :)
const { readFileSync } = require('fs');
const { TextureLoader, LinearFilter, Uniform } = require('three');
const { EffectPass, Effect } = require('postprocessing');
const BASE = `${homedir()}/hyper-postprocessing/examples`;
module.exports = ({ hyperTerm, xTerm }) => {
// turn all colors that aren't black into white -- then we can multiply the
// image against this to "shine" through only the text (setting the background
// to black in the hyper config is required)
const textEffect = new Effect(
'textEffect',
readFileSync(`${BASE}/glsl/black-and-white.glsl`).toString()
);
// move background image left
const backgroundEffect = new Effect(
'backgroundEffect',
readFileSync(`${BASE}/glsl/background-image.glsl`).toString(),
{
uniforms: new Map([['backgroundImage', new Uniform(null)]]),
defines: new Map([['motionX', '-0.1']]),
blendFunction: 10 // multiply
}
);
new TextureLoader().load(`${BASE}/images/fallout-boy.jpg`, texture => {
texture.minFilter = LinearFilter;
backgroundEffect.uniforms.get('backgroundImage').value = texture;
});
return { pass: new EffectPass(null, textEffect, backgroundEffect) };
};```
I also tried copying the hyper-postprocessing folder to my home folder.
It looks like you're missing the require statement for homedir. There should be a warning in the dev tools...
const { homedir } = require('os');
If that's not it then give me some time to upgrade my OS (not on Mojave yet) and I'll take another look.
Sorry, I just missed to copy the first line.. it's there.
And then I think maybe it's something which has to do with Mojave.
Thanks for looking into this!
Well it seems to work fine for me on Mojave...thanks for your patience. My macbook is 2015 instead of 2018, but I'm going to assume that doesn't matter.
Since you took your entry file directly from the examples, which work well for me, it might be that your setup is wrong. For good measure, can you post your .hyper.js file as well?
In the dev tools, do you see "THREE.WebGLRenderer 91" logged anywhere? If you don't, it can be due to one of 3 things:
- The entry path you set in
.hyper.jsis falsey. - The entry file export is falsey or an empty array.
- The entry path in
.hyper.jsdoes not point to your intended entry file.
In which case hyper-postprocessing will not add any effects nor log any errors or warnings. If the issue is number 3, it's likely but not always the case that a warning will be logged to the dev tools.
Thanks for your response!
I'm a few days off but will check back once I return on Tuesday.
Thanks for your assistance though!
Hi, just piggybacking on this post, I was wondering if this plugin works with zsh as your shell? I believe I followed the instructions correctly however my dev tools return this error:
Any help would be appreciated.
oh also this is my current .hyper.js config: (didn't want to copy the whole file so i just listed the key value pairs)
fontSize: 16,
fontFamily: '',
cursorColor: "rgba(248,28,229,0.8)",
cursorShape: "BEAM",
foregroundColor: "#fff",
backgroundColor: "#000",
borderColor: "#333",
css: "",
termCSS: "",
showHamburgerMenu: "",
showWindowControls: "",
padding: "12px 14px",
colors: {
black: "#000000",
red: "#ff0000",
green: "#33ff00",
yellow: "#ffff00",
blue: "#0066ff",
magenta: "#cc00ff",
cyan: "#00ffff",
white: "#d0d0d0",
lightBlack: "#808080",
lightRed: "#ff0000",
lightGreen: "#33ff00",
lightYellow: "#ffff00",
lightBlue: "#0066ff",
lightMagenta: "#cc00ff",
lightCyan: "#00ffff",
lightWhite: "#ffffff"
},
hyperBorder: {
borderColors: ["#97EDFF", "random"],
borderWidth: "0px",
animate: {
duration: "1s" // default is 16s
}
},
monokaiDeluxe: {
borderWidth: "0px"
},
shell: "zsh",
shellArgs: ["--login"],
env: {
HOME: '~'
},
bell: "SOUND",
copyOnSelect: true,
hyperPostprocessing: {
entry: `${HOME}/.hyper-postprocessing.js`
},
plugins: [
...,
"hyper-postprocessing"
],
localPlugins: []
Thanks,
Also love this plugin can't wait to get it working!!
Hi Neal, interesting error you're seeing there. Can you file a separate issue and post your .hyper.js file, the hyper-postprocessing entry file, as well as the version of Hyper and hyper-postprocessing you're using? It would also be very helpful if you could try to reproduce using a vanilla config.
@julianHH if you still have issues can you also post the version of Hyper you're on, and use a vanilla config?
Thanks guys!
@slammayjammay being an attentive person sometimes helps.. just found this when opening the dev tools.
Any ideas? Plugin / base version is up to date.
Thanks!
Yes, the examples rely on the three dependency. The error is thrown because of this line:
const { TextureLoader, LinearFilter, Uniform } = require('three');It's because postprocessing sets three as a peer dependency. It's not an issue with hyper-postprocessing so I will close, but I suppose the docs could be a little clearer on how to setup the examples.
You will need to cd into some parent folder of the entry file and run npm install three. Since you said you copied the entire repo to your home folder, you can do:
cd ~/hyper-postprocessing/examples && npm install threeHope that does it for you!
It does not. But I'm getting closer!
I'll figure it out :) Thanks so far!