Как создать тень 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

Не делайте рендер прозрачным. Я думаю, если рендеринг прозрачен, то текстура имеет альфа = 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>