Jump to content

Pixi v2.3 Apply Shader


Recommended Posts

Hello! Can't find the answer anywhere.


I want to implement deferred lighting.


For that, i have 2 textures: texture1 (objects)  and texture0 (empty texture to shadowmap)


I can apply shader1 to my texture0 and successfully get shadow map from it. Now, i can apply shader2 to my texture1 with newly generated texture2 as an additional channel. However, texture2 remains black (it renders good, but goes to shader as black).

I'm cheating a bit, as im using Phaser (however no one can help me with this on Phaser forums, so i'd ask here too)






Code example: 

create() {    ...    this.sourceRT = this.game.make.renderTexture(this.game.width, this.game.height); // Phaser.RenderTexture = PIXI.RenderTexture    this.shadowMapRT = this.game.make.renderTexture(this.SHADER_SIZE, this.SHADER_SIZE);    this.shadowMapImage = this.game.add.image(0, 0, this.shadowMapRT);    this.shadowMapImage.filters = [this.shadowTexureShader];    this.lightingRT = this.game.make.renderTexture(this.game.width, this.game.height);    this.lightingImage = this.game.add.sprite(200, 0, this.lightingRT);    this.lightingImage.filters = [this.shadowCastShader];    // this.shadowTexureShader applies to this.shadowMapImage and gets Source Render Texture as additional channel -- everything ok    this.shadowTexureShader.uniforms.iChannel0.value = this.sourceRT;    // then this.shadowCastShader applies to this.lightingRT (doesn't matter) and should receive processes this.shadowMapRT. However it receives jsut black texture (shadowMapRT before shadowTexureShader)    this.shadowCastShader.uniforms.iChannel0.value = this.shadowMapRT;}update() {    this.light.x = this.game.input.activePointer.x;    this.light.y = this.game.input.activePointer.y;    this.sourceRT.renderRawXY(this.renderGroup, 0, 0, true); // this.renderGroup is a group with shadow-casters    this.shadowTexureShader.uniforms.uLightPosition.value = [this.light.x, this.light.y];    this.shadowCastShader.uniforms.uLightPosition.value = [this.light.x, this.light.y];}
Link to comment
Share on other sites

Sounds like the texture value for that shader isn't being uploaded after you render it. Make sure the texture uniform is being uploaded properly.


thanks for answer, i thought nobody knows!

How do i make sure if texture uniform has uploaded? (and what do you mean)

For example, if i change this line:

this.shadowCastShader.uniforms.iChannel0.value = this.shadowMapRT;


this.shadowCastShader.uniforms.iChannel0.value = this.sourceRT;

shader2 (which is shadowCastShader) correctly displays all objects.


The problem is that shadowCastShader should receive texture that is produced by another shader,

Link to comment
Share on other sites

You can use the WebGL Inspector to see what a texture looks like in a render pass. The quick answer is "that isn't supported in v2, but is in v3".

The longer answer is that you can assign a filter to an object, then draw that object to a render texture. Then use that render texture as the input into another shader.

Problem is timing, in v2 this is really hard to get right because of the way render passes are done. Basically what has to happen is you do a render pass, then when it is done upload the texture in the second shader and do another pass. I'm not familiar enough with Phaser's wrappers to tell you how to do it. Nor do I really recommend it in v2 for performance reasons. In v3 this is natively supported and Filters can have children and we manage input/output framebuffers for you and let you do this type of thing trivially (see our BloomFilter for example).


You can also see an example of a v2 shadow map here: http://www.pixijs.com/demos/lights/

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.

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.


  • Recently Browsing   0 members

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