Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-03 18:10:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

Effect Layer

Browse source
This commit is contained in:
Felipe Alfonso 2017-04-06 22:49:15 -03:00
parent 6fe063b1d2
commit 8c479a56c0
26 changed files with 537 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
v3/src/components/RenderTarget.js Normal file
View file

@ -0,0 +1,7 @@
var RenderTarget = {
renderTarget: null
};
module.exports = RenderTarget;

1
v3/src/components/index.js
View file

@ -9,6 +9,7 @@ module.exports = {
Flip: require('./Flip'),
GetBounds: require('./GetBounds'),
Origin: require('./Origin'),
RenderTarget: require('./RenderTarget'),
ScaleMode: require('./ScaleMode'),
Size: require('./Size'),
Texture: require('./Texture'),

2
v3/src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextWebGLRenderer.js
View file

@ -169,7 +169,7 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, src, interpolationPerce
blitterBatch.flush();
}
renderer.setBatch(blitterBatch, texture);
renderer.setRenderer(blitterBatch, texture);
vertexOffset = vertexDataBuffer.allocate(20);
blitterBatch.elementCount += 6;

2
v3/src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js
View file

@ -135,7 +135,7 @@ var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage,
blitterBatch.flush();
}
renderer.setBatch(blitterBatch, texture);
renderer.setRenderer(blitterBatch, texture);
vertexOffset = vertexDataBuffer.allocate(20);
blitterBatch.elementCount += 6;

2
v3/src/gameobjects/blitter/BlitterWebGLRenderer.js
View file

@ -44,7 +44,7 @@ var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage, cam
blitterBatch.flush();
}
renderer.setBatch(blitterBatch, frame.texture.source[frame.sourceIndex].glTexture);
renderer.setRenderer(blitterBatch, frame.texture.source[frame.sourceIndex].glTexture);
vertexOffset = vertexDataBuffer.allocate(20);
blitterBatch.elementCount += 6;
x += frame.x;

75
v3/src/gameobjects/effectlayer/EffectLayer.js Normal file
View file

@ -0,0 +1,75 @@
var Class = require('../../utils/Class');
var GameObject = require('../GameObject');
var Components = require('../../components');
var Render = require('./EffectLayerRender');
var TexturedAndNormalizedTintedShader = require('../../renderer/webgl/shaders/TexturedAndNormalizedTintedShader');
var EffectLayer = new Class({
Extends: GameObject,
Mixins: [
Components.Flip,
Components.Alpha,
Components.Transform,
Components.Visible,
Components.Size,
Components.Origin,
Components.RenderTarget,
Components.BlendMode,
Render
],
initialize:
function EffectLayer(state, x, y, width, height, effectName, fragmentShader)
{
var resourceManager = state.game.renderer.resourceManager;
var gl;
this.dstRenderTarget = null
this.dstRenderTexture = null;
this.dstShader = null;
if (resourceManager !== undefined)
{
gl = state.game.renderer.gl;
this.dstShader = resourceManager.createShader(effectName, {
vert: TexturedAndNormalizedTintedShader.vert,
frag: fragmentShader
});
this.dstRenderTexture = resourceManager.createTexture(
0,
gl.LINEAR, gl.LINEAR,
gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE,
gl.RGBA,
null, width, height
);
this.dstRenderTarget = resourceManager.createRenderTarget(width, height, this.dstRenderTexture, null);
//state.game.renderer.currentTexture = null; // force rebinding of prev texture
}
this.flipY = true;
this.setPosition(x, y);
this.setSize(width, height);
this.setOrigin(0, 0);
},
add: function (gameObject)
{
if (gameObject.renderTarget !== undefined)
{
gameObject.renderTarget = this.dstRenderTarget;
}
},
remove: function (gameObject)
{
if (gameObject.renderTarget !== undefined)
{
gameObject.renderTarget = null;
}
}
});
module.exports = EffectLayer;

7
v3/src/gameobjects/effectlayer/EffectLayerCanvasRenderer.js Normal file
View file

@ -0,0 +1,7 @@
var EffectLayerCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
{
};
module.exports = EffectLayerCanvasRenderer;

20
v3/src/gameobjects/effectlayer/EffectLayerFactory.js Normal file
View file

@ -0,0 +1,20 @@
var EffectLayer = require('./EffectLayer');
var FactoryContainer = require('../../gameobjects/FactoryContainer');
var EffectLayerFactory = {
KEY: 'effectLayer',
add: function (x, y, width, height, effectName, fragmentShader)
{
return this.children.add(new EffectLayer(this.state, x, y, width, height, effectName, fragmentShader));
},
make: function (x, y, width, height, effectName, fragmentShader)
{
return new EffectLayer(this.state, x, y, width, height, effectName, fragmentShader);
}
};
module.exports = FactoryContainer.register(EffectLayerFactory);

