jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Filter Tweaks

Browse source 
Displacement Map Filter tweaked
Demos created
This commit is contained in:
Mat Groves 2013-11-01 13:51:25 +00:00
parent 429851493c
commit a46b74f8ca
40 changed files with 1809 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Gruntfile.js
View file

@ -34,6 +34,8 @@ module.exports = function(grunt) {
'<%= dirs.src %>/utils/Polyk.js',
'<%= dirs.src %>/renderers/webgl/WebGLShaders.js',
'<%= dirs.src %>/renderers/webgl/PixiShader.js',
'<%= dirs.src %>/renderers/webgl/StripShader.js',
'<%= dirs.src %>/renderers/webgl/PrimitiveShader.js',
'<%= dirs.src %>/renderers/webgl/WebGLGraphics.js',
'<%= dirs.src %>/renderers/webgl/WebGLRenderer.js',
'<%= dirs.src %>/renderers/webgl/WebGLBatch.js',
@ -56,10 +58,11 @@ module.exports = function(grunt) {
'<%= dirs.src %>/loaders/ImageLoader.js',
'<%= dirs.src %>/loaders/BitmapFontLoader.js',
'<%= dirs.src %>/loaders/SpineLoader.js',
'<%= dirs.src %>/filters/AbstractFilter.js',
'<%= dirs.src %>/filters/ColorMatrixFilter.js',
'<%= dirs.src %>/filters/GreyFilter.js',
'<%= dirs.src %>/filters/DisplacementFilter.js',
'<%= dirs.src %>/filters/PixelateFilter.js',
'<%= dirs.src %>/filters/BlurXFilter.js',
'<%= dirs.src %>/filters/BlurYFilter.js',
'<%= dirs.src %>/filters/BlurFilter.js',

812
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

6
bin/pixi.dev.js.map
View file

File diff suppressed because one or more lines are too long

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

1
examples/example 13 - Graphics/index.html
View file

@ -38,7 +38,6 @@
var graphics = new PIXI.Graphics();
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);

BIN
examples/example 15 - Filters/displacementMAP.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
examples/example 15 - Filters/displacement_BG.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 60 KiB

Before After
Before After

0
examples/example 15 - Filters/displacement_fish1.jpg → examples/example 15 - Filters/displacement_fish1.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

0
examples/example 15 - Filters/displacement_fish2.jpg → examples/example 15 - Filters/displacement_fish2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Before After
Before After

BIN
examples/example 15 - Filters/displacement_fish3.jpg
View file

Binary file not shown.

BIN
examples/example 15 - Filters/displacement_fish3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

0
examples/example 15 - Filters/displacement_fish4.jpg → examples/example 15 - Filters/displacement_fish4.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

BIN
examples/example 15 - Filters/displacement_map.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

161
examples/example 15 - Filters/indexAll.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(630, 410);
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
var pondContainer = new PIXI.DisplayObjectContainer();
stage.addChild(pondContainer);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
pondContainer.addChild(bg);
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
//littleDudes.position.y = 100;
var padding = 100;
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
var fishs = [];
for (var i = 0; i < 20; i++)
{
var fishId = i % 4;
fishId += 1;
//console.log("displacement_fish"+fishId+".png")
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
fish.anchor.x = fish.anchor.y = 0.5;
pondContainer.addChild(fish);
//var direction
//var speed =
fish.direction = Math.random() * Math.PI * 2;
fish.speed = 2 + Math.random() * 2;
fish.turnSpeed = Math.random() - 0.8;
fish.position.x = Math.random() * bounds.width;
fish.position.y = Math.random() * bounds.height;
//fish.speed = new PIXI.Point(0,0)
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
fishs.push(fish);
};
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
overlay.alpha = 0.2
pondContainer.addChild(overlay);
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
pondContainer.filters = [displacementFilter];
displacementFilter.scale.x = 50;
displacementFilter.scale.y = 50;
var count = 0;
var switchy = false;
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.anchor.y = 1;
logo.position.x = 630
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 400;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
function animate() {
count += 0.1;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count * 0.8) ;
for (var i = 0; i < fishs.length; i++)
{
var fish = fishs[i];
fish.direction += fish.turnSpeed * 0.01;
fish.position.x += Math.sin(fish.direction) * fish.speed;
fish.position.y += Math.cos(fish.direction) * fish.speed;
fish.rotation = -fish.direction - Math.PI/2;
// wrap..
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
}
displacementFilter.offset.x = count * 10//blurAmount * 40;
displacementFilter.offset.y = count * 10
overlay.tilePosition.x = count * -10//blurAmount * 40;
overlay.tilePosition.y = count * -10
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

6
examples/example 15 - Filters/indexBlur.html
View file

@ -11,7 +11,7 @@
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
<!--<script src="pixi.js"></script>-->
</head>
<body>
<script>
@ -99,8 +99,8 @@
var blurAmount2 = Math.sin(count) ;
blurFilter1.blur = 1/300 * (blurAmount);
blurFilter2.blur = 1/300 * (blurAmount2);
blurFilter1.blur = 20 * (blurAmount);
blurFilter2.blur = 20 * (blurAmount2);
renderer.render(stage);
requestAnimFrame( animate );
}

