Jump to content

Additive Shader template


Recommended Posts

I guess what I'm asking then is how I would pull out the fully rendered frame directly before my sprite is rendered and added to it.  Then I could sample that frame for the pixel that would occur 'underneath' the sprite had it not been drawn?  Is it impossible to create an additive shader/custom filter with PIXI.js?


If you put two images in for the panda.png and SceneRotate.jpg, could you make it such that the 50% red square there adds its value to the bg's color value at the pixel corresponding to the same stage pixel that the red square's shader is deciding?  I guess what I really want is to be able to pull the stage pixels before the shader runs.  At that step in the cycle I need a buffer of what's on the stage already before the shader runs.  Maybe this is impossible.  I don't know.

I mean, I know I can get the bg's texture and pass it into the shader and calculate the rotation it's currently at and maybe find the pixel in the coordinate realm of the shader, but that seems like overkill?  Or am I completely off?  I guess I don't understand the renderer yet.


<!DOCTYPE HTML><html>   <head>      <title>Test</title>      <script src="bin/pixi.js"></script>   </head><body><script>   var sprite =  PIXI.Sprite.fromImage('_assets/panda.png');   function MyFilter() {      PIXI.filters.AbstractFilter.call(this,         null,         [            'void main() {',               'gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);',            '}'         ].join('\n')      );   }   MyFilter.prototype = Object.create(PIXI.filters.AbstractFilter.prototype);   MyFilter.prototype.constructor = MyFilter;   var filter = new MyFilter();   var renderer = PIXI.autoDetectRenderer(800, 600);   document.body.appendChild(renderer.view);     var stage = new PIXI.Container();   stage.interactive = true;   var container = new PIXI.Container();   container.position.x = renderer.width / 2;   container.position.y = renderer.height / 2;   stage.addChild(container);   var bg = PIXI.Sprite.fromImage('_assets/SceneRotate.jpg');   bg.anchor.set(0.5);   container.addChild(bg);   var panda =  PIXI.Sprite.fromImage('_assets/panda.png');   panda.anchor.set(0.5);   panda.filters = [filter];   container.addChild(panda);   var count = 0;   requestAnimationFrame(animate);   function animate() {      bg.rotation -= 0.01;      panda.scale.x = 1 + Math.sin(count) * 0.04;      panda.scale.y = 1 + Math.cos(count) * 0.04;      count += 0.1;      renderer.render(stage);      requestAnimationFrame(animate);   }</script></body></html>
Link to comment
Share on other sites

What if I want to do a displacement filter or something else where I need that intermediary buffer of pixels?  What if I want to make a refraction shader?  Isn't that what the wave filters in the examples do?  Aren't layers being composited at some point?


Could you make a shader that took a texture as a uniform and refracted the 'scene' based on its color value, to look like ice?  And basically not be opaque in any way, like the wave shaders in that awesome fish example?

Link to comment
Share on other sites

Sure, you can do whatever you want.

Did you try looking at some of the filters that do this? For example:


If you need to run multiple passes on a filter, you can just do that with different render targets.

You can also pass any texture into any shader, consider what that means. You can render to a RenderTexture and then pass that into a shader as a sampler, for example. A good example of this is the WebGLDeferred renderer which does this to composite two scenes via lighting:


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...