47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import * as THREE from 'three';
|
|
|
|
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
|
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
|
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
|
|
import { GrainShader } from './grainPostprocessingShader';
|
|
|
|
export function initGrainFilter(
|
|
renderer: THREE.WebGLRenderer,
|
|
scene: THREE.Scene,
|
|
camera: THREE.OrthographicCamera
|
|
) {
|
|
const width = window.innerWidth || 2;
|
|
const height = window.innerHeight || 2;
|
|
|
|
const effectFilm = new ShaderPass(GrainShader);
|
|
|
|
const rtParameters = {
|
|
stencilBuffer: true,
|
|
};
|
|
|
|
const renderScenePass = new RenderPass(scene, camera);
|
|
|
|
let composer2 = new EffectComposer(
|
|
renderer,
|
|
new THREE.WebGLRenderTarget(width, height, rtParameters)
|
|
);
|
|
|
|
composer2.setPixelRatio(window.devicePixelRatio);
|
|
|
|
composer2.addPass(renderScenePass);
|
|
composer2.addPass(effectFilm);
|
|
|
|
return {
|
|
render: (elapsed: number, delta: number) => {
|
|
composer2.render(delta);
|
|
|
|
effectFilm.uniforms['uTime'].value = elapsed;
|
|
},
|
|
resize: () => {
|
|
const viewportSize = renderer.getSize(new THREE.Vector2());
|
|
|
|
composer2.setSize(viewportSize.width, viewportSize.height);
|
|
},
|
|
};
|
|
}
|