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

Restructured render texture

Browse source 
fixed bug in canvas renderer
created canvasBuffer object
reworked renderTexture
removed ALL global references
This commit is contained in:
Mat Groves 2013-12-31 16:04:12 +00:00
parent 3dfb854ae6
commit e8b14def95
22 changed files with 1103 additions and 449 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -38,6 +38,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/renderers/webgl/utils/WebGLGraphics.js',
'<%= dirs.src %>/renderers/webgl/WebGLRenderer.js',
'<%= dirs.src %>/renderers/webgl/utils/WebGLMaskManager.js',
'<%= dirs.src %>/renderers/webgl/utils/WebGLShaderManager.js',
'<%= dirs.src %>/renderers/webgl/utils/WebGLSpriteBatch.js',
'<%= dirs.src %>/renderers/webgl/WebGLBatch.js',
'<%= dirs.src %>/renderers/webgl/WebGLRenderGroup.js',

540
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

127
examples/example 11 - RenderTexture/indexNew.html Normal file
View file

@ -0,0 +1,127 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 11 RenderTexture</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000);
// create a renderer instance
// var renderer = new PIXI.autoDetectRenderer(800, 600);
var renderer = new PIXI.CanvasRenderer(800, 600);
// set the canvas width and height to fill the screen
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);
// OOH! SHINY!
// create two render textures.. these dynamic textures will be used to draw the scene into itself
var renderTexture = new PIXI.RenderTexture(800, 600);
var renderTexture2 = new PIXI.RenderTexture(800, 600);
var currentTexture = renderTexture;
// create a new sprite that uses the render texture we created above
var outputSprite = new PIXI.Sprite(currentTexture);
// align the sprite
outputSprite.position.x = 800/2;
outputSprite.position.y = 600/2;
outputSprite.anchor.x = 0.5;
outputSprite.anchor.y = 0.5;
// add to stage
stage.addChild(outputSprite);
var stuffContainer = new PIXI.DisplayObjectContainer();
stuffContainer.position.x = 800/2;
stuffContainer.position.y = 600/2
stage.addChild(stuffContainer);
// create an array of image ids..
var fruits = ["spinObj_01.png", "spinObj_02.png",
"spinObj_03.png", "spinObj_04.png",
"spinObj_05.png", "spinObj_06.png",
"spinObj_07.png", "spinObj_08.png"];
// create an array of items
var items = [];
// now create some items and randomly position them in the stuff container
for (var i=0; i < 20; i++)
{
var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
item.position.x = Math.random() * 400 - 200;
item.position.y = Math.random() * 400 - 200;
item.anchor.x = 0.5;
item.anchor.y = 0.5;
stuffContainer.addChild(item);
console.log("_")
items.push(item);
};
// used for spinning!
var count = 0;
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
for (var i=0; i < items.length; i++)
{
// rotate each item
var item = items[i];
item.rotation += 0.1;
};
count += 0.01;
// swap the buffers..
var temp = renderTexture;
renderTexture = renderTexture2;
renderTexture2 = temp;
// set the new texture
outputSprite.setTexture(renderTexture);
// twist this up!
stuffContainer.rotation -= 0.01
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
// render the stage to the texture
// the true clears the texture before content is rendered
renderTexture2.render(stage, new PIXI.Point(0,0), true);
// and finally render the stage
renderer.render(stage);
}
</script>
</body>
</html>

252
examples/example 2 - SpriteSheet/fighter.json Normal file
View file