161
examples/example 15 - Filters/indexDisplacement.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(630, 410);
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
var pondContainer = new PIXI.DisplayObjectContainer();
stage.addChild(pondContainer);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
pondContainer.addChild(bg);
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
//littleDudes.position.y = 100;
var padding = 100;
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
var fishs = [];
for (var i = 0; i < 20; i++)
{
var fishId = i % 4;
fishId += 1;
//console.log("displacement_fish"+fishId+".png")
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
fish.anchor.x = fish.anchor.y = 0.5;
pondContainer.addChild(fish);
//var direction
//var speed =
fish.direction = Math.random() * Math.PI * 2;
fish.speed = 2 + Math.random() * 2;
fish.turnSpeed = Math.random() - 0.8;
fish.position.x = Math.random() * bounds.width;
fish.position.y = Math.random() * bounds.height;
//fish.speed = new PIXI.Point(0,0)
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
fishs.push(fish);
};
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
overlay.alpha = 0.2
pondContainer.addChild(overlay);
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
pondContainer.filters = [displacementFilter];
displacementFilter.scale.x = 50;
displacementFilter.scale.y = 50;
var count = 0;
var switchy = false;
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.anchor.y = 1;
logo.position.x = 630
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 400;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
function animate() {
count += 0.1;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count * 0.8) ;
for (var i = 0; i < fishs.length; i++)
{
var fish = fishs[i];
fish.direction += fish.turnSpeed * 0.01;
fish.position.x += Math.sin(fish.direction) * fish.speed;
fish.position.y += Math.cos(fish.direction) * fish.speed;
fish.rotation = -fish.direction - Math.PI/2;
// wrap..
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
}
displacementFilter.offset.x = count * 10//blurAmount * 40;
displacementFilter.offset.y = count * 10
overlay.tilePosition.x = count * -10//blurAmount * 40;
overlay.tilePosition.y = count * -10
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

162
examples/example 15 - Filters/indexDisplacement_2.html Normal file
View file

@ -0,0 +1,162 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(630, 410);
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
var pondContainer = new PIXI.DisplayObjectContainer();
stage.addChild(pondContainer);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
pondContainer.addChild(bg);
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
//littleDudes.position.y = 100;
var padding = 100;
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
var fishs = [];
for (var i = 0; i < 20; i++)
{
var fishId = i % 4;
fishId += 1;
//console.log("displacement_fish"+fishId+".png")
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
fish.anchor.x = fish.anchor.y = 0.5;
pondContainer.addChild(fish);
//var direction
//var speed =
fish.direction = Math.random() * Math.PI * 2;
fish.speed = 2 + Math.random() * 2;
fish.turnSpeed = Math.random() - 0.8;
fish.position.x = Math.random() * bounds.width;
fish.position.y = Math.random() * bounds.height;
//fish.speed = new PIXI.Point(0,0)
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
fishs.push(fish);
};
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
overlay.alpha = 0.2
pondContainer.addChild(overlay);
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
var pixelFilter = new PIXI.PixelateFilter();
pixelFilter.size.x = pixelFilter.size.y = 3;
pondContainer.filters = [displacementFilter, pixelFilter];
displacementFilter.scale.x = 50;
displacementFilter.scale.y = 50;
var count = 0;
var switchy = false;
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.anchor.y = 1;
logo.position.x = 630
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 400;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
function animate() {
count += 0.1;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count * 0.8) ;
for (var i = 0; i < fishs.length; i++)
{
var fish = fishs[i];
fish.direction += fish.turnSpeed * 0.01;
fish.position.x += Math.sin(fish.direction) * fish.speed;
fish.position.y += Math.cos(fish.direction) * fish.speed;
fish.rotation = -fish.direction - Math.PI/2;
// wrap..
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
}
displacementFilter.offset.x = count * 10//blurAmount * 40;
displacementFilter.offset.y = count * 10
overlay.tilePosition.x = count * -10//blurAmount * 40;
overlay.tilePosition.y = count * -10
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

BIN
examples/example 15 - Filters/zeldaWaves.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

59
examples/example 16 - Displacement/index.html
View file

