• Content count

  • Joined

  • Last visited

  • Days Won


ivan.popelyshev last won the day on March 25

ivan.popelyshev had the most liked content!

1 Follower

About ivan.popelyshev

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
  • Location
    Moscow, Russia
  • Interests
    Pixi.js, Topcoder, Codeforces, ninjas and bombers

Recent Profile Visitors

2,289 profile views
  1. @OlegVolkov When I wrote that, Graphics only rendered lines in webgl through polygons. Now there's nativeLine. To make 2k elements and 2k edges its better to understand how graphics works and may be change it somehow. Text should be pre-rendered, but PIXI does that already.
  2. You don't need all of recursive parent transforms. "graphics.transform.worldTransform" has global matrix that is applied to object.
  3. no side effects. we added it in 4.4.0, i think, there was a problem like yours. Oh, and I did found error in masks , it was critical fix of 4.3.5 - you can download it! its just like 4.3.4 but with fixed masks
  4. try call "renderer.gl.flush()" after "renderer.render()"
  5. do you use masks or filters? upd. try call renderer.gl.flush() after each render()
  6. what version of pixi? we had something like that in 4.0
  7. pixi-layers is better version of pixi-display, you just have to use different name of classes, and actually create layers where certain elements will be rendered. pixi-display detects the place of virtual placement of elements automagically, and it does not work with filters/masks. The changes in API were caused to support the lighting that you use, when you know which element must render lights inside.
  8. nice, i have a plugin for that kind of effects: http://pixijs.github.io/examples/#/layers/lighting.js, it uses only blendmodes, no masks. the only problem might be interaction, you have to set interactiveChilren to false for all lights. the difference is that you can add the lights wherever you want, as a child for a character too. when you remove character, light is removed automatically, because its his child. ill add more demos later, including deferred rendering. i understand that some people want "pure" pixi, but i will fight for that plugin to be included into the core. ill add your demo as a reference to the guide ill write later, "without layers" vs "with layers" also, regarding tilemap, if you see some problem with performance, you can use pixi-tilemap. its low-level tool, it wont restrict you to some preset algorithms. works like graphics - when your camera hits the edge of buffered part, just clear and fill it again. doesnt use extra videomemory, except packing 4 tilemaps into one to get more of them working silmultaniously
  9. V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range. I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5. Filter Area Thanks to @bQvle and @radixzz First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box. Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box. Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below) If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically. uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix: filter.apply = function(filterManager, input, output) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output); } Lets combine it in shader! uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw: uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something? Fitting problem Thanks to @adam13531 at github. One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/ Please use this line to fix it: filter.dontFit = true; Bleeding problem Thanks to @bQvle The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates: uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297 OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely? displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass. Mapped matrix When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example. Look for a mapped matrix: this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly. You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time! texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"
  10. Clarification: "filterArea.xy" is the relative size of the area "filterArea.zw" is its position. Use it only if you need absolute position
  11. @pdl.dev And your fix: 1. ignore zw 2. newCenter = center varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec4 filterArea; uniform vec2 dimensions; uniform float time; uniform vec2 center; uniform vec4 color; uniform float size; vec2 mapCoord( vec2 coord ) { coord *= filterArea.xy; return coord; } void main() { vec2 uv = vTextureCoord; vec4 finalColor; vec2 mappedCoord = mapCoord(uv) / dimensions; vec2 newCenter = center; float r = distance(mappedCoord, newCenter); float value = smoothstep(time-size,time,r) - smoothstep(time+size, time, r); finalColor += value * color; finalColor.w = 1.0; if (value < 1.0 && value > 0.0) { gl_FragColor = mix(texture2D(uSampler, uv), finalColor, 1.0); } else { gl_FragColor = texture2D(uSampler, uv); } }
  12. OK, temporary fix: vec2 mapCoord( vec2 coord ) { coord *= filterArea.xy; return coord; } vec2 unmapCoord( vec2 coord ) { coord /= filterArea.xy; return coord; }
  13. Yeah, that was fixed in 4.4.1. Then in 4.4.2. Then in 4.4.3. I'm not sure it works in latest versoin correctly, guys are patching this thing for last 2 weeks
  14. Yes, you are right. The problem is that application does not modify CSS of canvas element, you can either do it yourself, either you ask PIXI, add "autoResize: true" into the options.