@rapidajs/postprocessing
@rapidajs/postprocessing
is a thin wrapper around vanruesc/postprocessing with typed methods for creating effects. This package is used in @rapidajs/rapida
, but can also be used standalone.
rapida is under active alpha development and is not yet battle-tested and stable. We don't recommend using rapida in production just yet, but watch this space!
See the vanruesc/postprocessing
docs for more documentation on the post processing effects included in this package - vanruesc/postprocessing
Over time this package will become simpler - this primarily hinges on types being added to vanruesc/postprocessing
.
@rapidajs/three
Usage with Install @rapidajs/three
, three
and this package:
$ yarn add @rapidajs/three @rapidajs/postprocessing three
Use @rapidajs/postprocessing
to add post processing effects to rapida views
- Gather necessary imports
import { WebGLRenderer } from '@rapidajs/three';
import { Scene, PerspectiveCamera } from 'three';
import { Effects } from '@rapidajs/postprocessing';
- Create a @rapidajs/three webgl renderer and append it to the dom
const renderer = new WebGLRenderer();
document.getElementById('app').appendChild(renderer.domElement);
- Create a scene
const scene = new Scene();
- Create a camera and a view
const camera = new PerspectiveCamera();
const view = renderer.create.view({
scene,
camera,
useEffectComposer: true, // make sure to include `useEffectComposer: true`
});
- Add a post processing effect with
Effects
view.composer.add.effects(Effects.bloom({ ... bloom effect params ... }));
- Render your scene
renderer.render(timeElapsed);