@ -23,6 +23,7 @@
<script src="../../src/pixi/filters/BlurFilter.js"></script>
<script src="../../src/pixi/filters/BlurYFilter.js"></script>
<script src="../../src/pixi/filters/SmartBlurFilter.js"></script>
<script src="../../src/pixi/filters/PixelateFilter.js"></script>
</head>
<body>
<script>
@ -30,11 +31,11 @@
var renderer = PIXI.autoDetectRenderer(800, 600);
var f2 = new PIXI.BlurYFilter()//new PIXI.Filter();
var f2 = new PIXI.BlurFilter()//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 smart = new PIXI.PixelateFilter();
var blur = new PIXI.BlurFilter();
@ -59,7 +60,6 @@
var mapTexture = new PIXI.RenderTexture(800, 600);
var filter = new PIXI.DisplacementFilter(mapTexture);
var container = new PIXI.DisplayObjectContainer();
container.position.x = 800/2;
@ -68,11 +68,16 @@
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
//bgFront.filters = [blur]//, blurY];
bgFront.filters = [f2]//, blurY];
//smart
var filter = new PIXI.DisplacementFilter(PIXI.Texture.fromImage("SceneRotate.jpg"));
stage.addChild(bgFront);
bgFront.position.x = 800/2;
bgFront.position.y = 600/2;
bgFront.scale.y = 0.3;
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
@ -84,7 +89,7 @@
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 1.5;
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
@ -106,7 +111,7 @@
//container.filters = [smart]//f, f2];
//panda.filters = [f2];
// container.filters = [filter]
panda.filters = [filter]//,f2]
var count = 0;
var switchy = false;
@ -116,7 +121,7 @@
if(!switchy)
{
container.filters = [f];//
container.filters = [smart];//
// container.filters = [filter]//,blurX, blurY];
}
else
@ -125,7 +130,7 @@
// container.filters = null;
}
PIXI.runList(stage);
//PIXI.runList(stage);
}
@ -153,33 +158,43 @@
stage.addChild(help);
//stage.filters = [filter];
stage.addChild(new PIXI.Sprite(mapTexture))
//stage.addChild(new PIXI.Sprite(mapTexture))
PIXI.runList(stage);
//PIXI.runList(stage);
requestAnimFrame(animate);
var position = new PIXI.Point(800/2 , 600/2 );
var position = new PIXI.Point(0, 0);
var pixelSize = new PIXI.Point(2,2);
smart.size = pixelSize;
function animate() {
mapTexture.render(container, position, true);
mapTexture.render(panda, position, true);
filter.scale.x = Math.sin(count) * 100;
filter.scale.y = Math.cos(count) * 100;
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
// filter.scale.x = Math.sin(count) * 100;
//filter.scale.y = Math.cos(count) * 100;
panda.rotation += 0.01;
// bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
panda.scale.x = 1+ Math.sin(count * 0.1) * 0.4;
panda.scale.y = (1 + Math.cos(count * 0.1) * 0.4) //* 0.2;
panda.position.x = count;
count += 0.1;
// blurX.blur = Math.sin(count) * 1/128;
pixelSize.x = 20 + Math.sin(count * 0.1) * 20;
pixelSize.y = 20 + Math.sin(count * 0.1) * 20;
var val = 16;
f2.blur = 16// * val// 0.5 * 0.5//Math.sin(count) * 1/512//128// * 2;
bgFront.scale.y = 0.5 //+ Math.sin(count * 0.1) * 0.4;
bgFront.scale.x = 0.5 //+ Math.sin(count * 0.2) * 0.4;
// blurY.blur = Math.cos(count) * 1/128;
// filter.matrix = colorMatrix;

367
pixi.sublime-workspace
View file

@ -3,6 +3,10 @@
{
"selected_items":
[
[
"fil",
"filter"
],
[
"pro",
"prototype"
@ -11,10 +15,6 @@
"for",
"for for (…) {…}"
],
[
"fil",
"filters"
],
[
"blu",
"blurX"
@ -63,7 +63,7 @@
"file": "examples/example 16 - Displacement/index.html",
"settings":
{
"buffer_size": 4901,
"buffer_size": 4917,
"line_ending": "Unix"
}
},
@ -71,7 +71,7 @@
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 852,
"buffer_size": 986,
"line_ending": "Unix"
}
},
@ -79,7 +79,7 @@
"file": "src/pixi/filters/DisplacementFilter.js",
"settings":
{
"buffer_size": 1698,
"buffer_size": 1856,
"line_ending": "Unix"
}
},
@ -87,7 +87,31 @@
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25104,
"buffer_size": 25077,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/textures/RenderTexture.js",
"settings":
{
"buffer_size": 6698,
"line_ending": "Unix"
}
},
{
"file": "examples/example 15 - Filters/indexBlur.html",
"settings":
{
"buffer_size": 2162,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/PixelateFilter.js",
"settings":
{
"buffer_size": 1597,
"line_ending": "Unix"
}
},
@ -95,7 +119,23 @@
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 11987,
"buffer_size": 12129,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/InvertFilter.js",
"settings":
{
"buffer_size": 1038,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/AbstractFilter.js",
"settings":
{
"buffer_size": 1168,
"line_ending": "Unix"
}
}
@ -124,20 +164,22 @@
},
"file_history":
[
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLFilterManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurXFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 16 - Displacement/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/Gruntfile.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SepiaFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/ColorMatrixFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurYFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurXFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLFilterManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 16 - Displacement/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLRenderGroup.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/Gruntfile.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObject.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/ColorMatrixFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/DisplacementFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/GreyFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/InvertFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SepiaFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/DisplayObject.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlur.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/filters/FilterManager.js",
@ -172,6 +214,15 @@
"case_sensitive": false,
"find_history":
[
"consol",
"BlurXFilter",
"filter",
"blurAmount",
" \n",
"console",
" \n",
"/˚˚/ console.log(PIXI.frameBufferPool.length);\n ",
"cons",
"console",
"pand",
"colorMatrix",
@ -255,7 +306,7 @@
"groups":
[
{
"selected": 0,
"selected": 3,
"sheets":
[
{
@ -263,15 +314,15 @@
"file": "examples/example 16 - Displacement/index.html",
"settings":
{
"buffer_size": 4901,
"buffer_size": 4917,
"regions":
{
},
"selection":
[
[
2608,
2608
3159,
3159
]
],
"settings":
@ -280,7 +331,7 @@
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"translation.y": 1599.0,
"zoom_level": 1.0
},
"type": "text"
@ -290,15 +341,23 @@
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 852,
"buffer_size": 986,
"regions":
{
},
"selection":
[
[
0,
0
662,
662
],
[
738,
738
],
[
778,
778
]
],
"settings":
@ -316,15 +375,191 @@
"file": "src/pixi/filters/DisplacementFilter.js",
"settings":
{
"buffer_size": 1698,
"buffer_size": 1856,
"regions":
{
},
"selection":
[
[
818,
818
1271,
1271
],
[
1355,
1355
],
[
1403,
1403
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 159.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 3,
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25077,
"regions":
{
},
"selection":
[
[
4449,
4449
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 3015.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 4,
"file": "src/pixi/textures/RenderTexture.js",
"settings":
{
"buffer_size": 6698,
"regions":
{
},
"selection":
[
[
5441,
5455
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 2750.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 5,
"file": "examples/example 15 - Filters/indexBlur.html",
"settings":
{
"buffer_size": 2162,
"regions":
{
},
"selection":
[
[
1657,
1657
]
],
"settings":
{
"syntax": "Packages/HTML/HTML.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 702.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 6,
"file": "src/pixi/filters/PixelateFilter.js",
"settings":
{
"buffer_size": 1597,
"regions":
{
},
"selection":
[
[
664,
664
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 74.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 7,
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 12129,
"regions":
{
},
"selection":
[
[
3743,
3743
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 2171.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 8,
"file": "src/pixi/filters/InvertFilter.js",
"settings":
{
"buffer_size": 1038,
"regions":
{
},
"selection":
[
[
703,
703
],
[
781,
781
],
[
823,
823
]
],
"settings":
@ -338,55 +573,27 @@
"type": "text"
},
{
"buffer": 3,
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"buffer": 9,
"file": "src/pixi/filters/AbstractFilter.js",
"settings":
{
"buffer_size": 25104,
"buffer_size": 1168,
"regions":
{
},
"selection":
[
[
3418,
3418
980,
982
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 4.0,
"translation.y": 1680.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 4,
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 11987,
"regions":
{
},
"selection":
[
[
664,
664
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 371.0,
"translation.y": 74.0,
"zoom_level": 1.0
},
"type": "text"
@ -435,6 +642,30 @@
"height": 0.0,
"selected_items":
[
[
"webglr",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
],
[
"displayobjectco",
"src/pixi/display/DisplayObjectContainer.js"
],
[
"displ",
"test/unit/DisplayObjectContainer.js"
],
[
"pixela",
"src/pixi/filters/PixelateFilter.js"
],
[
"indexblur",
"examples/example 15 - Filters/indexBlur.html"
],
[
"render",
"src/pixi/textures/RenderTexture.js"
],
[
"webglrend",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
@ -443,10 +674,6 @@
"greyfil",
"src/pixi/filters/GreyFilter.js"
],
[
"displ",
"src/pixi/display/DisplayObject.js"
],
[
"grun",
"Gruntfile.js"
@ -520,11 +747,15 @@
},
"select_project":
{
"height": 0.0,
"height": 500.0,
"selected_items":
[
[
"",
"/Users/matgroves/Dropbox/Development/html/workspace/Project Awesome/js/moments.sublime-project"
]
],
"width": 0.0
"width": 380.0
},
"show_minimap": true,
"show_open_files": false,

18
src/pixi/filters/AbstractFilter.js Normal file
View file

@ -0,0 +1,18 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.AbstractFilter = function(fragmentSrc, unifroms)
{
this.passes = [this];
this.dirty = true;
this.padding = 0;
// set the uniforms
this.uniforms = unifroms || {};
this.fragmentSrc = fragmentSrc || [];
}

2
src/pixi/filters/BlurFilter.js
View file

@ -6,7 +6,7 @@
PIXI.BlurFilter = function()
{
this.blurXFilter = new PIXI.BlurXFilter();
this.blurYFilter = new PIXI.BlurYFilter();

12
src/pixi/filters/BlurXFilter.js
View file

@ -6,6 +6,8 @@
PIXI.BlurXFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -38,11 +40,17 @@ PIXI.BlurXFilter = function()
];
}
PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter;
Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value;
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
this.uniforms.blur.value = value;
this.dirty = true;
this.uniforms.blur.value = (1/7000) * value;
}
});

10
src/pixi/filters/BlurYFilter.js
View file

@ -6,6 +6,8 @@
PIXI.BlurYFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -38,11 +40,15 @@ PIXI.BlurYFilter = function()
];
}
PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter;
Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value;
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
this.uniforms.blur.value = value;
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

4
src/pixi/filters/ColorMatrixFilter.js
View file

@ -4,6 +4,8 @@
PIXI.ColorMatrixFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -29,6 +31,8 @@ PIXI.ColorMatrixFilter = function()
}
PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
get: function() {

61
src/pixi/filters/DisplacementFilter.js
View file

@ -6,16 +6,35 @@
PIXI.DisplacementFilter = function(texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
texture.baseTexture._powerOf2 = true;
// set the uniforms
//console.log()
this.uniforms = {
displacementMap: {type: 'sampler2D', value:texture},
scale: {type: 'f2', value:{x:30, y:30}},
mapDimensions: {type: 'f2', value:{x:texture.width, y:texture.height}}
offset: {type: 'f2', value:{x:0, y:0}},
mapDimensions: {type: 'f2', value:{x:1, y:5112}},
dimensions: {type: 'f4', value:[0,0,0,0]}
};
if(texture.baseTexture.hasLoaded)
{
this.uniforms.mapDimensions.value.x = texture.width;
this.uniforms.mapDimensions.value.y = texture.height;
}
else
{
this.boundLoadedFunction = this.onTextureLoaded.bind(this);
texture.baseTexture.on("loaded", this.boundLoadedFunction);
}
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
@ -23,20 +42,26 @@ PIXI.DisplacementFilter = function(texture)
"uniform sampler2D displacementMap;",
"uniform sampler2D uSampler;",
"uniform vec2 scale;",
"uniform vec2 offset;",
"uniform vec4 dimensions;",
"uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
"const vec2 textureDimensions = vec2(800.0, 600.0);",
// "const vec2 textureDimensions = vec2(750.0, 750.0);",
"void main(void) {",
"vec2 mapCords = vTextureCoord.xy;",
// "mapCords -= ;",
// "mapCords.y *= -1.0;",
// "mapCords.y += 1.0;",
"mapCords += (dimensions.zw + offset)/ dimensions.xy ;",
"mapCords.y *= -1.0;",
"mapCords.y += 1.0;",
"vec2 matSample = texture2D(displacementMap, mapCords).xy;",
"matSample -= 0.5;",
"matSample *= scale;",
"matSample /= textureDimensions;",
"matSample /= mapDimensions;",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);",
"vec2 cord = vTextureCoord;",
//"gl_FragColor = texture2D(displacementMap, cord);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
@ -44,6 +69,19 @@ PIXI.DisplacementFilter = function(texture)
}
PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter;
PIXI.DisplacementFilter.prototype.onTextureLoaded = function()
{
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction)
}
Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', {
get: function() {
return this.uniforms.displacementMap.value;
@ -60,4 +98,13 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', {
set: function(value) {
this.uniforms.scale.value = value;
}
});
Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', {
get: function() {
return this.uniforms.offset.value;
},
set: function(value) {
this.uniforms.offset.value = value;
}
});

5
src/pixi/filters/GreyFilter.js
View file

@ -6,6 +6,8 @@
PIXI.GreyFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -27,6 +29,9 @@ PIXI.GreyFilter = function()
];
}
PIXI.GreyFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.GreyFilter.prototype.constructor = PIXI.GreyFilter;
Object.defineProperty(PIXI.GreyFilter.prototype, 'grey', {
get: function() {
return this.uniforms.grey.value;

4
src/pixi/filters/InvertFilter.js
View file

@ -4,6 +4,8 @@
PIXI.InvertFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -27,6 +29,8 @@ PIXI.InvertFilter = function()
}
PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter;
Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
get: function() {

52
src/pixi/filters/PixelateFilter.js Normal file
View file

@ -0,0 +1,52 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.PixelateFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
invert: {type: 'f', value: 0},
dimensions: {type: 'f4', value:new Float32Array([10000, 100, 10, 10])},
pixelSize: {type: 'f2', value:{x:10, y:10}},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec2 testDim;",
"uniform vec4 dimensions;",
"uniform vec2 pixelSize;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec2 coord = vTextureCoord;",
// "vec2 dim = testDim;",
"vec2 size = dimensions.xy/pixelSize;",
"vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;",
// "color += (mod(dimensions.xy, size)/dimensions.zw;",
"gl_FragColor = texture2D(uSampler, color);",
"}"
];
}
PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter;
Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', {
get: function() {
return this.uniforms.pixelSize.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.pixelSize.value = value;
}
});

5
src/pixi/filters/SepiaFilter.js
View file

@ -7,6 +7,8 @@
PIXI.SepiaFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -31,6 +33,9 @@ PIXI.SepiaFilter = function()
}
PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter;
Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
get: function() {
return this.uniforms.sepia.value;

5
src/pixi/filters/SmartBlurFilter.js
View file

@ -6,6 +6,8 @@
PIXI.SmartBlurFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
@ -49,6 +51,9 @@ PIXI.SmartBlurFilter = function()
];
}
PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter;
Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value;

44
src/pixi/renderers/webgl/PixiShader.js
View file

@ -22,7 +22,7 @@ PIXI.PixiShader = function()
PIXI.PixiShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc || PIXI.shaderVertexSrc, this.fragmentSrc)
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc)
var gl = PIXI.gl;
@ -32,28 +32,24 @@ PIXI.PixiShader.prototype.init = function()
this.uSampler = gl.getUniformLocation(program, "uSampler");
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
//this.dimensions = gl.getUniformLocation(this.program, "dimensions");
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
// get the default shader bits!
program.vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition");
program.colorAttribute = gl.getAttribLocation(program, "aColor");
program.textureCoordAttribute = gl.getAttribLocation(program, "aTextureCoord");
program.projectionVector = gl.getUniformLocation(program, "projectionVector");
program.samplerUniform = gl.getUniformLocation(program, "uSampler");
program.offsetVector = gl.getUniformLocation(program, "offsetVector");
// add those custom shaders!
for (var key in this.uniforms)
{
// get the uniform locations..
program[key] = gl.getUniformLocation(program, key);
}
this.program = program;
}
@ -73,8 +69,14 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
if(type == "f2")
{
// console.log(this.program[key])
gl.uniform2f(this.program[key], this.uniforms[key].value.x, this.uniforms[key].value.y);
}
else if(type == "f4")
{
// console.log(this.uniforms[key].value)
gl.uniform4fv(this.program[key], this.uniforms[key].value);
}
else if(type == "mat4")
{
gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
@ -97,3 +99,21 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
PIXI.PixiShader.defaultVertexSrc = [
"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;",
"}"
];

57
src/pixi/renderers/webgl/PrimitiveShader.js Normal file
View file

@ -0,0 +1,57 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.PrimitiveShader = function()
{
// the webGL program..
this.program;
this.fragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"void main(void) {",
"gl_FragColor = vColor;",
"}"
];
this.vertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec4 aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"uniform vec2 offsetVector;",
"uniform float alpha;",
"varying vec4 vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);",
"v -= offsetVector.xyx;",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vColor = aColor * alpha;",
"}"
];
}
PIXI.PrimitiveShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
this.alpha = gl.getUniformLocation(program, "alpha");
this.program = program;
}

65
src/pixi/renderers/webgl/StripShader.js Normal file
View file

@ -0,0 +1,65 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.StripShader = function()
{
// the webGL program..
this.program;
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float alpha;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
"gl_FragColor = gl_FragColor * alpha;",
"}"
];
this.vertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying vec2 offsetVector;",
"varying float vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"v -= offsetVector.xyx;",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
];
}
PIXI.StripShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc)
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.uSampler = gl.getUniformLocation(program, "uSampler");
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
//this.dimensions = gl.getUniformLocation(this.program, "dimensions");
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
this.alpha = gl.getUniformLocation(program, "alpha");
this.program = program;
}

6
src/pixi/renderers/webgl/WebGLBatch.js
View file

@ -529,7 +529,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
//TODO optimize this!
var shaderProgram = PIXI.currentShader;
var shaderProgram = PIXI.defaultShader;
//gl.useProgram(shaderProgram);
@ -537,7 +537,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
// ok..
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
//var isDefault = (shaderProgram == PIXI.shaderProgram)
@ -549,7 +549,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvs);
}
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shaderProgram.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.texture._glTexture);

