How to run examples?

[mroberts1]

My knowledge of Javascript is pretty limited and I'm finding the documentation here confusing. How do I run the examples? I installed the hyper-postprocessing plugin in hyper.js and added the code snippet in module.exports. I set the path of the entry file to an example - /film/index.js - in the repo that I downloaded, but nothing happens when I reload Hyper.

I wasn't sure whether I had to create a .hyper-postprocessing.js file in my root directory, but did that and there was still no result.

So my confusion is about the relationship between .hyper.js, .hyper-postprocessing.js, and the entry file. For example, where do I put the quick-start.js file? I tried including it in .hyper.js, with no result again.

Is this a dependency issue? Am I supposed to install three and postprocessing separately? The note at the end seems to suggest that I should, but again it isn't clear.

[slammayjammay]

Agree the readme should have a clearer guide to setting up the examples since it's quite manual and javascripty. Maybe later I'll update but for now yes you need to install three and/or postprocessing separately (via npm).

So you downloaded this repo and then in .hyper.js you set entry: '{THIS_REPO}/examples/effects/film/index.js' right? In that case you can run npm install in the root of this repo and it should work.

So the steps needed to get examples working after installing this plugin:

1. git clone slammayjammay/hyper-postprocessing somewhere like $HOME/Desktop/hyper-postprocessing
2. cd $HOME/Desktop/hyper-postprocessing; npm install to install three and postprocessing AKA the dependencies the examples require
3. In .hyper.js, point the entry to one of the effects

hyperPostprocessing: {
    entry: '$HOME/Desktop/hyper-postprocessing/examples/effects/film/index.js'
}

the relationship between .hyper.js, .hyper-postprocessing.js, and the entry file

.hyper-postprocessing.js is the entry file by default. You can change the path of the entry file that's loaded in .hyper.js which is the Hyper config file. Hyper startup -> load Hyper config .hyper.js -> hyper-postprocessing plugin loads -> hyper-postprocessing imports entry file -> film effect shows.

[mroberts1]

Thank you so much for the quick response (sometimes it takes years... :) This was very helpful.

I finally got the ripple effect working by starting over, cloning repo to Desktop, using nodenv to switch Node to v.10.0.0 (the current version, v. 16, was the default), and running npm install, which seems to have put in the right versions of the dependencies.

Haven't tried the other examples yet but it's a start...

[slammayjammay]

Right I forgot the versions in package.json are out of date so it's probably better to cd into examples and install the latest versions there:

$ cd $HOME/Desktop/hyper-postprocessing/examples
$ npm install three postprocessing

Not sure why node 10 works but this should make node 16 work too.

No problem glad you could get it to work

[mroberts1]

So right now I can only get the plugin to work by setting Node globally to v.10.0.0 in both the root (hyper-postprocessing) and examples directories and running 'npm install' in both directories. Running npm install in Node v.16.19.0 failed to install the dependencies (presumably because of the versions listed in package.json).

I also found that the command needs to be 'npm install' ONLY - 'npm install three processing' generated a complaint that the version of three installed (v.0.132.0) wasn't compatible with the version of postprocessing (v. 6.22.50), but after upgrading to the recommended version of three (v.0.138.0) the plugin still didn't work.

I'm sure I'm doing something wrong but I'm also a Node newbie and somehow this solution works...

One other question - for the film effect example, how do you get the sepia screen shown in the embedded example in the repo page? I can get the effect itself to load, but without the screen background.

[slammayjammay]

Sorry that was stupid of me, don't npm install three postprocessing inside the examples directory.

So you don't see that off white rectangle when using the film example? That one will stump me, I know a couple other effects got warped for some reason too (#35). You could try using the latest versions of those libraries but I think the chances of it magically working are not great. I just refactored the examples slightly to be easier to incorporate the latest versions so make sure to pull to get them, then try this using Node 16.

$ cd $HOME/Desktop/hyper-postprocessing
$ rm -rf node_modules package.json package-lock.json # also examples/node_modules if that exists
$ cd examples
$ npm install three postprocessing # or npm install three@latest postprocessing@latest, should be identical

