• Content Count

  • Joined

  • Last visited

About lTyl

  • Rank

Contact Methods

  • Twitter

Recent Profile Visitors

561 profile views
  1. @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
  2. 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
  3. Here is the same fiddle as above, but using WebGL (no PIXI). The green "X" draws correctly on Macbook Safari: 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:
  4. So the current theory is Safari does not like the order of operations PIXI/my glyph renderer code is calling the WebGL commands?
  5. 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.
  6. @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? 😂
  7. 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: 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: 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?
  8. lTyl

    PIXI positioning + flickering questions

    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) 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 bad <_<. Thanks for the assistance everyone!
  9. lTyl

    PIXI positioning + flickering questions

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

    PIXI positioning + flickering questions

    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~
  11. lTyl

    PIXI positioning + flickering questions

    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: = new PIXI.Application(renderOptions.width || 100, renderOptions.height || 100, renderOptions); this.renderer =; this.stage =; this.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.
  12. 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.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 =; 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!
  13. Heya. I am using PixiJS to build a visualizing tool as part of a larger application. Currently, I am building a minimap component which draws linked ancestors from a selected chain in the main web application. Each link is drawn from the center of one shape to the center of another. The minimap has panning and zooming. When the minimap is updated, and new links are drawn, the lines linking two shapes are not drawn to the center of those shapes. This draw bug only happens if the main draw layer scale and position was changed from a pan or zoom action. Panning works by changing the X and Y position of the relevant Pixi Container on drag. Zooming works by changing the scale property for X and Y. Obviously, my center point calculation is failing to factor in the position/scale of the container. I am calculating the center via: var center = { x: shape.x + (shape.width / 2), y: shape.y + (shape.height / 2) }; Thus, how can I get the center point of a Container (shape) to always represent the center point of that container, regardless of how I manipulate the scale and positioning of the parent? This will be the world coordinate representing the center point of a container. Is there an easy way of getting that point?
  14. Thanks for the comments! We have a Web demo over on I'm not actively sharing the link because that demo is 11-months old at this point, and quite a bit has changed since. Updating the Web demo is on the to do list. I also am planning on getting a demo live on Steam as well. Regarding the difference in art styles from the game versus promotional art, this was done mainly as a throwback when game box art would have outrageous cover art compared to the art style of the game. @lemmo Thank you!
  15. Thanks! We definitely spent a lot of time on the art to get it "just right." Here is what it looked like before: All of our artists did a phenomenal job getting us from there to the art you see today.