通过几天的学习，对openGL、shader有了一个大致的了解。
回到学习的初衷吧，在基于pixi.js重构D3项目的时候，因为精灵层级的问题，我得按照一定的先后顺序将不同类别的精灵添加到场景中去。
例如：
针对人物关系的关系图谱，所有的关系线必须要在所有的任务面板下面，但是移动人物面板的时候，与之关联的关系线也要重新绘制；
所以删除精灵之后再添加精灵使得层级增加的做法就有点不适用了（这会导致当前操作的关系线的层级提升，很显然，这不是我们所想要的）。
因此，我们每次操作，都要重新将所有的精灵（处理好新的位置之后），分批次添加到场景中，这就导致出现下面的代码：
人物面板是一类精灵，关系线又是一类精灵，所以我们要用到两个for循环，并且顺序还得讲究（先for循环关系线，再for循环人物面板）；
这样一来，如果页面中有10000个人物面板（相对应的就有10000条关系线），那么就要for循环10000+10000=20000次，针对拖拽操作，每触发一次移动就要for循环20000次，
经过测试，由于精灵数组是存于内存中的，for循环的时候很方便，但是对CPU的消耗很高！
当时，遇到这个问题的时候，朋友说可以将这部分的for循环也让GPU去执行，然后就看到了shader，进而学习了openGL；
学完之后，发现着色器程序的渲染模式可以用四个字概括：逐点绘制。确实解决了在CPU上执行for循环的问题。但是一个错综复杂的人物关系图谱，要用着色器去绘制的话（咱先不讨论shader加载纹理的问题），是不是就失去了使用pixi.js的意义，而且这也将使得开发工作变得更加复杂。
所以，我决定，鉴于关系图谱项目的特殊性，使用依次for循环的方式来处理精灵层级的问题。
分析完问题之后，我们还是要看看，在pixi中如何使用我们自定义的着色器程序。
一、pixi_shaders
百度云链接：https://pan.baidu.com/s/16m2BX5qKXr5Wm-J-68eXGA
提取码：j5t9
效果图：
3个iframe，3个片元着色器效果。
原文：https://www.cnblogs.com/eco-just/p/10665967.html