felixturner/bad-tv-shader

BadTV Effect for Three.js

Bad TV Shader for Three.js

Simulates a bad TV via horizontal distortion and vertical roll.

Screenshot

Demo

View Demo

Uniforms

• time steadily increasing float passed in
• distortion amount of thick distortion
• distortion2 amount of fine grain distortion
• speed distortion vertical travel speed
• rollSpeed vertical roll speed

Usage

composer = new THREE.EffectComposer( renderer);
renderPass = new THREE.RenderPass( scene, camera );
badTVPass = new THREE.ShaderPass( THREE.BadTVShader );
composer.addPass( renderPass );
composer.addPass( badTVPass );
badTVPass.renderToScreen = true;

View demo for full usage details.

Credits

Uses Ashima WebGL Noise, three.js

License

MIT © Felix Turner

bad-tv-shader's Issues

GPU Image

Hi (noob question alert),
Im a complete newbie when in comes to glsl etc. Im using your project as guide for implementing my simple projects. I'm trying to implement these https://github.com/KimDaeWook/GPUImage-Instagram using effect-composer. To no avail. I can't make it to work.
I tried doing something like this

const vertexShader = [
	"varying vec2 textureCoordinate;",
	"void main() {",
	"textureCoordinate = uv;",
	"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
	"}"
].join("\n");

const fragmentShader = [
	"precision lowp float;",
	"varying highp vec2 textureCoordinate;",
	"uniform sampler2D inputImageTexture;",
	"uniform sampler2D inputImageTexture2;",
	"uniform sampler2D inputImageTexture3;",
	"uniform sampler2D inputImageTexture4;",
	"void main()",
	"{",
	"vec4 texel = texture2D(inputImageTexture, textureCoordinate);",
	"vec3 bbTexel = texture2D(inputImageTexture2, textureCoordinate).rgb;",
	"texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, texel.r)).r;",
	"texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, texel.g)).g;",
	"texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, texel.b)).b;",
	"vec4 mapped;",
	"mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .16666)).r;",
	"mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g;",
	"mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .83333)).b;",
	"mapped.a = 1.0;",
	"gl_FragColor = mapped;",
	"}"
].join("\n");


THREE.IFHudsonFilter = {
	uniforms: {
		inputImageTexture: { type: "t", value: null},
		inputImageTexture2: { type: "t", value: null},
		inputImageTexture3: { type: "t", value: null},
		inputImageTexture4: { type: "t", value: null},
	},

	vertexShader,
	fragmentShader
};

var IFHudsonFilterPass = new THREE.ShaderPass(THREE.IFHudsonFilter);

    IFHudsonFilterPass.uniforms[ 'inputImageTexture' ].value = videoTexture;
    IFHudsonFilterPass.uniforms[ 'inputImageTexture2' ].value = new THREE.TextureLoader( "http://localhost:3000/lib/shaders/japanese/hudsonBackground.png");
    IFHudsonFilterPass.uniforms[ 'inputImageTexture3' ].value = new THREE.TextureLoader( "http://localhost:3000/lib/shaders/japanese/overlayMap.png");
    IFHudsonFilterPass.uniforms[ 'inputImageTexture4' ].value = new THREE.TextureLoader( "http://localhost:3000/lib/shaders/japanese/hudsonMap.png");

composer.addPass(IFHudsonFilterPass);
IFHudsonFilterPass.renderToScreen = true;

can you help me? even if just guide or what to do? I dont know where to proceed.