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

FIlters Added.. again!

Browse source 
some filters added to pixi
example 15 added too
This commit is contained in:
Mat Groves 2013-09-30 01:19:21 +01:00
parent 56df185471
commit fc80c0c602
42 changed files with 26689 additions and 12427 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Gruntfile.js
View file

@ -22,6 +22,8 @@ module.exports = function(grunt) {
'<%= dirs.src %>/display/Sprite.js', '<%= dirs.src %>/display/Sprite.js',
'<%= dirs.src %>/display/MovieClip.js', '<%= dirs.src %>/display/MovieClip.js',
'<%= dirs.src %>/filters/FilterBlock.js', '<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/filters/ColorMatrixFilter.js',
'<%= dirs.src %>/filters/GreyFilter.js',
'<%= dirs.src %>/text/Text.js', '<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js', '<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionManager.js', '<%= dirs.src %>/InteractionManager.js',
@ -31,6 +33,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/utils/Detector.js', '<%= dirs.src %>/utils/Detector.js',
'<%= dirs.src %>/utils/Polyk.js', '<%= dirs.src %>/utils/Polyk.js',
'<%= dirs.src %>/renderers/webgl/WebGLShaders.js', '<%= dirs.src %>/renderers/webgl/WebGLShaders.js',
'<%= dirs.src %>/renderers/webgl/PixiShader.js',
'<%= dirs.src %>/renderers/webgl/WebGLGraphics.js', '<%= dirs.src %>/renderers/webgl/WebGLGraphics.js',
'<%= dirs.src %>/renderers/webgl/WebGLRenderer.js', '<%= dirs.src %>/renderers/webgl/WebGLRenderer.js',
'<%= dirs.src %>/renderers/webgl/WebGLBatch.js', '<%= dirs.src %>/renderers/webgl/WebGLBatch.js',
@ -124,7 +127,8 @@ module.exports = function(grunt) {
'examples/example 11 - RenderTexture', 'examples/example 11 - RenderTexture',
'examples/example 12 - Spine', 'examples/example 12 - Spine',
'examples/example 13 - Graphics', 'examples/example 13 - Graphics',
'examples/example 14 - Masking' 'examples/example 14 - Masking',
'examples/example 15 - Filters'
] ]
}, },
connect: { connect: {

1765
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

1765
examples/example 1 - Basics/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 10 - Text/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 11 - RenderTexture/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 12 - Spine/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 13 - Graphics/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 14 - Masking/pixi.js
View file

File diff suppressed because it is too large Load diff

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 169 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

159
examples/example 15 - Filters/index.html Normal file
View file

@ -0,0 +1,159 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(620, 380);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var filter = new PIXI.ColorMatrixFilter();
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
container.addChild(bgFront);
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
container.addChild(panda);
stage.addChild(container);
// create a renderer instance
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);
stage.filters = [filter];
var count = 0;
var switchy = false;
stage.click = stage.tap = function()
{
switchy = !switchy
if(!switchy)
{
stage.filters = [filter];
}
else
{
stage.filters = null;
}
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
// stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
//stage.filters = [filter];
PIXI.runList(stage);
requestAnimFrame(animate);
function animate() {
bg.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;
count += 0.1;
colorMatrix[1] = Math.sin(count) * 3;
colorMatrix[2] = Math.cos(count);
colorMatrix[3] = Math.cos(count) * 1.5;
colorMatrix[4] = Math.sin(count/3) * 2;
colorMatrix[5] = Math.sin(count/2);
colorMatrix[6] = Math.sin(count/4);
filter.matrix = colorMatrix;
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

10649
examples/example 15 - Filters/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

1765
examples/example 2 - SpriteSheet/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 3 - MovieClip/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 4 - Balls/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 5 - Morph/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 6 - Interactivity/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 7 - Transparent Background/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 8 - Dragging/pixi.js
View file

File diff suppressed because it is too large Load diff

1765
examples/example 9 - Tiling Texture/pixi.js
View file

File diff suppressed because it is too large Load diff

188
src/pixi/InteractionManager.js
View file

@ -1,10 +1,8 @@
/** /**
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
/**
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* This manager also supports multitouch. * This manager also supports multitouch.
* *
@ -39,7 +37,7 @@ PIXI.InteractionManager = function(stage)
this.touchs = {}; this.touchs = {};
// helpers // helpers
this.tempPoint = new PIXI.Point(); this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create(); //this.tempMatrix = mat3.create();
@ -61,8 +59,8 @@ PIXI.InteractionManager = function(stage)
this.onTouchStart = this.onTouchStart.bind(this); this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this); this.onTouchEnd = this.onTouchEnd.bind(this);
this.onTouchMove = this.onTouchMove.bind(this); this.onTouchMove = this.onTouchMove.bind(this);
this.last = 0; this.last = 0;
} }
@ -81,12 +79,12 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
{ {
var children = displayObject.children; var children = displayObject.children;
var length = children.length; var length = children.length;
/// make an interaction tree... {item.__interactiveParent} /// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i >= 0; i--) for (var i = length-1; i >= 0; i--)
{ {
var child = children[i]; var child = children[i];
// if(child.visible) { // if(child.visible) {
// push all interactive bits // push all interactive bits
if(child.interactive) if(child.interactive)
@ -146,7 +144,7 @@ PIXI.InteractionManager.prototype.setTarget = function(target)
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
{ {
//remove previouse listeners //remove previouse listeners
if( this.interactionDOMElement !== null ) if( this.interactionDOMElement !== null )
{ {
this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-content-zooming'] = '';
this.interactionDOMElement.style['-ms-touch-action'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = '';
@ -162,12 +160,12 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
} }
if (window.navigator.msPointerEnabled) if (window.navigator.msPointerEnabled)
{ {
// time to remove some of that zoom in ja.. // time to remove some of that zoom in ja..
domElement.style['-ms-content-zooming'] = 'none'; domElement.style['-ms-content-zooming'] = 'none';
domElement.style['-ms-touch-action'] = 'none'; domElement.style['-ms-touch-action'] = 'none';
// DO some window specific touch! // DO some window specific touch!
} }
@ -193,7 +191,7 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
PIXI.InteractionManager.prototype.update = function() PIXI.InteractionManager.prototype.update = function()
{ {
if(!this.target)return; if(!this.target)return;
// frequency of 30fps?? // frequency of 30fps??
var now = Date.now(); var now = Date.now();
var diff = now - this.last; var diff = now - this.last;
@ -201,44 +199,44 @@ PIXI.InteractionManager.prototype.update = function()
if(diff < 1)return; if(diff < 1)return;
this.last = now; this.last = now;
// //
// ok.. so mouse events?? // ok.. so mouse events??
// yes for now :) // yes for now :)
// OPTIMSE - how often to check?? // OPTIMSE - how often to check??
if(this.dirty) if(this.dirty)
{ {
this.dirty = false; this.dirty = false;
var len = this.interactiveItems.length; var len = this.interactiveItems.length;
for (var i=0; i < len; i++) { for (var i=0; i < len; i++) {
this.interactiveItems[i].interactiveChildren = false; this.interactiveItems[i].interactiveChildren = false;
} }
this.interactiveItems = []; this.interactiveItems = [];
if(this.stage.interactive)this.interactiveItems.push(this.stage); if(this.stage.interactive)this.interactiveItems.push(this.stage);
// go through and collect all the objects that are interactive.. // go through and collect all the objects that are interactive..
this.collectInteractiveSprite(this.stage, this.stage); this.collectInteractiveSprite(this.stage, this.stage);
} }
// loop through interactive objects! // loop through interactive objects!
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default"; this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var item = this.interactiveItems[i]; var item = this.interactiveItems[i];
//if(!item.visible)continue; //if(!item.visible)continue;
// OPTIMISATION - only calculate every time if the mousemove function exists.. // OPTIMISATION - only calculate every time if the mousemove function exists..
// OK so.. does the object have any other interactive functions? // OK so.. does the object have any other interactive functions?
// hit-test the clip! // hit-test the clip!
if(item.mouseover || item.mouseout || item.buttonMode) if(item.mouseover || item.mouseout || item.buttonMode)
{ {
// ok so there are some functions so lets hit test it.. // ok so there are some functions so lets hit test it..
@ -248,13 +246,13 @@ PIXI.InteractionManager.prototype.update = function()
// loks like there was a hit! // loks like there was a hit!
if(item.__hit) if(item.__hit)
{ {
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer"; if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(!item.__isOver) if(!item.__isOver)
{ {
if(item.mouseover)item.mouseover(this.mouse); if(item.mouseover)item.mouseover(this.mouse);
item.__isOver = true; item.__isOver = true;
} }
} }
else else
@ -263,11 +261,11 @@ PIXI.InteractionManager.prototype.update = function()
{ {
// roll out! // roll out!
if(item.mouseout)item.mouseout(this.mouse); if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false; item.__isOver = false;
} }
} }
} }
// ---> // --->
} }
} }
@ -284,18 +282,18 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
// TODO optimize by not check EVERY TIME! maybe half as often? // // TODO optimize by not check EVERY TIME! maybe half as often? //
var rect = this.interactionDOMElement.getBoundingClientRect(); var rect = this.interactionDOMElement.getBoundingClientRect();
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
var global = this.mouse.global; var global = this.mouse.global;
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var item = this.interactiveItems[i]; var item = this.interactiveItems[i];
if(item.mousemove) if(item.mousemove)
{ {
//call the function! //call the function!
@ -314,34 +312,34 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
PIXI.InteractionManager.prototype.onMouseDown = function(event) PIXI.InteractionManager.prototype.onMouseDown = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
// loop through inteaction tree... // loop through inteaction tree...
// hit test each item! -> // hit test each item! ->
// get interactive items under point?? // get interactive items under point??
//stage.__i //stage.__i
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
var global = this.mouse.global; var global = this.mouse.global;
var index = 0; var index = 0;
var parent = this.stage; var parent = this.stage;
// while // while
// hit test // hit test
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var item = this.interactiveItems[i]; var item = this.interactiveItems[i];
if(item.mousedown || item.click) if(item.mousedown || item.click)
{ {
item.__mouseIsDown = true; item.__mouseIsDown = true;
item.__hit = this.hitTest(item, this.mouse); item.__hit = this.hitTest(item, this.mouse);
if(item.__hit) if(item.__hit)
{ {
//call the function! //call the function!
if(item.mousedown)item.mousedown(this.mouse); if(item.mousedown)item.mousedown(this.mouse);
item.__isDown = true; item.__isDown = true;
// just the one! // just the one!
if(!item.interactiveChildren)break; if(!item.interactiveChildren)break;
} }
@ -353,18 +351,18 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
PIXI.InteractionManager.prototype.onMouseOut = function(event) PIXI.InteractionManager.prototype.onMouseOut = function(event)
{ {
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default"; this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var item = this.interactiveItems[i]; var item = this.interactiveItems[i];
if(item.__isOver) if(item.__isOver)
{ {
this.mouse.target = item; this.mouse.target = item;
if(item.mouseout)item.mouseout(this.mouse); if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false; item.__isOver = false;
} }
} }
} }
@ -379,21 +377,21 @@ PIXI.InteractionManager.prototype.onMouseOut = function(event)
PIXI.InteractionManager.prototype.onMouseUp = function(event) PIXI.InteractionManager.prototype.onMouseUp = function(event)
{ {
this.mouse.originalEvent = event || window.event; //IE uses window.event this.mouse.originalEvent = event || window.event; //IE uses window.event
var global = this.mouse.global; var global = this.mouse.global;
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
var up = false; var up = false;
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var item = this.interactiveItems[i]; var item = this.interactiveItems[i];
if(item.mouseup || item.mouseupoutside || item.click) if(item.mouseup || item.mouseupoutside || item.click)
{ {
item.__hit = this.hitTest(item, this.mouse); item.__hit = this.hitTest(item, this.mouse);
if(item.__hit && !up) if(item.__hit && !up)
{ {
//call the function! //call the function!
@ -405,7 +403,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
{ {
if(item.click)item.click(this.mouse); if(item.click)item.click(this.mouse);
} }
if(!item.interactiveChildren)up = true; if(!item.interactiveChildren)up = true;
} }
else else
@ -415,8 +413,8 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
if(item.mouseupoutside)item.mouseupoutside(this.mouse); if(item.mouseupoutside)item.mouseupoutside(this.mouse);
} }
} }
item.__isDown = false; item.__isDown = false;
} }
} }
} }
@ -432,7 +430,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{ {
var global = interactionData.global; var global = interactionData.global;
if(item.vcount !== PIXI.visibleCount)return false; if(item.vcount !== PIXI.visibleCount)return false;
var isSprite = (item instanceof PIXI.Sprite), var isSprite = (item instanceof PIXI.Sprite),
@ -444,7 +442,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
interactionData.target = item; interactionData.target = item;
//a sprite or display object with a hit area defined //a sprite or display object with a hit area defined
if(item.hitArea && item.hitArea.contains) { if(item.hitArea && item.hitArea.contains) {
if(item.hitArea.contains(x, y)) { if(item.hitArea.contains(x, y)) {
@ -453,7 +451,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
return true; return true;
} }
return false; return false;
} }
// a sprite with no hitarea defined // a sprite with no hitarea defined
@ -463,11 +461,11 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
height = item.texture.frame.height, height = item.texture.frame.height,
x1 = -width * item.anchor.x, x1 = -width * item.anchor.x,
y1; y1;
if(x > x1 && x < x1 + width) if(x > x1 && x < x1 + width)
{ {
y1 = -height * item.anchor.y; y1 = -height * item.anchor.y;
if(y > y1 && y < y1 + height) if(y > y1 && y < y1 + height)
{ {
// set the target property if a hit is true! // set the target property if a hit is true!
@ -478,7 +476,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
} }
var length = item.children.length; var length = item.children.length;
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
var tempItem = item.children[i]; var tempItem = item.children[i];
@ -491,7 +489,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
} }
} }
return false; return false;
} }
/** /**
@ -505,18 +503,18 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
{ {
var rect = this.interactionDOMElement.getBoundingClientRect(); var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches; var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++) for (var i=0; i < changedTouches.length; i++)
{ {
var touchEvent = changedTouches[i]; var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier]; var touchData = this.touchs[touchEvent.identifier];
touchData.originalEvent = event || window.event; touchData.originalEvent = event || window.event;
// update the touch position // update the touch position
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
} }
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
@ -535,38 +533,38 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
PIXI.InteractionManager.prototype.onTouchStart = function(event) PIXI.InteractionManager.prototype.onTouchStart = function(event)
{ {
var rect = this.interactionDOMElement.getBoundingClientRect(); var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches; var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++) for (var i=0; i < changedTouches.length; i++)
{ {
var touchEvent = changedTouches[i]; var touchEvent = changedTouches[i];
var touchData = this.pool.pop(); var touchData = this.pool.pop();
if(!touchData)touchData = new PIXI.InteractionData(); if(!touchData)touchData = new PIXI.InteractionData();
touchData.originalEvent = event || window.event; touchData.originalEvent = event || window.event;
this.touchs[touchEvent.identifier] = touchData; this.touchs[touchEvent.identifier] = touchData;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
for (var j = 0; j < length; j++) for (var j = 0; j < length; j++)
{ {
var item = this.interactiveItems[j]; var item = this.interactiveItems[j];
if(item.touchstart || item.tap) if(item.touchstart || item.tap)
{ {
item.__hit = this.hitTest(item, touchData); item.__hit = this.hitTest(item, touchData);
if(item.__hit) if(item.__hit)
{ {
//call the function! //call the function!
if(item.touchstart)item.touchstart(touchData); if(item.touchstart)item.touchstart(touchData);
item.__isDown = true; item.__isDown = true;
item.__touchData = touchData; item.__touchData = touchData;
if(!item.interactiveChildren)break; if(!item.interactiveChildren)break;
} }
} }
@ -586,28 +584,28 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
//this.mouse.originalEvent = event || window.event; //IE uses window.event //this.mouse.originalEvent = event || window.event; //IE uses window.event
var rect = this.interactionDOMElement.getBoundingClientRect(); var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches; var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++) for (var i=0; i < changedTouches.length; i++)
{ {
var touchEvent = changedTouches[i]; var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier]; var touchData = this.touchs[touchEvent.identifier];
var up = false; var up = false;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length; var length = this.interactiveItems.length;
for (var j = 0; j < length; j++) for (var j = 0; j < length; j++)
{ {
var item = this.interactiveItems[j]; var item = this.interactiveItems[j];
var itemTouchData = item.__touchData; // <-- Here! var itemTouchData = item.__touchData; // <-- Here!
item.__hit = this.hitTest(item, touchData); item.__hit = this.hitTest(item, touchData);
if(itemTouchData == touchData) if(itemTouchData == touchData)
{ {
// so this one WAS down... // so this one WAS down...
touchData.originalEvent = event || window.event; touchData.originalEvent = event || window.event;
// hitTest?? // hitTest??
if(item.touchend || item.tap) if(item.touchend || item.tap)
{ {
if(item.__hit && !up) if(item.__hit && !up)
@ -617,7 +615,7 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{ {
if(item.tap)item.tap(touchData); if(item.tap)item.tap(touchData);
} }
if(!item.interactiveChildren)up = true; if(!item.interactiveChildren)up = true;
} }
else else
@ -627,16 +625,16 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
if(item.touchendoutside)item.touchendoutside(touchData); if(item.touchendoutside)item.touchendoutside(touchData);
} }
} }
item.__isDown = false; item.__isDown = false;
} }
item.__touchData = null; item.__touchData = null;
} }
else else
{ {
} }
} }
// remove the touch.. // remove the touch..
@ -656,11 +654,11 @@ PIXI.InteractionData = function()
/** /**
* This point stores the global coords of where the touch/mouse event happened * This point stores the global coords of where the touch/mouse event happened
* *
* @property global * @property global
* @type Point * @type Point
*/ */
this.global = new PIXI.Point(); this.global = new PIXI.Point();
// this is here for legacy... but will remove // this is here for legacy... but will remove
this.local = new PIXI.Point(); this.local = new PIXI.Point();
@ -692,7 +690,7 @@ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{ {
var worldTransform = displayObject.worldTransform; var worldTransform = displayObject.worldTransform;
var global = this.global; var global = this.global;
// do a cheeky transform to get the mouse coords; // do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],

177
src/pixi/display/DisplayObject.js
View file

@ -12,7 +12,6 @@ PIXI.DisplayObject = function()
{ {
this.last = this; this.last = this;
this.first = this; this.first = this;
/** /**
* The coordinate of the object relative to the local coordinates of the parent. * The coordinate of the object relative to the local coordinates of the parent.
* *
@ -50,7 +49,7 @@ PIXI.DisplayObject = function()
* *
* @property alpha * @property alpha
* @type Number * @type Number
*/ */
this.alpha = 1; this.alpha = 1;
/** /**
@ -58,7 +57,7 @@ PIXI.DisplayObject = function()
* *
* @property visible * @property visible
* @type Boolean * @type Boolean
*/ */
this.visible = true; this.visible = true;
/** /**
@ -67,7 +66,7 @@ PIXI.DisplayObject = function()
* *
* @property hitArea * @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon * @type Rectangle|Circle|Ellipse|Polygon
*/ */
this.hitArea = null; this.hitArea = null;
/** /**
@ -92,7 +91,7 @@ PIXI.DisplayObject = function()
* @property parent * @property parent
* @type DisplayObjectContainer * @type DisplayObjectContainer
* @readOnly * @readOnly
*/ */
this.parent = null; this.parent = null;
/** /**
@ -101,7 +100,7 @@ PIXI.DisplayObject = function()
* @property stage * @property stage
* @type Stage * @type Stage
* @readOnly * @readOnly
*/ */
this.stage = null; this.stage = null;
/** /**
@ -268,7 +267,7 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
}, },
set: function(value) { set: function(value) {
this._interactive = value; this._interactive = value;
// TODO more to be done here.. // TODO more to be done here..
// need to sort out a re-crawl! // need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true; if(this.stage)this.stage.dirty = true;
@ -288,17 +287,58 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
return this._mask; return this._mask;
}, },
set: function(value) { set: function(value) {
this._mask = value;
if(value) if(value)
{ {
if(this._mask)
{
value.start = this._mask.start;
value.end = this._mask.end;
}
else
{
this.addFilter(value);
value.renderable = false;
}
}
else
{
this.removeFilter(this._mask);
this._mask.renderable = true;
}
this._mask = value;
}
});
/**
* Sets the filters for the displayObject. Currently there's a few limitations.
* 1: At the moment only one filter can be applied at a time..
* 2: They cannot be nested.
* 3: There's no padding yet.
* 4: this is a webGL only feature.
* @property filters
* @type Array
*/
Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
get: function() {
return this._filters;
},
set: function(value) {
//if(value == )
if(value)
{
if(this._filters)this.removeFilter(this._filters);
this.addFilter(value) this.addFilter(value)
} }
else else
{ {
this.removeFilter(); if(this._filters)this.removeFilter(this._filters);
} }
this._filters = value;
} }
}); });
@ -309,54 +349,58 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
* @param mask {Graphics} the graphics object to use as a filter * @param mask {Graphics} the graphics object to use as a filter
* @private * @private
*/ */
PIXI.DisplayObject.prototype.addFilter = function(mask) PIXI.DisplayObject.prototype.addFilter = function(data)
{ {
if(this.filter)return; //if(this.filter)return;
this.filter = true; //this.filter = true;
// insert a filter block.. // insert a filter block..
// TODO Onject pool thease bad boys..
var start = new PIXI.FilterBlock(); var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock(); var end = new PIXI.FilterBlock();
start.mask = mask; data.start = start;
end.mask = mask; data.end = end;
start.data = data;
end.data = data;
start.first = start.last = this; start.first = start.last = this;
end.first = end.last = this; end.first = end.last = this;
start.open = true; start.open = true;
/* /*
* insert start * insert start
*/ */
var childFirst = start var childFirst = start
var childLast = start var childLast = start
var nextObject; var nextObject;
var previousObject; var previousObject;
previousObject = this.first._iPrev; previousObject = this.first._iPrev;
if(previousObject) if(previousObject)
{ {
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
} }
else else
{ {
nextObject = this; nextObject = this;
} }
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
// now insert the end filter block.. // now insert the end filter block..
/* /*
* insert end filter * insert end filter
*/ */
@ -364,21 +408,21 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
var childLast = end var childLast = end
var nextObject = null; var nextObject = null;
var previousObject = null; var previousObject = null;
previousObject = this.last; previousObject = this.last;
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
var updateLast = this; var updateLast = this;
var prevLast = this.last; var prevLast = this.last;
while(updateLast) while(updateLast)
{ {
@ -388,17 +432,15 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
this.first = start; this.first = start;
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.addFilterBlocks(start, end); this.__renderGroup.addFilterBlocks(start, end);
} }
mask.renderable = false;
} }
/* /*
@ -407,34 +449,34 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
* @method removeFilter * @method removeFilter
* @private * @private
*/ */
PIXI.DisplayObject.prototype.removeFilter = function() PIXI.DisplayObject.prototype.removeFilter = function(data)
{ {
if(!this.filter)return; //if(!this.filter)return;
this.filter = false; //this.filter = false;
console.log("YUOIO")
// modify the list.. // modify the list..
var startBlock = this.first; var startBlock = data.start;
var nextObject = startBlock._iNext; var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev; var previousObject = startBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject; if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext; this.first = startBlock._iNext;
// remove the end filter // remove the end filter
var lastBlock = this.last; var lastBlock = data.end;
var nextObject = lastBlock._iNext; var nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev; var previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject; previousObject._iNext = nextObject;
// this is always true too! // this is always true too!
var tempLast = lastBlock._iPrev; var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
while(updateLast.last == lastBlock) while(updateLast.last == lastBlock)
@ -443,10 +485,7 @@ PIXI.DisplayObject.prototype.removeFilter = function()
updateLast = updateLast.parent; updateLast = updateLast.parent;
if(!updateLast)break; if(!updateLast)break;
} }
var mask = startBlock.mask
mask.renderable = true;
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
@ -468,8 +507,8 @@ PIXI.DisplayObject.prototype.updateTransform = function()
this.rotationCache = this.rotation; this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation); this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation); this._cr = Math.cos(this.rotation);
} }
var localTransform = this.localTransform; var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform; var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform; var worldTransform = this.worldTransform;
@ -478,12 +517,12 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[1] = -this._sr * this.scale.y localTransform[1] = -this._sr * this.scale.y
localTransform[3] = this._sr * this.scale.x; localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y; localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix??? // TODO --> do we even need a local matrix???
var px = this.pivot.x; var px = this.pivot.x;
var py = this.pivot.y; var py = this.pivot.y;
// Cache the matrix values (makes for huge speed increases!) // Cache the matrix values (makes for huge speed increases!)
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3],
@ -493,7 +532,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[2] = a02 localTransform[2] = a02
localTransform[5] = a12 localTransform[5] = a12
worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[0] = b00 * a00 + b01 * a10;
worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[1] = b00 * a01 + b01 * a11;
worldTransform[2] = b00 * a02 + b01 * a12 + b02; worldTransform[2] = b00 * a02 + b01 * a12 + b02;
@ -505,7 +544,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha; this.worldAlpha = this.alpha * this.parent.worldAlpha;
this.vcount = PIXI.visibleCount; this.vcount = PIXI.visibleCount;
} }

