Skip to content

GPU Image #2

Description

@kevcal69

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions