JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/stats.js/master/src/Stats.js"></script>
<script src="https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js"></script>
JavaScript
var stage, renderer
function init() {
var render_options = {
antialias:true,
forceFXAA:false,
transparent:false,
resolution:1
}
renderer = new PIXI.WebGLRenderer(600, 600, render_options);
document.body.appendChild(renderer.view);
stage = new PIXI.Container();
var buffer = new PIXI.Graphics();
stage.addChild(buffer);
buffer.lineStyle(6, 0xFFFFFF);
buffer.beginFill(0xFF0000, 0.6);
buffer.alpha = 0.6;
buffer.drawRect(100, 100, 50, 50);
var buffer2 = new PIXI.Graphics();
stage.addChild(buffer2);
buffer2.lineStyle(6, 0xFFFFFF);
buffer2.beginFill(0xFF0000, 1.0);
buffer2.alpha = 1.0;
buffer2.drawRect(200, 200, 50, 50);
stage.alpha = 0.5;
var vertex_source = "" +
" precision lowp float;" +
" attribute vec2 aVertexPosition;" +
" attribute vec2 aTextureCoord;" +
" attribute vec4 aColor;" +
" uniform mat3 projectionMatrix;" +
" varying vec2 vTextureCoord;" +
" varying vec4 vColor;" +
" uniform float red;" +
" void main(void){" +
" gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); " +
" vTextureCoord = aTextureCoord;" +
" if (aColor.a >= 1.0) { " +
" vColor = vec4(0.0, 1.0, 0.0, 1.0);" +
" } " +
" else { " +
" vColor = vec4(1.0, 0.0, 0.0, 1.0);" +
" }" +
" }";
var fragment_source = "" +
" precision lowp float;" +
" varying vec2 vTextureCoord;" +
" varying vec4 vColor;" +
" uniform sampler2D uSampler;" +
" void main(void) {" +
" gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;" +
" }";
var sha = new PIXI.AbstractFilter(vertex_source, fragment_source, uniforms);
stage.filters = [sha];
requestAnimationFrame(animate);
}
var uniforms = {'red': {'type': 'f', 'value': 0.0},
...