From 98893e1bba24c17db5cdef389d615d3b2982d148 Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Mon, 5 Mar 2018 11:29:48 -0300 Subject: [PATCH] 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 --- src/phaser.js | 1 + src/renderer/webgl/WebGLPipeline.js | 82 +++++++++++++++++++ src/renderer/webgl/WebGLRenderer.js | 20 +++-- src/renderer/webgl/index.js | 10 ++- .../webgl/pipelines/BitmapMaskPipeline.js | 22 ++--- .../webgl/pipelines/FlatTintPipeline.js | 24 +++--- .../pipelines/ForwardDiffuseLightPipeline.js | 6 +- .../webgl/pipelines/TextureTintPipeline.js | 26 +++--- src/renderer/webgl/pipelines/index.js | 18 ++++ 9 files changed, 164 insertions(+), 45 deletions(-) create mode 100644 src/renderer/webgl/pipelines/index.js diff --git a/src/phaser.js b/src/phaser.js index d824d69d7..902b39680 100644 --- a/src/phaser.js +++ b/src/phaser.js @@ -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'), diff --git a/src/renderer/webgl/WebGLPipeline.js b/src/renderer/webgl/WebGLPipeline.js index 9c3153d23..c5d716922 100644 --- a/src/renderer/webgl/WebGLPipeline.js +++ b/src/renderer/webgl/WebGLPipeline.js @@ -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; } diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js index 675f1e5e7..b59436dc2 100644 --- a/src/renderer/webgl/WebGLRenderer.js +++ b/src/renderer/webgl/WebGLRenderer.js @@ -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; }, /** diff --git a/src/renderer/webgl/index.js b/src/renderer/webgl/index.js index 2d2d8714f..981d1309b 100644 --- a/src/renderer/webgl/index.js +++ b/src/renderer/webgl/index.js @@ -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 }; diff --git a/src/renderer/webgl/pipelines/BitmapMaskPipeline.js b/src/renderer/webgl/pipelines/BitmapMaskPipeline.js index 1f1540105..103cb5728 100644 --- a/src/renderer/webgl/pipelines/BitmapMaskPipeline.js +++ b/src/renderer/webgl/pipelines/BitmapMaskPipeline.js @@ -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 } diff --git a/src/renderer/webgl/pipelines/FlatTintPipeline.js b/src/renderer/webgl/pipelines/FlatTintPipeline.js index 987b177da..936d29854 100644 --- a/src/renderer/webgl/pipelines/FlatTintPipeline.js +++ b/src/renderer/webgl/pipelines/FlatTintPipeline.js @@ -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 } diff --git a/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js b/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js index 8b69f33ff..c3da5d9af 100644 --- a/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js +++ b/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js @@ -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); }, /** diff --git a/src/renderer/webgl/pipelines/TextureTintPipeline.js b/src/renderer/webgl/pipelines/TextureTintPipeline.js index 87170b518..e7166a9c9 100644 --- a/src/renderer/webgl/pipelines/TextureTintPipeline.js +++ b/src/renderer/webgl/pipelines/TextureTintPipeline.js @@ -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 } diff --git a/src/renderer/webgl/pipelines/index.js b/src/renderer/webgl/pipelines/index.js new file mode 100644 index 000000000..d340eefe9 --- /dev/null +++ b/src/renderer/webgl/pipelines/index.js @@ -0,0 +1,18 @@ +/** + * @author Richard Davey + * @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') + +};