@ -0,0 +1,252 @@
{"frames": {
"rollSequence0000.png":
{
"frame": {"x":483,"y":692,"w":169,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":4,"w":169,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0001.png":
{
"frame": {"x":468,"y":2,"w":169,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":4,"w":169,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0002.png":
{
"frame": {"x":639,"y":2,"w":167,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":5,"w":167,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0003.png":
{
"frame": {"x":808,"y":2,"w":165,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":5,"w":165,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0004.png":
{
"frame": {"x":654,"y":688,"w":161,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":5,"w":161,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0005.png":
{
"frame": {"x":817,"y":458,"w":151,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":6,"y":5,"w":151,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0006.png":
{
"frame": {"x":817,"y":686,"w":137,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":11,"y":5,"w":137,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0007.png":
{
"frame": {"x":290,"y":2,"w":113,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":22,"y":3,"w":113,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0008.png":
{
"frame": {"x":284,"y":692,"w":79,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":40,"y":3,"w":79,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0009.png":
{
"frame": {"x":405,"y":2,"w":61,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":53,"y":3,"w":61,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0010.png":
{
"frame": {"x":444,"y":462,"w":49,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":64,"y":3,"w":49,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0011.png":
{
"frame": {"x":377,"y":462,"w":65,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":52,"y":3,"w":65,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0012.png":
{
"frame": {"x":272,"y":462,"w":103,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":37,"y":3,"w":103,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0013.png":
{
"frame": {"x":143,"y":692,"w":139,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":20,"y":3,"w":139,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0014.png":
{
"frame": {"x":2,"y":462,"w":163,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":7,"y":3,"w":163,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0015.png":
{
"frame": {"x":2,"y":2,"w":171,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":2,"y":3,"w":171,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0016.png":
{
"frame": {"x":2,"y":232,"w":163,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":4,"y":3,"w":163,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0017.png":
{
"frame": {"x":2,"y":692,"w":139,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":16,"y":3,"w":139,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0018.png":
{
"frame": {"x":167,"y":462,"w":103,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":35,"y":3,"w":103,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0019.png":
{
"frame": {"x":365,"y":692,"w":65,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":58,"y":3,"w":65,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0020.png":
{
"frame": {"x":432,"y":692,"w":49,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":62,"y":3,"w":49,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0021.png":
{
"frame": {"x":389,"y":232,"w":61,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":61,"y":3,"w":61,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0022.png":
{
"frame": {"x":306,"y":232,"w":81,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":55,"y":3,"w":81,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0023.png":
{
"frame": {"x":175,"y":2,"w":113,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":39,"y":3,"w":113,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0024.png":
{
"frame": {"x":167,"y":232,"w":137,"h":228},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":26,"y":3,"w":137,"h":228},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0025.png":
{
"frame": {"x":664,"y":458,"w":151,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":18,"y":5,"w":151,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0026.png":
{
"frame": {"x":792,"y":230,"w":161,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":11,"y":5,"w":161,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0027.png":
{
"frame": {"x":623,"y":230,"w":167,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":6,"y":5,"w":167,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0028.png":
{
"frame": {"x":495,"y":460,"w":167,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":5,"y":5,"w":167,"h":226},
"sourceSize": {"w":175,"h":240}
},
"rollSequence0029.png":
{
"frame": {"x":452,"y":232,"w":169,"h":226},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":4,"w":169,"h":226},
"sourceSize": {"w":175,"h":240}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "fighter.png",
"format": "RGBA8888",
"size": {"w":1024,"h":1024},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:2f213a6b451f9f5719773418dfe80ae8$"
}
}

BIN
examples/example 2 - SpriteSheet/fighter.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

94
examples/example 2 - SpriteSheet/indexTrim.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 2 loading a sprite sheet</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = [ "fighter.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// holder to store aliens
var aliens = [];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF);
// create a renderer instance.
renderer = PIXI.autoDetectRenderer(800, 600);
//renderer = new PIXI.CanvasRenderer(800, 600);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create an empty container
var alienContainer = new PIXI.DisplayObjectContainer();
alienContainer.position.x = 400;
alienContainer.position.y = 300;
stage.addChild(alienContainer);
function onAssetsLoaded()
{
// create a texture from an image path
// add a bunch of aliens
var frames = [];
for (var i = 0; i < 30; i++) {
var val = i < 10 ? "0" + i : i;
frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png"));
};
movie = new PIXI.MovieClip(frames);
movie.position.x = 300;
movie.position.y = 300;
movie.anchor.x = movie.anchor.y = 0.5//1;
movie.play();
movie.animationSpeed = 0.5;
stage.addChild(movie);
// start animating
requestAnimFrame( animate );
}
function animate() {
requestAnimFrame( animate );
movie.rotation += 0.01;
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>

3
src/pixi/Pixi.js
View file

@ -6,3 +6,6 @@
* @module PIXI
*/
var PIXI = PIXI || {};
PIXI.WEBGL_RENDERER = 0;
PIXI.CANVAS_RENDERER = 1;

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

@ -97,7 +97,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{
if(index >= 0 && index <= this.children.length)
{
if(child.parent !== undefined)
if(child.parent)
{
child.parent.removeChild(child);
}

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

@ -74,6 +74,7 @@ PIXI.Sprite = function(texture)
if(texture.baseTexture.hasLoaded)
{
this.updateFrame = true;
this.onTextureUpdate();
}
else
{
@ -375,12 +376,12 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
}
else
{
context.drawImage(this.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
0,0,
(this.anchor.x) * -frame.width,
(this.anchor.y) * -frame.height,
frame.width,

2
src/pixi/primitives/Graphics.js
View file

@ -248,7 +248,7 @@ PIXI.Graphics.prototype._renderWebGL = function(renderSession)
this.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
}
PIXI.WebGLGraphics.renderGraphics(this, renderSession.projection, renderSession.offset);
PIXI.WebGLGraphics.renderGraphics(this, renderSession);
renderSession.spriteBatch.start();
}

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

@ -15,6 +15,10 @@
*/
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
PIXI.defaultRenderer = PIXI.defaultRenderer || this;
this.type = PIXI.CANVAS_RENDERER;
this.transparent = transparent;
if(!PIXI.blendModesCanvas)
@ -172,12 +176,13 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
* @param displayObject {DisplayObject} The displayObject to render
* @private
*/
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context)
{
// no loger recurrsive!
var transform;
var context = this.context;
//var transform;
//var context = this.context;
this.renderSession.context = context || this.context;
displayObject._renderCanvas(this.renderSession);
};
@ -270,3 +275,28 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.restore();
}
};
PIXI.CanvasBuffer = function(width, height)
{
this.width = width;
this.height = height;
this.canvas = document.createElement( 'canvas' );
this.context = this.canvas.getContext( '2d' );
// this.context.f
this.canvas.width = width;
this.canvas.height = height;
}
PIXI.CanvasBuffer.prototype.clear = function()
{
this.context.clearRect(0,0, this.width, this.height);
}
PIXI.CanvasBuffer.prototype.resize = function(width, height)
{
this.width = this.canvas.width = width;
this.height = this.canvas.height = height;
}

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

@ -7,8 +7,10 @@
* @class PIXI.PixiShader
* @constructor
*/
PIXI.PixiShader = function()
PIXI.PixiShader = function(gl)
{
this.gl = gl;
/**
* @property {any} program - The WebGL program.
*/
@ -32,6 +34,9 @@ PIXI.PixiShader = function()
* @property {number} textureCount - A local texture counter for multi-texture shaders.
*/
this.textureCount = 0;
this.init();
};
/**
@ -39,10 +44,11 @@ PIXI.PixiShader = function()
*/
PIXI.PixiShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
var gl = this.gl;
var program = PIXI.compileProgram(gl, this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc);
gl.useProgram(program);
// get and store the uniforms for the shader
@ -78,7 +84,7 @@ PIXI.PixiShader.prototype.init = function()
PIXI.PixiShader.prototype.initUniforms = function()
{
this.textureCount = 1;
var gl = this.gl
var uniform;
for (var key in this.uniforms)
@ -104,21 +110,21 @@ PIXI.PixiShader.prototype.initUniforms = function()
if (type === 'mat2')
{
uniform.glFunc = PIXI.gl.uniformMatrix2fv;
uniform.glFunc = gl.uniformMatrix2fv;
}
else if (type === 'mat3')
{
uniform.glFunc = PIXI.gl.uniformMatrix3fv;
uniform.glFunc = gl.uniformMatrix3fv;
}
else if (type === 'mat4')
{
uniform.glFunc = PIXI.gl.uniformMatrix4fv;
uniform.glFunc = gl.uniformMatrix4fv;
}
}
else
{
// GL function reference
uniform.glFunc = PIXI.gl['uniform' + type];
uniform.glFunc = gl['uniform' + type];
if (type === '2f' || type === '2i')
{
@ -153,8 +159,10 @@ PIXI.PixiShader.prototype.initSampler2D = function(uniform)
return;
}
PIXI.gl.activeTexture(PIXI.gl['TEXTURE' + this.textureCount]);
PIXI.gl.bindTexture(PIXI.gl.TEXTURE_2D, uniform.value.baseTexture._glTexture);
var gl = this.gl;
gl.activeTexture(gl['TEXTURE' + this.textureCount]);
gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTexture);
// Extended texture data
if (uniform.textureData)
@ -171,19 +179,19 @@ PIXI.PixiShader.prototype.initSampler2D = function(uniform)
// magFilter can be: gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR or gl.NEAREST
// wrapS/T can be: gl.CLAMP_TO_EDGE or gl.REPEAT
var magFilter = (data.magFilter) ? data.magFilter : PIXI.gl.LINEAR;
var minFilter = (data.minFilter) ? data.minFilter : PIXI.gl.LINEAR;
var wrapS = (data.wrapS) ? data.wrapS : PIXI.gl.CLAMP_TO_EDGE;
var wrapT = (data.wrapT) ? data.wrapT : PIXI.gl.CLAMP_TO_EDGE;
var format = (data.luminance) ? PIXI.gl.LUMINANCE : PIXI.gl.RGBA;
var magFilter = (data.magFilter) ? data.magFilter : gl.LINEAR;
var minFilter = (data.minFilter) ? data.minFilter : gl.LINEAR;
var wrapS = (data.wrapS) ? data.wrapS : gl.CLAMP_TO_EDGE;
var wrapT = (data.wrapT) ? data.wrapT : gl.CLAMP_TO_EDGE;
var format = (data.luminance) ? gl.LUMINANCE : gl.RGBA;
if (data.repeat)
{
wrapS = PIXI.gl.REPEAT;
wrapT = PIXI.gl.REPEAT;
wrapS = gl.REPEAT;
wrapT = gl.REPEAT;
}
PIXI.gl.pixelStorei(PIXI.gl.UNPACK_FLIP_Y_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
if (data.width)
{
@ -192,21 +200,21 @@ PIXI.PixiShader.prototype.initSampler2D = function(uniform)
var border = (data.border) ? data.border : 0;
// void texImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, ArrayBufferView? pixels);
PIXI.gl.texImage2D(PIXI.gl.TEXTURE_2D, 0, format, width, height, border, format, PIXI.gl.UNSIGNED_BYTE, null);
gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, border, format, gl.UNSIGNED_BYTE, null);
}
else
{
// void texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, ImageData? pixels);
PIXI.gl.texImage2D(PIXI.gl.TEXTURE_2D, 0, format, PIXI.gl.RGBA, PIXI.gl.UNSIGNED_BYTE, uniform.value.baseTexture.source);
gl.texImage2D(gl.TEXTURE_2D, 0, format, gl.RGBA, gl.UNSIGNED_BYTE, uniform.value.baseTexture.source);
}
PIXI.gl.texParameteri(PIXI.gl.TEXTURE_2D, PIXI.gl.TEXTURE_MAG_FILTER, magFilter);
PIXI.gl.texParameteri(PIXI.gl.TEXTURE_2D, PIXI.gl.TEXTURE_MIN_FILTER, minFilter);
PIXI.gl.texParameteri(PIXI.gl.TEXTURE_2D, PIXI.gl.TEXTURE_WRAP_S, wrapS);
PIXI.gl.texParameteri(PIXI.gl.TEXTURE_2D, PIXI.gl.TEXTURE_WRAP_T, wrapT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
}
PIXI.gl.uniform1i(uniform.uniformLocation, this.textureCount);
gl.uniform1i(uniform.uniformLocation, this.textureCount);
uniform._init = true;
@ -223,6 +231,7 @@ PIXI.PixiShader.prototype.syncUniforms = function()
{
this.textureCount = 1;
var uniform;
var gl = this.gl;
// This would probably be faster in an array and it would guarantee key order
for (var key in this.uniforms)
@ -234,32 +243,32 @@ PIXI.PixiShader.prototype.syncUniforms = function()
{
if (uniform.glMatrix === true)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.transpose, uniform.value);
uniform.glFunc.call(gl, uniform.uniformLocation, uniform.transpose, uniform.value);
}
else
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value);
uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value);
}
}
else if (uniform.glValueLength === 2)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
}
else if (uniform.glValueLength === 3)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
}
else if (uniform.glValueLength === 4)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
}
else if (uniform.type === 'sampler2D')
{
if (uniform._init)
{
PIXI.gl.activeTexture(PIXI.gl['TEXTURE' + this.textureCount]);
PIXI.gl.bindTexture(PIXI.gl.TEXTURE_2D, uniform.value.baseTexture._glTexture);
PIXI.gl.uniform1i(uniform.uniformLocation, this.textureCount);
gl.activeTexture(gl['TEXTURE' + this.textureCount]);
gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTexture);
gl.uniform1i(uniform.uniformLocation, this.textureCount);
this.textureCount++;
}
else

10
src/pixi/renderers/webgl/PrimitiveShader.js
View file

@ -3,8 +3,10 @@
*/
PIXI.PrimitiveShader = function()
PIXI.PrimitiveShader = function(gl)
{
this.gl = gl;
// the webGL program..
this.program = null;
@ -34,14 +36,16 @@ PIXI.PrimitiveShader = function()
' vColor = aColor * vec4(tint * alpha, alpha);',
'}'
];
this.init();
};
PIXI.PrimitiveShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
var gl = this.gl;
var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc);
gl.useProgram(program);
// get and store the uniforms for the shader

4
src/pixi/renderers/webgl/StripShader.js
View file

@ -28,7 +28,7 @@ PIXI.StripShader = function()
'uniform mat3 translationMatrix;',
'uniform vec2 projectionVector;',
'varying vec2 vTextureCoord;',
'varying vec2 offsetVector;',
'attribute vec2 offsetVector;',
'varying float vColor;',
'void main(void) {',
@ -43,10 +43,10 @@ PIXI.StripShader = function()
PIXI.StripShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc);
gl.useProgram(program);
// get and store the uniforms for the shader

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

@ -27,8 +27,11 @@ PIXI.gl = null;
*/
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{
// do a catch.. only 1 webGL renderer..
if(!PIXI.defaultRenderer)PIXI.defaultRenderer = this;
this.type = PIXI.WEBGL_RENDERER;
// do a catch.. only 1 webGL renderer..
this.transparent = !!transparent;
this.width = width || 800;
@ -54,19 +57,17 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
//try 'experimental-webgl'
try {
PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options);
this.gl = this.view.getContext('experimental-webgl', options);
} catch (e) {
//try 'webgl'
try {
PIXI.gl = this.gl = this.view.getContext('webgl', options);
this.gl = this.view.getContext('webgl', options);
} catch (e2) {
// fail, not able to get a context
throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this);
}
}
PIXI.initDefaultShaders();
var gl = this.gl;
if(!PIXI.blendModesWebGL)
@ -79,15 +80,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE];
}
gl.useProgram(PIXI.defaultShader.program);
PIXI.WebGLRenderer.gl = gl;
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
this.projection = new PIXI.Point(400, 300);
@ -96,14 +89,30 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.resize(this.width, this.height);
this.contextLost = false;
this.spriteBatch = new PIXI.WebGLSpriteBatch(gl);
this.maskManager = new PIXI.WebGLMaskManager(gl);
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
// time to create the render managers! each one focuses on managine a state in webGL
this.shaderManager = new PIXI.WebGLShaderManager(gl); // deals with managing the shader programs and their attribs
this.spriteBatch = new PIXI.WebGLSpriteBatch(gl); // manages the rendering of sprites
this.maskManager = new PIXI.WebGLMaskManager(gl); // manages the masks using the stencil buffer
this.filterManager = new PIXI.WebGLFilterManager(gl, this.transparent); // manages the filters
//
this.renderSession = {};
this.renderSession.gl = this.gl;
this.renderSession.shaderManager = this.shaderManager;
this.renderSession.maskManager = this.maskManager;
this.renderSession.filterManager = this.filterManager;
this.renderSession.spriteBatch = this.spriteBatch;
gl.useProgram(this.shaderManager.defaultShader.program);
PIXI.WebGLRenderer.gl = gl;
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
};
// constructor
@ -151,25 +160,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.projection.x = this.width/2;
this.projection.y = -this.height/2;
// reset the render session data..
this.renderSession.drawCount = 0;
this.renderSession.currentBlendMode = 9999;
this.renderSession.projection = this.projection;
this.renderSession.offset = this.offset;
// start the sprite batch
this.spriteBatch.begin(this.renderSession);
// start the filter manager
this.filterManager.begin(this.renderSession, null);
// render the scene!
stage._renderWebGL(this.renderSession);
// finish the sprite batch
this.spriteBatch.end();
this.renderDisplayObject( stage, this.projection);
// interaction
if(stage.interactive)
@ -204,6 +195,28 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// }.bind(this);
};
PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection)
{
// reset the render session data..
this.renderSession.drawCount = 0;
this.renderSession.currentBlendMode = 9999;
this.renderSession.projection = projection;
this.renderSession.offset = this.offset;
// start the sprite batch
this.spriteBatch.begin(this.renderSession);
// start the filter manager
this.filterManager.begin(this.renderSession, null);
// render the scene!
stage._renderWebGL(this.renderSession);
// finish the sprite batch
this.spriteBatch.end();
}
/**
* Updates the textures loaded into this webgl renderer
*
@ -242,7 +255,7 @@ PIXI.WebGLRenderer.updateTextures = function()
PIXI.WebGLRenderer.updateTexture = function(texture)
{
//TODO break this out into a texture manager...
var gl = PIXI.gl;
var gl = this.gl;
if(!texture._glTexture)
{

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

@ -4,25 +4,25 @@
PIXI.initDefaultShaders = function()
{
PIXI.primitiveShader = new PIXI.PrimitiveShader();
PIXI.primitiveShader.init();
// PIXI.primitiveShader = new PIXI.PrimitiveShader();
// PIXI.primitiveShader.init();
PIXI.stripShader = new PIXI.StripShader();
PIXI.stripShader.init();
PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init();
// PIXI.defaultShader = new PIXI.PixiShader();
// PIXI.defaultShader.init();
var gl = PIXI.gl;
/* var gl = PIXI.gl;
var shaderProgram = PIXI.defaultShader.program;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);*/
};
/*
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
@ -50,7 +50,9 @@ PIXI.deactivatePrimitiveShader = function()
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
};
*/
/*
PIXI.activateStripShader = function()
{
var gl = PIXI.gl;
@ -66,7 +68,7 @@ PIXI.deactivateStripShader = function()
gl.useProgram(PIXI.defaultShader.program);
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
};
*/
/*
SHADER COMPILER HELPERS
@ -97,9 +99,9 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
return shader;
};
PIXI.compileProgram = function(vertexSrc, fragmentSrc)
PIXI.compileProgram = function(gl, vertexSrc, fragmentSrc)
{
var gl = PIXI.gl;
//var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);

43
src/pixi/renderers/webgl/utils/WebGLFilterManager.js
View file

@ -3,8 +3,9 @@
*/
PIXI.WebGLFilterManager = function(transparent)
PIXI.WebGLFilterManager = function(gl, transparent)
{
this.gl = gl;
this.transparent = transparent;
this.filterStack = [];
@ -21,6 +22,7 @@ PIXI.WebGLFilterManager = function(transparent)
PIXI.WebGLFilterManager.prototype.begin = function(renderSession, buffer)
{
this.renderSession = renderSession;
this.defaultShader = renderSession.shaderManager.defaultShader;
var projection = this.renderSession.projection;
@ -31,7 +33,7 @@ PIXI.WebGLFilterManager.prototype.begin = function(renderSession, buffer)
PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
{
var gl = PIXI.gl;
var gl = this.gl;
var projection = this.renderSession.projection;
var offset = this.renderSession.offset;
@ -49,7 +51,7 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
var texture = this.texturePool.pop();
if(!texture)
{
texture = new PIXI.FilterTexture(this.width, this.height);
texture = new PIXI.FilterTexture(this.gl, this.width, this.height);
}
else
{
@ -95,8 +97,8 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
//console.log(PIXI.defaultShader.projectionVector)
// update projection
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
//PIXI.primitiveProgram
gl.colorMask(true, true, true, true);
@ -112,7 +114,7 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
PIXI.WebGLFilterManager.prototype.popFilter = function()
{
var gl = PIXI.gl;
var gl = this.gl;
var filterBlock = this.filterStack.pop();
var filterArea = filterBlock.target.filterArea;
var texture = filterBlock._glFilterTexture;
@ -150,7 +152,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
var inputTexture = texture;
var outputTexture = this.texturePool.pop();
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.gl, this.width, this.height);
// need to clear this FBO as it may have some left over elements from a prvious filter.
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
@ -274,9 +276,9 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
// now restore the regular shader..
gl.useProgram(PIXI.defaultShader.program);
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
gl.useProgram(this.defaultShader.program);
gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2);
gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY);
// return the texture to the pool
this.texturePool.push(texture);
@ -286,12 +288,12 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
{
// use program
var gl = PIXI.gl;
var gl = this.gl;
var shader = filter.shader;
if(!shader)
{
shader = new PIXI.PixiShader();
shader = new PIXI.PixiShader(gl);
shader.fragmentSrc = filter.fragmentSrc;
shader.uniforms = filter.uniforms;
@ -335,7 +337,7 @@ PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea,
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
{
var gl = PIXI.gl;
var gl = this.gl;
// create some buffers
this.vertexBuffer = gl.createBuffer();
@ -505,9 +507,10 @@ PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
displayObject.filterArea.height = maxY - minY;
};
PIXI.FilterTexture = function(width, height)
PIXI.FilterTexture = function(gl, width, height)
{
var gl = PIXI.gl;
// var gl = PIXI.gl;
this.gl = gl;
// next time to create a frame buffer and texture
this.frameBuffer = gl.createFramebuffer();
@ -526,6 +529,14 @@ PIXI.FilterTexture = function(width, height)
this.resize(width, height);
};
PIXI.FilterTexture.prototype.clear = function()
{
var gl = this.gl;
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
PIXI.FilterTexture.prototype.resize = function(width, height)
{
if(this.width === width && this.height === height) return;
@ -533,7 +544,7 @@ PIXI.FilterTexture.prototype.resize = function(width, height)
this.width = width;
this.height = height;
var gl = PIXI.gl;
var gl = this.gl;
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

33
src/pixi/renderers/webgl/utils/WebGLGraphics.js
View file

@ -21,9 +21,12 @@ PIXI.WebGLGraphics = function()
* @param graphics {Graphics}
* @param projection {Object}
*/
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection, offset)
PIXI.WebGLGraphics.renderGraphics = function(graphics, renderSession)//projection, offset)
{
var gl = PIXI.gl;
var gl = renderSession.gl;
var projection = renderSession.projection,
offset = renderSession.offset;
shader = renderSession.shaderManager.primitiveShader;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
@ -43,10 +46,10 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection, offset)
}
PIXI.WebGLGraphics.updateGraphics(graphics);
PIXI.WebGLGraphics.updateGraphics(graphics, gl);
}
PIXI.activatePrimitiveShader();
renderSession.shaderManager.activatePrimitiveShader();
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
@ -56,26 +59,26 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection, offset)
// set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
gl.uniformMatrix3fv(shader.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveShader.offsetVector, -offset.x, -offset.y);
gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
gl.uniform3fv(PIXI.primitiveShader.tintColor, PIXI.hex2rgb(graphics.tint));
gl.uniform3fv(shader.tintColor, PIXI.hex2rgb(graphics.tint));
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.uniform1f(shader.alpha, graphics.worldAlpha);
gl.uniform1f(shader.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
PIXI.deactivatePrimitiveShader();
renderSession.shaderManager.deactivatePrimitiveShader();
// return to default shader...
// PIXI.activateShader(PIXI.defaultShader);
@ -89,7 +92,7 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection, offset)
* @method updateGraphics
* @param graphics {Graphics}
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics)
PIXI.WebGLGraphics.updateGraphics = function(graphics, gl)
{
for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
@ -120,7 +123,7 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);

4
src/pixi/renderers/webgl/utils/WebGLMaskManager.js
View file

@ -26,7 +26,7 @@ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
gl.colorMask(false, false, false, false);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
PIXI.WebGLGraphics.renderGraphics(maskData, renderSession.projection, renderSession.offset);
PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0, this.maskStack.length);
@ -46,7 +46,7 @@ PIXI.WebGLMaskManager.prototype.popMask = function(renderSession)
//gl.stencilFunc(gl.ALWAYS,1,1);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
PIXI.WebGLGraphics.renderGraphics(maskData, renderSession.projection, renderSession.offset);
PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,this.maskStack.length);

67
src/pixi/renderers/webgl/utils/WebGLShaderManager.js Normal file
View file

@ -0,0 +1,67 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.WebGLShaderManager = function(gl)
{
this.gl = gl;
// this shader is used for the default sprite rendering
this.defaultShader = new PIXI.PixiShader(gl);
//PIXI.defaultShader = this.defaultShader;
var shaderProgram = this.defaultShader.program;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(this.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(this.defaultShader.colorAttribute);
gl.enableVertexAttribArray(this.defaultShader.aTextureCoord);
// the next one is used for rendering primatives
this.primitiveShader = new PIXI.PrimitiveShader(gl);
// the final one is used for the rendering strips
//this.stripShader = new PIXI.StripShader(gl);
}
PIXI.WebGLShaderManager.prototype.activatePrimitiveShader = function()
{
var gl = this.gl;
gl.useProgram(this.primitiveShader.program);
gl.disableVertexAttribArray(this.defaultShader.aVertexPosition);
gl.disableVertexAttribArray(this.defaultShader.colorAttribute);
gl.disableVertexAttribArray(this.defaultShader.aTextureCoord);
gl.enableVertexAttribArray(this.primitiveShader.aVertexPosition);
gl.enableVertexAttribArray(this.primitiveShader.colorAttribute);
};
PIXI.WebGLShaderManager.prototype.deactivatePrimitiveShader = function()
{
var gl = this.gl;
gl.useProgram(this.defaultShader.program);
gl.disableVertexAttribArray(this.primitiveShader.aVertexPosition);
gl.disableVertexAttribArray(this.primitiveShader.colorAttribute);
gl.enableVertexAttribArray(this.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(this.defaultShader.colorAttribute);
gl.enableVertexAttribArray(this.defaultShader.aTextureCoord);
};
PIXI.WebGLShaderManager.prototype.pushShader = function(maskData, renderSession)
{
// push a shader onto the stack..
}
PIXI.WebGLShaderManager.prototype.popShader = function(renderSession)
{
// push
}

11
src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js
View file

@ -60,6 +60,8 @@ PIXI.WebGLSpriteBatch = function(gl)
PIXI.WebGLSpriteBatch.prototype.begin = function(renderSession)
{
this.renderSession = renderSession;
this.shader = this.renderSession.shaderManager.defaultShader;
this.start();
}
@ -78,6 +80,7 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
this.currentBaseTexture = sprite.texture.baseTexture;
}
// check blend mode
if(sprite.blendMode !== this.currentBlendMode)
{
@ -339,13 +342,13 @@ PIXI.WebGLSpriteBatch.prototype.start = function()
// set the projection
var projection = this.renderSession.projection;
gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);
gl.uniform2f(this.shader.projectionVector, projection.x, projection.y);
// set the pointers
var stride = this.vertSize * 4;
gl.vertexAttribPointer(PIXI.defaultShader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
gl.vertexAttribPointer(PIXI.defaultShader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
gl.vertexAttribPointer(PIXI.defaultShader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4);
gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
gl.vertexAttribPointer(this.shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4);
// set the blend mode..
if(this.currentBlendMode !== PIXI.blendModes.NORMAL)

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

@ -30,7 +30,7 @@
@param width {Number} The width of the render texture
@param height {Number} The height of the render texture
*/
PIXI.RenderTexture = function(width, height)
PIXI.RenderTexture = function(width, height, renderer)
{
PIXI.EventTarget.call( this );
@ -41,79 +41,47 @@ PIXI.RenderTexture = function(width, height)
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl)
this.baseTexture = new PIXI.BaseTexture();
this.baseTexture.width = this.width;
this.baseTexture.height = this.height;
this.baseTexture.hasLoaded = true;
// each render texture can only belong to one renderer at the moment if its webGL
this.renderer = renderer || PIXI.defaultRenderer;
if(this.renderer.type === PIXI.WEBGL_RENDERER)
{
this.initWebGL();
var gl = this.renderer.gl;
this.textureBuffer = new PIXI.FilterTexture(gl, this.width, this.height);
this.baseTexture._glTexture = this.textureBuffer.texture;
this.render = this.renderWebGL;
this.projection = new PIXI.Point(this.width/2 , -this.height/2);
}
else
{
this.initCanvas();
this.render = this.renderCanvas;
this.textureBuffer = new PIXI.CanvasBuffer(this.width, this.height);
this.baseTexture.source = this.textureBuffer.canvas;
}
PIXI.Texture.frameUpdates.push(this);
};
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
/**
* Initializes the webgl data for this texture
*
* @method initWebGL
* @private
*/
PIXI.RenderTexture.prototype.initWebGL = function()
{
var gl = PIXI.gl;
this.glFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture();
this.baseTexture.width = this.width;
this.baseTexture.height = this.height;
this.baseTexture._glTexture = gl.createTexture();
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
this.baseTexture.isRender = true;
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
// create a projection matrix..
this.projection = new PIXI.Point(this.width/2 , -this.height/2);
// set the correct render function..
this.render = this.renderWebGL;
this.spriteBatch = new PIXI.WebGLSpriteBatch(gl);
this.renderSession = {};
this.renderSession.spriteBatch = this.spriteBatch;
PIXI.Texture.frameUpdates.push(this);
};
PIXI.RenderTexture.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
if(PIXI.gl)
this.frame.width = this.width;
this.frame.height = this.height;
if(this.renderer.type === PIXI.WEBGL_RENDERER)
{
this.projection.x = this.width / 2;
this.projection.y = -this.height / 2;
@ -124,27 +92,10 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
}
else
{
this.frame.width = this.width;
this.frame.height = this.height;
this.renderer.resize(this.width, this.height);
this.textureBuffer.resize(this.width, this.height);
}
};
/**
* Initializes the canvas data for this texture
*
* @method initCanvas
* @private
*/
PIXI.RenderTexture.prototype.initCanvas = function()
{
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0);
this.baseTexture = new PIXI.BaseTexture(this.renderer.view);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.render = this.renderCanvas;
PIXI.Texture.frameUpdates.push(this);
};
/**
@ -157,20 +108,15 @@ PIXI.RenderTexture.prototype.initCanvas = function()
*/
PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear)
{
var gl = PIXI.gl;
var gl = this.renderer.gl;
// enable the alpha color mask..
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer );
if(clear)
{
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
if(clear)this.textureBuffer.clear();
// THIS WILL MESS WITH HIT TESTING!
var children = displayObject.children;
@ -196,12 +142,9 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
children[i].updateTransform();
}
this.renderSession.drawCount = 0;
this.renderSession.projection = this.projection;
this.spriteBatch.begin(this.renderSession);
displayObject._renderWebGL( this.renderSession);
this.spriteBatch.end();
//
this.renderer.renderDisplayObject(displayObject, this.projection);
displayObject.worldTransform = originalWorldTransform;
};
@ -217,6 +160,7 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
*/
PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear)
{
//console.log("!!")
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
@ -227,17 +171,17 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
displayObject.worldTransform[5] = position.y;
}
for(var i = 0, j = children.length; i < j; i++)
{
children[i].updateTransform();
}
if(clear) this.renderer.context.clearRect(0,0, this.width, this.height);
if(clear)this.textureBuffer.clear();
this.renderer.renderDisplayObject(displayObject);
var context = this.textureBuffer.context;
this.renderer.context.setTransform(1,0,0,1,0,0);
this.renderer.renderDisplayObject(displayObject, context);
context.setTransform(1,0,0,1,0,0);
//PIXI.texturesToUpdate.push(this.baseTexture);
};