lTyl

Members
  • Content Count

    19
  • Joined

  • Last visited

About lTyl

  • Rank
    Member

Contact Methods

  • Twitter
    TylerDeren

Recent Profile Visitors

868 profile views
  1. Howdy! I am having a problem with Phaser 3 (Specifically, Phaser 3.23.0). I want to draw a scrolling background texture that is always the size of the screen. Further, as the camera.zoom value changes, I expect the scrolling texture to always fill up the screen - regardless of what the zoom value of the camera is at. What is happening is once the camera.zoom value drops to a value less than 1, then the background itself starts to be scaled so it stops wrapping around the screen. Barebones code: Setting the background texture. Intention: This texture wraps around the screen. This works perfect when camera.zoom is 1 or above this.background = this.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'background'); this.background .setScrollFactor(0,0) .setOrigin(0, 0) .setPipeline('Light2D'); And in my update method, I am doing this: this.background.setTilePosition(this.camera.worldView.x, this.camera.worldView.y); The code that is scaling the camera (width and height corresponds to the width and height of a rectangle that I always want to appear on screen) const projectedScale = Math.min( this.camera.width / width, this.camera.height / height ); const scale: number = Clamp(projectedScale, 0.5, 2.0); this.camera.zoomTo(scale, 250); Once the scale value ends up being less than 1, the this.background stops wrapping correctly and I end up with empty space, like the attached image. If someone could point out why the background texture is not being affected by the camera zoom and/or point out methods I can do to solve it, that would be most appreciated! Thanks!
  2. @ivan.popelyshev Thanks for the answer (and the dump of information!). Do you think this material can get added to the V5 Migration Guide? (https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide) I'm not too sure how many people worked with glCore before for custom renderers but this is useful information and might help someone down the line
  3. Howdy! I am finally starting the process of upgrading to PIXI v5. I have a few custom renderers written in V4, and made use of glCore.GLShader, glCore.GLBuffer, and glCore.VertexArrayObject quite heavily. In V4, I could import glCore from `pixi.js` and have what I need. In V5, is glCore still packaged with PIXI? If it is, where can I find it? If it is no longer included, does V5 provide similar helper methods or objects to make building custom renderers easier? I am aware of the migration guide: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide but it doesn't go very low-level. Thanks!
  4. @ivan.popelyshev Hah, all good. Do you mind linking to where it can be found in the PIXI Wiki? Just in case anyone stumbles on this thread. Then at least they have someplace to look
  5. I found the problem. It was in my vertex shader code: varying vec2 vTextureCoord; attribute vec2 aTextureCoord; ...main: vTextureCoord = aTextureCoord; I am not using textures in this renderer, and I am not passing an attribute 'aTextureCoord'. The fragment shader only has a uniform for the color, so it wasn't using the varying. Every other browser happily assigns an undefined value to vTextureCoord, but for Macbook Safari, it silently fails...Leading to many hours of frustration 😂. The fact iPad Safari worked but Macbook Safari did not further made this confusing as all hell
  6. Here is the same fiddle as above, but using WebGL (no PIXI). The green "X" draws correctly on Macbook Safari: https://jsfiddle.net/9x1gzkva/4/. I have attached the command captures from Spector to this post. This fiddle isn't using VAO, so I'll update it using VAOs to get a similar command list as PIXI... pixi_fiddle_capture.json webgl_fiddle_capture.json EDIT: Here is the updated fiddle with a VAO being bound: https://jsfiddle.net/9x1gzkva/5/
  7. So the current theory is Safari does not like the order of operations PIXI/my glyph renderer code is calling the WebGL commands?
  8. I do use Spector, but I am unsure how it can help in this particular case. Since the problem is Macbook Safari, and Spector is not available as a Safari extension. We can see the calls in Chrome, but that doesn't necessarily mean the same calls are firing in Safari as well.
  9. @ivan.popelyshev : Yes, I confirmed I was using the WebGL renderer via two methods: The first was the console.log PIXI does showing the hello step. This isn't foolproof. So I also did a check for app.renderer instanceof PIXI.WebGLRenderer, and it was returning true. EDIT: It should be noted that if I re-write the demo to use raw WebGL outside of PIXI and PIXI.glCore, then Macbook Safari does render as expected. (Fiddle coming shortly) So that adds evidence that the problem is somewhere in the PIXI code...but where? 😂
  10. Howdy all! I wrote a custom renderer plugin for PIXI to draw Glyph data generated from OpenType.js. I am using PIXI.glCore.VertexArrayObject to manage the index buffers and vertex buffers for the data. On every browser, this works fine with the exception of Macbook Safari. iPad Safari works, but Macbook Safari does not draw anything. No errors in the console. Simply nothing draws. The browser and hardware does have support for native VAO. Here is a simplified example: https://jsfiddle.net/pyfdbz5v/ A green "X" should draw. On Edge, Chrome and Firefox this works fine. But if you try the fiddle using Safari on a Macbook (I am using Safari 12.0), nothing draws. No errors are logged. No WebGL errors were logged (using this: https://github.com/KhronosGroup/WebGLDeveloperTools). To further cloud the problem, if you try the fiddle using Safari on an iPad...The green "X" appears as expected. I am having a hard time tracking down if this is a Macbook Safari bug or a weird bug in PIXI. Can anyone help me identify the cause for this odd behavior?
  11. I received an email reply asking for a fiddle. Here is one showing the flickering issue. Simply use the mouse wheel and zoom out; flickering should start happening (I'm on latest Chrome) https://jsfiddle.net/744o680r/4/ I am drawing the graphics once and then scaling. I am using PIXI.Application and handling my zoom in a function, which is then added to PIXI.ticker with a HIGH update priority. In my application, I re-draw the graphics when one of the following is true: the widget window is resized or the browser window is resized. When a tracked data model is updated, then I re-draw only the changed graphic represented by that data model. @OSUblake: Thank you for the link! It is definitely relevant to my needs and I shall peruse. EDIT: Argh. @ivan.popelyshev had it right. graphics = new PIXI.Graphics(true); Enabling native lines made the annoying flickering go away. I could've sworn I tried his suggestion earlier...my bad <_<. Thanks for the assistance everyone!
  12. If you are referring to the resolution property, using a value of 1 or a value >1 still has the same unwanted flickering. EDIT: I had a thought where maybe my use of requestAnimationFrame instead of the Application ticker is why I was experiencing the flickering on scale change. I re-wrote the zoom to use the ticker: this.ticker.add(this.renderSmoothZoom, this, PIXI.UPDATE_PRIORITY.HIGH); After the edit, I am still experiencing the flickering. I suspect it is a relatively minor issue that I am overlooking...
  13. Does anyone else have tricks or ideas I could try to remove/reduce the amount of flickering as shown in the OP? Or any ideas on why the positions are off when re-drawing and using toLocal to calculate the relative draw position? Much appreciated~
  14. Thanks for the reply! I am currently using version 4.5.1. Updating to 4.5.2 has no change for my two issues above. I am doing this to initialize PIXI: this.app = new PIXI.Application(renderOptions.width || 100, renderOptions.height || 100, renderOptions); this.renderer = this.app.renderer; this.stage = this.app.stage; this.view = this.app.view; renderOptions has an 'antialias' property and the value is true. Using new PIXI.WebGLRenderer causes all of my interaction functionality to break, because the renderer isn't linked up to the PIXI Ticker (I'm assuming...). var line = new PIXI.Graphics(true); ^ Has provided no improvement to the flickering I am experiencing. It has actually made the flickering worse and more prevalent.
  15. Hey there, I am building a Gantt chart using PIXI.JS, and have some miscellaneous questions regarding some unexpected behavior I am seeing with the outputted render. 1.) I experience flickering when applying a linear zoom (Changing the scale property with the mouse wheel). The GIF below shows the issue. Here is the zoom code: function zoom(factor) { var newScale = self.zoom.scale * factor; // Clamp the scaling if (newScale > self.zoom.max) { self.zoom.scale = self.zoom.max; return;} else if (newScale < self.zoom.min) { self.zoom.scale = self.zoom.min; return; } // Stops an error when you change state inbetween frame draws if (!self.renderer || !self.renderer.plugins){return} var mouse = self.renderer.plugins.interaction.eventData.data.global; self.zoomLayers.forEach(function(layer, idx){ layer.scale.x *= factor; layer.scale.y *= factor; self.zoom.scale = layer.scale.x; layer.x -= (mouse.x - layer.x) * (factor - 1); layer.y -= (mouse.y - layer.y) * (factor - 1); }); self.emitter.emit('zoom', {pointer: mouse, event: e, factor: factor}); } var remaining, lastTime; function calcZoom() { var time = Date.now(); var delta = time - lastTime; lastTime = time; var step = Math.pow(remaining, delta/100); remaining /= step; zoom(step); if (Math.abs(remaining - 1) < change) { zoom(remaining); remaining = 1; zooming = false; } else { requestAnimationFrame(calcZoom); } } If it helps, my stage is set-up like this. LayerManager is simply a thin wrapper which creates a new PIXI.Container(), and tracks them by name: this.layerManager.getLayerByName('underlay').addChild(this.lineContainer); this.layerManager.getLayerByName('main').addChild(this.layerManager.getLayerByName('surface')); // Add the renderer layer to stage this.stage.addChild(this.layerManager.getLayerByName('underlay')); this.stage.addChild(this.layerManager.getLayerByName('details')); this.stage.addChild(this.layerManager.getLayerByName('main')); The layer which has ‘zoom’ applied is the ‘main’ layer. The lines that are flickering are being drawn with PIXI.Graphics. The line is being added to the ‘details’ layer: var line = new PIXI.Graphics(); this.draw = function(sx, sy, dx, dy){ line.moveTo(sx, sy); line.lineTo(dx, dy); return line; }; Any idea why I am seeing this flickering with these simple lines, and steps on how to mitigate the problem? Ideally, I would like the horizontal lines to remain relatively static. 2.) When refreshing the render (Such as when the data model changes and an event is dispatched), I clear the individual bar and then re-draw with the new data. This works fine UNLESS the view window has been zoomed or panned; in which case the new bars are drawn with an offset that correlates to the amount I have zoomed in/out on the plan. I am calculating the X and Y like so: var shape = new PIXI.Graphics(); var completePoint = shape.toLocal(new PIXI.Point(data.completeX, displayNode.y)); var incompletePoint = shape.toLocal(new PIXI.Point(data.incompleteX, displayNode.y)); shape.drawRect(completePoint.x, completePoint.y, width, height); shape.drawRect(incompletePoint.x, incompletePoint.y, width, height); displayNode is the parent DisplayObject. data.completeX/data.incompleteX is the GLOBAL X draw position. The shape is added as a child to the displayNode. The displayNode is added to the ‘surface’ layer. The gist of it is it appears toLocal is not recursively factoring in the position of all of the parents. My display node graph should look like this: Stage -> Main (PIXI.Container) -> Surface (PIXI.Container) -> displayNode (PIXI.Graphics) -> shape (PIXI.Graphics) ^ Everything is drawing with correct positioning. ^ ‘Floor 1’ updated; expect to see it drawn similar to the former image, but with a higher width. Notice how the greenbar is drawn with a small Y offset and a very large X offset? Why is that? Do any PIXI experts here have any insights they could provide to help me solve these two problems? Thanks!