mirror of
https://github.com/photonstorm/phaser
synced 2024-11-15 01:17:43 +00:00
Modified WebGLPipeline and it's child classes to make them easier to generate custom Pipelines. Added functions to WebGLPipeline to modify uniforms. Exposed Renderer namespace for usage outside the engine
This commit is contained in:
Felipe Alfonso
parent
865f0a604e
commit
98893e1bba
9 changed files with 164 additions and 45 deletions
|
|
@ -33,6 +33,7 @@ var Phaser = {
|
|||
Loader: require('./loader'),
|
||||
Math: require('./math'),
|
||||
Physics: require('./physics'),
|
||||
Renderer: require('./renderer'),
|
||||
Scene: require('./scene/Scene'),
|
||||
Scenes: require('./scene'),
|
||||
Sound: require('./sound'),
|
||||
|
|
|
|||
|
|
@ -198,6 +198,19 @@ var WebGLPipeline = new Class({
|
|||
this.flushLocked = false;
|
||||
},
|
||||
|
||||
addAttribute: function (name, size, type, normalized, offset)
|
||||
{
|
||||
this.attributes.push({
|
||||
name: name,
|
||||
size: size,
|
||||
type: this.renderer.glFormats[type],
|
||||
normalized: normalized,
|
||||
offset: offset
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* [description]
|
||||
*
|
||||
|
|
@ -381,6 +394,75 @@ var WebGLPipeline = new Class({
|
|||
delete this.vertexBuffer;
|
||||
delete this.gl;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
setFloat1: function (name, x)
|
||||
{
|
||||
this.renderer.setFloat1(this.program, name, x);
|
||||
return this;
|
||||
},
|
||||
|
||||
setFloat2: function (name, x, y)
|
||||
{
|
||||
|
||||
this.renderer.setFloat2(this.program, name, x, y);
|
||||
return this;
|
||||
},
|
||||
|
||||
setFloat3: function (name, x, y, z)
|
||||
{
|
||||
|
||||
this.renderer.setFloat3(this.program, name, x, y, z);
|
||||
return this;
|
||||
},
|
||||
|
||||
setFloat4: function (name, x, y, z, w)
|
||||
{
|
||||
|
||||
this.renderer.setFloat4(this.program, name, x, y, z, w);
|
||||
return this;
|
||||
},
|
||||
|
||||
setInt1: function (name, x)
|
||||
{
|
||||
this.renderer.setInt1(this.program, name, x);
|
||||
return this;
|
||||
},
|
||||
|
||||
setInt2: function (name, x, y)
|
||||
{
|
||||
this.renderer.setInt2(this.program, name, x, y);
|
||||
return this;
|
||||
},
|
||||
|
||||
setInt3: function (name, x, y, z)
|
||||
{
|
||||
this.renderer.setInt3(this.program, name, x, y, z);
|
||||
return this;
|
||||
},
|
||||
|
||||
setInt4: function (name, x, y, z, w)
|
||||
{
|
||||
this.renderer.setInt4(this.program, name, x, y, z, w);
|
||||
return this;
|
||||
},
|
||||
|
||||
setMatrix2: function (name, transpose, matrix)
|
||||
{
|
||||
this.renderer.setMatrix2(this.program, name, transpose, matrix);
|
||||
return this;
|
||||
},
|
||||
|
||||
setMatrix3: function (name, transpose, matrix)
|
||||
{
|
||||
this.renderer.setMatrix3(this.program, name, transpose, matrix);
|
||||
return this;
|
||||
},
|
||||
|
||||
setMatrix4: function (name, transpose, matrix)
|
||||
{
|
||||
this.renderer.setMatrix4(this.program, name, transpose, matrix);
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -354,6 +354,8 @@ var WebGLRenderer = new Class({
|
|||
*/
|
||||
this.extensions = {};
|
||||
|
||||
this.glFormats = [];
|
||||
|
||||
this.init(this.config);
|
||||
},
|
||||
|
||||
|
|
@ -390,6 +392,12 @@ var WebGLRenderer = new Class({
|
|||
this.blendModes[2].func = [ gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA ];
|
||||
this.blendModes[3].func = [ gl.ONE, gl.ONE_MINUS_SRC_COLOR ];
|
||||
|
||||
this.glFormats[0] = gl.BYTE;
|
||||
this.glFormats[1] = gl.SHORT;
|
||||
this.glFormats[2] = gl.UNSIGNED_BYTE;
|
||||
this.glFormats[3] = gl.UNSIGNED_SHORT;
|
||||
this.glFormats[4] = gl.FLOAT;
|
||||
|
||||
// Load supported extensions
|
||||
this.supportedExtensions = gl.getSupportedExtensions();
|
||||
|
||||
|
|
@ -409,10 +417,10 @@ var WebGLRenderer = new Class({
|
|||
// Clear previous pipelines and reload default ones
|
||||
this.pipelines = {};
|
||||
|
||||
this.addPipeline('TextureTintPipeline', new TextureTintPipeline(this.game, gl, this));
|
||||
this.addPipeline('FlatTintPipeline', new FlatTintPipeline(this.game, gl, this));
|
||||
this.addPipeline('BitmapMaskPipeline', new BitmapMaskPipeline(this.game, gl, this));
|
||||
this.addPipeline('Light2D', new ForwardDiffuseLightPipeline(this.game, gl, this));
|
||||
this.addPipeline('TextureTintPipeline', new TextureTintPipeline({ game: this.game, renderer: this }));
|
||||
this.addPipeline('FlatTintPipeline', new FlatTintPipeline({ game: this.game, renderer: this }));
|
||||
this.addPipeline('BitmapMaskPipeline', new BitmapMaskPipeline({ game: this.game, renderer: this }));
|
||||
this.addPipeline('Light2D', new ForwardDiffuseLightPipeline({ game: this.game, renderer: this }));
|
||||
|
||||
this.setBlendMode(CONST.BlendModes.NORMAL);
|
||||
this.resize(this.width, this.height);
|
||||
|
|
@ -602,7 +610,7 @@ var WebGLRenderer = new Class({
|
|||
* @param {string} pipelineName - [description]
|
||||
* @param {Phaser.Renderer.WebGL.WebGLPipeline} pipelineInstance - [description]
|
||||
*
|
||||
* @return {Phaser.Renderer.WebGL.WebGLRenderer} [description]
|
||||
* @return {Phaser.Renderer.WebGL.WebGLPipeline} [description]
|
||||
*/
|
||||
addPipeline: function (pipelineName, pipelineInstance)
|
||||
{
|
||||
|
|
@ -612,7 +620,7 @@ var WebGLRenderer = new Class({
|
|||
pipelineInstance.name = pipelineName;
|
||||
this.pipelines[pipelineName].resize(this.width, this.height, this.config.resolution);
|
||||
|
||||
return this;
|
||||
return pipelineInstance;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -12,6 +12,14 @@ module.exports = {
|
|||
|
||||
Utils: require('./Utils'),
|
||||
WebGLPipeline: require('./WebGLPipeline'),
|
||||
WebGLRenderer: require('./WebGLRenderer')
|
||||
WebGLRenderer: require('./WebGLRenderer'),
|
||||
Pipelines: require('./pipelines'),
|
||||
|
||||
// Constants
|
||||
BYTE: 0,
|
||||
SHORT: 1,
|
||||
UNSIGNED_BYTE: 2,
|
||||
UNSIGNED_SHORT: 3,
|
||||
FLOAT: 4
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,19 +29,19 @@ var BitmapMaskPipeline = new Class({
|
|||
|
||||
initialize:
|
||||
|
||||
function BitmapMaskPipeline (game, gl, renderer)
|
||||
function BitmapMaskPipeline (config)
|
||||
{
|
||||
WebGLPipeline.call(this, {
|
||||
game: game,
|
||||
gl: gl,
|
||||
renderer: renderer,
|
||||
topology: gl.TRIANGLES,
|
||||
vertShader: ShaderSourceVS,
|
||||
fragShader: ShaderSourceFS,
|
||||
vertexCapacity: 3,
|
||||
game: config.game,
|
||||
renderer: config.renderer,
|
||||
gl: config.renderer.gl,
|
||||
topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
|
||||
vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
|
||||
fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
|
||||
vertexCapacity: (config.vertexCapacity ? config.vertexCapacity : 3),
|
||||
|
||||
vertexSize:
|
||||
Float32Array.BYTES_PER_ELEMENT * 2,
|
||||
vertexSize: (config.vertexSize ? config.vertexSize :
|
||||
Float32Array.BYTES_PER_ELEMENT * 2),
|
||||
|
||||
vertices: new Float32Array([
|
||||
-1, +1, -1, -7, +7, +1
|
||||
|
|
@ -51,7 +51,7 @@ var BitmapMaskPipeline = new Class({
|
|||
{
|
||||
name: 'inPosition',
|
||||
size: 2,
|
||||
type: gl.FLOAT,
|
||||
type: config.renderer.gl.FLOAT,
|
||||
normalized: false,
|
||||
offset: 0
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,33 +58,33 @@ var FlatTintPipeline = new Class({
|
|||
|
||||
initialize:
|
||||
|
||||
function FlatTintPipeline (game, gl, renderer)
|
||||
function FlatTintPipeline (config)
|
||||
{
|
||||
WebGLPipeline.call(this, {
|
||||
game: game,
|
||||
gl: gl,
|
||||
renderer: renderer,
|
||||
topology: gl.TRIANGLES,
|
||||
vertShader: ShaderSourceVS,
|
||||
fragShader: ShaderSourceFS,
|
||||
vertexCapacity: 12000,
|
||||
game: config.game,
|
||||
renderer: config.renderer,
|
||||
gl: config.renderer.gl,
|
||||
topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
|
||||
vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
|
||||
fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
|
||||
vertexCapacity: (config.vertexCapcity ? config.vertexCapacity : 12000),
|
||||
|
||||
vertexSize:
|
||||
vertexSize: (config.vertexSize ? config.vertexSize :
|
||||
Float32Array.BYTES_PER_ELEMENT * 2 +
|
||||
Uint8Array.BYTES_PER_ELEMENT * 4,
|
||||
Uint8Array.BYTES_PER_ELEMENT * 4),
|
||||
|
||||
attributes: [
|
||||
{
|
||||
name: 'inPosition',
|
||||
size: 2,
|
||||
type: gl.FLOAT,
|
||||
type: config.renderer.gl.FLOAT,
|
||||
normalized: false,
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
name: 'inTint',
|
||||
size: 4,
|
||||
type: gl.UNSIGNED_BYTE,
|
||||
type: config.renderer.gl.UNSIGNED_BYTE,
|
||||
normalized: true,
|
||||
offset: Float32Array.BYTES_PER_ELEMENT * 2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,9 +30,11 @@ var ForwardDiffuseLightPipeline = new Class({
|
|||
|
||||
initialize:
|
||||
|
||||
function ForwardDiffuseLightPipeline (game, gl, renderer)
|
||||
function ForwardDiffuseLightPipeline (config)
|
||||
{
|
||||
TextureTintPipeline.call(this, game, gl, renderer, ShaderSourceFS.replace('%LIGHT_COUNT%', LIGHT_COUNT.toString()));
|
||||
config.fragShader = ShaderSourceFS.replace('%LIGHT_COUNT%', LIGHT_COUNT.toString());
|
||||
|
||||
TextureTintPipeline.call(this, config);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,41 +36,41 @@ var TextureTintPipeline = new Class({
|
|||
|
||||
initialize:
|
||||
|
||||
function TextureTintPipeline (game, gl, renderer, overrideFragmentShader)
|
||||
function TextureTintPipeline (config)
|
||||
{
|
||||
WebGLPipeline.call(this, {
|
||||
game: game,
|
||||
gl: gl,
|
||||
renderer: renderer,
|
||||
topology: gl.TRIANGLES,
|
||||
vertShader: ShaderSourceVS,
|
||||
fragShader: (overrideFragmentShader ? overrideFragmentShader : ShaderSourceFS),
|
||||
vertexCapacity: 6 * 2000,
|
||||
game: config.game,
|
||||
renderer: config.renderer,
|
||||
gl: config.renderer.gl,
|
||||
topology: (config.topology ? config.topology : config.renderer.gl.TRIANGLES),
|
||||
vertShader: (config.vertShader ? config.vertShader : ShaderSourceVS),
|
||||
fragShader: (config.fragShader ? config.fragShader : ShaderSourceFS),
|
||||
vertexCapacity: (config.vertexCapacity ? config.vertexCapacity : 6 * 2000),
|
||||
|
||||
vertexSize:
|
||||
vertexSize: (config.vertexSize ? config.vertexSize :
|
||||
Float32Array.BYTES_PER_ELEMENT * 2 +
|
||||
Float32Array.BYTES_PER_ELEMENT * 2 +
|
||||
Uint8Array.BYTES_PER_ELEMENT * 4,
|
||||
Uint8Array.BYTES_PER_ELEMENT * 4),
|
||||
|
||||
attributes: [
|
||||
{
|
||||
name: 'inPosition',
|
||||
size: 2,
|
||||
type: gl.FLOAT,
|
||||
type: config.renderer.gl.FLOAT,
|
||||
normalized: false,
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
name: 'inTexCoord',
|
||||
size: 2,
|
||||
type: gl.FLOAT,
|
||||
type: config.renderer.gl.FLOAT,
|
||||
normalized: false,
|
||||
offset: Float32Array.BYTES_PER_ELEMENT * 2
|
||||
},
|
||||
{
|
||||
name: 'inTint',
|
||||
size: 4,
|
||||
type: gl.UNSIGNED_BYTE,
|
||||
type: config.renderer.gl.UNSIGNED_BYTE,
|
||||
normalized: true,
|
||||
offset: Float32Array.BYTES_PER_ELEMENT * 4
|
||||
}
|
||||
|
|
|
|||
18
src/renderer/webgl/pipelines/index.js
Normal file
18
src/renderer/webgl/pipelines/index.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2018 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @namespace Phaser.Renderer.WebGL.Pipelines
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
|
||||
BitmapMaskPipeline: require('./BitmapMaskPipeline'),
|
||||
FlatTintPipeline: require('./FlatTintPipeline'),
|
||||
ForwardDiffuseLightPipeline: require('./ForwardDiffuseLightPipeline'),
|
||||
TextureTintPipeline: require('./TextureTintPipeline')
|
||||
|
||||
};
|
||||
Loading…
Reference in a new issue