brokedRobot

Members
  • Content Count

    12
  • Joined

  • Last visited

  1. There is no blur in my code. I'm trying to remove the blur as well. It is one of the undesired effects of adding the filter. There's really only two lines that matter in the filter, the rest of it is from an example and isn't doing anything. The filter is as simple as: "vec4 texColor = texture2D(uSampler, vTextureCoord);", "gl_FragColor = texColor;" I want to remove the blur and the rounding error. They may in fact be connected as you say, but I am not intentionally adding either. EDIT: I've since removed the blurring by setting the renderer's antialiasing property false, but that just makes the jumping even more pronounced...I altered the example page to reflect..
  2. I've stumbled across an undesirable effect. When I add a filter to a sprite, and rotate it, the sprite is smoothed (blurred a small amount, looks like linear maybe) and also, it shakes slightly (you have to look closely to see it, but it becomes very apparent on small sprites. I don't know if this is phaser or pixi, but I was wondering if anyone knew of a way to alleviate the effect. The position thing looks to be loss of precision on the position or at least the effect makes it look like that, jumping from one pixel location to the next or something like that. The other I don't know about. There's no interpolation in the filter, the only thing I'm really doing is gl_fragcolor = texture2D(uSampler, vTextureCoord); both effects are removed if you just comment out the line: sprite.filters = [filter]; (removing the filter) here's a link to the simple example: https://brokedrobot.com/resources/dev/public/index2.html and here's the code for that example: <html id="html" style="overflow: hidden;" ng-app="html"> <head> <title>Example</title> <meta name="author" content="glitchedRaven"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <script src="phaser.min.js"></script> </head> <body style="background: green; margin: 0vh; padding: 0vh;"> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }, true); function preload() { game.load.image('texture', 'test.png'); } var filter; var sprite; function create() { // Shader by Kali (https://www.shadertoy.com/view/4dfGDM) // Image patched by Richard Davey var fragmentSrc = [ "precision mediump float;", "uniform float time;", "uniform vec2 resolution;", "varying vec2 vTextureCoord;", "uniform sampler2D iChannel0;", "uniform sampler2D uSampler;", "void main( void ) {", "vec2 uv = gl_FragCoord.xy / resolution.xy;", "uv.y *= -1.0;", "uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);", //"vec4 texColor = texture2D(uSampler, uv);", "vec4 texColor = texture2D(uSampler, vTextureCoord);", "gl_FragColor = texColor;", "}" ]; // Texture must be power-of-two sized or the filter will break sprite2 = game.add.sprite(310, 230, 'texture'); sprite = game.add.sprite(0, 0, 'texture'); sprite.width = 400; sprite.height = 300; sprite.x = 400; sprite.y = 300; sprite.anchor.set(0.5, 0.5); sprite.scale.set(1.5, 1.5); sprite.smoothed = false; var customUniforms = { iChannel0: { type: 'sampler2D', value: sprite.texture, textureData: { repeat: true } } }; filter = new Phaser.Filter(game, customUniforms, fragmentSrc); filter.setResolution(1024, 1024); sprite.filters = [ filter ]; } function update() { sprite.rotation += 0.01; filter.update(); } </script> </body> </html> As I understand it, filters use a canvas element behind the scenes to render, but is there any way I can set the imageSmoothingEnabled property of that element? Or make the filtered sprite match the unfiltered sprite some other way? To be honest, the position shaking thing is more troublesome to me than the smoothing thing, is there a way to keep the location steady?
  3. I found what was causing it. I was changing the scale of the container holding the masking sprite to match the window size (although looking at it now I don't think this was even necessary), so it seems strange that it causes it, or perhaps not, but this made me notice that the containers have no scaleMode...so I'm not sure, maybe this will cause some sort of issue where someone won't be able to do something because they'll need to scale a container, but for now I think I can work around it. Thanks again.
  4. Ok I've set up a simpler example where it doesn't seem to be occurring: http://brokedrobot.com/resources/dev/masking/ I'll try to figure out what is causing it...it could be because I'm scaling the canvas I guess...or something like that...other than scaling the canvas...I'm not sure I'm doing anything differently. edit: I've set up another one for testing: http://brokedrobot.com/resources/dev/masking2/ but I'm having a really hard time getting it to occur even after scaling the canvas and setting things like the renderer's resolution and antialias values...but I can keep comparing things til I find it. It has to be something I'm doing. I'll find it.
  5. Ok, I set the scaling back to 1x1 (100%, you can look at it by following the link in my earlier post again), but...I don't know, it still looks like it's there. Does the image have to be a power of two to fix it no matter what? Or are my eyes playing tricks on me at this point? I can experiment with mipmapping, but at this point I could just as easily change the size of the image, but if the effect is still there at 100% then that won't help much... Also thanks for taking a look at it. It has helped me at least take a step forward.
  6. Ah, I see now that this effect is only present on a moving image behind a mask...why is that? Is there any additional filter I can apply to fix this or any way to mask without this happening?
  7. Hey, I'm working with a simple moving sprite (albeit large and being scaled down by pixi.) I remember running into this effect with three.js sometimes, and I thought it had something to do with scale modes or antialiasing, but now I'm confused because I don't seem to be able to remedy the effect in pixi. You can take a look at it here: http://www.naomitraynor.com/ I was hoping someone could just visually inspect it (the moving image behind the rotating mask) and let me know what's going on or possibly a solution. I've played with the values for scale modes and antialiasing quite a bit but it doesn't seem to help at all. Of course, it's worse when you scale your browser to certain sizes...so I assume it is scale modes, but neither linear nor nearest seem to help. Is it that this effect can't be removed in pixi? Thanks! I forgot to mention I'm viewing with Windows 10 on Chrome 47.
  8. 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?
  9. 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>
  10. Augh, so sorry. Wow, I turned it from black to white instantly. And set it to the panda o.o That's awesome. And so everything is then ordered by...the order added to the stage? So you 'just' reorder some drawing layer system? I think I saw an example already with textures as uniform inputs. Sorry for being daft, I see the info everywhere...I just need to read more. I will read more.
  11. Well, the test code I was working with is actually the panda example. As you can see with the commented out NewFilter code, I was attempted to do something similar to what you suggest. I think this may just be something else in my code that I'm doing wrong but I keep getting an error, so I'll keep looking, like I said I just started messing with this, here's the modification: function MyFilter() {PIXI.filters.AbstractFilter.call(this,null,'main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); }');}MyFilter.prototype = Object.create(PIXI.filters.AbstractFilter.prototype);MyFilter.prototype.constructor = MyFilter;//function MySprite() {}/*PIXI.filters.NewFilter = function() {}PIXI.filters.NewFilter.prototype = Object.create( PIXI.filters.NoiseFilter.prototype );PIXI.filters.NewFilter.prototype.constructor = PIXI.filters.NewFilter;//MySprite.prototype.someOtherFunction = function() {};var t1 = new PIXI.filters.NoiseFilter();var t2 = new PIXI.filters.NewFilter();*/var renderer = PIXI.autoDetectRenderer(800, 600);document.body.appendChild(renderer.view);// create the root of the scene graphvar stage = new PIXI.Container();stage.interactive = true;var bg = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');bg.anchor.set(0.5);bg.position.x = renderer.width / 2;bg.position.y = renderer.height / 2;var filter = new MyFilter();var container = new PIXI.Container();container.position.x = renderer.width / 2;container.position.y = renderer.height / 2;var bgFront = PIXI.Sprite.fromImage('_assets/SceneRotate.jpg');bgFront.anchor.set(0.5);container.addChild(bgFront);var light2 = PIXI.Sprite.fromImage('_assets/LightRotate2.png');light2.anchor.set(0.5);container.addChild(light2);var light1 = PIXI.Sprite.fromImage('_assets/LightRotate1.png');light1.anchor.set(0.5);container.addChild(light1);var panda = PIXI.Sprite.fromImage('_assets/panda.png');panda.anchor.set(0.5);container.addChild(panda);stage.addChild(container);//panda.filters = [filter];container.filters = [filter];var count = 0;var switchy = false;stage.on('click', onClick);stage.on('tap', onClick);function onClick(){switchy = !switchy;if (!switchy){stage.filters = [filter];}else{stage.filters = null;}}var help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' });help.position.y = renderer.height - 25;help.position.x = 10;stage.addChild(help);requestAnimationFrame(animate);function animate() {bg.rotation += 0.01;bgFront.rotation -= 0.01;light1.rotation += 0.02;light2.rotation += 0.01;panda.scale.x = 1 + Math.sin(count) * 0.04;panda.scale.y = 7 + Math.cos(count) * 0.04;count += 0.1;//var matrix = filter.matrix;//matrix[1] = Math.sin(count) * 3;//matrix[2] = Math.cos(count);//matrix[3] = Math.cos(count) * 1.5;//matrix[4] = Math.sin(count / 3) * 2;//matrix[5] = Math.sin(count / 2);//matrix[6] = Math.sin(count / 4);renderer.render(stage);requestAnimationFrame(animate);}I was trying to set panda.filters and container.filters. And here's the error I get: Sorry if this is something I'm doing wrong. I'm just not sure how to debug this error yet.
  12. "webGL Filters this is from the front page: When using webGL, Pixi let’s you use a huge set of existing, familiar filters such as blurs and pixelations but also allows users to create their own unique filters such as bespoke displacements and halftone effects." This has been described as straightforward but I can't seem to find the answer. How would one go from having a fragment shader like this: uniform x main(){ return vec4(0.0,0.0,0.0,1.0); } to a: var filter = new PIXI.filters.myFilter(); I've tried making prototype copies of the existing filters that apparently call AbstractFilter as their super. I've only just begun looking at this, but I was hoping someone could give me a tip. I know it has to be wrapped up in javascript in a certain way with the uniforms supplied, but I can't find the way to create a customized glsl filter, every time I add the copies into a container or sprite's .filter array, it causes a runtime error. Thanks, sorry for having a hard time with this, maybe not looking in the right place. Am I correct in my thinking about how this should be done?