112
src/pixi/display/DisplayObjectContainer.js
View file

@ -7,21 +7,21 @@
* A DisplayObjectContainer represents a collection of display objects. * A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects. * It is the base class of all display objects that act as a container for other objects.
* *
* @class DisplayObjectContainer * @class DisplayObjectContainer
* @extends DisplayObject * @extends DisplayObject
* @constructor * @constructor
*/ */
PIXI.DisplayObjectContainer = function() PIXI.DisplayObjectContainer = function()
{ {
PIXI.DisplayObject.call( this ); PIXI.DisplayObject.call( this );
/** /**
* [read-only] The of children of this container. * [read-only] The of children of this container.
* *
* @property children * @property children
* @type Array<DisplayObject> * @type Array<DisplayObject>
* @readOnly * @readOnly
*/ */
this.children = []; this.children = [];
} }
@ -29,18 +29,6 @@ PIXI.DisplayObjectContainer = function()
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer; PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
//TODO make visible a getter setter
/*
Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
get: function() {
return this._visible;
},
set: function(value) {
this._visible = value;
}
});*/
/** /**
* Adds a child to the container. * Adds a child to the container.
* *
@ -51,18 +39,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{ {
if(child.parent != undefined) if(child.parent != undefined)
{ {
//// COULD BE THIS??? //// COULD BE THIS???
child.parent.removeChild(child); child.parent.removeChild(child);
// return; // return;
} }
child.parent = this; child.parent = this;
this.children.push(child); this.children.push(child);
// update the stage refference.. // update the stage refference..
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
@ -71,20 +59,20 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage; tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// LINKED LIST // // LINKED LIST //
// modify the list.. // modify the list..
var childFirst = child.first var childFirst = child.first
var childLast = child.last; var childLast = child.last;
var nextObject; var nextObject;
var previousObject; var previousObject;
// this could be wrong if there is a filter?? // this could be wrong if there is a filter??
if(this.filter) if(this._filters)
{ {
previousObject = this.last._iPrev; previousObject = this.last._iPrev;
} }
@ -94,12 +82,12 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
var prevLast = previousObject; var prevLast = previousObject;
while(updateLast) while(updateLast)
{ {
if(updateLast.last == prevLast) if(updateLast.last == prevLast)
@ -108,15 +96,15 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
// need to remove any render groups.. // need to remove any render groups..
if(this.__renderGroup) if(this.__renderGroup)
@ -126,7 +114,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// add them to the new render group.. // add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
} }
/** /**
@ -145,7 +133,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
child.parent.removeChild(child); child.parent.removeChild(child);
} }
child.parent = this; child.parent = this;
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
@ -157,13 +145,13 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
} }
while(tmpChild) while(tmpChild)
} }
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject; var nextObject;
var previousObject; var previousObject;
if(index == this.children.length) if(index == this.children.length)
{ {
previousObject = this.last; previousObject = this.last;
@ -186,18 +174,18 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{ {
previousObject = this.children[index-1].last; previousObject = this.children[index-1].last;
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
this.children.splice(index, 0, child); this.children.splice(index, 0, child);
// need to remove any render groups.. // need to remove any render groups..
@ -208,7 +196,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
// add them to the new render group.. // add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
} }
else else
{ {
@ -227,21 +215,21 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{ {
/* /*
* this funtion needs to be recoded.. * this funtion needs to be recoded..
* can be done a lot faster.. * can be done a lot faster..
*/ */
return; return;
// need to fix this function :/ // need to fix this function :/
/* /*
// TODO I already know this?? // TODO I already know this??
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 ); var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 ) if ( index !== -1 && index2 !== -1 )
{ {
// cool // cool
/* /*
if(this.stage) if(this.stage)
{ {
@ -249,15 +237,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
// TODO sure there is a nicer way to achieve this! // TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child); this.stage.__removeChild(child);
this.stage.__removeChild(child2); this.stage.__removeChild(child2);
this.stage.__addChild(child); this.stage.__addChild(child);
this.stage.__addChild(child2); this.stage.__addChild(child2);
} }
// swap the positions.. // swap the positions..
this.children[index] = child2; this.children[index] = child2;
this.children[index2] = child; this.children[index2] = child;
} }
else else
{ {
@ -292,22 +280,22 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
PIXI.DisplayObjectContainer.prototype.removeChild = function(child) PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{ {
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
if ( index !== -1 ) if ( index !== -1 )
{ {
// unlink // // unlink //
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject = childLast._iNext; var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev; var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject; previousObject._iNext = nextObject;
if(this.last == childLast) if(this.last == childLast)
{ {
var tempLast = childFirst._iPrev; var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
while(updateLast.last == childLast.last) while(updateLast.last == childLast.last)
@ -317,10 +305,10 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(!updateLast)break; if(!updateLast)break;
} }
} }
childLast._iNext = null; childLast._iNext = null;
childFirst._iPrev = null; childFirst._iPrev = null;
// update the stage reference.. // update the stage reference..
if(this.stage) if(this.stage)
{ {
@ -330,16 +318,16 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null; tmpChild.stage = null;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// webGL trim // webGL trim
if(child.__renderGroup) if(child.__renderGroup)
{ {
child.__renderGroup.removeDisplayObjectAndChildren(child); child.__renderGroup.removeDisplayObjectAndChildren(child);
} }
child.parent = undefined; child.parent = undefined;
this.children.splice( index, 1 ); this.children.splice( index, 1 );
} }
@ -358,11 +346,11 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
PIXI.DisplayObjectContainer.prototype.updateTransform = function() PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{ {
if(!this.visible)return; if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this ); PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++) for(var i=0,j=this.children.length; i<j; i++)
{ {
this.children[i].updateTransform(); this.children[i].updateTransform();
} }
} }

17
src/pixi/display/Sprite.js
View file

@ -22,7 +22,7 @@ PIXI.Sprite = function(texture)
/** /**
* The anchor sets the origin point of the texture. * The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left * The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
* *
@ -126,9 +126,9 @@ PIXI.Sprite.prototype.setTexture = function(texture)
// stop current texture; // stop current texture;
if(this.texture.baseTexture != texture.baseTexture) if(this.texture.baseTexture != texture.baseTexture)
{ {
this.textureChange = true; this.textureChange = true;
this.texture = texture; this.texture = texture;
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.updateTexture(this); this.__renderGroup.updateTexture(this);
@ -138,7 +138,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
{ {
this.texture = texture; this.texture = texture;
} }
this.updateFrame = true; this.updateFrame = true;
} }
@ -152,18 +152,18 @@ PIXI.Sprite.prototype.setTexture = function(texture)
PIXI.Sprite.prototype.onTextureUpdate = function(event) PIXI.Sprite.prototype.onTextureUpdate = function(event)
{ {
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind ); //this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set.. // so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width; if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height; if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true; this.updateFrame = true;
} }
// some helper functions.. // some helper functions..
/** /**
* *
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded * The frame ids are created when a Texture packer file has been loaded
* *
@ -180,7 +180,7 @@ PIXI.Sprite.fromFrame = function(frameId)
} }
/** /**
* *
* Helper function that creates a sprite that will contain a texture based on an image url * Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded * If the image is not in the texture cache it will be loaded
* *
@ -194,4 +194,3 @@ PIXI.Sprite.fromImage = function(imageId)
var texture = PIXI.Texture.fromImage(imageId); var texture = PIXI.Texture.fromImage(imageId);
return new PIXI.Sprite(texture); return new PIXI.Sprite(texture);
} }

12
src/pixi/display/Stage.js
View file

@ -87,22 +87,22 @@ PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
*/ */
PIXI.Stage.prototype.updateTransform = function() PIXI.Stage.prototype.updateTransform = function()
{ {
this.worldAlpha = 1; this.worldAlpha = 1;
this.vcount = PIXI.visibleCount; this.vcount = PIXI.visibleCount;
for(var i=0,j=this.children.length; i<j; i++) for(var i=0,j=this.children.length; i<j; i++)
{ {
this.children[i].updateTransform(); this.children[i].updateTransform();
} }
if(this.dirty) if(this.dirty)
{ {
this.dirty = false; this.dirty = false;
// update interactive! // update interactive!
this.interactionManager.dirty = true; this.interactionManager.dirty = true;
} }
if(this.interactive)this.interactionManager.update(); if(this.interactive)this.interactionManager.update();
} }

