如何创建影子 pixi.js？

Question

为什么没有影子？您需要做什么才能使过滤器正常工作？如果可能的话，然后在代码中向我展示如何创建阴影。

var renderer = PIXI.autoDetectRenderer(500, 200, {
  transparent: true
});

document.getElementsByTagName('body')[0].appendChild(renderer.view);

var stage = new PIXI.Container();

function update(){
  renderer.render(stage);
  window.requestAnimationFrame(update);
}

update();

var graphics = new PIXI.Graphics();
graphics.beginFill(0x848484);
graphics.drawPolygon([0,0,100,0,100,100,0,100,0,0]);
graphics.endFill();

var dropShadowFilter = new PIXI.filters.DropShadowFilter();
dropShadowFilter.alpha = 1;
dropShadowFilter.blur = 2;
dropShadowFilter.distance = 20;

graphics.filters = [dropShadowFilter];

stage.addChild(graphics);

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>

Answer 1

不要让渲染器透明。我猜，如果渲染器是透明的，那么它的纹理的 alpha = 0 并且阴影被绘制在上面。此外，仅适用于 webGL。

var renderer = new PIXI.WebGLRenderer(500, 200);
renderer.backgroundColor = 0xffffff;

document.getElementsByTagName('body')[0].appendChild(renderer.view);

var stage = new PIXI.Container();

function update(){
  renderer.render(stage);
  window.requestAnimationFrame(update);
}

update();

var graphics = new PIXI.Graphics();
graphics.beginFill(0x8484cc);
graphics.drawPolygon([20,20,120,20,120,120,20,120,20,20]);
graphics.endFill();

var dropShadowFilter = new PIXI.filters.DropShadowFilter();
dropShadowFilter.color = 0x000020;
dropShadowFilter.alpha = 0.2;
dropShadowFilter.blur = 6;
dropShadowFilter.distance = 20;

graphics.filters = [dropShadowFilter];

stage.addChild(graphics);

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>