multiplegeorges

Members
  • Content Count

    9
  • Joined

  • Last visited

  1. Right, I see what you mean. I'll post a link to the app once we deploy it publicly, so you can see what we're working on. Thanks for your input, very appreciated.
  2. Yeah, toDataUrl is terrible. We are doing all our rendering in WebGL as you say. However, given the structure of our app, we need the result from the rendering embedded throughout the page in these thumbnails. The UI for our app is DOM while the canvas/art area is a Pixi Stage/Canvas. I guess you're suggesting that we move all our chrome/UI elements into the Pixi Stage/Canvas and not have any DOM-based UI at all, right?
  3. There are just two renderers in my setup. The main stage that is displayed to the user and a smaller one that is the size of the thumbnails. We have defined a suite of tools that are essentially lists of shaders and uniforms to apply to the loaded image. The loaded image is a sprite that is the full size of the stage/renderer. When the user looks at the palette of tools, we generate a thumbnail preview of each image by loading the loaded image into a sprite on the thumbnail renderer, running the list of shaders in order, and doing a canvas.toDataUrl() for each one and assigning that to the src of an Image that gets displayed to the user in the DOM. I had a branch of this work that instantiated a RenderTexture for each thumbnail and did the work in there, but the performance wasn't good. I also tried re-using the same RenderTexture, but I was getting corrupted textures where what should've been transparent was black. How would you recommend I approach this problem? Related question: How can I get the texture of the sprite after the filters have been applied? It seems like sprite.texture returns the texture without any shaders applied.
  4. Hey gordyr, I am using Pixi for exactly the same thing. We are currently hitting up against the SAME issue. Thumbnailing speeds are a problem. We have look at different renderer sizes, re-rendering the sprite in a RenderTexture, etc. Did you come to a solution on this?
  5. multiplegeorges

    Unbinding events, cleaning up references for browser GC

    Argh, Pixi's woefully out of date online API docs strike again. InteractionManager has a removeEvents method. When cleaning up your objects, use it like this: this.stage.interactionManager.removeEvents();Pretty straightforward, but you gotta read the source to find it. Oh well.
  6. Hey all, I'm making a single page app that uses a Pixi CanvasRenderer on one of the screens. When I clean up my views in JS, I am getting zombie objects because there's no way to unbind the events on the Pixi renderer/stage. Take a look at this heap snapshot... How can I free up these objects for collection? Thanks a lot!
  7. multiplegeorges

    Paint-like app: Graphics, interactivity and me

    Awesome, thanks for your input guys. It turns out that Chrome stopped emitting mousemove events. Once I restarted Chrome, it all started working again. I ended up with this solution, in coffeescript: // In the initializer for the object.@el.addEventListener 'mousedown', (e) => @start(e)@el.addEventListener 'touchstart', (e) => @start(e)@el.addEventListener 'mousemove', (e) => @move(e)@el.addEventListener 'touchmove', (e) => @move(e)@el.addEventListener 'mouseup', (e) => @end(e)@el.addEventListener 'touchend', (e) => @end(e)@el.addEventListener 'touchleave', (e) => @end(e)// Each event then gets remapped to the right relative coords with:_position: (e) -> x = e.clientX || e.targetTouches[0].clientX y = e.clientY || e.targetTouches[0].clientY absx = x - @el.offsetLeft absy = y - @el.offsetTop {x: absx, y: absy}
  8. multiplegeorges

    Paint-like app: Graphics, interactivity and me

    Hey all, I am trying to make a very basic prototype of a Paint-like applications. Is it possible to bind a mousemove event to the Stage that I create? If I bind an event like this: el = this.renderer.view;el.addEventListener('mousemove', function(e){ console.log('move); });I don't get a log event, so I assume that Pixi is catching and squashing the event. What's the Pixi way of binding mousedown, mousemove, and mouseup events to a Stage instance? Do I need to create an interactive, but transparent Graphics instance to cover the entire thing and have it handle the events? Thanks!