38
src/pixi/filters/ColorMatrixFilter.js Normal file
View file

@ -0,0 +1,38 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.ColorMatrixFilter = function()
{
// set the uniforms
this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1]},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform mat4 matrix;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
get: function() {
return this.uniforms.matrix.value;
},
set: function(value) {
this.uniforms.matrix.value = value;
}
});

6
src/pixi/filters/FilterBlock.js
View file

@ -4,10 +4,8 @@
PIXI.FilterBlock = function(mask) PIXI.FilterBlock = function()
{ {
this.graphics = mask
this.visible = true; this.visible = true;
this.renderable = true; this.renderable = true;
} }

47
src/pixi/filters/GreyFilter.js Normal file
View file

@ -0,0 +1,47 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.GreyFilter = function()
{
// set the uniforms
this.uniforms = {
grey: {type: 'f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"uniform float grey;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), grey);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
this.primitiveFragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"uniform float grey;",
"void main(void) {",
"gl_FragColor = vColor;",
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), grey);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.GreyFilter.prototype, 'grey', {
get: function() {
return this.uniforms.grey.value;
},
set: function(value) {
this.uniforms.grey.value = value;
}
});

36
src/pixi/filters/InvertFilter.js Normal file
View file

@ -0,0 +1,36 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.InvertFilter = function()
{
// set the uniforms
this.uniforms = {
invert: {type: 'f', value: 0.5},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
get: function() {
return this.uniforms.invert.value;
},
set: function(value) {
this.uniforms.invert.value = value;
}
});