107
src/pixi/renderers/webgl/WebGLFilterManager.js
View file

@ -48,11 +48,29 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
this.getBounds(filterBlock.target);
// addpadding?
//displayObject.filterArea.x
var filterArea = filterBlock.target.filterArea;
var padidng = filter.padding;
filterArea.x -= padidng;
filterArea.y -= padidng;
filterArea.width += padidng * 2;
filterArea.height += padidng * 2;
// cap filter to screen size..
if(filterArea.x < 0)filterArea.x = 0;
if(filterArea.width > this.width)filterArea.width = this.width;
if(filterArea.y < 0)filterArea.y = 0;
if(filterArea.height > this.height)filterArea.height = this.height;
//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);
// console.log(filterArea)
// set view port
gl.viewport(0, 0, filterArea.width, filterArea.height);
@ -62,9 +80,10 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
PIXI.offset.x = -filterArea.x;
PIXI.offset.y = -filterArea.y;
//console.log(PIXI.defaultShader.projectionVector)
// update projection
gl.uniform2f(PIXI.currentShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(PIXI.currentShader.offsetVector, -filterArea.x, -filterArea.y);
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
//PIXI.primitiveProgram
gl.colorMask(true, true, true, true);
@ -143,7 +162,9 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
// draw texture..
this.applyFilterPass(filterPass, filterArea.width, filterArea.height);
//filterPass.applyFilterPass(filterArea.width, filterArea.height);
this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
// swap the textures..
var temp = inputTexture;
inputTexture = outputTexture;
@ -240,19 +261,20 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
// apply!
this.applyFilterPass(filter, sizeX, sizeY);
//filter.applyFilterPass(sizeX, sizeY);
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
// 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);
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
// return the texture to the pool
this.texturePool.push(texture);
filterBlock._glFilterTexture = null;
}
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, width, height)
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
{
// use program
var gl = PIXI.gl;
@ -276,6 +298,16 @@ PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, width, heig
gl.uniform2f(shader.projectionVector, width/2, -height/2);
gl.uniform2f(shader.offsetVector, 0,0)
if(filter.uniforms.dimensions)
{
//console.log(filter.uniforms.dimensions)
filter.uniforms.dimensions.value[0] = this.width;//width;
filter.uniforms.dimensions.value[1] = this.height;//height;
filter.uniforms.dimensions.value[2] = this.vertexArray[0];
filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
// console.log(this.vertexArray[5])
}
shader.syncUniforms();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
@ -352,38 +384,41 @@ PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
{
// TODO can be optimized! - what if there is no scale / rotation?
if(tempObject instanceof PIXI.Sprite)
if(tempObject.visible)
{
width = tempObject.texture.frame.width;
height = tempObject.texture.frame.height;
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;
// TODO trim??
aX = tempObject.anchor.x;
aY = tempObject.anchor.y;
w0 = width * (1-aX);
w1 = width * -aX;
h0 = height * (1-aY);
h1 = height * -aY;
h0 = height * (1-aY);
h1 = height * -aY;
doTest = true;
}
else if(tempObject instanceof PIXI.Graphics)
{
tempObject.updateFilterBounds();
doTest = true;
}
else if(tempObject instanceof PIXI.Graphics)
{
tempObject.updateFilterBounds();
var bounds = tempObject.bounds;
var bounds = tempObject.bounds;
width = bounds.width;
height = bounds.height;
width = bounds.width;
height = bounds.height;
w0 = bounds.x
w1 = bounds.x + bounds.width;
w0 = bounds.x
w1 = bounds.x + bounds.width;
h0 = bounds.y
h1 = bounds.y + bounds.height;
h0 = bounds.y
h1 = bounds.y + bounds.height;
doTest = true;
doTest = true;
}
}
if(doTest)
@ -432,18 +467,18 @@ PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
doTest = false;
tempObject = tempObject._iNext;
}
while(tempObject != testObject)
// maximum bounds is the size of the screen..
minX = minX > 0 ? minX : 0;
minY = minY > 0 ? minY : 0;
maxX = maxX < this.width ? maxX : this.width;
maxY = maxY < this.height ? maxY : this.height;
//minX = minX > 0 ? minX : 0;
//minY = minY > 0 ? minY : 0;
displayObject.filterArea.x = minX;
displayObject.filterArea.y = minY;
// console.log(maxX+ " : " + minX)
displayObject.filterArea.width = maxX - minX;
displayObject.filterArea.height = maxY - minY;
}

