shaders with textures

[Arcs]

Hi below is code I'm working on someone with and we can't figure out how to bind this texture the "right" way, really could appreciate the help spent a lot of time on it so far.  I provided so much code for context if needed but the core of it is just this:

	this.uniforms.uNoiseTex = {
	  type:"t",
	  value:1//using texture here never works
	}

	renderer.bindTexture(PIXI.loader.resources["noise.png"].texture.baseTexture, 1, true);  //having to use this and it seems like a hack and might not always work

 

 

function DreamShader() {
  this.vertexShader = null;
  this.fragmentShader =   "precision highp float;uniform sampler2D uSampler; uniform sampler2D uNoiseTex; uniform vec4 filterArea; uniform vec4 filterClamp; uniform vec2 dimensions; uniform float time,fadeAmount;varying vec2 vTextureCoord;void main(){vec2 pixel = vTextureCoord * filterArea.xy; vec2 texCoord = pixel/dimensions; vec2 offset=vec2(texture2D(uNoiseTex,texCoord+vec2(time,0.)).x,texture2D(uNoiseTex,texCoord*.5-vec2(time,0.)).x);float magnification=length(texCoord.xy-vec2(.5,.5));magnification*=2.;float shine=pow(1.-abs(offset.x+offset.y-1.)*(1.+fadeAmount),16.)*pow(magnification+fadeAmount*3.,10.)*.05;gl_FragColor=vec4(texture2D(uSampler,clamp(vTextureCoord + offset * .01 * magnification, filterClamp.xy, filterClamp.zw)).x,texture2D(uSampler,clamp(vTextureCoord + offset * .02 * magnification,  filterClamp.xy, filterClamp.zw)).y,texture2D(uSampler,clamp(vTextureCoord + offset * .03 * magnification,  filterClamp.xy, filterClamp.zw)).z,1.)*(pow(magnification,4.)*.5+1.)+vec4(shine,shine,shine,1.);}";
	this.uniforms = {};
	this.uniforms.time = {
	  type:"f",
	  value:0.0
	}
	
	this.uniforms.fadeAmount = {
	  type:"f",
	  value:0
	}
	
	this.uniforms.dimensions = {
	  type:"2f",
	  value:[0,0]
	}
	
	//TEXTURE_PROBLEM - I'm trying to get the shader to pick up the new texture here.
	//The documentation suggests that I should simply be able to bind the texture directly,
	//this isn't how opengl normally works though, and it fails here.
	//Instead, I bind a value of '1' to the this sampler, which should correspond to 
	//texture unit 1, although I think it is an implementation detail and I don't think it's guaranteed.
	//add sprite to the scene so it works
	//stage.addChild(PIXI.loader.resources["noise.png"].texture.baseTexture);
	state['dreamcontainer'] = new PIXI.Container();
	state['dreamsprite'] = new PIXI.Sprite(PIXI.loader.resources["noise.png"].texture);
	state['dreamsprite'].renderable = false;
	state['dreamcontainer'].addChild(state['dreamsprite']);
	stage.addChild(state['dreamcontainer']);
	this.uniforms.uNoiseTex = {
	  type:"t",
	  value:1
	}
        //Tried these for the value none of them work
        //PIXI.loader.resources["noise.png"].texture.baseTexture
	//PIXI.loader.resources["noise.png"].texture;
	//I make sure that the wrap mode is set to repeat
	PIXI.loader.resources["noise.png"].texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

	
  PIXI.Filter.call(this,
    this.vertexShader,
    this.fragmentShader,
    this.uniforms
  );
}
DreamShader.prototype = Object.create(PIXI.Filter.prototype);
DreamShader.prototype.constructor = DreamShader;
DreamShader.prototype.apply = function(filterManager, input, output){

	this.uniforms.time += 0.001;
	this.uniforms.dimensions[0] = render_width;
	this.uniforms.dimensions[1] = render_height;
        //TEXTURE_PROBLEM tries this here too didn't work
	//this.uniforms.uNoiseTex.value = state['dreamsprite']._texture;

	//TEXTURE_PROBLEM - You'll see here I'm using a bit of a hack to make sure that the texture is bound to Texture Unit 1.
	//I don't expect that this will always continue to work (another sprite or something may put something else there.)
	//Ideally we could find a way to make sure the texture gets bound automatically on binding the shader
	renderer.bindTexture(PIXI.loader.resources["noise.png"].texture.baseTexture, 1, true);

	filterManager.applyFilter(this,input,output);
}

 

[ivan.popelyshev]

FilterManager binds textures for you, just put it in "filter.uniforms"

This thing is OUTDATED:

this.uniforms = {};
	this.uniforms.time = {
	  type:"f",
	  value:0.0
	}
	
	this.uniforms.fadeAmount = {
	  type:"f",
	  value:0
	}
	
	this.uniforms.dimensions = {
	  type:"2f",
	  value:[0,0]
	}

Please look at how filters work in v4.

Filter class: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/Filter.js

Filter with texture example in pixi-filters: https://github.com/pixijs/pixi-filters/blob/master/filters/simple-lightmap/src/SimpleLightmapFilter.js

Article about difficulties in v4 filters: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#fitting-problem

And, again, like in other three threads this week, i recommend to look at https://github.com/pixijs/pixi-plugin-example/ as an alternative approach when you need to apply filter to just one sprite and not container. Just make shader renderer plugin.

[Arcs]

Thank you very much for your very informative reply, I will take a look at all of your links and use those examples thank you.