38
src/pixi/filters/SepiaFilter.js Normal file
View file

@ -0,0 +1,38 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.SepiaFilter = function()
{
// set the uniforms
this.uniforms = {
sepia: {type: 'f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float sepia;",
"uniform sampler2D uSampler;",
"const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
get: function() {
return this.uniforms.sepia.value;
},
set: function(value) {
this.uniforms.sepia.value = value;
}
});

163
src/pixi/renderers/canvas/CanvasRenderer.js
View file

@ -54,9 +54,9 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.refresh = true; this.refresh = true;
// hack to enable some hardware acceleration! // hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)"; //this.view.style["transform"] = "translatez(0)";
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
this.count = 0; this.count = 0;
} }
@ -71,25 +71,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/ */
PIXI.CanvasRenderer.prototype.render = function(stage) PIXI.CanvasRenderer.prototype.render = function(stage)
{ {
//stage.__childrenAdded = []; //stage.__childrenAdded = [];
//stage.__childrenRemoved = []; //stage.__childrenRemoved = [];
// update textures if need be // update textures if need be
PIXI.texturesToUpdate = []; PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = []; PIXI.texturesToDestroy = [];
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
// update the background color // update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0); this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height) this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage); this.renderDisplayObject(stage);
//as //as
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
{ {
@ -100,14 +100,14 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// remove frame updates.. // remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0) if(PIXI.Texture.frameUpdates.length > 0)
{ {
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
/** /**
@ -121,7 +121,7 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.view.width = width; this.view.width = width;
this.view.height = height; this.view.height = height;
} }
@ -138,50 +138,50 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
// no loger recurrsive! // no loger recurrsive!
var transform; var transform;
var context = this.context; var context = this.context;
context.globalCompositeOperation = 'source-over'; context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop // one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext; var testObject = displayObject.last._iNext;
displayObject = displayObject.first; displayObject = displayObject.first;
do do
{ {
transform = displayObject.worldTransform; transform = displayObject.worldTransform;
if(!displayObject.visible) if(!displayObject.visible)
{ {
displayObject = displayObject.last._iNext; displayObject = displayObject.last._iNext;
continue; continue;
} }
if(!displayObject.renderable) if(!displayObject.renderable)
{ {
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
continue; continue;
} }
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var frame = displayObject.texture.frame; var frame = displayObject.texture.frame;
if(frame && frame.width && frame.height) if(frame && frame.width && frame.height)
{ {
context.globalAlpha = displayObject.worldAlpha; context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
context.drawImage(displayObject.texture.baseTexture.source, context.drawImage(displayObject.texture.baseTexture.source,
frame.x, frame.x,
frame.y, frame.y,
frame.width, frame.width,
frame.height, frame.height,
(displayObject.anchor.x) * -frame.width, (displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height, (displayObject.anchor.y) * -frame.height,
frame.width, frame.width,
frame.height); frame.height);
} }
} }
else if(displayObject instanceof PIXI.Strip) else if(displayObject instanceof PIXI.Strip)
{ {
@ -204,37 +204,44 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
} }
else if(displayObject instanceof PIXI.FilterBlock) else if(displayObject instanceof PIXI.FilterBlock)
{ {
if(displayObject.open) if(PIXI.FilterBlock.data instanceof PIXI.Graphics)
{ {
context.save(); if(displayObject.open)
{
var cacheAlpha = displayObject.mask.alpha; context.save();
var maskTransform = displayObject.mask.worldTransform;
var cacheAlpha = displayObject.mask.alpha;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) var maskTransform = displayObject.mask.worldTransform;
displayObject.mask.worldAlpha = 0.5; context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
context.worldAlpha = 0; displayObject.mask.worldAlpha = 0.5;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context); context.worldAlpha = 0;
context.clip();
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
displayObject.mask.worldAlpha = cacheAlpha; context.clip();
displayObject.mask.worldAlpha = cacheAlpha;
}
else
{
context.restore();
}
} }
else else
{ {
context.restore(); // only masks supported right now!
} }
} }
// count++ // count++
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
} }
while(displayObject != testObject) while(displayObject != testObject)
} }
/** /**
@ -249,26 +256,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
var context = this.context; var context = this.context;
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
context.beginPath(); context.beginPath();
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0); context.moveTo(x0, y0);
context.lineTo(x1, y1); context.lineTo(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
}; };
context.fillStyle = "#FF0000"; context.fillStyle = "#FF0000";
context.fill(); context.fill();
context.closePath(); context.closePath();
@ -284,26 +291,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{ {
var context = this.context; var context = this.context;
context.globalAlpha = sprite.worldAlpha; context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath(); context.beginPath();
var tilePosition = sprite.tilePosition; var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale; var tileScale = sprite.tileScale;
// offset // offset
context.scale(tileScale.x,tileScale.y); context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y); context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern; context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y); context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y); context.translate(-tilePosition.x, -tilePosition.y);
context.closePath(); context.closePath();
} }
@ -321,18 +328,18 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// draw triangles!! // draw triangles!!
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
@ -343,10 +350,10 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.lineTo(x1, y1); context.lineTo(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
context.closePath(); context.closePath();
context.clip(); context.clip();
// Compute matrix transform // Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
@ -355,16 +362,16 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(delta_a/delta, delta_d/delta, context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta, delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta); delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0); context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore(); context.restore();
}; };
} }

70
src/pixi/renderers/webgl/PixiShader.js Normal file
View file

@ -0,0 +1,70 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.PixiShader = function()
{
// the webGL program..
this.program;
this.fragmentSrc = [
"precision lowp float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;",
"}"
];
}
PIXI.PixiShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc || PIXI.shaderVertexSrc, this.fragmentSrc)
var gl = PIXI.gl;
gl.useProgram(program);
// 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");
// add those custom shaders!
for (var key in this.uniforms)
{
// get the uniform locations..
program[key] = gl.getUniformLocation(program, key);
}
this.program = program;
}
PIXI.PixiShader.prototype.syncUniforms = function()
{
var gl = PIXI.gl;
for (var key in this.uniforms)
{
//var
var type = this.uniforms[key].type;
// need to grow this!
if(type == "f")
{
gl.uniform1f(this.program[key], this.uniforms[key].value);
}
else if(type == "mat4")
{
gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
}
}
}

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

@ -24,7 +24,7 @@ PIXI._getBatch = function(gl)
*/ */
PIXI._returnBatch = function(batch) PIXI._returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
@ -33,7 +33,7 @@ PIXI._returnBatch = function(batch)
*/ */
PIXI._restoreBatchs = function(gl) PIXI._restoreBatchs = function(gl)
{ {
for (var i=0; i < PIXI._batchs.length; i++) for (var i=0; i < PIXI._batchs.length; i++)
{ {
PIXI._batchs[i].restoreLostContext(gl); PIXI._batchs[i].restoreLostContext(gl);
}; };
@ -54,7 +54,7 @@ PIXI._restoreBatchs = function(gl)
PIXI.WebGLBatch = function(gl) PIXI.WebGLBatch = function(gl)
{ {
this.gl = gl; this.gl = gl;
this.size = 0; this.size = 0;
this.vertexBuffer = gl.createBuffer(); this.vertexBuffer = gl.createBuffer();
@ -108,7 +108,7 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
* @method init * @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with
* the same base texture and blend mode will be allowed to be added to this batch * the same base texture and blend mode will be allowed to be added to this batch
*/ */
PIXI.WebGLBatch.prototype.init = function(sprite) PIXI.WebGLBatch.prototype.init = function(sprite)
{ {
sprite.batch = this; sprite.batch = this;
@ -128,7 +128,7 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
* @method insertBefore * @method insertBefore
* @param sprite {Sprite} the sprite to be added * @param sprite {Sprite} the sprite to be added
* @param nextSprite {nextSprite} the first sprite will be inserted before this sprite * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite
*/ */
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{ {
this.size++; this.size++;
@ -156,7 +156,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
* @method insertAfter * @method insertAfter
* @param sprite {Sprite} the sprite to be added * @param sprite {Sprite} the sprite to be added
* @param previousSprite {Sprite} the first sprite will be inserted after this sprite * @param previousSprite {Sprite} the first sprite will be inserted after this sprite
*/ */
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{ {
this.size++; this.size++;
@ -184,7 +184,7 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
* *
* @method remove * @method remove
* @param sprite {Sprite} the sprite to be removed * @param sprite {Sprite} the sprite to be removed
*/ */
PIXI.WebGLBatch.prototype.remove = function(sprite) PIXI.WebGLBatch.prototype.remove = function(sprite)
{ {
this.size--; this.size--;
@ -268,7 +268,7 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
* Merges two batchs together * Merges two batchs together
* *
* @method merge * @method merge
* @param batch {WebGLBatch} the batch that will be merged * @param batch {WebGLBatch} the batch that will be merged
*/ */
PIXI.WebGLBatch.prototype.merge = function(batch) PIXI.WebGLBatch.prototype.merge = function(batch)
{ {
@ -325,10 +325,10 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.dirtyColors = true; this.dirtyColors = true;
this.indices = new Uint16Array(this.dynamicSize * 6); this.indices = new Uint16Array(this.dynamicSize * 6);
var length = this.indices.length/6; var length = this.indices.length/6;
for (var i=0; i < length; i++) for (var i=0; i < length; i++)
{ {
var index2 = i * 6; var index2 = i * 6;
var index3 = i * 4; var index3 = i * 4;
@ -381,7 +381,7 @@ PIXI.WebGLBatch.prototype.refresh = function()
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
@ -443,17 +443,17 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2]; tx = worldTransform[2];
ty = worldTransform[5]; ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty; this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx; this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty; this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx; this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty; this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx; this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty; this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame) if(displayObject.updateFrame || displayObject.texture.updateFrame)
{ {
@ -472,7 +472,7 @@ PIXI.WebGLBatch.prototype.update = function()
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
@ -522,7 +522,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
start = start || 0; start = start || 0;
if(end == undefined)end = this.size; if(end == undefined)end = this.size;
if(this.dirty) if(this.dirty)
{ {
this.refresh(); this.refresh();
@ -536,8 +536,9 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
//TODO optimize this! //TODO optimize this!
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.currentShader;
gl.useProgram(shaderProgram);
//gl.useProgram(shaderProgram);
// update the verts.. // update the verts..
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
@ -545,6 +546,8 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
var isDefault = (shaderProgram == PIXI.shaderProgram)
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
if(this.dirtyUVS) if(this.dirtyUVS)
@ -568,7 +571,6 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
} }
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

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

@ -9,7 +9,7 @@
*/ */
PIXI.WebGLGraphics = function() PIXI.WebGLGraphics = function()
{ {
} }
/** /**
@ -24,62 +24,64 @@ PIXI.WebGLGraphics = function()
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(), buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()}; indexBuffer:gl.createBuffer()};
if(graphics.dirty) if(graphics.dirty)
{ {
graphics.dirty = false; graphics.dirty = false;
if(graphics.clearDirty) if(graphics.clearDirty)
{ {
graphics.clearDirty = false; graphics.clearDirty = false;
graphics._webGL.lastIndex = 0; graphics._webGL.lastIndex = 0;
graphics._webGL.points = []; graphics._webGL.points = [];
graphics._webGL.indices = []; graphics._webGL.indices = [];
} }
PIXI.WebGLGraphics.updateGraphics(graphics); PIXI.WebGLGraphics.updateGraphics(graphics);
} }
PIXI.activatePrimitiveShader(); PIXI.activatePrimitiveShader();
// This could be speeded up fo sure! // This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform); var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m); PIXI.mat3.transpose(m);
// set the matrix transform for the // set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha); gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
// WHY DOES THIS LINE NEED TO BE THERE??? // WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); //gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// its not even used.. but need to be set or it breaks? // its not even used.. but need to be set or it breaks?
// only on pc though.. // only on pc though..
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0); 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.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer! // set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
PIXI.deactivatePrimitiveShader();
// return to default shader... // return to default shader...
PIXI.activateDefaultShader(); // PIXI.activateShader(PIXI.defaultShader);
} }
/** /**
@ -92,18 +94,18 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/ */
PIXI.WebGLGraphics.updateGraphics = function(graphics) PIXI.WebGLGraphics.updateGraphics = function(graphics)
{ {
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{ {
var data = graphics.graphicsData[i]; var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
if(data.fill) if(data.fill)
{ {
if(data.points.length>3) if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
} }
if(data.lineWidth > 0) if(data.lineWidth > 0)
{ {
PIXI.WebGLGraphics.buildLine(data, graphics._webGL); PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
@ -118,18 +120,18 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
} }
}; };
graphics._webGL.lastIndex = graphics.graphicsData.length; graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl; var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
} }
@ -147,45 +149,45 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{ {
// --- // // --- //
// need to convert points to a nice regular data // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
if(graphicsData.fill) if(graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vertPos = verts.length/6; var vertPos = verts.length/6;
// start // start
verts.push(x, y); verts.push(x, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y); verts.push(x + width, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x , y + height); verts.push(x , y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y + height); verts.push(x + width, y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
// insert 2 dead triangles.. // insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
} }
if(graphicsData.lineWidth) if(graphicsData.lineWidth)
{ {
graphicsData.points = [x, y, graphicsData.points = [x, y,
@ -193,10 +195,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
x + width, y + height, x + width, y + height,
x, y + height, x, y + height,
x, y]; x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
/** /**
@ -212,16 +214,16 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{ {
// --- // // --- //
// need to convert points to a nice regular data // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
var totalSegs = 40; var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ; var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill) if(graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
@ -230,41 +232,41 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vecPos = verts.length/6; var vecPos = verts.length/6;
indices.push(vecPos); indices.push(vecPos);
for (var i=0; i < totalSegs + 1 ; i++) for (var i=0; i < totalSegs + 1 ; i++)
{ {
verts.push(x,y, r, g, b, alpha); verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width, verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height, y + Math.cos(seg * i) * height,
r, g, b, alpha); r, g, b, alpha);
indices.push(vecPos++, vecPos++); indices.push(vecPos++, vecPos++);
}; };
indices.push(vecPos-1); indices.push(vecPos-1);
} }
if(graphicsData.lineWidth) if(graphicsData.lineWidth)
{ {
graphicsData.points = []; graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++) for (var i=0; i < totalSegs + 1; i++)
{ {
graphicsData.points.push(x + Math.sin(seg * i) * width, graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height) y + Math.cos(seg * i) * height)
}; };
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
/** /**
@ -279,89 +281,89 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{ {
// TODO OPTIMISE! // TODO OPTIMISE!
var wrap = true; var wrap = true;
var points = graphicsData.points; var points = graphicsData.points;
if(points.length == 0)return; if(points.length == 0)return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] ); var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
// if the first point is the last point - goona have issues :) // if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
{ {
points.pop(); points.pop();
points.pop(); points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY); points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY) points.push(midPointX, midPointY)
} }
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var length = points.length / 2;
var indexCount = points.length; var indexCount = points.length;
var indexStart = verts.length/6; var indexStart = verts.length/6;
// DRAW the Line // DRAW the Line
var width = graphicsData.lineWidth / 2; var width = graphicsData.lineWidth / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.lineColor); var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha; var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y; var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy; var ipx, ipy;
var a1, b1, c1, a2, b2, c2; var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist; var denom, pdist, dist;
p1x = points[0]; p1x = points[0];
p1y = points[1]; p1y = points[1];
p2x = points[2]; p2x = points[2];
p2y = points[3]; p2y = points[3];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
// start // start
verts.push(p1x - perpx , p1y - perpy, verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha); r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy, verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha); r, g, b, alpha);
for (var i = 1; i < length-1; i++) for (var i = 1; i < length-1; i++)
{ {
p1x = points[(i-1)*2]; p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1]; p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2] p2x = points[(i)*2]
p2y = points[(i)*2 + 1] p2y = points[(i)*2 + 1]
p3x = points[(i+1)*2]; p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1]; p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
@ -370,91 +372,91 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2x = -(p2y - p3y); perp2x = -(p2y - p3y);
perp2y = p2x - p3x; perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist; perp2x /= dist;
perp2y /= dist; perp2y /= dist;
perp2x *= width; perp2x *= width;
perp2y *= width; perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y); a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x); b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y); a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x); b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1; denom = a1*b2 - a2*b1;
if (denom == 0) { if (denom == 0) {
denom+=1; denom+=1;
} }
px = (b1*c2 - b2*c1)/denom; px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom; py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140) if(pdist > 140 * 140)
{ {
perp3x = perpx - perp2x; perp3x = perpx - perp2x;
perp3y = perpy - perp2y; perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist; perp3x /= dist;
perp3y /= dist; perp3y /= dist;
perp3x *= width; perp3x *= width;
perp3y *= width; perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y); verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indexCount++; indexCount++;
} }
else else
{ {
verts.push(px , py); verts.push(px , py);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
} }
} }
p1x = points[(length-2)*2] p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1] p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2] p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1] p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y) perpx = -(p1y - p2y)
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
verts.push(p2x - perpx , p2y - perpy) verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy) verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indices.push(indexStart); indices.push(indexStart);
for (var i=0; i < indexCount; i++) for (var i=0; i < indexCount; i++)
{ {
indices.push(indexStart++); indices.push(indexStart++);
}; };
indices.push(indexStart-1); indices.push(indexStart-1);
} }
@ -471,25 +473,25 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{ {
var points = graphicsData.points; var points = graphicsData.points;
if(points.length < 6)return; if(points.length < 6)return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var length = points.length / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.fillColor); var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points); var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6; var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3) for (var i=0; i < triangles.length; i+=3)
{ {
indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos);
@ -497,8 +499,8 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos); indices.push(triangles[i+2] + vertPos);
}; };
for (var i = 0; i < length; i++) for (var i = 0; i < length; i++)
{ {
verts.push(points[i * 2], points[i * 2 + 1], verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha); r, g, b, alpha);

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

@ -19,7 +19,7 @@ PIXI.WebGLRenderGroup = function(gl)
{ {
this.gl = gl; this.gl = gl;
this.root; this.root;
this.backgroundColor; this.backgroundColor;
this.batchs = []; this.batchs = [];
this.toRemove = []; this.toRemove = [];
@ -33,18 +33,18 @@ PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
* *
* @method setRenderable * @method setRenderable
* @param displayObject {DisplayObject} * @param displayObject {DisplayObject}
* @private * @private
*/ */
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{ {
// has this changed?? // has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root); if(this.root)this.removeDisplayObjectAndChildren(this.root);
displayObject.worldVisible = displayObject.visible; displayObject.worldVisible = displayObject.visible;
// soooooo // // soooooo //
// to check if any batchs exist already?? // to check if any batchs exist already??
// TODO what if its already has an object? should remove it // TODO what if its already has an object? should remove it
this.root = displayObject; this.root = displayObject;
this.addDisplayObjectAndChildren(displayObject); this.addDisplayObjectAndChildren(displayObject);
@ -59,26 +59,24 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
PIXI.WebGLRenderGroup.prototype.render = function(projection) PIXI.WebGLRenderGroup.prototype.render = function(projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
var gl = this.gl; var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// will render all the elements in the group // will render all the elements in the group
var renderable; var renderable;
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{ {
renderable = this.batchs[i]; renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch) if(renderable instanceof PIXI.WebGLBatch)
{ {
this.batchs[i].render(); this.batchs[i].render();
continue; continue;
} }
// non sprite batch.. // non sprite batch..
var worldVisible = renderable.vcount === PIXI.visibleCount; var worldVisible = renderable.vcount === PIXI.visibleCount;
@ -96,42 +94,10 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
} }
else if(renderable instanceof PIXI.FilterBlock) else if(renderable instanceof PIXI.FilterBlock)
{ {
/* this.handleFilterBlock(renderable, projection);
* for now only masks are supported..
*/
if(renderable.open)
{
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
}
else
{
gl.disable(gl.STENCIL_TEST);
}
} }
} }
}
/**
* Renders the stage to its webgl view
*
* @method handleFilter
* @param filter {FilterBlock}
* @private
*/
PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{
} }
/** /**
@ -145,20 +111,19 @@ PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection) PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
var gl = this.gl; var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
// to do! // to do!
// render part of the scene... // render part of the scene...
var startIndex; var startIndex;
var startBatchIndex; var startBatchIndex;
var endIndex; var endIndex;
var endBatchIndex; var endBatchIndex;
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * This part looks for the closest next sprite that can go into a batch
@ -172,14 +137,14 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
} }
var startBatch = nextRenderable.batch; var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite) if(nextRenderable instanceof PIXI.Sprite)
{ {
startBatch = nextRenderable.batch; startBatch = nextRenderable.batch;
var head = startBatch.head; var head = startBatch.head;
var next = head; var next = head;
// ok now we have the batch.. need to find the start index! // ok now we have the batch.. need to find the start index!
if(head == nextRenderable) if(head == nextRenderable)
{ {
@ -188,7 +153,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else else
{ {
startIndex = 1; startIndex = 1;
while(head.__next != nextRenderable) while(head.__next != nextRenderable)
{ {
startIndex++; startIndex++;
@ -200,7 +165,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
startBatch = nextRenderable; startBatch = nextRenderable;
} }
// Get the LAST renderable object // Get the LAST renderable object
var lastRenderable = displayObject; var lastRenderable = displayObject;
var endBatch; var endBatch;
@ -208,15 +173,15 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
while(lastItem.children.length > 0) while(lastItem.children.length > 0)
{ {
lastItem = lastItem.children[lastItem.children.length-1]; lastItem = lastItem.children[lastItem.children.length-1];
if(lastItem.renderable)lastRenderable = lastItem; if(lastItem.renderable)lastRenderable = lastItem.last;
} }
if(lastRenderable instanceof PIXI.Sprite) if(lastRenderable instanceof PIXI.Sprite)
{ {
endBatch = lastRenderable.batch; endBatch = lastRenderable.batch;
var head = endBatch.head; var head = endBatch.head;
if(head == lastRenderable) if(head == lastRenderable)
{ {
endIndex = 0; endIndex = 0;
@ -224,7 +189,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else else
{ {
endIndex = 1; endIndex = 1;
while(head.__next != lastRenderable) while(head.__next != lastRenderable)
{ {
endIndex++; endIndex++;
@ -236,9 +201,9 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
endBatch = lastRenderable; endBatch = lastRenderable;
} }
// TODO - need to fold this up a bit! // TODO - need to fold this up a bit!
if(startBatch == endBatch) if(startBatch == endBatch)
{ {
if(startBatch instanceof PIXI.WebGLBatch) if(startBatch instanceof PIXI.WebGLBatch)
@ -251,11 +216,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
} }
return; return;
} }
// now we have first and last! // now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch); startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch); endBatchIndex = this.batchs.indexOf(endBatch);
// DO the first batch // DO the first batch
if(startBatch instanceof PIXI.WebGLBatch) if(startBatch instanceof PIXI.WebGLBatch)
{ {
@ -265,12 +230,12 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{ {
this.renderSpecial(startBatch, projection); this.renderSpecial(startBatch, projection);
} }
// DO the middle batchs.. // DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++) for (var i=startBatchIndex+1; i < endBatchIndex; i++)
{ {
renderable = this.batchs[i]; renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch) if(renderable instanceof PIXI.WebGLBatch)
{ {
this.batchs[i].render(); this.batchs[i].render();
@ -280,7 +245,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
this.renderSpecial(renderable, projection); this.renderSpecial(renderable, projection);
} }
} }
// DO the last batch.. // DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch) if(endBatch instanceof PIXI.WebGLBatch)
{ {
@ -302,6 +267,8 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
*/ */
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{ {
var sta = PIXI.shaderStack.length;
var worldVisible = renderable.vcount === PIXI.visibleCount var worldVisible = renderable.vcount === PIXI.visibleCount
if(renderable instanceof PIXI.TilingSprite) if(renderable instanceof PIXI.TilingSprite)
@ -322,27 +289,58 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
} }
else if(renderable instanceof PIXI.FilterBlock) else if(renderable instanceof PIXI.FilterBlock)
{ {
/* this.handleFilterBlock(renderable, projection);
* for now only masks are supported.. }
*/ }
var gl = PIXI.gl; PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(renderable, projection)
{
/*
* for now only masks are supported..
*/
var gl = PIXI.gl;
if(renderable.open) if(renderable.open)
{
if(renderable.data instanceof Array)
{
var filter = renderable.data[0];
if(!filter.shader)
{
var shader = new PIXI.PixiShader();
shader.fragmentSrc = filter.fragmentSrc;
shader.uniforms = filter.uniforms;
shader.init();
filter.shader = shader
}
PIXI.activateShader(filter.shader);
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
}
else
{ {
gl.enable(gl.STENCIL_TEST); gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false); gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff); gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE); gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.data, projection);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
// we know this is a render texture so enable alpha too..
gl.colorMask(true, true, true, true); gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff); gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
} }
}
else
{
if(renderable.data instanceof Array)
{
PIXI.popShader();
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
}
else else
{ {
gl.disable(gl.STENCIL_TEST); gl.disable(gl.STENCIL_TEST);
@ -359,11 +357,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
*/ */
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{ {
// TODO definitely can optimse this function.. // TODO definitely can optimse this function..
this.removeObject(displayObject); this.removeObject(displayObject);
/* /*
* LOOK FOR THE PREVIOUS RENDERABLE * LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch * This part looks for the closest previous sprite that can go into a batch
@ -375,7 +373,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
previousRenderable = previousRenderable._iPrev; previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * This part looks for the closest next sprite that can go into a batch
@ -388,7 +386,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
nextRenderable = nextRenderable._iNext; nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
} }
this.insertObject(displayObject, previousRenderable, nextRenderable); this.insertObject(displayObject, previousRenderable, nextRenderable);
} }
@ -410,13 +408,13 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* It keeps going back until it finds a sprite or the stage * It keeps going back until it finds a sprite or the stage
*/ */
var previousRenderable = start; var previousRenderable = start;
while(previousRenderable != this.root) while(previousRenderable != this.root.first)
{ {
previousRenderable = previousRenderable._iPrev; previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
this.insertAfter(start, previousRenderable); this.insertAfter(start, previousRenderable);
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * This part looks for the closest next sprite that can go into a batch
@ -424,7 +422,7 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* scene graph * scene graph
*/ */
var previousRenderable2 = end; var previousRenderable2 = end;
while(previousRenderable2 != this.root) while(previousRenderable2 != this.root.first)
{ {
previousRenderable2 = previousRenderable2._iPrev; previousRenderable2 = previousRenderable2._iPrev;
if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
@ -456,20 +454,20 @@ PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
/* /*
* LOOK FOR THE PREVIOUS RENDERABLE * LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch * This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage * It keeps going back until it finds a sprite or the stage
*/ */
var previousRenderable = displayObject.first; var previousRenderable = displayObject.first;
while(previousRenderable != this.root.first) while(previousRenderable != this.root.first)
{ {
previousRenderable = previousRenderable._iPrev; previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break; if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
} }
/* /*
* LOOK FOR THE NEXT SPRITE * LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch * This part looks for the closest next sprite that can go into a batch
@ -482,22 +480,22 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
nextRenderable = nextRenderable._iNext; nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
} }
// one the display object hits this. we can break the loop // one the display object hits this. we can break the loop
var tempObject = displayObject.first; var tempObject = displayObject.first;
var testObject = displayObject.last._iNext; var testObject = displayObject.last._iNext;
do do
{ {
tempObject.__renderGroup = this; tempObject.__renderGroup = this;
if(tempObject.renderable) if(tempObject.renderable)
{ {
this.insertObject(tempObject, previousRenderable, nextRenderable); this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject; previousRenderable = tempObject;
} }
tempObject = tempObject._iNext; tempObject = tempObject._iNext;
} }
while(tempObject != testObject) while(tempObject != testObject)
@ -513,10 +511,10 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{ {
if(displayObject.__renderGroup != this)return; if(displayObject.__renderGroup != this)return;
// var displayObject = displayObject.first; // var displayObject = displayObject.first;
var lastObject = displayObject.last; var lastObject = displayObject.last;
do do
{ {
displayObject.__renderGroup = null; displayObject.__renderGroup = null;
if(displayObject.renderable)this.removeObject(displayObject); if(displayObject.renderable)this.removeObject(displayObject);
@ -539,16 +537,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
var previousSprite = previousObject; var previousSprite = previousObject;
var nextSprite = nextObject; var nextSprite = nextObject;
/* /*
* so now we have the next renderable and the previous renderable * so now we have the next renderable and the previous renderable
* *
*/ */
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var previousBatch var previousBatch
var nextBatch var nextBatch
if(previousSprite instanceof PIXI.Sprite) if(previousSprite instanceof PIXI.Sprite)
{ {
previousBatch = previousSprite.batch; previousBatch = previousSprite.batch;
@ -566,13 +564,13 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// TODO reword! // TODO reword!
previousBatch = previousSprite; previousBatch = previousSprite;
} }
if(nextSprite) if(nextSprite)
{ {
if(nextSprite instanceof PIXI.Sprite) if(nextSprite instanceof PIXI.Sprite)
{ {
nextBatch = nextSprite.batch; nextBatch = nextSprite.batch;
//batch may not exist if item was added to the display list but not to the webGL //batch may not exist if item was added to the display list but not to the webGL
if(nextBatch) if(nextBatch)
{ {
@ -588,18 +586,18 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// THERE IS A SPLIT IN THIS BATCH! // // THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite); var splitBatch = previousBatch.split(nextSprite);
// COOL! // COOL!
// add it back into the array // add it back into the array
/* /*
* OOPS! * OOPS!
* seems the new sprite is in the middle of a batch * seems the new sprite is in the middle of a batch
* lets split it.. * lets split it..
*/ */
var batch = PIXI.WebGLRenderer.getBatch(); var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject); batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch); this.batchs.splice(index+1, 0, batch, splitBatch);
return; return;
} }
} }
@ -608,21 +606,21 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else else
{ {
// TODO re-word! // TODO re-word!
nextBatch = nextSprite; nextBatch = nextSprite;
} }
} }
/* /*
* looks like it does not belong to any batch! * looks like it does not belong to any batch!
* but is also not intersecting one.. * but is also not intersecting one..
* time to create anew one! * time to create anew one!
*/ */
var batch = PIXI.WebGLRenderer.getBatch(); var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject); batch.init(displayObject);
if(previousBatch) // if this is invalid it means if(previousBatch) // if this is invalid it means
{ {
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch); this.batchs.splice(index+1, 0, batch);
@ -631,16 +629,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
{ {
this.batchs.push(batch); this.batchs.push(batch);
} }
return; return;
} }
else if(displayObject instanceof PIXI.TilingSprite) else if(displayObject instanceof PIXI.TilingSprite)
{ {
// add to a batch!! // add to a batch!!
this.initTilingSprite(displayObject); this.initTilingSprite(displayObject);
// this.batchs.push(displayObject); // this.batchs.push(displayObject);
} }
else if(displayObject instanceof PIXI.Strip) else if(displayObject instanceof PIXI.Strip)
{ {
@ -651,14 +649,14 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else if(displayObject)// instanceof PIXI.Graphics) else if(displayObject)// instanceof PIXI.Graphics)
{ {
//displayObject.initWebGL(this); //displayObject.initWebGL(this);
// add to a batch!! // add to a batch!!
//this.initStrip(displayObject); //this.initStrip(displayObject);
//this.batchs.push(displayObject); //this.batchs.push(displayObject);
} }
this.insertAfter(displayObject, previousSprite); this.insertAfter(displayObject, previousSprite);
// insert and SPLIT! // insert and SPLIT!
} }
@ -676,31 +674,31 @@ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var previousBatch = displayObject.batch; var previousBatch = displayObject.batch;
if(previousBatch) if(previousBatch)
{ {
// so this object is in a batch! // so this object is in a batch!
// is it not? need to split the batch // is it not? need to split the batch
if(previousBatch.tail == displayObject) if(previousBatch.tail == displayObject)
{ {
// is it tail? insert in to batchs // is it tail? insert in to batchs
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item); this.batchs.splice(index+1, 0, item);
} }
else else
{ {
// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
// THERE IS A SPLIT IN THIS BATCH! // // THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(displayObject.__next); var splitBatch = previousBatch.split(displayObject.__next);
// COOL! // COOL!
// add it back into the array // add it back into the array
/* /*
* OOPS! * OOPS!
* seems the new sprite is in the middle of a batch * seems the new sprite is in the middle of a batch
* lets split it.. * lets split it..
*/ */
var index = this.batchs.indexOf( previousBatch ); var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch); this.batchs.splice(index+1, 0, item, splitBatch);
@ -729,25 +727,25 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{ {
// loop through children.. // loop through children..
// display object // // display object //
// add a child from the render group.. // add a child from the render group..
// remove it and all its children! // remove it and all its children!
//displayObject.cacheVisible = false;//displayObject.visible; //displayObject.cacheVisible = false;//displayObject.visible;
/* /*
* removing is a lot quicker.. * removing is a lot quicker..
* *
*/ */
var batchToRemove; var batchToRemove;
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
// should always have a batch! // should always have a batch!
var batch = displayObject.batch; var batch = displayObject.batch;
if(!batch)return; // this means the display list has been altered befre rendering if(!batch)return; // this means the display list has been altered befre rendering
batch.remove(displayObject); batch.remove(displayObject);
if(batch.size==0) if(batch.size==0)
{ {
batchToRemove = batch; batchToRemove = batch;
@ -757,15 +755,15 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{ {
batchToRemove = displayObject; batchToRemove = displayObject;
} }
/* /*
* Looks like there is somthing that needs removing! * Looks like there is somthing that needs removing!
*/ */
if(batchToRemove) if(batchToRemove)
{ {
var index = this.batchs.indexOf( batchToRemove ); var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;// this means it was added then removed before rendered if(index == -1)return;// this means it was added then removed before rendered
// ok so.. check to see if you adjacent batchs should be joined. // ok so.. check to see if you adjacent batchs should be joined.
// TODO may optimise? // TODO may optimise?
if(index == 0 || index == this.batchs.length-1) if(index == 0 || index == this.batchs.length-1)
@ -773,29 +771,30 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
// wha - eva! just get of the empty batch! // wha - eva! just get of the empty batch!
this.batchs.splice(index, 1); this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return; return;
} }
if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
{ {
if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
{ {
//console.log("MERGE") //console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]); this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2); this.batchs.splice(index, 2);
return; return;
} }
} }
this.batchs.splice(index, 1); this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
} }
} }
/** /**
* Initializes a tiling sprite * Initializes a tiling sprite
* *
@ -808,26 +807,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
var gl = this.gl; var gl = this.gl;
// make the texture tilable.. // make the texture tilable..
sprite.verticies = new Float32Array([0, 0, sprite.verticies = new Float32Array([0, 0,
sprite.width, 0, sprite.width, 0,
sprite.width, sprite.height, sprite.width, sprite.height,
0, sprite.height]); 0, sprite.height]);
sprite.uvs = new Float32Array([0, 0, sprite.uvs = new Float32Array([0, 0,
1, 0, 1, 0,
1, 1, 1, 1,
0, 1]); 0, 1]);
sprite.colors = new Float32Array([1,1,1,1]); sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite._vertexBuffer = gl.createBuffer(); sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);
@ -839,7 +838,7 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) ); // return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture) if(sprite.texture.baseTexture._glTexture)
@ -866,23 +865,19 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection) PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.stripShaderProgram;
// mat
//var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
//PIXI.mat4.transpose(mat4Real); gl.useProgram(shaderProgram);
//PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
gl.useProgram(PIXI.stripShaderProgram);
var m = PIXI.mat3.clone(strip.worldTransform); var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m); PIXI.mat3.transpose(m);
// set the matrix transform for the // set the matrix transform for the
gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m); gl.uniformMatrix3fv(shaderProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y); gl.uniform2f(shaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha); gl.uniform1f(shaderProgram.alpha, strip.worldAlpha);
/* /*
if(strip.blendMode == PIXI.blendModes.NORMAL) if(strip.blendMode == PIXI.blendModes.NORMAL)
@ -894,25 +889,25 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
} }
*/ */
if(!strip.dirty) if(!strip.dirty)
{ {
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
} }
@ -922,29 +917,28 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
} }
//console.log(gl.TRIANGLE_STRIP);
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.useProgram(PIXI.shaderProgram); gl.useProgram(PIXI.currentProgram);
} }
/** /**
@ -959,31 +953,31 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition; var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale; var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height; var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;
sprite.uvs[0] = 0 - offsetX; sprite.uvs[0] = 0 - offsetX;
sprite.uvs[1] = 0 - offsetY; sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[2] = (1 * scaleX) -offsetX;
sprite.uvs[3] = 0 - offsetY; sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[4] = (1 *scaleX) - offsetX;
sprite.uvs[5] = (1 *scaleY) - offsetY; sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 - offsetX; sprite.uvs[6] = 0 - offsetX;
sprite.uvs[7] = (1 *scaleY) - offsetY; sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
this.renderStrip(sprite, projectionMatrix); this.renderStrip(sprite, projectionMatrix);
} }
@ -999,12 +993,12 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
// build the strip! // build the strip!
var gl = this.gl; var gl = this.gl;
var shaderProgram = this.shaderProgram; var shaderProgram = this.shaderProgram;
strip._vertexBuffer = gl.createBuffer(); strip._vertexBuffer = gl.createBuffer();
strip._indexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer();
strip._uvBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer();
strip._colorBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);
@ -1014,7 +1008,8 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
} }

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

@ -21,7 +21,7 @@ PIXI.gl;
* @param view {Canvas} the canvas to use as a view, optional * @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false * @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
* *
*/ */
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{ {
@ -32,36 +32,37 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.width = width || 800; this.width = width || 800;
this.height = height || 600; this.height = height || 600;
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
// deal with losing context.. // deal with losing context..
var scope = this; var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = []; this.batchs = [];
try try
{ {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent, alpha: this.transparent,
antialias:!!antialias, // SPEED UP?? antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false, premultipliedAlpha:false,
stencil:true stencil:true
}); });
} }
catch (e) catch (e)
{ {
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
} }
PIXI.initPrimitiveShader();
PIXI.initDefaultShader(); PIXI.initDefaultShader();
PIXI.initPrimitiveShader();
PIXI.initDefaultStripShader(); PIXI.initDefaultStripShader();
PIXI.activateDefaultShader();
// PIXI.activateDefaultShader();
var gl = this.gl; var gl = this.gl;
PIXI.WebGLRenderer.gl = gl; PIXI.WebGLRenderer.gl = gl;
@ -71,14 +72,17 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
gl.disable(gl.CULL_FACE); gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300); PIXI.projection = new PIXI.Point(400, 300);
this.resize(this.width, this.height); this.resize(this.width, this.height);
this.contextLost = false; this.contextLost = false;
PIXI.activateShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl); this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
} }
// constructor // constructor
@ -90,7 +94,7 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
* @static * @static
* @method getBatch * @method getBatch
* @return {WebGLBatch} * @return {WebGLBatch}
* @private * @private
*/ */
PIXI.WebGLRenderer.getBatch = function() PIXI.WebGLRenderer.getBatch = function()
{ {
@ -114,7 +118,7 @@ PIXI.WebGLRenderer.getBatch = function()
*/ */
PIXI.WebGLRenderer.returnBatch = function(batch) PIXI.WebGLRenderer.returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
@ -127,8 +131,8 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI.WebGLRenderer.prototype.render = function(stage) PIXI.WebGLRenderer.prototype.render = function(stage)
{ {
if(this.contextLost)return; if(this.contextLost)return;
// if rendering a new stage clear the batchs.. // if rendering a new stage clear the batchs..
if(this.__stage !== stage) if(this.__stage !== stage)
{ {
@ -137,8 +141,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.__stage = stage; this.__stage = stage;
this.stageRenderGroup.setRenderable(stage); this.stageRenderGroup.setRenderable(stage);
} }
// TODO not needed now... // TODO not needed now...
// update children if need be // update children if need be
// best to remove first! // best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++) /*for (var i=0; i < stage.__childrenRemoved.length; i++)
@ -147,29 +151,29 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]); if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/ }*/
// update any textures // update any textures
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
// update the scene graph // update the scene graph
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
var gl = this.gl; var gl = this.gl;
// -- Does this need to be set every frame? -- // // -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height); gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST // HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection); this.stageRenderGroup.render(PIXI.projection);
// interaction // interaction
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
@ -181,15 +185,15 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// after rendering lets confirm all frames that have been uodated.. // after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0) if(PIXI.Texture.frameUpdates.length > 0)
{ {
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{ {
PIXI.Texture.frameUpdates[i].updateFrame = false; PIXI.Texture.frameUpdates[i].updateFrame = false;
}; };
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
@ -222,7 +226,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
{ {
//TODO break this out into a texture manager... //TODO break this out into a texture manager...
var gl = PIXI.gl; var gl = PIXI.gl;
if(!texture._glTexture) if(!texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
@ -288,7 +292,7 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.view.width = width; this.view.width = width;
this.view.height = height; this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height); this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix; //var projectionMatrix = this.projectionMatrix;
@ -323,20 +327,20 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
*/ */
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{ {
this.gl = this.view.getContext("experimental-webgl", { this.gl = this.view.getContext("experimental-webgl", {
alpha: true alpha: true
}); });
this.initShaders(); this.initShaders();
for(var key in PIXI.TextureCache) for(var key in PIXI.TextureCache)
{ {
var texture = PIXI.TextureCache[key].baseTexture; var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null; texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture); PIXI.WebGLRenderer.updateTexture(texture);
}; };
for (var i=0; i < this.batchs.length; i++) for (var i=0; i < this.batchs.length; i++)
{ {
this.batchs[i].restoreLostContext(this.gl)// this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true; this.batchs[i].dirty = true;

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

@ -1,4 +1,3 @@
/** /**
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
@ -23,13 +22,11 @@ PIXI.shaderVertexSrc = [
"attribute vec2 aVertexPosition;", "attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;", "attribute vec2 aTextureCoord;",
"attribute float aColor;", "attribute float aColor;",
//"uniform mat4 uMVMatrix;",
"uniform vec2 projectionVector;", "uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;", "varying vec2 vTextureCoord;",
"varying float vColor;", "varying float vColor;",
"void main(void) {", "void main(void) {",
// "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
"gl_Position = vec4( aVertexPosition.x / projectionVector.x -1.0, aVertexPosition.y / -projectionVector.y + 1.0 , 0.0, 1.0);", "gl_Position = vec4( aVertexPosition.x / projectionVector.x -1.0, aVertexPosition.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;", "vTextureCoord = aTextureCoord;",
"vColor = aColor;", "vColor = aColor;",
@ -69,7 +66,6 @@ PIXI.stripShaderVertexSrc = [
"}" "}"
]; ];
/* /*
* primitive shader.. * primitive shader..
*/ */
@ -96,48 +92,49 @@ PIXI.primitiveShaderVertexSrc = [
"}" "}"
]; ];
PIXI.initPrimitiveShader = function() PIXI.shaderStack = [];
PIXI.initPrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix"); shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
//gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(shaderProgram.colorAttribute);
//gl.enableVertexAttribArray(program.textureCoordAttribute);
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha"); shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram; PIXI.primitiveProgram = shaderProgram;
} }
PIXI.initDefaultShader = function() PIXI.initDefaultShader = function()
{ {
var gl = this.gl; PIXI.defaultShader = new PIXI.PixiShader();
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc) PIXI.defaultShader.init();
PIXI.activateShader(PIXI.defaultShader);
gl.useProgram(shaderProgram); /*
PIXI.shaderStack.push(PIXI.defaultShader);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); PIXI.current*/
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
// shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram;
} }
PIXI.initDefaultStripShader = function() PIXI.initDefaultStripShader = function()
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -147,11 +144,9 @@ PIXI.initDefaultStripShader = function()
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha"); shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram; PIXI.stripShaderProgram = shaderProgram;
} }
@ -186,9 +181,9 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
var gl = PIXI.gl; var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram(); var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader); gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); gl.linkProgram(shaderProgram);
@ -198,34 +193,64 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
} }
return shaderProgram; return shaderProgram;
}
PIXI.activateShader = function(shader)
{
PIXI.shaderStack.push(shader);
//console.log(">>>")
var gl = PIXI.gl;
var shaderProgram = shader.program;
// map uniforms..
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shader.syncUniforms();
PIXI.currentShader = shaderProgram;
} }
PIXI.activateDefaultShader = function() PIXI.popShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram; // activate last program..
var lastProgram = PIXI.shaderStack.pop();
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
PIXI.currentShader = shaderProgram;
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
} }
PIXI.activatePrimitiveShader = function() PIXI.activatePrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram); gl.useProgram(PIXI.primitiveProgram);
//gl.disableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.disableVertexAttribArray(PIXI.currentShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
}
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute); PIXI.deactivatePrimitiveShader = function()
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute); {
} var gl = PIXI.gl;
gl.useProgram(PIXI.currentShader);
gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.colorAttribute);
}

55
src/pixi/textures/RenderTexture.js
View file

@ -5,11 +5,11 @@
/** /**
A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead. Otherwise black rectangles will be drawn instead.
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
var renderTexture = new PIXI.RenderTexture(800, 600); var renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2; sprite.position.x = 800/2;
@ -37,9 +37,9 @@ PIXI.RenderTexture = function(width, height)
this.width = width || 100; this.width = width || 100;
this.height = height || 100; this.height = height || 100;
this.identityMatrix = PIXI.mat3.create(); this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl) if(PIXI.gl)
{ {
@ -68,7 +68,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width; this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height; this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture(); this.baseTexture = new PIXI.BaseTexture();
@ -96,7 +96,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
// set the correct render function.. // set the correct render function..
this.render = this.renderWebGL; this.render = this.renderWebGL;
} }
@ -105,19 +105,19 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
this.width = width; this.width = width;
this.height = height; this.height = height;
if(PIXI.gl) if(PIXI.gl)
{ {
this.projection.x = this.width/2 this.projection.x = this.width/2
this.projection.y = this.height/2; this.projection.y = this.height/2;
var gl = PIXI.gl; var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
} }
else else
{ {
this.frame.width = this.width this.frame.width = this.width
this.frame.height = this.height; this.frame.height = this.height;
this.renderer.resize(this.width, this.height); this.renderer.resize(this.width, this.height);
@ -153,15 +153,15 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
var gl = PIXI.gl; var gl = PIXI.gl;
// enable the alpha color mask.. // enable the alpha color mask..
gl.colorMask(true, true, true, true); gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height); gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear) if(clear)
{ {
gl.clearColor(0,0,0, 0); gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
} }
@ -170,24 +170,24 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
//TODO -? create a new one??? dont think so! //TODO -? create a new one??? dont think so!
var originalWorldTransform = displayObject.worldTransform; var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.mat3.create();//sthis.identityMatrix; displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
// modify to flip... // modify to flip...
displayObject.worldTransform[4] = -1; displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2; displayObject.worldTransform[5] = this.projection.y * 2;
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y; displayObject.worldTransform[5] -= position.y;
} }
PIXI.visibleCount++; PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount; displayObject.vcount = PIXI.visibleCount;
for(var i=0,j=children.length; i<j; i++) for(var i=0,j=children.length; i<j; i++)
{ {
children[i].updateTransform(); children[i].updateTransform();
} }
var renderGroup = displayObject.__renderGroup; var renderGroup = displayObject.__renderGroup;
@ -209,7 +209,7 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
this.renderGroup.setRenderable(displayObject); this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection); this.renderGroup.render(this.projection);
} }
displayObject.worldTransform = originalWorldTransform; displayObject.worldTransform = originalWorldTransform;
} }
@ -227,26 +227,25 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
var children = displayObject.children; var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create(); displayObject.worldTransform = PIXI.mat3.create();
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y; displayObject.worldTransform[5] = position.y;
} }
for(var i=0,j=children.length; i<j; i++) for(var i=0,j=children.length; i<j; i++)
{ {
children[i].updateTransform(); children[i].updateTransform();
} }
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height); if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject); this.renderer.renderDisplayObject(displayObject);
this.renderer.context.setTransform(1,0,0,1,0,0); this.renderer.context.setTransform(1,0,0,1,0,0);
// PIXI.texturesToUpdate.push(this.baseTexture); // PIXI.texturesToUpdate.push(this.baseTexture);
} }