14
src/pixi/renderers/webgl/WebGLGraphics.js
View file

@ -55,13 +55,13 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
// set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveProgram.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
@ -70,8 +70,8 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
// its not even used.. but need to be set or it breaks?
// only on pc though..
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);

56
src/pixi/renderers/webgl/WebGLRenderGroup.js
View file

@ -63,7 +63,7 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer)
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);
this.filterManager.begin(projection, buffer);
@ -101,14 +101,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);
this.filterManager.begin(projection, buffer);
//console.log(buffer)
//gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
// to do!
// render part of the scene...
@ -196,7 +192,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
endBatch = lastRenderable;
}
console.log(endBatch);
//console.log(endBatch);
// TODO - need to fold this up a bit!
if(startBatch == endBatch)
@ -262,7 +258,6 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
*/
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{
var sta = PIXI.shaderStack.length;
var worldVisible = renderable.vcount === PIXI.visibleCount
@ -853,21 +848,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
var gl = this.gl;
var shaderProgram = PIXI.stripShaderProgram;
gl.useProgram(shaderProgram);
PIXI.activateStripShader();
var shader = PIXI.stripShader;
var program = shader.program;
var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m);
// console.log(projection)
// set the matrix transform for the
gl.uniformMatrix3fv(shaderProgram.translationMatrix, false, m);
gl.uniform2f(shaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(shaderProgram.alpha, strip.worldAlpha);
gl.uniformMatrix3fv(shader.translationMatrix, false, m);
gl.uniform2f(shader.projectionVector, projection.x, projection.y);
gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(shader.alpha, strip.worldAlpha);
/*
/*
if(strip.blendMode == PIXI.blendModes.NORMAL)
{
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@ -878,23 +878,22 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
}
*/
//console.log("!!")
if(!strip.dirty)
{
{
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
@ -904,19 +903,19 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
strip.dirty = false;
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
// console.log(strip.texture.baseTexture._glTexture)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
@ -926,7 +925,8 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.useProgram(PIXI.currentProgram);
PIXI.deactivateStripShader();
//gl.useProgram(PIXI.currentProgram);
}
/**
@ -940,6 +940,8 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projectionMatrix)
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition;

23
src/pixi/renderers/webgl/WebGLRenderer.js
View file

@ -63,16 +63,18 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
}
}
PIXI.initDefaultShader();
PIXI.initPrimitiveShader();
PIXI.initDefaultStripShader();
PIXI.initDefaultShaders();
// PIXI.activateDefaultShader();
// PIXI.activateDefaultShader();
var gl = this.gl;
gl.useProgram(PIXI.defaultShader.program);
PIXI.WebGLRenderer.gl = gl;
this.batch = new PIXI.WebGLBatch(gl);
@ -90,7 +92,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.resize(this.width, this.height);
this.contextLost = false;
PIXI.pushShader(PIXI.defaultShader);
//PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
@ -152,15 +154,6 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.__stage = stage;
this.stageRenderGroup.setRenderable(stage);
}
// TODO not needed now...
// update children if need be
// best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++)
{
var group = stage.__childrenRemoved[i].__renderGroup
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/
// update any textures
PIXI.WebGLRenderer.updateTextures();

265
src/pixi/renderers/webgl/WebGLShaders.js
View file

@ -3,175 +3,65 @@
*/
/*
* the default suoer fast shader!
*/
PIXI.shaderFragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
PIXI.shaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
"uniform vec2 projectionVector;",
"uniform vec2 offsetVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
//"const vec2 offsetVector = vec2(1000.0, 0.0);",
"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;",
"}"
];
/*
* the triangle strip shader..
*/
PIXI.stripShaderFragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float alpha;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
"gl_FragColor = gl_FragColor * alpha;",
"}"
];
PIXI.stripShaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
];
/*
* primitive shader..
*/
PIXI.primitiveShaderFragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"void main(void) {",
"gl_FragColor = vColor;",
"}"
];
PIXI.primitiveShaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec4 aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"uniform vec2 offsetVector;",
"uniform float alpha;",
"varying vec4 vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);",
"v -= offsetVector.xyx;",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vColor = aColor * alpha;",
"}"
];
PIXI.shaderStack = [];
PIXI.initPrimitiveShader = function()
PIXI.initDefaultShaders = function()
{
var gl = PIXI.gl;
PIXI.primitiveShader = new PIXI.PrimitiveShader();
PIXI.primitiveShader.init();
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram);
PIXI.stripShader = new PIXI.StripShader();
PIXI.stripShader.init();
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.offsetVector = gl.getUniformLocation(shaderProgram, "offsetVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
//gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(shaderProgram.colorAttribute);
//gl.enableVertexAttribArray(program.textureCoordAttribute);
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram;
}
PIXI.initDefaultShader = function()
{
PIXI.frameBufferStack = [];
PIXI.frameBufferPool = [];
PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init();
PIXI.pushShader(PIXI.defaultShader);
// offset..
// ok and also create 2 spare frame buffers..
// PIXI.frameBuffer1 = PIXI.generateFrameBuffer(800, 600);
// PIXI.frameBuffer2 = PIXI.generateFrameBuffer(800, 600);
// PIXI.currentFrameBuffer;
/*
PIXI.shaderStack.push(PIXI.defaultShader);
PIXI.current*/
var gl = PIXI.gl;
var shaderProgram = PIXI.defaultShader.program;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
PIXI.initDefaultStripShader = function()
PIXI.activatePrimitiveShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram);
var gl = PIXI.gl;
gl.useProgram(PIXI.primitiveShader.program);
gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.deactivatePrimitiveShader = function()
{
var gl = PIXI.gl;
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram;
gl.useProgram(PIXI.defaultShader.program);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
PIXI.activateStripShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.stripShader.program);
// gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
PIXI.deactivateStripShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.defaultShader.program);
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
/*
SHADER COMPILER HELPERS
*/
PIXI.CompileVertexShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
@ -190,7 +80,7 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
console.log(gl.getShaderInfoLog(shader));
return null;
}
@ -211,65 +101,8 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
console.log("Could not initialise shaders");
}
return shaderProgram;
}
PIXI.pushShader = function(shader)
{
var gl = PIXI.gl;
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
PIXI.shaderStack.push(shader);
var shaderProgram = shader.program;
// flip! the texture..
// set the texture!
// map uniforms..
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shader.syncUniforms();
PIXI.currentShader = shaderProgram;
}
PIXI.popShader = function()
{
var gl = PIXI.gl;
var lastProgram = PIXI.shaderStack.pop();
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
gl.useProgram(shaderProgram);
PIXI.currentShader = shaderProgram;
}
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.primitiveProgram);
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
}
PIXI.deactivatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.currentShader);
gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
}