brokedRobot Posted May 30, 2015 Share Posted May 30, 2015 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> Quote Link to comment Share on other sites More sharing options...
xerver Posted May 31, 2015 Share Posted May 31, 2015 Why do you need a shader just to do additive blending? Pixi.js support blendModes already... http://pixijs.github.io/docs/PIXI.Sprite.html#blendModemySprite.blendMode = PIXI.BLEND_MODES.ADD; Quote Link to comment Share on other sites More sharing options...
brokedRobot Posted May 31, 2015 Author Share Posted May 31, 2015 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? Quote Link to comment Share on other sites More sharing options...
xerver Posted June 1, 2015 Share Posted June 1, 2015 Sure, you can do whatever you want. Did you try looking at some of the filters that do this? For example: https://github.com/GoodBoyDigital/pixi.js/blob/master/src/filters/bloom/BloomFilter.js 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: https://github.com/pixijs/pixi-lights Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.