620d134055
Added new Sprite Batch for fast rendering - pushes transforms to the GPU Added setAttribs function to manage VertexAttribArrays in webGL Modified Point.set function
371 lines
9.9 KiB
JavaScript
371 lines
9.9 KiB
JavaScript
|
|
|
|
PIXI.ParticleBatch = function(texture)
|
|
{
|
|
PIXI.DisplayObjectContainer.call( this);
|
|
|
|
this.textureThing = texture;
|
|
|
|
this.ready = false;
|
|
}
|
|
|
|
PIXI.ParticleBatch.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
|
PIXI.ParticleBatch.constructor = PIXI.ParticleBatch;
|
|
|
|
PIXI.ParticleBatch.prototype.initWebGL = function(gl)
|
|
{
|
|
|
|
var vecShaderSrc = [
|
|
|
|
"attribute vec2 aVertexPosition;",
|
|
"attribute vec2 aMovement;",
|
|
"attribute vec2 aTexture;",
|
|
|
|
"uniform mat3 translationMatrix;",
|
|
|
|
"uniform float time;",
|
|
// "uniform float pos;",
|
|
|
|
"uniform vec2 projectionVector;",
|
|
"varying vec2 vTextureCoord;",
|
|
"const float PI = 3.14159265358;",
|
|
|
|
"void main(void) {",
|
|
|
|
"vec2 v = aVertexPosition;",
|
|
"float x = aMovement.x * 0.01;",
|
|
"vec2 scaledVertex = aVertexPosition;",
|
|
"v.x = (scaledVertex.x) * cos(x) - (scaledVertex.y) * sin(x);",
|
|
"v.y = (scaledVertex.x) * sin(x) + (scaledVertex.y) * cos(x);",
|
|
|
|
//"float pos = p * p * ((this._p1 + 1) * p - this._p1);"
|
|
|
|
//"v.y = sin(-time*PI * 2.0) * -aMovement.y;",
|
|
"v += aMovement;",
|
|
|
|
// "v += aVertexPosition;",
|
|
// "v.y *= 1.0 + smoothstep(time, 0.5, 1.0) * 3.0;",
|
|
// "v.y += aMovement.y * time + aVertexPosition.y;",
|
|
// "v.y = time * aMovement.y;;",
|
|
// "v.y += aVertexPosition.y;",
|
|
//"v.x += aMovement.x ;",
|
|
|
|
// "v.y *= -1.0;",
|
|
|
|
"v.x += 1280.0/2.0;",
|
|
"v.y += 800.0/2.0;",
|
|
|
|
|
|
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);",
|
|
|
|
// "gl_Position = vec4(aVertexPosition, 0.0, 1.0);",
|
|
"vTextureCoord = aTexture;",
|
|
|
|
"}"
|
|
|
|
];
|
|
|
|
var fragShaderSrc = [
|
|
"precision lowp float;",
|
|
"varying vec2 vTextureCoord;",
|
|
|
|
"uniform sampler2D uSampler;",
|
|
"void main(void) {",
|
|
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
|
"}"
|
|
];
|
|
|
|
|
|
|
|
|
|
this.program = PIXI.compileProgram(gl, vecShaderSrc, fragShaderSrc)
|
|
|
|
gl.useProgram(this.program);
|
|
|
|
|
|
this.translationMatrix = gl.getUniformLocation(this.program, "translationMatrix");
|
|
this.projectionVector = gl.getUniformLocation(this.program, "projectionVector");
|
|
this.time = gl.getUniformLocation(this.program, "time");
|
|
|
|
|
|
this.aVertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
|
|
this.aMovement = gl.getAttribLocation(this.program, "aMovement");
|
|
this.aTexture = gl.getAttribLocation(this.program, "aTexture");
|
|
|
|
// console.log(":::" + this.aMovement)
|
|
this.totalItems = 10000;
|
|
|
|
|
|
this.verticies = new Float32Array( this.totalItems * 8 );
|
|
this.movement = new Float32Array( this.totalItems * 8 );
|
|
|
|
this.posData = new Float32Array( this.totalItems * 3 );
|
|
|
|
this.texture = new Float32Array( this.totalItems * 8 );
|
|
|
|
this.indices = new Uint16Array( this.totalItems * 6);
|
|
|
|
for (var i = 0; i < this.totalItems * 8; i+=8) {
|
|
|
|
var scale = 1// + Math.random()
|
|
// position..
|
|
this.verticies[i] = -20 * scale;
|
|
this.verticies[i+1] = -20 * scale;
|
|
|
|
this.verticies[i+2] = 20 * scale;
|
|
this.verticies[i+3] = -20 * scale;
|
|
|
|
this.verticies[i+4] = 20 * scale;
|
|
this.verticies[i+5] = 20 * scale;
|
|
|
|
this.verticies[i+6] = -20 * scale;
|
|
this.verticies[i+7] = 20 * scale;
|
|
};
|
|
|
|
var fullWidth = 142;
|
|
var fullHeight= 157;
|
|
|
|
var simpleFrame = new PIXI.Rectangle(0, 0, 142, 157);
|
|
|
|
var gemCount = 0;
|
|
|
|
for (var i = 0; i < this.totalItems * 8; i+=8) {
|
|
|
|
gemCount++
|
|
var gemFrame = this.texture.frame || simpleFrame;//this.gems[gemCount % this.gems.length].frame;
|
|
// console.log(gemFrame);
|
|
// position..
|
|
|
|
var xoff = gemFrame.x / fullWidth;
|
|
var yoff = gemFrame.y / fullHeight;
|
|
|
|
this.texture[i] = xoff;
|
|
this.texture[i+1] = yoff;
|
|
|
|
this.texture[i+2] = xoff + gemFrame.width / fullWidth;
|
|
this.texture[i+3] = yoff;
|
|
|
|
this.texture[i+4] = xoff + gemFrame.width / fullWidth;
|
|
this.texture[i+5] = yoff + gemFrame.height / fullHeight;
|
|
|
|
this.texture[i+6] = xoff;
|
|
this.texture[i+7] = yoff + gemFrame.height / fullHeight;
|
|
|
|
|
|
|
|
//
|
|
|
|
};
|
|
|
|
for (var i = 0; i < this.totalItems* 8; i+=8) {
|
|
|
|
var pos = 0//Math.random() * 200;
|
|
|
|
var angle = Math.random() * Math.PI * 2;
|
|
|
|
var speed = (0.3 + Math.random() * 0.9) * 0.01;
|
|
|
|
var pos = Math.sin(angle) * speed;//Math.random() * 10 - 5;
|
|
var posY = Math.cos(angle) * speed;
|
|
|
|
var scale = 1;
|
|
// var posY = 0.5 + Math.random()// * 200
|
|
|
|
// console.log(pos);
|
|
this.movement[i] = pos;
|
|
this.movement[i+1] = posY;
|
|
|
|
this.movement[i+2] = scale;
|
|
this.movement[i+3] = scale;
|
|
|
|
this.movement[i+4] = rotation;
|
|
|
|
this.movement[i+5] = scale;
|
|
|
|
this.movement[i+2] = pos;
|
|
this.movement[i+3] = posY;
|
|
|
|
this.movement[i+4] = pos;
|
|
this.movement[i+5] = posY;
|
|
|
|
this.movement[i+6] = pos;
|
|
this.movement[i+7] = posY;
|
|
}
|
|
|
|
this.reset();
|
|
|
|
for (var i = 0; i < this.totalItems * 6; i+=6) {
|
|
|
|
var i3 = (i / 6) * 4;
|
|
|
|
this.indices[i] = i3;
|
|
this.indices[i+1] = i3+1;
|
|
this.indices[i+2] = i3+2;
|
|
this.indices[i+3] = i3;
|
|
this.indices[i+4] = i3+2;
|
|
this.indices[i+5] = i3+3;
|
|
|
|
}
|
|
|
|
// console.log(this);
|
|
this.vertexBuffer = gl.createBuffer();
|
|
this.textureBuffer = gl.createBuffer();
|
|
this.movementBuffer = gl.createBuffer();
|
|
|
|
this.indexBuffer = gl.createBuffer();
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, this.verticies, gl.STATIC_DRAW);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, this.texture, gl.STATIC_DRAW);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.movementBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, this.movement, gl.DYNAMIC_DRAW);
|
|
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
|
|
|
|
this.count = 0;
|
|
this.speed = 18;
|
|
this.posy = 0;
|
|
|
|
this.ready = true;
|
|
// alert("!")
|
|
}
|
|
|
|
PIXI.ParticleBatch.prototype.addChild = function(child)
|
|
{
|
|
PIXI.DisplayObjectContainer.prototype.addChild.call(child);
|
|
|
|
|
|
}
|
|
|
|
PIXI.ParticleBatch.prototype.reset = function()
|
|
{
|
|
for (var i = 0; i < this.totalItems* 4; i+=4) {
|
|
|
|
this.posData[i] = 0; // pos x
|
|
this.posData[i + 1] = 0; // pos y
|
|
|
|
var angle = Math.random() * Math.PI * 2;
|
|
|
|
var speed = 10 + Math.random() * 15;
|
|
|
|
var pos = Math.sin(angle) * speed;//Math.random() * 10 - 5;
|
|
var posY = Math.cos(angle) *speed;
|
|
|
|
|
|
this.posData[i + 2] = pos; // speed x
|
|
this.posData[i + 3] = posY - 10; // speed y
|
|
}
|
|
|
|
}
|
|
|
|
PIXI.ParticleBatch.prototype._renderWebGL = function(renderSession)
|
|
{
|
|
if(!this.visible)return;
|
|
|
|
renderSession.shaderManager.deactivateDefaultShader()
|
|
if(!this.ready)this.initWebGL( renderSession.gl );
|
|
|
|
renderSession.spriteBatch.stop();
|
|
|
|
this.speed -= 0.4;
|
|
|
|
this.count += this.speed;
|
|
|
|
|
|
var gl = renderSession.gl;
|
|
var glTexture = this.textureThing.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.textureThing.baseTexture, gl)
|
|
|
|
gl.useProgram(this.program);
|
|
|
|
|
|
gl.enableVertexAttribArray(this.aVertexPosition);
|
|
gl.enableVertexAttribArray(this.aMovement);
|
|
gl.enableVertexAttribArray(this.aTexture);
|
|
|
|
|
|
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, glTexture);
|
|
|
|
gl.uniform1f(this.time, this.count);
|
|
gl.uniform2f(this.projectionVector, renderSession.projection.x, renderSession.projection.y);
|
|
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
gl.vertexAttribPointer(this.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
|
|
gl.vertexAttribPointer(this.aTexture, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
|
|
|
|
for (var i = 0; i < this.totalItems* 8; i+=8) {
|
|
|
|
var val = ( i / 8 ) * 4;
|
|
|
|
this.posData[val + 3] += 0.02;
|
|
|
|
this.posData[val] += this.posData[val + 2];
|
|
this.posData[val + 1] += this.posData[val + 3];
|
|
|
|
var pos = this.posData[val];
|
|
var posY = this.posData[val + 1];
|
|
|
|
//pos += this.posData[val + 2];
|
|
//posY += this.posData[val + 3];
|
|
|
|
this.movement[i] = pos;
|
|
this.movement[i+1] = posY;
|
|
|
|
this.movement[i+2] = pos;
|
|
this.movement[i+3] = posY;
|
|
|
|
this.movement[i+4] = pos;
|
|
this.movement[i+5] = posY;
|
|
|
|
this.movement[i+6] = pos;
|
|
this.movement[i+7] = posY;
|
|
}
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.movementBuffer);
|
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.movement);
|
|
|
|
gl.vertexAttribPointer(this.aMovement, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
//gl.bindBuffer(gl.ARRAY_BUFFER, this.movementBuffer);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
|
|
gl.drawElements(gl.TRIANGLES, 6 * this.totalItems , gl.UNSIGNED_SHORT, 0);
|
|
|
|
// not sure if both needed? but ya have for now!
|
|
// override!
|
|
// disable the current stuff..
|
|
|
|
|
|
// gl.disableVertexAttribArray(PIXI.stripShader.aVertexPosition);
|
|
//gl.disableVertexAttribArray(PIXI.stripShader.colorAttribute);
|
|
//gl.disableVertexAttribArray(PIXI.stripShader.aTextureCoord);
|
|
gl.disableVertexAttribArray(this.aVertexPosition);
|
|
gl.disableVertexAttribArray(this.aMovement);
|
|
gl.disableVertexAttribArray(this.aTexture);
|
|
|
|
|
|
renderSession.shaderManager.activateDefaultShader()
|
|
|
|
renderSession.spriteBatch.start();
|
|
/*
|
|
gl.useProgram(PIXI.defaultShader.program);
|
|
|
|
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
|
|
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
|
|
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
|
|
*/
|
|
|
|
}
|
|
|
|
|