Installation warnings won't appear and the plugin won't completely break, I assume the effects shouldn't change from the older versions but who knows.

[mroberts1]

Okay I pulled the updates and reinstalled latest three and postprocessing.

All the effects load in Node 16.19.0 now, but film is still missing the off-white screen as before, and ripple displays the underwater.jpg only, with no terminal text. I kept a backup of the Node 10 directory, so may revert to that.

Puzzling about the film screen - that came from the code, not a background image right? I'll keep fiddling with it. I'm on Mac 12.6.6 (Monterey) so the OS may be a factor.

[slammayjammay]

You know what I may have taken a gif of that film example with different code than the example. I think I did add a background to it locally but not to the repo. I don't know why I did that.

Some of the examples relied on a default value from postprocessing which changed, at first glance it seems like a breaking change but it wasn't hard to fix here. It fixed the underwater problem and the space travel one. I also tweaked the retro effect which wasn't showing ambient light.

The main problem with this plugin is that the gifs show what's possible if you know how to write shader code but not what's given out of the box. It's just meant to take away the boilerplate of combining hyper and postprocessing, then leave it to the user to write whatever shaders they want. But I can see how it's misleading and tedious for those who don't want to write code and expect what's offered in the gifs. I think a good feature would have the config look like this:

// .hyper.js
...
hyperPostprocessing: {
  effect: 'film'
}

But I don't know when I'll get around to that...

[mroberts1]

One last question (I promise)! I played around with the ripple and film effects and can now get a background image of a screen with filmEffect. With a gif as background, the image is just a still frame, though. How would I add a looping video or a gif as the background source, the way manoloide does with the GlitchPixel shader? Sorry but I'm also a noob at shaders... Feel free to ignore if complicated. Thanks for all your help. :)

[slammayjammay]

Hey no problem! Ask away. You'd use a VideoTexture and a bit of HTML video knowledge. First you'd load the video, either from a https url or locally.

const video = document.createElement('video');
video.src = 'https://something.com/video.mp4'; // or '$HOME/Desktop/my-video.mp'
video.play();
// might need to play after it loads, not sure
video.addEventListener('load', () => video.play(), { once: true });

Then use the video as a texture very similar to the ripple background image

const backgroundEffect = new postprocessing.Effect(
	'backgroundImage',
	readFileSync(resolve(__dirname, '../../glsl/background-image.glsl')).toString(),
	{
		uniforms: new Map([['backgroundImage', new three.Uniform(null)]]),
		blendFunction: postprocessing.BlendFunction.SCREEN
	}
);
const texture = new THREE.VideoTexture(video);
texture.minFilter = three.LinearFilter; // probably, i don't know
backgroundEffect.uniforms.get('backgroundImage').value = texture;
effects.push(backgroundEffect);

Probably a few errors to get through (haven't tested this) but something like that.

[mroberts1]

Here's the file I'm currently working with, so far no luck though. This is all in a new examples/video/index.js, with the path added to .hyper.js.

I copied over the code from the ripple effect then removed underwaterEffect, scaleEffect, and sampling sections and copied in the VideoTexture code with the path to the mp4 file. Wasn't sure if I still needed to include /glsl/background-image.glsl.

const { readFileSync } = require('fs');
const { resolve } = require('path');
const { TextureLoader, LinearFilter, Uniform } = require('three');
const { EffectPass, Effect, BlendFunction } = require('postprocessing');

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

  const video = document.createElement('video');
video.src = '../../video/scuba.mp4'; // or '$HOME/Desktop/my-video.mp'
video.play();
// might need to play after it loads, not sure
video.addEventListener('load', () => video.play(), { once: true });

const backgroundEffect = new Effect(
'backgroundImage',
readFileSync(resolve(__dirname, '../../glsl/background-image.glsl')).toString(),
{ uniforms: new Map([['backgroundImage', new Uniform(null)]]) }
	);
  
  const texture = new THREE.VideoTexture(video);
  texture.minFilter = three.LinearFilter; // probably, i don't know
  backgroundEffect.uniforms.get('backgroundImage').value = texture;
  effects.push(backgroundEffect)

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