CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.13k stars 1.97k forks source link

Performance drops with StageGL cacheless filters #996

Closed ricofegh closed 5 years ago

ricofegh commented 5 years ago

I'm trying to use one filter for many display objects. The problem I faced is that for each object the filter makes two active textures and this apparently leads to very bad performance.

Here you can find simple example which reproduces this issue: https://codepen.io/oleg-ignatov/pen/pQoeMz In this pen I apply one BlurFilter to 100 items and fps drops from 60 to 5 on my computer. With filter there are 202 textures in stage._textureDictionary while without filter there are just 2. Also I found no way to release these textures after I stop using filter.

DavidHGillen commented 5 years ago

This is expected. The internals of why WebGL works the way it does is a pretty long explanation, but trust me when I say there's not much I can do to work around it.

The best approach for needing a lot of blurs is to apply the filter to a container with all of the objects in it, or pre-blur the objects and fade between different levels of blur.

One of the things we're working on internally is allowing for a filter that simultaneously affects multiple objects. Even once we have that though it will not be a simple matter to make it work for a blur. Blurs are a huge pain in the butt.

I'll close this as everything is working as expected, but feel free to ask for help on places like stack overflow, emailing us, and reddit.