개요

절찬 개발중의 Three.js 래퍼 라이브러리 ore-three 에 짜넣어서 만든 PostProcessing 기능이 상당히 마음에 들었으므로, 단독으로 공개했습니다. 여러 포스트 프로세스를 걸 수 있습니다.
npm 에서 설치할 수 있습니다.

GitHub: three-post-processing

설치

npm

$ npm i three-post-processing

import

import TPP from 'three-post-processing';

사용법

샘플(GitHub)
하나의 포스트 프로세스는 다음 객체로 정의할 수 있습니다.

{
  fragmentShader: //postprocess シェーダー,
  uniforms: //uniform変数
}

이것을 배열로 해, three-post-processing에 건네주면 OK입니다.

this.uniforms = {
  time:{
    value: 0
  }
}

let pp1 = {
  fragmentShader: require('./post-processing1.glsl'),
  uniforms:this.uniforms
};

let pp2 = {
  fragmentShader: require('./post-processing2.glsl'),
  uniforms:this.uniforms,
}

this.pp_params = [pp1,pp2];
this.tpp = new TPP(this.renderer,this.pp_params);

render() 로 렌더링됩니다.

this.tpp.render(this.scene,this.camera);

셰이더

포스트 프로세스의 셰이더에는 uniform 변수 backbuffer 로 하나 전의 렌더링 결과가 보내져 옵니다.
uv는 vUv로 보내집니다.

post-processing1.glsl

uniform sampler2D backbuffer;
uniform float time;
varying vec2 vUv;

void main(){
    vec3 c = texture2D(backbuffer,vUv).xyz;
    c = vec3(c.x);
    gl_FragColor = vec4(c,1.0);
}

post-processing2.glsl

uniform sampler2D backbuffer;
uniform float time;
varying vec2 vUv;

void main(){
    vec3 c = texture2D(backbuffer,vUv).xyz;
    c += sin(vUv.x * 100.0) * 0.3;
    gl_FragColor = vec4(c,1.0);
}

결과

이것이,


이렇게 되었습니다.

끝

원한다면 사용하십시오 ❤️