Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

shaders with textures


Arcs
 Share

Recommended Posts

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);
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...