6
v3/src/gameobjects/effectlayer/EffectLayerRender.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
renderCanvas: require('./EffectLayerCanvasRenderer'),
renderWebGL: require('./EffectLayerWebGLRenderer')
};

11
v3/src/gameobjects/effectlayer/EffectLayerWebGLRenderer.js Normal file
View file

@ -0,0 +1,11 @@
var EffectLayerWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
if (this.renderMask !== this.renderFlags)
{
return;
}
renderer.effectRenderer.renderEffect(src, camera, src.dstRenderTexture, src.width, src.height);
};
module.exports = EffectLayerWebGLRenderer;

2
v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js
View file

@ -95,7 +95,7 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
mve = sre * cma + srf * cmc + cme;
mvf = sre * cmb + srf * cmd + cmf;
renderer.setBatch(shapeBatch, null);
renderer.setRenderer(shapeBatch, null);
for (var cmdIndex = 0, cmdLength = commandBuffer.length; cmdIndex < cmdLength; ++cmdIndex)
{

1
v3/src/gameobjects/image/Image.js
View file

@ -14,6 +14,7 @@ var Image = new Class({
Components.Flip,
Components.GetBounds,
Components.Origin,
Components.RenderTarget,
Components.ScaleMode,
Components.Size,
Components.Texture,

4
v3/src/gameobjects/index.js
View file

@ -11,6 +11,7 @@ require('./graphics/GraphicsFactory');
require('./text/static/TextFactory');
require('./layer/LayerFactory');
require('./zone/ZoneFactory');
require('./effectlayer/EffectLayerFactory');
// Phaser.GameObjects
@ -27,6 +28,7 @@ module.exports = {
Layer: require('./layer/Layer'),
Sprite: require('./sprite/Sprite'),
Text: require('./text/static/Text'),
Zone: require('./zone/Zone')
Zone: require('./zone/Zone'),
EffectLayer: require('./effectlayer/EffectLayer')
};

1
v3/src/gameobjects/sprite/Sprite.js
View file

@ -14,6 +14,7 @@ var Sprite = new Class({
Components.Flip,
Components.GetBounds,
Components.Origin,
Components.RenderTarget,
Components.ScaleMode,
Components.Size,
Components.Texture,

1
v3/src/renderer/webgl/GL.js
View file

@ -1 +0,0 @@
module.exports = (window.WebGLRenderingContext ? WebGLRenderingContext : {});

76
v3/src/renderer/webgl/ResourceManager.js
View file

@ -1,11 +1,11 @@
var Resources = require('./resources');
var GL = require('./GL');
var ResourceManager = function (gl)
{
this.gl = gl;
/* Maybe add pooling here */
this.shaderCache = {};
this.shaderCount = 0;
};
ResourceManager.prototype.constructor = ResourceManager;
@ -20,37 +20,37 @@ ResourceManager.prototype = {
var colorRenderbufferObject = null;
var complete = 0;
gl.bindFramebuffer(GL.FRAMEBUFFER, framebufferObject)
gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferObject)
if (depthStencilBuffer !== undefined && depthStencilBuffer !== null)
{
depthStencilBuffer.isRenderTexture = true;
gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.DEPTH_STENCIL_ATTACHMENT, GL.TEXTURE_2D, depthStencilBuffer.texture, depthStencilBuffer.mipLevel);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.TEXTURE_2D, depthStencilBuffer.texture, depthStencilBuffer.mipLevel);
}
else
{
depthStencilRenderbufferObject = gl.createRenderbuffer();
gl.bindRenderbuffer(GL.RENDERBUFFER, depthStencilRenderbufferObject);
gl.renderbufferStorage(GL.RENDERBUFFER, GL.DEPTH_STENCIL, width, height);
gl.framebufferRenderbuffer(GL.FRAMEBUFFER, GL.DEPTH_STENCIL_ATTACHMENT, GL.RENDERBUFFER, depthStencilRenderbufferObject);
gl.bindRenderbuffer(gl.RENDERBUFFER, depthStencilRenderbufferObject);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthStencilRenderbufferObject);
}
if (colorBuffer !== undefined && colorBuffer !== null)
{
colorBuffer.isRenderTexture = true;
gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, colorBuffer.texture, colorBuffer.mipLevel);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorBuffer.texture, colorBuffer.mipLevel);
}
else
{
colorRenderbufferObject = gl.createRenderbuffer();
gl.bindRenderbuffer(GL.RENDERBUFFER, colorRenderbufferObject);
gl.renderbufferStorage(GL.RENDERBUFFER, GL.RGBA4, width, height);
gl.framebufferRenderbuffer(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.RENDERBUFFER, colorRenderbufferObject);
gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbufferObject);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, width, height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorRenderbufferObject);
}
complete = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
complete = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (complete !== GL.FRAMEBUFFER_COMPLETE)
if (complete !== gl.FRAMEBUFFER_COMPLETE)
{
var errors = {
36054: 'Incomplete Attachment',
@ -58,11 +58,11 @@ ResourceManager.prototype = {
36057: 'Incomplete Dimensions',
36061: 'Framebuffer Unsupported'
};
alert('Framebuffer incomplete. Framebuffer status: ' + errors[complete]);
throw new Error('Framebuffer incomplete. Framebuffer status: ' + errors[complete]);
}
gl.bindFramebuffer(GL.FRAMEBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return new Resources.RenderTarget(
framebufferObject,
@ -81,11 +81,12 @@ ResourceManager.prototype = {
switch (target)
{
case GL.ARRAY_BUFFER:
case gl.ARRAY_BUFFER:
return new Resources.VertexBuffer(gl, bufferObject);
case GL.ELEMENT_ARRAY_BUFFER:
case gl.ELEMENT_ARRAY_BUFFER:
return new Resources.IndexBuffer(gl, bufferObject);
default:
alert('Invalid Buffer Target');
throw new Error('Invalid Buffer Target');
}
@ -97,34 +98,40 @@ ResourceManager.prototype = {
var gl = this.gl;
var texture = gl.createTexture();
gl.bindTexture(GL.TEXTURE_2D, texture);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, minFilter);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, magFilter);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, wrapS);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, wrapT);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
if (pixels === null || pixels === undefined)
{
gl.texImage2D(GL.TEXTURE_2D, mipLevel, format, width, height, 0, format, GL.UNSIGNED_BYTE, null);
gl.texImage2D(gl.TEXTURE_2D, mipLevel, format, width, height, 0, format, gl.UNSIGNED_BYTE, null);
}
else
{
gl.texImage2D(GL.TEXTURE_2D, mipLevel, format, format, GL.UNSIGNED_BYTE, pixels);
gl.texImage2D(gl.TEXTURE_2D, mipLevel, format, format, gl.UNSIGNED_BYTE, pixels);
width = pixels.width;
height = pixels.height;
}
gl.bindTexture(gl.TEXTURE_2D, null);
return new Resources.Texture(texture, width, height);
},
createShader: function (shaderName, shaderSources)
{
if (shaderName === null || shaderName === undefined)
{
shaderName += 'Shader' + this.shaderCount;
this.shaderCount += 1;
}
if (!(shaderName in this.shaderCache))
{
var gl = this.gl;
var program = gl.createProgram();
var vertShader = gl.createShader(GL.VERTEX_SHADER);
var fragShader = gl.createShader(GL.FRAGMENT_SHADER);
var vertShader = gl.createShader(gl.VERTEX_SHADER);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
var error;
var shader;
@ -136,15 +143,17 @@ ResourceManager.prototype = {
error = gl.getShaderInfoLog(vertShader);
if (error.length > 0)
if (error && error.length > 0)
{
alert('Vertex Shader Compilation Error.\n' + error);
throw new Error('Vertex Shader Compilation Error.\n' + error);
}
error = gl.getShaderInfoLog(fragShader);
if (error.length > 0)
if (error && error.length > 0)
{
alert('Fragment Shader Compilation Error.\n' + error);
throw new Error('Fragment Shader Compilation Error.\n' + error);
}
@ -152,12 +161,13 @@ ResourceManager.prototype = {
gl.attachShader(program, fragShader);
gl.linkProgram(program);
error = gl.getProgramParameter(program, GL.LINK_STATUS);
error = gl.getProgramParameter(program, gl.LINK_STATUS);
if (error === 0)
{
error = gl.getProgramInfoLog(program);
alert('Program Linking Error.\n' + error);
throw new Error('Program Linking Error.\n' + error);
}
@ -171,16 +181,6 @@ ResourceManager.prototype = {
}
},
createOutputStage: function ()
{
var outputStage = new Resources.OutputStage();
outputStage.setDefaultDepthStencilState();
outputStage.setNoBlending();
return outputStage;
},
deleteShader: function (shader)
{
var storedShader = this.shaderCache[shader.name]

66
v3/src/renderer/webgl/WebGLRenderer.js
View file

@ -10,6 +10,7 @@ var BlitterBatch = require('./renderers/blitterbatch/BlitterBatch');
var QuadBatch = require('./renderers/quadbatch/QuadBatch');
var SpriteBatch = require('./renderers/spritebatch/SpriteBatch');
var ShapeBatch = require('./renderers/shapebatch/ShapeBatch');
var EffectRenderer = require('./renderers/effectrenderer/EffectRenderer');
var BlendModes = require('../BlendModes');
var ScaleModes = require('../ScaleModes');
var ResourceManager = require('./ResourceManager');
@ -51,11 +52,13 @@ var WebGLRenderer = function (game)
this.aaQuadBatch = null;
this.spriteBatch = null;
this.shapeBatch = null;
this.effectRenderer = null;
this.currentRenderer = null;
this.currentTexture = null;
this.shaderCache = {};
this.currentShader = null;
this.resourceManager = null;
this.currentRenderTarget = null;
this.init();
};
@ -108,6 +111,7 @@ WebGLRenderer.prototype = {
this.quadBatch = this.addRenderer(new QuadBatch(this.game, gl, this));
this.spriteBatch = this.addRenderer(new SpriteBatch(this.game, gl, this));
this.shapeBatch = this.addRenderer(new ShapeBatch(this.game, gl, this));
this.effectRenderer = this.addRenderer(new EffectRenderer(this.game, gl, this));
},
createTexture: function (source)
@ -138,7 +142,7 @@ WebGLRenderer.prototype = {
);
}
this.currentTexture = source.glTexture;
this.currentTexture = null;
},
setTexture: function (texture)
@ -166,19 +170,50 @@ WebGLRenderer.prototype = {
}
},
setBatch: function (batch, texture, camera)
setRenderer: function (renderer, texture, camera, renderTarget)
{
var gl = this.gl;
this.setTexture(texture);
this.setRenderTarget(renderTarget);
if (this.currentRenderer !== batch)
if (this.currentRenderer !== renderer)
{
if (this.currentRenderer)
{
this.currentRenderer.flush();
}
this.currentRenderer = batch;
this.currentRenderer = renderer;
}
},
setRenderTarget: function (renderTarget)
{
var gl = this.gl;
if (this.currentRenderTarget !== renderTarget)
{
if (this.currentRenderer)
{
this.currentRenderer.flush();
}
if (renderTarget !== null)
{
gl.bindFramebuffer(gl.FRAMEBUFFER, renderTarget.framebufferObject);
gl.viewport(0, 0, renderTarget.width, renderTarget.height);
if (renderTarget.shouldClear)
{
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
renderTarget.shouldClear = false;
}
}
else
{
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, this.width, this.height);
}
this.currentRenderTarget = renderTarget;
}
},
@ -245,6 +280,7 @@ WebGLRenderer.prototype = {
// Could move to the State Systems or MainLoop
var gl = this.gl;
var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== gl.canvas.width || camera.height !== gl.canvas.height);
this.setRenderTarget(null);
if (scissor)
{
@ -252,6 +288,8 @@ WebGLRenderer.prototype = {
gl.scissor(camera.x, (gl.drawingBufferHeight - camera.y - camera.height), camera.width, camera.height);
}
// We could either clear color or render a quad
var color = this.game.config.backgroundColor;
gl.clearColor(color.redGL, color.greenGL, color.blueGL, color.alphaGL);
gl.clear(gl.COLOR_BUFFER_BIT);
var list = children.list;
@ -260,13 +298,13 @@ WebGLRenderer.prototype = {
{
var child = list[index];
// Setting blend mode if needed
var batch = this.currentRenderer;
var renderer = this.currentRenderer;
var newBlendMode = child.blendMode;
if (this.blendMode !== newBlendMode)
{
if (batch)
if (renderer)
{
batch.flush();
renderer.flush();
}
var blend = this.blendModes[newBlendMode];
gl.enable(gl.BLEND);
@ -282,10 +320,10 @@ WebGLRenderer.prototype = {
}
// drawing child
child.renderWebGL(this, child, interpolationPercentage, camera);
batch = this.currentRenderer;
if (batch && batch.isFull())
renderer = this.currentRenderer;
if (renderer && renderer.isFull())
{
batch.flush();
renderer.flush();
}
}
if (this.currentRenderer)
@ -343,13 +381,13 @@ WebGLRenderer.prototype = {
setBlendMode: function (newBlendMode)
{
var gl = this.gl;
var batch = this.currentRenderer;
var renderer = this.currentRenderer;
var blend = null;
if (this.blendMode !== newBlendMode)
{
if (batch)
batch.flush();
if (renderer)
renderer.flush();
blend = this.blendModes[newBlendMode];
gl.enable(gl.BLEND);
if (blend.length > 2)

258
v3/src/renderer/webgl/renderers/effectrenderer/EffectRenderer.js Normal file
View file

@ -0,0 +1,258 @@
var DataBuffer32 = require('../../utils/DataBuffer32');
var DataBuffer16 = require('../../utils/DataBuffer16');
var TransformMatrix = require('../../../../components/TransformMatrix');
var TexturedAndNormalizedTintedShader = require('../../shaders/TexturedAndNormalizedTintedShader');
var PHASER_CONST = require('../../../../const');
var CONST = require('./const');
var EffectRenderer = function (game, gl, manager)
{
this.game = game;
this.type = PHASER_CONST.WEBGL;
this.view = game.canvas;
this.resolution = game.config.resolution;
this.width = game.config.width * game.config.resolution;
this.height = game.config.height * game.config.resolution;
this.glContext = gl;
this.maxSprites = null;
this.shader = null;
this.vertexBufferObject = null;
this.indexBufferObject = null;
this.vertexDataBuffer = null;
this.indexDataBuffer = null;
this.elementCount = 0;
this.currentTexture2D = null;
this.viewMatrixLocation = null;
this.tempMatrix = new TransformMatrix();
// All of these settings will be able to be controlled via the Game Config
this.config = {
clearBeforeRender: true,
transparent: false,
autoResize: false,
preserveDrawingBuffer: false,
WebGLContextOptions: {
alpha: true,
antialias: true,
premultipliedAlpha: true,
stencil: true,
preserveDrawingBuffer: false
}
};
this.manager = manager;
this.dirty = false;
this.init(this.glContext);
};
EffectRenderer.prototype.constructor = EffectRenderer;
EffectRenderer.prototype = {
init: function (gl)
{
var vertexDataBuffer = new DataBuffer32(CONST.VERTEX_SIZE * CONST.QUAD_VERTEX_COUNT * CONST.MAX_QUADS);
var indexDataBuffer = new DataBuffer16(CONST.INDEX_SIZE * CONST.QUAD_INDEX_COUNT * CONST.MAX_QUADS);
var shader = this.manager.resourceManager.createShader('TexturedAndNormalizedTintedShader', TexturedAndNormalizedTintedShader);
var indexBufferObject = this.manager.resourceManager.createBuffer(gl.ELEMENT_ARRAY_BUFFER, indexDataBuffer.getByteCapacity(), gl.STATIC_DRAW);
var vertexBufferObject = this.manager.resourceManager.createBuffer(gl.ARRAY_BUFFER, vertexDataBuffer.getByteCapacity(), gl.STREAM_DRAW);
var viewMatrixLocation = shader.getUniformLocation('u_view_matrix');
var indexBuffer = indexDataBuffer.uintView;
var max = CONST.MAX_QUADS * CONST.QUAD_INDEX_COUNT;
this.vertexDataBuffer = vertexDataBuffer;
this.indexDataBuffer = indexDataBuffer;
this.shader = shader;
this.indexBufferObject = indexBufferObject;
this.vertexBufferObject = vertexBufferObject;
this.viewMatrixLocation = viewMatrixLocation;
vertexBufferObject.addAttribute(0, 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0);
vertexBufferObject.addAttribute(1, 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8);
vertexBufferObject.addAttribute(2, 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 16);
vertexBufferObject.addAttribute(3, 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 20);
// Populate the index buffer only once
for (var indexA = 0, indexB = 0; indexA < max; indexA += CONST.QUAD_INDEX_COUNT, indexB += CONST.QUAD_VERTEX_COUNT)
{
indexBuffer[indexA + 0] = indexB + 0;
indexBuffer[indexA + 1] = indexB + 1;
indexBuffer[indexA + 2] = indexB + 2;
indexBuffer[indexA + 3] = indexB + 0;
indexBuffer[indexA + 4] = indexB + 2;
indexBuffer[indexA + 5] = indexB + 3;
}
indexBufferObject.updateResource(indexBuffer, 0);
this.resize(this.width, this.height, this.game.config.resolution);
},
isFull: function ()
{
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
},
bind: function (shader)
{
if (shader === undefined)
{
this.shader.bind();
}
else
{
shader.bind();
this.resize(this.width, this.height, this.game.config.resolution, shader);
}
this.indexBufferObject.bind();
this.vertexBufferObject.bind();
},
flush: function (shader)
{
var gl = this.glContext;
var vertexDataBuffer = this.vertexDataBuffer;
if (this.elementCount === 0)
{
return;
}
this.bind(shader);
this.vertexBufferObject.updateResource(vertexDataBuffer.getUsedBufferAsFloat(), 0);
gl.drawElements(gl.TRIANGLES, this.elementCount, gl.UNSIGNED_SHORT, 0);
vertexDataBuffer.clear();
this.elementCount = 0;
},
resize: function (width, height, resolution, shader)
{
var gl = this.glContext;
var activeShader = shader !== undefined ? shader : this.shader;
this.width = width * resolution;
this.height = height * resolution;
activeShader.setConstantMatrix4x4(
activeShader.getUniformLocation('u_view_matrix'),
new Float32Array([
2 / this.width, 0, 0, 0,
0, -2 / this.height, 0, 0,
0, 0, 1, 1,
-1, 1, 0, 0
])
);
},
destroy: function ()
{
this.manager.resourceManager.deleteShader(this.shader);
this.manager.resourceManager.deleteBuffer(this.indexBufferObject);
this.manager.resourceManager.deleteBuffer(this.vertexBufferObject);
this.shader = null;
this.indexBufferObject = null;
this.vertexBufferObject = null;
},
renderEffect: function (gameObject, camera, texture, textureWidth, textureHeight)
{
var tempMatrix = this.tempMatrix;
var alpha = 16777216;
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBufferObjectF32 = vertexDataBuffer.floatView;
var vertexBufferObjectU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var width = textureWidth * (gameObject.flipX ? -1 : 1);
var height = textureHeight * (gameObject.flipY ? -1 : 1);
var translateX = gameObject.x - camera.scrollX;
var translateY = gameObject.y - camera.scrollY;
var scaleX = gameObject.scaleX;
var scaleY = gameObject.scaleY;
var rotation = -gameObject.rotation;
var tempMatrixMatrix = tempMatrix.matrix;
var x = -gameObject.displayOriginX + ((textureWidth) * (gameObject.flipX ? 1 : 0.0));
var y = -gameObject.displayOriginY + ((textureHeight) * (gameObject.flipY ? 1 : 0.0));
var xw = x + width;
var yh = y + height;
var cameraMatrix = camera.matrix.matrix;
var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var alpha = gameObject.alpha;
tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
sra = tempMatrixMatrix[0];
srb = tempMatrixMatrix[1];
src = tempMatrixMatrix[2];
srd = tempMatrixMatrix[3];
sre = tempMatrixMatrix[4];
srf = tempMatrixMatrix[5];
cma = cameraMatrix[0];
cmb = cameraMatrix[1];
cmc = cameraMatrix[2];
cmd = cameraMatrix[3];
cme = cameraMatrix[4];
cmf = cameraMatrix[5];
mva = sra * cma + srb * cmc;
mvb = sra * cmb + srb * cmd;
mvc = src * cma + srd * cmc;
mvd = src * cmb + srd * cmd;
mve = sre * cma + srf * cmc + cme;
mvf = sre * cmb + srf * cmd + cmf;
tx0 = x * mva + y * mvc + mve;
ty0 = x * mvb + y * mvd + mvf;
tx1 = x * mva + yh * mvc + mve;
ty1 = x * mvb + yh * mvd + mvf;
tx2 = xw * mva + yh * mvc + mve;
ty2 = xw * mvb + yh * mvd + mvf;
tx3 = xw * mva + y * mvc + mve;
ty3 = xw * mvb + y * mvd + mvf;
this.manager.setRenderer(this, texture, camera, gameObject.renderTarget);
vertexOffset = vertexDataBuffer.allocate(24);
this.elementCount += 6;
vertexBufferObjectF32[vertexOffset++] = tx0;
vertexBufferObjectF32[vertexOffset++] = ty0;
vertexBufferObjectF32[vertexOffset++] = 0;
vertexBufferObjectF32[vertexOffset++] = 0;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx1;
vertexBufferObjectF32[vertexOffset++] = ty1;
vertexBufferObjectF32[vertexOffset++] = 0;
vertexBufferObjectF32[vertexOffset++] = 1;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx2;
vertexBufferObjectF32[vertexOffset++] = ty2;
vertexBufferObjectF32[vertexOffset++] = 1;
vertexBufferObjectF32[vertexOffset++] = 1;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx3;
vertexBufferObjectF32[vertexOffset++] = ty3;
vertexBufferObjectF32[vertexOffset++] = 1;
vertexBufferObjectF32[vertexOffset++] = 0;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF;
vertexBufferObjectF32[vertexOffset++] = alpha;
this.flush(gameObject.dstShader);
gameObject.dstRenderTarget.shouldClear = true;
}
};
module.exports = EffectRenderer;

17
v3/src/renderer/webgl/renderers/effectrenderer/const.js Normal file
View file

@ -0,0 +1,17 @@
var CONST = {
// VERTEX_SIZE = (sizeof(vec2) * 4) + (sizeof(float) + sizeof(uint32))
VERTEX_SIZE: 24,
INDEX_SIZE: 2,
QUAD_VERTEX_COUNT: 4,
QUAD_INDEX_COUNT: 6,
// How many 32-bit components does the vertex have.
QUAD_VERTEX_COMPONENT_COUNT: 6,
// Can't be bigger since index are 16-bit
MAX_QUADS: 2
};
module.exports = CONST;

50
v3/src/renderer/webgl/renderers/spritebatch/SpriteBatch.js
View file

@ -158,7 +158,7 @@ SpriteBatch.prototype = {
this.vertexBufferObject = null;
},
addSpriteTexture: function (src, camera, texture, textureWidth, textureHeight)
addSpriteTexture: function (gameObject, camera, texture, textureWidth, textureHeight)
{
var tempMatrix = this.tempMatrix;
var alpha = 16777216;
@ -166,22 +166,22 @@ SpriteBatch.prototype = {
var vertexBufferObjectF32 = vertexDataBuffer.floatView;
var vertexBufferObjectU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var width = textureWidth * (src.flipX ? -1 : 1);
var height = textureHeight * (src.flipY ? -1 : 1);
var translateX = src.x - camera.scrollX;
var translateY = src.y - camera.scrollY;
var scaleX = src.scaleX;
var scaleY = src.scaleY;
var rotation = -src.rotation;
var width = textureWidth * (gameObject.flipX ? -1 : 1);
var height = textureHeight * (gameObject.flipY ? -1 : 1);
var translateX = gameObject.x - camera.scrollX;
var translateY = gameObject.y - camera.scrollY;
var scaleX = gameObject.scaleX;
var scaleY = gameObject.scaleY;
var rotation = -gameObject.rotation;
var tempMatrixMatrix = tempMatrix.matrix;
var x = -src.displayOriginX + ((textureWidth) * (src.flipX ? 1 : 0.0));
var y = -src.displayOriginY + ((textureHeight) * (src.flipY ? 1 : 0.0));
var x = -gameObject.displayOriginX + ((textureWidth) * (gameObject.flipX ? 1 : 0.0));
var y = -gameObject.displayOriginY + ((textureHeight) * (gameObject.flipY ? 1 : 0.0));
var xw = x + width;
var yh = y + height;
var cameraMatrix = camera.matrix.matrix;
var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var alpha = src.alpha;
var alpha = gameObject.alpha;
tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
@ -215,7 +215,7 @@ SpriteBatch.prototype = {
tx3 = xw * mva + y * mvc + mve;
ty3 = xw * mvb + y * mvd + mvf;
this.manager.setBatch(this, texture, camera);
this.manager.setRenderer(this, texture, camera, gameObject.renderTarget);
vertexOffset = vertexDataBuffer.allocate(24);
this.elementCount += 6;
@ -248,32 +248,32 @@ SpriteBatch.prototype = {
vertexBufferObjectF32[vertexOffset++] = alpha;
},
addSprite: function (src, camera)
addSprite: function (gameObject, camera)
{
var tempMatrix = this.tempMatrix;
var frame = src.frame;
var frame = gameObject.frame;
var alpha = 16777216;
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBufferObjectF32 = vertexDataBuffer.floatView;
var vertexBufferObjectU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var uvs = frame.uvs;
var width = frame.width * (src.flipX ? -1 : 1);
var height = frame.height * (src.flipY ? -1 : 1);
var translateX = src.x - camera.scrollX;
var translateY = src.y - camera.scrollY;
var scaleX = src.scaleX;
var scaleY = src.scaleY;
var rotation = -src.rotation;
var width = frame.width * (gameObject.flipX ? -1 : 1);
var height = frame.height * (gameObject.flipY ? -1 : 1);
var translateX = gameObject.x - camera.scrollX;
var translateY = gameObject.y - camera.scrollY;
var scaleX = gameObject.scaleX;
var scaleY = gameObject.scaleY;
var rotation = -gameObject.rotation;
var tempMatrixMatrix = tempMatrix.matrix;
var x = -src.displayOriginX + frame.x + ((frame.width) * (src.flipX ? 1 : 0.0));
var y = -src.displayOriginY + frame.y + ((frame.height) * (src.flipY ? 1 : 0.0));
var x = -gameObject.displayOriginX + frame.x + ((frame.width) * (gameObject.flipX ? 1 : 0.0));
var y = -gameObject.displayOriginY + frame.y + ((frame.height) * (gameObject.flipY ? 1 : 0.0));
var xw = x + width;
var yh = y + height;
var cameraMatrix = camera.matrix.matrix;
var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var alpha = src.alpha;
var alpha = gameObject.alpha;
tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
@ -307,7 +307,7 @@ SpriteBatch.prototype = {
tx3 = xw * mva + y * mvc + mve;
ty3 = xw * mvb + y * mvd + mvf;
this.manager.setBatch(this, frame.texture.source[frame.sourceIndex].glTexture, camera);
this.manager.setRenderer(this, frame.texture.source[frame.sourceIndex].glTexture, camera, gameObject.renderTarget);
vertexOffset = vertexDataBuffer.allocate(24);
this.elementCount += 6;

7
v3/src/renderer/webgl/resources/IndexBuffer.js
View file

@ -1,9 +1,8 @@
var GL = require('../GL');
var IndexBuffer = function (gl, bufferObject)
{
this.gl = gl;
this.bufferTarget = GL.ELEMENT_ARRAY_BUFFER;
this.bufferTarget = gl.ELEMENT_ARRAY_BUFFER;
this.bufferObject = bufferObject;
};
@ -21,8 +20,8 @@ IndexBuffer.prototype = {
updateResource: function (bufferData, offset)
{
var gl = this.gl;
gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, this.bufferObject);
gl.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, offset, bufferData);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.bufferObject);
gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, offset, bufferData);
return this;
}

102
v3/src/renderer/webgl/resources/OutputStage.js
View file

@ -1,102 +0,0 @@
var GL = require('../GL');
var OutputStage = function ()
{
this.renderTarget = null;
this.enableDepthTest = false;
this.enableStencilTest = false;
this.enableBlending = false;
/* Blend State */
this.blendLogicOp = 0;
this.blendSrcRgb = 0;
this.blendDstRgb = 0;
this.blendSrcAlpha = 0;
this.blendDstAlpha = 0;
this.blendEqRgb = 0;
this.blendEqAlpha = 0;
this.blendRed = 0;
this.blendGreen = 0;
this.blendBlue = 0;
this.blendAlpha = 0;
/* Depth-Stencil State */
this.depthFunc = 0;
this.depthMask = 0;
this.stencilFunc = 0;
this.stencilFail = 0;
this.stencilZFail = 0;
this.stencilZPass = 0;
};
OutputStage.prototype.constructor = OutputStage;
OutputStage.prototype = {
setRenderTarget: function (renderTarget)
{
this.renderTarget = renderTarget;
return this;
},
setDefaultDepthStencilState: function ()
{
this.depthEnabled = false;
this.stencilEnabled = false;
this.depthMask = true;
this.depthFunc = GL.LESS;
this.stencilFunc = GL.NEVER;
this.stencilZFail = GL.KEEP;
this.stencilZPass = GL.KEEP;
return this;
},
setBlendColor: function (r, g, b, a)
{
this.blendRed = r;
this.blendGreen = g;
this.blendBlue = b;
this.blendAlpha = a;
},
setBlendFunc: function (src, dst, eq)
{
this.blendSrcRgb = this.blendSrcAlpha = src;
this.blendDstRgb = this.blendDstAlpha = dst;
this.blendEqRgb = this.blendEqAlpha = eq;
return this;
},
setBlendFuncSeparate: function (srcRgb, dstRgb, srcAlpha, dstAlpha, eqRgb, eqAlpha)
{
this.blendSrcRgb = srcRgb;
this.blendSrcAlpha = srcAlpha;
this.blendDstRgb = dstRgb;
this.blendDstAlpha = dstAlpha;
this.blendEqRgb = eqRgb;
this.blendEqAlpha = eqAlpha;
return this;
},
setDefaultBlending: function ()
{
this.setBlendFuncSeparate(
GL.SRC_ALPHA,
GL.ONE_MINUS_SRC_ALPHA,
GL.ONE,
GL.ONE_MINUS_SRC_ALPHA,
GL.FUNC_ADD,
GL.FUNC_ADD
);
return this;
},
setNoBlending: function ()
{
this.setBlendFunc(GL.ONE, GL.ZERO, GL.FUNC_ADD);
return this;
}
};
module.exports = OutputStage;

1
v3/src/renderer/webgl/resources/RenderTarget.js
View file

@ -5,6 +5,7 @@ var RenderTarget = function (framebufferObject, width, height, colorBuffer, dept
this.height = height;
this.colorBuffer = colorBuffer;
this.depthStencilBuffer = depthStencilBuffer;
this.shouldClear = false;
};
module.exports = RenderTarget;

10
v3/src/renderer/webgl/resources/VertexBuffer.js
View file

@ -1,9 +1,7 @@
var GL = require('../GL');
var VertexBuffer = function (gl, bufferObject)
{
this.gl = gl;
this.bufferTarget = GL.ARRAY_BUFFER;
this.bufferTarget = gl.ARRAY_BUFFER;
this.bufferObject = bufferObject;
this.attributes = [];
};
@ -28,8 +26,8 @@ VertexBuffer.prototype = {
updateResource: function (bufferData, offset)
{
var gl = this.gl;
gl.bindBuffer(GL.ARRAY_BUFFER, this.bufferObject);
gl.bufferSubData(GL.ARRAY_BUFFER, offset, bufferData);
gl.bindBuffer(gl.ARRAY_BUFFER, this.bufferObject);
gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
return this;
},
@ -40,7 +38,7 @@ VertexBuffer.prototype = {
var attributes = this.attributes;
var attributesLength = attributes.length;
gl.bindBuffer(GL.ARRAY_BUFFER, bufferObject);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferObject);
for (var index = 0; index < attributesLength; ++index)
{
var element = attributes[index];

1
v3/src/renderer/webgl/resources/index.js
View file

@ -1,7 +1,6 @@
module.exports = {
IndexBuffer: require('./IndexBuffer'),
OutputStage: require('./OutputStage'),
RenderTarget: require('./RenderTarget'),
Shader: require('./Shader'),
Texture: require('./Texture'),

3
v3/src/renderer/webgl/shaders/TexturedShader.js
View file

@ -1,10 +1,11 @@
module.exports = {
vert: [
'uniform mat4 u_view_matrix;',
'attribute vec2 a_position;',
'attribute vec2 a_tex_coord;',
'varying vec2 v_tex_coord;',
'void main(void) {',
' gl_Position = vec4(a_position, 0.0, 1.0);',
' gl_Position = u_view_matrix * vec4(a_position, 0.0, 1.0);',
' v_tex_coord = a_tex_coord;',
'}'
].join('\n'),