Example updated and redundant files deleted
This commit is contained in:
Mat Groves
parent
74b94a0e27
commit
10379289bb
5 changed files with 57 additions and 569 deletions
|
|
@ -12,13 +12,33 @@
|
||||||
|
|
||||||
<script src="../../bin/pixi.dev.js"></script>
|
<script src="../../bin/pixi.dev.js"></script>
|
||||||
<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
|
<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
|
||||||
<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
|
<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
|
||||||
|
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
|
||||||
|
<script src="../../src/pixi/renderers/webgl/filters/Filter.js"></script>
|
||||||
|
<script src="../../src/pixi/renderers/webgl/filters/FilterManager.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/InvertFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/SepiaFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/BlurXFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/BlurFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/BlurYFilter.js"></script>
|
||||||
|
<script src="../../src/pixi/filters/SmartBlurFilter.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var renderer = PIXI.autoDetectRenderer(620, 380);
|
var renderer = PIXI.autoDetectRenderer(800, 600);
|
||||||
|
|
||||||
|
|
||||||
|
var f2 = new PIXI.BlurYFilter()//new PIXI.Filter();
|
||||||
|
var f = new PIXI.GreyFilter()//new PIXI.Filter();
|
||||||
|
var blurX = new PIXI.BlurXFilter()//new PIXI.Filter();
|
||||||
|
var blurY = new PIXI.BlurYFilter();
|
||||||
|
var smart = new PIXI.SmartBlurFilter();
|
||||||
|
|
||||||
|
var blur = new PIXI.BlurFilter();
|
||||||
|
|
||||||
|
|
||||||
// create an new instance of a pixi stage
|
// create an new instance of a pixi stage
|
||||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||||
|
|
||||||
|
|
@ -28,28 +48,31 @@
|
||||||
bg.anchor.x = 0.5;
|
bg.anchor.x = 0.5;
|
||||||
bg.anchor.y = 0.5;
|
bg.anchor.y = 0.5;
|
||||||
|
|
||||||
bg.position.x = 620/2;
|
bg.position.x = 800/2;
|
||||||
bg.position.y = 380/2;
|
bg.position.y = 600/2;
|
||||||
|
|
||||||
|
|
||||||
var colorMatrix = [1,0,0,0,
|
var colorMatrix = [1,0,0,0,
|
||||||
0,1,0,0,
|
0,1,0,0,
|
||||||
0,0,1,0,
|
0,0,1,0,
|
||||||
0,0,0,1];
|
0,0,0,1];
|
||||||
|
|
||||||
|
|
||||||
var mapTexture = new PIXI.RenderTexture(256, 256)// PIXI.Texture.fromImage("map.png");
|
var mapTexture = new PIXI.RenderTexture(800, 600);
|
||||||
|
|
||||||
var filter = new PIXI.DisplacementFilter(mapTexture);
|
var filter = new PIXI.DisplacementFilter(mapTexture);
|
||||||
|
|
||||||
var container = new PIXI.DisplayObjectContainer();
|
var container = new PIXI.DisplayObjectContainer();
|
||||||
container.position.x = 620/2;
|
container.position.x = 800/2;
|
||||||
container.position.y = 380/2;
|
container.position.y = 600/2;
|
||||||
|
|
||||||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||||
bgFront.anchor.x = 0.5;
|
bgFront.anchor.x = 0.5;
|
||||||
bgFront.anchor.y = 0.5;
|
bgFront.anchor.y = 0.5;
|
||||||
|
bgFront.filters = [blur]//, blurY];
|
||||||
container.addChild(bgFront);
|
stage.addChild(bgFront);
|
||||||
|
bgFront.position.x = 800/2;
|
||||||
|
bgFront.position.y = 600/2;
|
||||||
|
|
||||||
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
||||||
light2.anchor.x = 0.5;
|
light2.anchor.x = 0.5;
|
||||||
|
|
@ -62,26 +85,28 @@
|
||||||
container.addChild(light1);
|
container.addChild(light1);
|
||||||
|
|
||||||
var panda = PIXI.Sprite.fromImage("panda.png");
|
var panda = PIXI.Sprite.fromImage("panda.png");
|
||||||
panda.anchor.x = 0.5;
|
panda.anchor.x = 1.5;
|
||||||
panda.anchor.y = 0.5;
|
panda.anchor.y = 0.5;
|
||||||
|
|
||||||
|
|
||||||
//container.addChild(panda);
|
container.addChild(panda);
|
||||||
|
|
||||||
stage.addChild(container);
|
stage.addChild(container);
|
||||||
|
|
||||||
// create a renderer instance
|
// create a renderer instance
|
||||||
|
|
||||||
renderer.view.style.position = "absolute"
|
renderer.view.style.position = "absolute"
|
||||||
renderer.view.style.width = window.innerWidth + "px";
|
//renderer.view.style.width = window.innerWidth + "px";
|
||||||
renderer.view.style.height = window.innerHeight + "px";
|
//renderer.view.style.height = window.innerHeight + "px";
|
||||||
renderer.view.style.display = "block";
|
renderer.view.style.display = "block";
|
||||||
|
|
||||||
// add render view to DOM
|
// add render view to DOM
|
||||||
document.body.appendChild(renderer.view);
|
document.body.appendChild(renderer.view);
|
||||||
|
|
||||||
|
//container.filterArea = new PIXI.Rectangle(0,0,800, 600);
|
||||||
|
//container.filters = [smart]//f, f2];
|
||||||
|
|
||||||
stage.filters = [filter];
|
//panda.filters = [f2];
|
||||||
|
|
||||||
var count = 0;
|
var count = 0;
|
||||||
var switchy = false;
|
var switchy = false;
|
||||||
|
|
@ -93,17 +118,17 @@
|
||||||
if(!switchy)
|
if(!switchy)
|
||||||
{
|
{
|
||||||
// panda.filters = [filter];//
|
// panda.filters = [filter];//
|
||||||
stage.filters = [filter];
|
container.filters = [f,blurX, blurY];
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
//panda.filters = null//.. [filter];
|
//panda.filters = null//.. [filter];
|
||||||
stage.filters = null;
|
container.filters = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.runList(stage);
|
PIXI.runList(stage);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Add a pixi Logo!
|
* Add a pixi Logo!
|
||||||
|
|
@ -124,22 +149,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
|
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
|
||||||
help.position.y = 350;
|
help.position.y = 600 - 20;
|
||||||
help.position.x = 10;
|
help.position.x = 10;
|
||||||
stage.addChild(help);
|
stage.addChild(help);
|
||||||
|
|
||||||
//stage.filters = [filter];
|
//stage.filters = [filter];
|
||||||
//stage.addChild(new PIXI.Sprite(mapTexture))
|
//stage.addChild(new PIXI.Sprite(mapTexture))
|
||||||
|
|
||||||
PIXI.runList(stage);
|
PIXI.runList(stage);
|
||||||
|
|
||||||
requestAnimFrame(animate);
|
requestAnimFrame(animate);
|
||||||
|
|
||||||
var position = new PIXI.Point( 256/2, 256/2);
|
var position = new PIXI.Point(800/2 + 200, 600/2 );
|
||||||
|
|
||||||
function animate() {
|
function animate() {
|
||||||
|
|
||||||
mapTexture.render(container, position);
|
/// mapTexture.render(container, position);
|
||||||
|
|
||||||
|
// console.log(PIXI.frameBufferPool.length);
|
||||||
|
|
||||||
filter.scale.x = Math.sin(count) * 100;
|
filter.scale.x = Math.sin(count) * 100;
|
||||||
filter.scale.y = Math.cos(count) * 100;
|
filter.scale.y = Math.cos(count) * 100;
|
||||||
|
|
@ -154,11 +181,16 @@
|
||||||
|
|
||||||
count += 0.1;
|
count += 0.1;
|
||||||
|
|
||||||
|
blurX.blur = 1/256;
|
||||||
|
blurY.blur = 1/256;
|
||||||
// filter.matrix = colorMatrix;
|
// filter.matrix = colorMatrix;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
renderer.render(stage);
|
renderer.render(stage);
|
||||||
|
// f.renderTex();
|
||||||
|
// f.render();
|
||||||
|
|
||||||
requestAnimFrame( animate );
|
requestAnimFrame( animate );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
/**
|
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.MaskFilter = function(graphics)
|
|
||||||
{
|
|
||||||
// the graphics data that will be used for filtering
|
|
||||||
this.graphics;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -92,6 +92,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
|
||||||
if(filterBlock.filterPasses.length > 1)
|
if(filterBlock.filterPasses.length > 1)
|
||||||
{
|
{
|
||||||
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
||||||
|
|
||||||
this.vertexArray[0] = 0;
|
this.vertexArray[0] = 0;
|
||||||
|
|
@ -109,8 +110,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
||||||
// nnow set the uvs..
|
// nnow set the uvs..
|
||||||
this.uvArray[2] = filterArea.width/this.width;
|
this.uvArray[2] = filterArea.width/this.width;
|
||||||
|
|
@ -124,6 +124,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
|
||||||
var outputTexture = this.texturePool.pop();
|
var outputTexture = this.texturePool.pop();
|
||||||
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
|
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
|
||||||
|
|
||||||
|
// need to clear this FBO as it may have some left over elements from a prvious filter.
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
|
|
@ -132,8 +133,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
|
||||||
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
|
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
|
||||||
{
|
{
|
||||||
var filterPass = filterBlock.filterPasses[i];
|
var filterPass = filterBlock.filterPasses[i];
|
||||||
|
|
||||||
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
|
||||||
|
|
||||||
// set texture
|
// set texture
|
||||||
|
|
@ -288,28 +288,6 @@ PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, width, heig
|
||||||
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
||||||
}
|
}
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.applyPassiveFilter = function(filter)
|
|
||||||
{
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
if(!filter.shader)
|
|
||||||
{
|
|
||||||
var shader = new PIXI.PixiShader();
|
|
||||||
|
|
||||||
shader.fragmentSrc = filter.fragmentSrc;
|
|
||||||
shader.uniforms = filter.uniforms;
|
|
||||||
shader.init();
|
|
||||||
|
|
||||||
filter.shader = shader;
|
|
||||||
}
|
|
||||||
|
|
||||||
var shader = filter.shader;
|
|
||||||
|
|
||||||
// set the shader
|
|
||||||
gl.useProgram(shader.program);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
|
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
|
||||||
{
|
{
|
||||||
var gl = PIXI.gl;
|
var gl = PIXI.gl;
|
||||||
|
|
|
||||||
|
|
@ -1,145 +0,0 @@
|
||||||
/**
|
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.Filter = function()
|
|
||||||
{
|
|
||||||
// build a program
|
|
||||||
/*
|
|
||||||
this.vertexSrc = [
|
|
||||||
"attribute vec2 aVertexPosition;",
|
|
||||||
"attribute vec2 aTextureCoord;",
|
|
||||||
|
|
||||||
"uniform vec2 projectionVector;",
|
|
||||||
"uniform vec2 dimensions;",
|
|
||||||
"uniform vec2 offsetVector;",
|
|
||||||
|
|
||||||
"varying vec2 vTextureCoord;",
|
|
||||||
"const vec2 center = vec2(-1.0, 1.0);",
|
|
||||||
|
|
||||||
"void main(void) {",
|
|
||||||
|
|
||||||
"vec2 tempVector = aVertexPosition;",
|
|
||||||
"tempVector *= dimensions;",
|
|
||||||
|
|
||||||
"tempVector.y -= dimensions.y;",
|
|
||||||
"tempVector += offsetVector;",
|
|
||||||
|
|
||||||
"tempVector /= projectionVector;",
|
|
||||||
|
|
||||||
"tempVector *= 2.0;",
|
|
||||||
|
|
||||||
"tempVector += center;",
|
|
||||||
|
|
||||||
"gl_Position = vec4( tempVector, 0.0, 1.0);",
|
|
||||||
"vTextureCoord = aTextureCoord;",
|
|
||||||
"}"
|
|
||||||
];*/
|
|
||||||
|
|
||||||
this.vertexSrc = [
|
|
||||||
"attribute vec2 aVertexPosition;",
|
|
||||||
"attribute vec2 aTextureCoord;",
|
|
||||||
"attribute float aColor;",
|
|
||||||
|
|
||||||
"uniform vec2 projectionVector;",
|
|
||||||
"uniform vec2 offsetVector;",
|
|
||||||
"varying vec2 vTextureCoord;",
|
|
||||||
|
|
||||||
"varying float vColor;",
|
|
||||||
"const vec2 center = vec2(-1.0, 1.0);",
|
|
||||||
"void main(void) {",
|
|
||||||
"gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);",
|
|
||||||
"vTextureCoord = aTextureCoord;",
|
|
||||||
"vColor = aColor;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
this.fragmentSrc = [
|
|
||||||
"precision lowp float;",
|
|
||||||
"varying vec2 vTextureCoord;",
|
|
||||||
"uniform sampler2D uSampler;",
|
|
||||||
|
|
||||||
"void main(void) {",
|
|
||||||
"gl_FragColor = texture2D(uSampler, vTextureCoord).grba;",
|
|
||||||
"}"
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
// build program
|
|
||||||
this.program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
|
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
// get and store the uniforms for the shader
|
|
||||||
this.uSampler = gl.getUniformLocation(this.program, "uSampler");
|
|
||||||
this.projectionVector = gl.getUniformLocation(this.program, "projectionVector");
|
|
||||||
this.offsetVector = gl.getUniformLocation(this.program, "offsetVector");
|
|
||||||
//this.dimensions = gl.getUniformLocation(this.program, "dimensions");
|
|
||||||
|
|
||||||
// get and store the attributes
|
|
||||||
this.aVertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
|
|
||||||
this.aTextureCoord = gl.getAttribLocation(this.program, "aTextureCoord");
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.Filter.prototype.begin = function()
|
|
||||||
{
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
|
||||||
|
|
||||||
var filterArea = this.target.filterArea;
|
|
||||||
|
|
||||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
|
|
||||||
|
|
||||||
// set view port
|
|
||||||
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
// update projection
|
|
||||||
gl.uniform2f(PIXI.currentShader.projectionVector, filterArea.width/2, -filterArea.height/2);
|
|
||||||
gl.uniform2f(PIXI.currentShader.offsetVector, -filterArea.x, -filterArea.y);
|
|
||||||
|
|
||||||
gl.colorMask(true, true, true, true);
|
|
||||||
gl.clearColor(0,0,0, 0);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.Filter.prototype.end = function(x, y, offsetX, offsetY)
|
|
||||||
{
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
// set the filter proram..
|
|
||||||
gl.useProgram(this.program);
|
|
||||||
|
|
||||||
var filterArea = this.target.filterArea;
|
|
||||||
|
|
||||||
// set the uniforms..
|
|
||||||
gl.uniform2f(this.projectionVector, x, y)
|
|
||||||
gl.uniform2f(this.offsetVector, filterArea.x - offsetX, -(filterArea.y-offsetY))
|
|
||||||
gl.uniform2f(this.dimensions, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
// bind the buffers..
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
||||||
gl.vertexAttribPointer(this.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
|
||||||
gl.vertexAttribPointer(this.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
||||||
|
|
||||||
// set texture
|
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
|
||||||
|
|
||||||
// draw the filter...
|
|
||||||
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
|
||||||
|
|
||||||
gl.useProgram(PIXI.defaultShader.program);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// API
|
|
||||||
|
|
@ -1,365 +0,0 @@
|
||||||
/**
|
|
||||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
PIXI.FilterManager = function()
|
|
||||||
{
|
|
||||||
this.filterStack = [];
|
|
||||||
this.texturePool = [];
|
|
||||||
|
|
||||||
this.offsetX = 0;
|
|
||||||
this.offsetY = 0;
|
|
||||||
|
|
||||||
this.initShaderBuffers();
|
|
||||||
}
|
|
||||||
|
|
||||||
// API
|
|
||||||
|
|
||||||
PIXI.FilterManager.prototype.begin = function(projection, buffer)
|
|
||||||
{
|
|
||||||
this.width = projection.x * 2;
|
|
||||||
this.height = -projection.y * 2;
|
|
||||||
this.buffer = buffer;
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.FilterManager.prototype.pushFilter = function(filterBlock)
|
|
||||||
{
|
|
||||||
|
|
||||||
// filter program
|
|
||||||
var filter = filterBlock.data[0];
|
|
||||||
|
|
||||||
this.offsetX += filterBlock.target.filterArea.x;
|
|
||||||
this.offsetY += filterBlock.target.filterArea.y;
|
|
||||||
|
|
||||||
this.filterStack.push(filterBlock);
|
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
var texture = this.texturePool.pop();
|
|
||||||
if(!texture)texture = new PIXI.FilterTexture();
|
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
|
|
||||||
|
|
||||||
this.getBounds(filterBlock.target);
|
|
||||||
|
|
||||||
var filterArea = filterBlock.target.filterArea;
|
|
||||||
|
|
||||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
|
|
||||||
|
|
||||||
// set view port
|
|
||||||
gl.viewport(0, 0, filterArea.width, filterArea.height);
|
|
||||||
|
|
||||||
//PIXI.currentArea = filterArea
|
|
||||||
|
|
||||||
PIXI.projection.x = filterArea.width/2;
|
|
||||||
PIXI.projection.y = -filterArea.height/2;
|
|
||||||
|
|
||||||
PIXI.offset.x = -filterArea.x;
|
|
||||||
PIXI.offset.y = -filterArea.y;
|
|
||||||
|
|
||||||
// update projection
|
|
||||||
gl.uniform2f(PIXI.currentShader.projectionVector, filterArea.width/2, -filterArea.height/2);
|
|
||||||
gl.uniform2f(PIXI.currentShader.offsetVector, -filterArea.x, -filterArea.y);
|
|
||||||
//PIXI.primitiveProgram
|
|
||||||
|
|
||||||
gl.colorMask(true, true, true, true);
|
|
||||||
gl.clearColor(0,0,0, 0);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
//filter.texture = texture;
|
|
||||||
filterBlock._glFilterTexture = texture;
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.FilterManager.prototype.popFilter = function()
|
|
||||||
{
|
|
||||||
var filterBlock = this.filterStack.pop();
|
|
||||||
var filter = filterBlock.data[0];
|
|
||||||
|
|
||||||
//console.log( this.offsetY);
|
|
||||||
this.offsetX -= filterBlock.target.filterArea.x;
|
|
||||||
this.offsetY -= filterBlock.target.filterArea.y;
|
|
||||||
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
var sizeX = this.width;
|
|
||||||
var sizeY = this.height;
|
|
||||||
|
|
||||||
var offsetX = 0;
|
|
||||||
var offsetY = 0;
|
|
||||||
|
|
||||||
var buffer = this.buffer;
|
|
||||||
|
|
||||||
// time to render the filters texture to the previous scene
|
|
||||||
if(this.filterStack.length === 0)
|
|
||||||
{
|
|
||||||
gl.colorMask(true, true, true, false);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
var currentFilter = this.filterStack[this.filterStack.length-1];
|
|
||||||
var filterArea = currentFilter.target.filterArea;
|
|
||||||
|
|
||||||
sizeX = filterArea.width;
|
|
||||||
sizeY = filterArea.height;
|
|
||||||
|
|
||||||
offsetX = filterArea.x;
|
|
||||||
offsetY = filterArea.y;
|
|
||||||
|
|
||||||
buffer = currentFilter._glFilterTexture.frameBuffer;
|
|
||||||
}
|
|
||||||
|
|
||||||
gl.viewport(0, 0, sizeX, sizeY);
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
|
|
||||||
|
|
||||||
///////
|
|
||||||
if(!filter.shader)
|
|
||||||
{
|
|
||||||
//filter.shader = new PIXI.Filter();
|
|
||||||
|
|
||||||
var shader = new PIXI.PixiShader();
|
|
||||||
|
|
||||||
shader.fragmentSrc = filter.fragmentSrc;
|
|
||||||
shader.uniforms = filter.uniforms;
|
|
||||||
shader.init();
|
|
||||||
|
|
||||||
filter.shader = shader
|
|
||||||
//filter.shader.target = filter.target;
|
|
||||||
}
|
|
||||||
|
|
||||||
var shader = filter.shader;
|
|
||||||
var filterArea = filterBlock.target.filterArea;
|
|
||||||
|
|
||||||
// set the shader
|
|
||||||
gl.useProgram(shader.program);
|
|
||||||
// set the uniforms..
|
|
||||||
|
|
||||||
PIXI.projection.x = sizeX/2;
|
|
||||||
PIXI.projection.y = -sizeY/2;
|
|
||||||
|
|
||||||
gl.uniform2f(shader.projectionVector, sizeX/2, -sizeY/2);
|
|
||||||
gl.uniform2f(shader.offsetVector, 0,0)
|
|
||||||
|
|
||||||
shader.syncUniforms();
|
|
||||||
|
|
||||||
PIXI.offset.x = offsetX;
|
|
||||||
PIXI.offset.y = offsetY;
|
|
||||||
|
|
||||||
var x = filterArea.x-offsetX;
|
|
||||||
var y = filterArea.y-offsetY;
|
|
||||||
|
|
||||||
// bind the buffers..
|
|
||||||
// make sure to flip the y!
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
||||||
|
|
||||||
this.vertexArray[0] = x;
|
|
||||||
this.vertexArray[1] = y + filterArea.height;
|
|
||||||
|
|
||||||
this.vertexArray[2] = x + filterArea.width;
|
|
||||||
this.vertexArray[3] = y + filterArea.height;
|
|
||||||
|
|
||||||
this.vertexArray[4] = x;
|
|
||||||
this.vertexArray[5] = y;
|
|
||||||
|
|
||||||
this.vertexArray[6] = x + filterArea.width;
|
|
||||||
this.vertexArray[7] = y;
|
|
||||||
|
|
||||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
|
|
||||||
|
|
||||||
|
|
||||||
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
|
||||||
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
||||||
|
|
||||||
// set texture
|
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, filterBlock._glFilterTexture.texture);
|
|
||||||
|
|
||||||
// draw the filter...
|
|
||||||
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
|
|
||||||
|
|
||||||
// now restore the regular shader..
|
|
||||||
gl.useProgram(PIXI.defaultShader.program);
|
|
||||||
gl.uniform2f(PIXI.currentShader.projectionVector, sizeX/2, -sizeY/2);
|
|
||||||
gl.uniform2f(PIXI.currentShader.offsetVector, -offsetX, -offsetY);
|
|
||||||
|
|
||||||
// return the texture to the pool
|
|
||||||
|
|
||||||
this.texturePool.push(filterBlock._glFilterTexture);
|
|
||||||
filterBlock._glFilterTexture = null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.FilterManager.prototype.initShaderBuffers = function()
|
|
||||||
{
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
// create some buffers
|
|
||||||
this.vertexBuffer = gl.createBuffer();
|
|
||||||
this.uvBuffer = gl.createBuffer();
|
|
||||||
this.indexBuffer = gl.createBuffer();
|
|
||||||
|
|
||||||
// bind and upload the vertexs..
|
|
||||||
// keep a refferance to the vertexFloatData..
|
|
||||||
this.vertexArray = new Float32Array([0.0, 0.0,
|
|
||||||
1.0, 0.0,
|
|
||||||
0.0, 1.0,
|
|
||||||
1.0, 1.0]);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
||||||
gl.bufferData(
|
|
||||||
gl.ARRAY_BUFFER,
|
|
||||||
this.vertexArray,
|
|
||||||
gl.STATIC_DRAW);
|
|
||||||
|
|
||||||
|
|
||||||
// bind and upload the uv buffer
|
|
||||||
this.uvArray = new Float32Array([0.0, 0.0,
|
|
||||||
1.0, 0.0,
|
|
||||||
0.0, 1.0,
|
|
||||||
1.0, 1.0]);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
|
|
||||||
gl.bufferData(
|
|
||||||
gl.ARRAY_BUFFER,
|
|
||||||
this.uvArray,
|
|
||||||
gl.STATIC_DRAW);
|
|
||||||
|
|
||||||
// bind and upload the index
|
|
||||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
||||||
gl.bufferData(
|
|
||||||
gl.ELEMENT_ARRAY_BUFFER,
|
|
||||||
new Uint16Array([0, 1, 2, 1, 3, 2]),
|
|
||||||
gl.STATIC_DRAW);
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.FilterManager.prototype.getBounds = function(displayObject)
|
|
||||||
{
|
|
||||||
// time to get the width and height of the object!
|
|
||||||
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest;
|
|
||||||
var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4;
|
|
||||||
|
|
||||||
var tempObject = displayObject.first;
|
|
||||||
var testObject = displayObject.last._iNext;
|
|
||||||
|
|
||||||
var maxX = -Infinity;
|
|
||||||
var maxY = -Infinity;
|
|
||||||
|
|
||||||
var minX = Infinity;
|
|
||||||
var minY = Infinity;
|
|
||||||
|
|
||||||
do
|
|
||||||
{
|
|
||||||
// TODO can be optimized! - what if there is no scale / rotation?
|
|
||||||
|
|
||||||
if(tempObject instanceof PIXI.Sprite)
|
|
||||||
{
|
|
||||||
width = tempObject.texture.frame.width;
|
|
||||||
height = tempObject.texture.frame.height;
|
|
||||||
|
|
||||||
// TODO trim??
|
|
||||||
aX = tempObject.anchor.x;
|
|
||||||
aY = tempObject.anchor.y;
|
|
||||||
w0 = width * (1-aX);
|
|
||||||
w1 = width * -aX;
|
|
||||||
|
|
||||||
h0 = height * (1-aY);
|
|
||||||
h1 = height * -aY;
|
|
||||||
|
|
||||||
doTest = true;
|
|
||||||
}
|
|
||||||
else if(tempObject instanceof PIXI.Graphics)
|
|
||||||
{
|
|
||||||
tempObject.updateFilterBounds();
|
|
||||||
|
|
||||||
var bounds = tempObject.bounds;
|
|
||||||
|
|
||||||
width = bounds.width;
|
|
||||||
height = bounds.height;
|
|
||||||
|
|
||||||
w0 = bounds.x
|
|
||||||
w1 = bounds.x + bounds.width;
|
|
||||||
|
|
||||||
h0 = bounds.y
|
|
||||||
h1 = bounds.y + bounds.height;
|
|
||||||
|
|
||||||
doTest = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(doTest)
|
|
||||||
{
|
|
||||||
worldTransform = tempObject.worldTransform;
|
|
||||||
|
|
||||||
a = worldTransform[0];
|
|
||||||
b = worldTransform[3];
|
|
||||||
c = worldTransform[1];
|
|
||||||
d = worldTransform[4];
|
|
||||||
tx = worldTransform[2];
|
|
||||||
ty = worldTransform[5];
|
|
||||||
|
|
||||||
x1 = a * w1 + c * h1 + tx;
|
|
||||||
y1 = d * h1 + b * w1 + ty;
|
|
||||||
|
|
||||||
x2 = a * w0 + c * h1 + tx;
|
|
||||||
y2 = d * h1 + b * w0 + ty;
|
|
||||||
|
|
||||||
x3 = a * w0 + c * h0 + tx;
|
|
||||||
y3 = d * h0 + b * w0 + ty;
|
|
||||||
|
|
||||||
x4 = a * w1 + c * h0 + tx;
|
|
||||||
y4 = d * h0 + b * w1 + ty;
|
|
||||||
|
|
||||||
minX = x1 < minX ? x1 : minX;
|
|
||||||
minX = x2 < minX ? x2 : minX;
|
|
||||||
minX = x3 < minX ? x3 : minX;
|
|
||||||
minX = x4 < minX ? x4 : minX;
|
|
||||||
|
|
||||||
minY = y1 < minY ? y1 : minY;
|
|
||||||
minY = y2 < minY ? y2 : minY;
|
|
||||||
minY = y3 < minY ? y3 : minY;
|
|
||||||
minY = y4 < minY ? y4 : minY;
|
|
||||||
|
|
||||||
maxX = x1 > maxX ? x1 : maxX;
|
|
||||||
maxX = x2 > maxX ? x2 : maxX;
|
|
||||||
maxX = x3 > maxX ? x3 : maxX;
|
|
||||||
maxX = x4 > maxX ? x4 : maxX;
|
|
||||||
|
|
||||||
maxY = y1 > maxY ? y1 : maxY;
|
|
||||||
maxY = y2 > maxY ? y2 : maxY;
|
|
||||||
maxY = y3 > maxY ? y3 : maxY;
|
|
||||||
maxY = y4 > maxY ? y4 : maxY;
|
|
||||||
}
|
|
||||||
|
|
||||||
doTest = false;
|
|
||||||
tempObject = tempObject._iNext;
|
|
||||||
}
|
|
||||||
while(tempObject != testObject)
|
|
||||||
|
|
||||||
displayObject.filterArea.x = minX;
|
|
||||||
displayObject.filterArea.y = minY;
|
|
||||||
displayObject.filterArea.width = maxX - minX;
|
|
||||||
displayObject.filterArea.height = maxY - minY;
|
|
||||||
}
|
|
||||||
|
|
||||||
PIXI.FilterTexture = function()
|
|
||||||
{
|
|
||||||
var gl = PIXI.gl;
|
|
||||||
|
|
||||||
// next time to create a frame buffer and texture
|
|
||||||
this.frameBuffer = gl.createFramebuffer();
|
|
||||||
this.texture = gl.createTexture();
|
|
||||||
|
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
|
|
||||||
|
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
|
|
||||||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue