Skip to content

Commit

Permalink
Readme: begin describing how to add backgrounds to scenes
Browse files Browse the repository at this point in the history
Starting with an example of the content of the background node
  • Loading branch information
simonra committed Jul 13, 2019
1 parent f61272d commit 8e336a6
Showing 1 changed file with 60 additions and 0 deletions.
60 changes: 60 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,66 @@ Sometimes you want to squeeze in a new scene between two other scenes that you a
Often you will perhaps only shorten the preceding scene and leave the start of the following scene intact.
But for completeness, here is an example where we both shorten the previous scene, and chop down the beginning of the following scene.

#### Adding backgrounds to scenes

Adding backgrounds ain't all that hard, once you have an overweiv of whats needed!

First of all, make sure there is an actual existing file containing the code for your background.
If you want to render your background on a canvas the content should be something like:

```js
(function(global) {
const F = (frame, from, delta) => (
frame - FRAME_FOR_BEAN(from)) / (FRAME_FOR_BEAN(from + delta) - FRAME_FOR_BEAN(from)
);

constructor(id) {
super(id, {
outputs: {
render: new NIN.TextureOutput()
}
});

this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');

this.width = 1024;
this.height = 1024;

this.canvas.width = this.width;
this.canvas.height = this.height;

this.output = new THREE.VideoTexture(this.canvas);
this.output.minFilter = THREE.LinearFilter;
this.output.magFilter = THREE.LinearFilter;

// ... other constructor comment
}

update(frame) {
super.update(frame);
// Other stuff you want to do each frame
}

// The warmup block exsist to prevent stutter related to compiling shaders when the scene starts.
// Usually shaders are compield for your GPU just in time at the moment they are first called.
// This can take some time, and result in perceived jitter at the start of your scene.
// To prevent this, when NIN starts running a demo, before the playback looks like it begins, it will run through each scene and call its `warmup`.
// In practice, this is like rendering one frame from each scene, so that all shaders are loaded before the smooth playback you want to show off.
warmup(renderer) {
this.update(6710); // the first frame in this scene cointaining the shaders you want pre-loaded.
this.render(renderer);
}

render() {
this.output.needsUpdate = true;
this.outputs.render.setValue(this.output);
}

global.greetsBackgroundCanvas = greetsBackgroundCanvas;
})(this);
```

### Randomness

To ensure that random things happen consistently across runs it is recommended to use the `Random`-class rather than `Math.random()`.
Expand Down

0 comments on commit 8e336a6

Please sign in to comment.