@vpmedia/phaser 1.0.1 → 1.0.2

package/src/phaser/display/webgl/render_texture.js

@@ -0,0 +1,81 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import Rectangle from '../../geom/rectangle';
+import Point from '../../geom/point';
+import Texture from './texture';
+import BaseTexture from './base_texture';
+import FilterTexture from './filter_texture';
+import CanvasBuffer from '../canvas/buffer';
+import { RENDER_WEBGL } from '../../core/const';
+
+export default class extends Texture {
+
+  constructor(width, height, renderer, scaleMode, resolution = 1) {
+    const w = width || 100;
+    const h = height || 100;
+    const res = resolution || 1;
+    const baseTexture = new BaseTexture(null, scaleMode || window.PhaserRegistry.TEXTURE_SCALE_MODE);
+    baseTexture.width = width * res;
+    baseTexture.height = height * res;
+    baseTexture._glTextures = [];
+    baseTexture.resolution = res;
+    baseTexture.scaleMode = scaleMode || window.PhaserRegistry.TEXTURE_SCALE_MODE;
+    baseTexture.hasLoaded = true;
+    super(baseTexture, new Rectangle(0, 0, w * res, h * res));
+    this.width = w;
+    this.height = h;
+    this.resolution = res;
+    this.frame = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
+    this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
+    this.renderer = renderer || window.PhaserRegistry.DEFAULT_RENDERER;
+    if (this.renderer.type === RENDER_WEBGL) {
+      const gl = this.renderer.gl;
+      this.baseTexture._dirty[gl.id] = false;
+      this.textureBuffer = new FilterTexture(gl, this.width, this.height, this.baseTexture.scaleMode);
+      this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture;
+      this.render = this.renderWebGL;
+      this.projection = new Point(this.width * 0.5, -this.height * 0.5);
+    } else {
+      this.render = this.renderCanvas;
+      this.textureBuffer = new CanvasBuffer(this.width * this.resolution, this.height * this.resolution);
+      this.baseTexture.source = this.textureBuffer.canvas;
+    }
+    this.valid = true;
+    this._updateUvs();
+  }
+
+  resize() {
+    // TODO
+  }
+
+  clear() {
+    // TODO
+  }
+
+  renderWebGL() {
+    // TODO
+  }
+
+  renderCanvas() {
+    // TODO
+  }
+
+  getImage() {
+    const image = new Image();
+    image.src = this.getBase64();
+    return image;
+  }
+
+  getBase64() {
+    return this.getCanvas().toDataURL();
+  }
+
+  getCanvas() {
+    // TODO
+  }
+
+}

package/src/phaser/display/webgl/renderer.js

@@ -0,0 +1,234 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { RENDER_WEBGL, SCALE_LINEAR, BLEND_NORMAL, BLEND_ADD, BLEND_MULTIPLY, BLEND_SCREEN, BLEND_OVERLAY, BLEND_DARKEN, BLEND_LIGHTEN, BLEND_COLOR_DODGE, BLEND_COLOR_BURN, BLEND_HARD_LIGHT, BLEND_SOFT_LIGHT, BLEND_DIFFERENCE, BLEND_EXCLUSION, BLEND_HUE, BLEND_SATURATION, BLEND_COLOR, BLEND_LUMINOSITY } from '../../core/const';
+import { remove } from '../canvas/pool';
+import { isPowerOfTwo } from '../../util/math';
+import Point from '../../geom/point';
+import WebGLShaderManager from './shader_manager';
+import WebGLSpriteBatch from './sprite_batch';
+import * as WebGLMaskManager from './mask_manager';
+import WebGLFilterManager from './filter_manager';
+import WebGLStencilManager from './stencil_manager';
+import WebGLBlendModeManager from './blend_manager';
+
+export default class {
+
+  constructor(game) {
+    this.type = RENDER_WEBGL;
+    this.resolution = game.config.resolution;
+    this.autoResize = false;
+    this.clearBeforeRender = game.config.clearBeforeRender;
+    this.width = game.width;
+    this.height = game.height;
+    this.view = game.canvas;
+    this._contextOptions = {
+      alpha: game.config.transparent,
+      depth: false,
+      antialias: game.config.antialias,
+      premultipliedAlpha: game.config.transparent && game.config.transparent !== 'notMultiplied',
+      stencil: true,
+      failIfMajorPerformanceCaveat: false,
+      preserveDrawingBuffer: game.config.preserveDrawingBuffer,
+    };
+    this.projection = new Point();
+    this.offset = new Point();
+    this.shaderManager = new WebGLShaderManager();
+    this.spriteBatch = new WebGLSpriteBatch();
+    this.filterManager = new WebGLFilterManager();
+    this.stencilManager = new WebGLStencilManager();
+    this.blendModeManager = new WebGLBlendModeManager();
+    this.renderSession = {};
+    this.renderSession.gl = this.gl;
+    this.renderSession.drawCount = 0;
+    this.renderSession.shaderManager = this.shaderManager;
+    this.renderSession.maskManager = WebGLMaskManager;
+    this.renderSession.filterManager = this.filterManager;
+    this.renderSession.blendModeManager = this.blendModeManager;
+    this.renderSession.spriteBatch = this.spriteBatch;
+    this.renderSession.stencilManager = this.stencilManager;
+    this.renderSession.renderer = this;
+    this.renderSession.resolution = this.resolution;
+    this.initContext();
+    this.mapBlendModes();
+    window.PhaserRegistry.DEFAULT_RENDERER = this;
+  }
+
+  destroy() {
+    window.PhaserRegistry.GL_CONTEXTS[this.glContextId] = null;
+    this.projection = null;
+    this.offset = null;
+    this.shaderManager.destroy();
+    this.spriteBatch.destroy();
+    this.filterManager.destroy();
+    this.shaderManager = null;
+    this.spriteBatch = null;
+    this.filterManager = null;
+    if (this.gl) {
+      this.gl.canvas.width = 1;
+      this.gl.canvas.height = 1;
+      const loseContextExt = this.gl.getExtension('WEBGL_lose_context');
+      if (loseContextExt) {
+        loseContextExt.loseContext();
+      }
+    }
+    this.gl = null;
+    this.renderSession = null;
+    remove(this);
+    window.PhaserRegistry.INSTANCES[this.glContextId] = null;
+    window.PhaserRegistry.DEFAULT_RENDERER = null;
+    window.PhaserRegistry.GL_CONTEXT_ID -= 1;
+  }
+
+  initRegistry() {
+    if (!window.PhaserRegistry.GL_CONTEXT_ID) {
+      window.PhaserRegistry.GL_CONTEXT_ID = 0;
+    }
+    if (!window.PhaserRegistry.GL_CONTEXTS) {
+      window.PhaserRegistry.GL_CONTEXTS = [];
+    }
+    if (!window.PhaserRegistry.INSTANCES) {
+      window.PhaserRegistry.INSTANCES = [];
+    }
+  }
+
+  initContext() {
+    const gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions);
+    this.gl = gl;
+    if (!gl) {
+      // fail, not able to get a context
+      throw new Error('This browser does not support WebGL. Try using the Canvas 2D.');
+    }
+    this.initRegistry();
+    this.glContextId = window.PhaserRegistry.GL_CONTEXT_ID;
+    gl.id = window.PhaserRegistry.GL_CONTEXT_ID;
+    window.PhaserRegistry.GL_CONTEXTS[this.glContextId] = gl;
+    window.PhaserRegistry.INSTANCES[this.glContextId] = this;
+    window.PhaserRegistry.GL_CONTEXT_ID += 1;
+    // set up the default pixi settings..
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.enable(gl.BLEND);
+    // need to set the context for all the managers...
+    this.shaderManager.setContext(gl);
+    this.spriteBatch.setContext(gl);
+    this.stencilManager.setContext(gl);
+    this.filterManager.setContext(gl);
+    this.blendModeManager.setContext(gl);
+    this.renderSession.gl = this.gl;
+    // now resize and we are good to go!
+    this.resize(this.width, this.height);
+  }
+
+  render(stage) {
+    if (this.contextLost) {
+      return;
+    }
+    const gl = this.gl;
+    // -- Does this need to be set every frame? -- //
+    gl.viewport(0, 0, this.width, this.height);
+    // make sure we are bound to the main frame buffer
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    if (this.clearBeforeRender) {
+      gl.clearColor(stage._bgColor.r, stage._bgColor.g, stage._bgColor.b, stage._bgColor.a);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    this.offset.x = 0;
+    this.offset.y = 0;
+    this.renderDisplayObject(stage, this.projection);
+  }
+
+  renderDisplayObject(displayObject, projection, buffer, matrix) {
+    this.renderSession.blendModeManager.setBlendMode(BLEND_NORMAL);
+    // reset the render session data..
+    this.renderSession.drawCount = 0;
+    // make sure to flip the Y if using a render texture..
+    this.renderSession.flipY = buffer ? -1 : 1;
+    // set the default projection
+    this.renderSession.projection = projection;
+    // set the default offset
+    this.renderSession.offset = this.offset;
+    // start the sprite batch
+    this.spriteBatch.begin(this.renderSession);
+    // start the filter manager
+    this.filterManager.begin(this.renderSession, buffer);
+    // render the scene!
+    displayObject.renderWebGL(this.renderSession, matrix);
+    // finish the sprite batch
+    this.spriteBatch.end();
+  }
+
+  resize(width, height) {
+    this.width = width * this.resolution;
+    this.height = height * this.resolution;
+    this.view.width = this.width;
+    this.view.height = this.height;
+    if (this.autoResize) {
+      this.view.style.width = this.width / this.resolution + 'px';
+      this.view.style.height = this.height / this.resolution + 'px';
+    }
+    this.gl.viewport(0, 0, this.width, this.height);
+    this.projection.x = this.width / 2 / this.resolution;
+    this.projection.y = -this.height / 2 / this.resolution;
+  }
+
+  updateTexture(texture) {
+    if (!texture.hasLoaded) {
+      return false;
+    }
+    const gl = this.gl;
+    if (!texture._glTextures[gl.id]) {
+      texture._glTextures[gl.id] = gl.createTexture();
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
+    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === SCALE_LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
+      gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
+    }
+    if (!texture._powerOf2) {
+      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);
+    } else {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    }
+    texture._dirty[gl.id] = false;
+    // return texture._glTextures[gl.id];
+    return true;
+  }
+
+  mapBlendModes() {
+    if (window.PhaserRegistry.blendModesWebGL) {
+      return;
+    }
+    const gl = this.gl;
+    const b = [];
+    b[BLEND_NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA];
+    b[BLEND_MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_SCREEN] = [gl.SRC_ALPHA, gl.ONE];
+    b[BLEND_OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    b[BLEND_LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
+    window.PhaserRegistry.blendModesWebGL = b;
+  }
+
+}

package/src/phaser/display/webgl/shader/complex.js

@@ -0,0 +1,74 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { generateShaderID } from '../../../util/string';
+import { compileProgram } from '../util';
+
+// the next one is used for rendering triangle strips
+
+export default class {
+
+  constructor(gl) {
+    this.gl = gl;
+    this._UID = generateShaderID();
+    this.program = null;
+    this.fragmentSrc = [
+      'precision mediump float;',
+      'varying vec4 vColor;',
+      'void main(void) {',
+      '   gl_FragColor = vColor;',
+      '}',
+    ];
+    this.vertexSrc = [
+      'attribute vec2 aVertexPosition;',
+      // 'attribute vec4 aColor;',
+      'uniform mat3 translationMatrix;',
+      'uniform vec2 projectionVector;',
+      'uniform vec2 offsetVector;',
+
+      'uniform vec3 tint;',
+      'uniform float alpha;',
+      'uniform vec3 color;',
+      'uniform float flipY;',
+      'varying vec4 vColor;',
+
+      'void main(void) {',
+      '   vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);',
+      '   v -= offsetVector.xyx;',
+      '   gl_Position = vec4( v.x / projectionVector.x -1.0, (v.y / projectionVector.y * -flipY) + flipY , 0.0, 1.0);',
+      '   vColor = vec4(color * alpha * tint, alpha);', // " * vec4(tint * alpha, alpha);',
+      '}',
+    ];
+    this.init();
+  }
+
+  init() {
+    const gl = this.gl;
+    const program = compileProgram(gl, this.vertexSrc, this.fragmentSrc);
+    gl.useProgram(program);
+    // get and store the uniforms for the shader
+    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
+    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
+    this.tintColor = gl.getUniformLocation(program, 'tint');
+    this.color = gl.getUniformLocation(program, 'color');
+    this.flipY = gl.getUniformLocation(program, 'flipY');
+    // get and store the attributes
+    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
+    // this.colorAttribute = gl.getAttribLocation(program, 'aColor');
+    this.attributes = [this.aVertexPosition, this.colorAttribute];
+    this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
+    this.alpha = gl.getUniformLocation(program, 'alpha');
+    this.program = program;
+  }
+
+  destroy() {
+    this.gl.deleteProgram(this.program);
+    this.uniforms = null;
+    this.gl = null;
+    this.attribute = null;
+  }
+
+}

package/src/phaser/display/webgl/shader/fast.js

@@ -0,0 +1,97 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { generateShaderID } from '../../../util/string';
+import { compileProgram } from '../util';
+
+// this shader is used for the fast sprite rendering
+
+export default class {
+
+  constructor(gl) {
+    this.gl = gl;
+    this._UID = generateShaderID();
+    this.program = null;
+    this.textureCount = 0;
+    this.fragmentSrc = [
+      'precision lowp float;',
+      'varying vec2 vTextureCoord;',
+      'varying float vColor;',
+      'uniform sampler2D uSampler;',
+      'void main(void) {',
+      '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
+      '}',
+    ];
+    this.vertexSrc = [
+      'attribute vec2 aVertexPosition;',
+      'attribute vec2 aPositionCoord;',
+      'attribute vec2 aScale;',
+      'attribute float aRotation;',
+      'attribute vec2 aTextureCoord;',
+      'attribute float aColor;',
+
+      'uniform vec2 projectionVector;',
+      'uniform vec2 offsetVector;',
+      'uniform mat3 uMatrix;',
+
+      'varying vec2 vTextureCoord;',
+      'varying float vColor;',
+
+      'const vec2 center = vec2(-1.0, 1.0);',
+
+      'void main(void) {',
+      '   vec2 v;',
+      '   vec2 sv = aVertexPosition * aScale;',
+      '   v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);',
+      '   v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);',
+      '   v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;',
+      '   gl_Position = vec4( ( v / projectionVector) + center , 0.0, 1.0);',
+      '   vTextureCoord = aTextureCoord;',
+      // '   vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;',
+      '   vColor = aColor;',
+      '}',
+    ];
+    this.init();
+  }
+
+  init() {
+    const gl = this.gl;
+    const program = compileProgram(gl, this.vertexSrc, this.fragmentSrc);
+    gl.useProgram(program);
+    // get and store the uniforms for the shader
+    this.uSampler = gl.getUniformLocation(program, 'uSampler');
+    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
+    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
+    this.dimensions = gl.getUniformLocation(program, 'dimensions');
+    this.uMatrix = gl.getUniformLocation(program, 'uMatrix');
+    // get and store the attributes
+    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
+    this.aPositionCoord = gl.getAttribLocation(program, 'aPositionCoord');
+    this.aScale = gl.getAttribLocation(program, 'aScale');
+    this.aRotation = gl.getAttribLocation(program, 'aRotation');
+    this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
+    this.colorAttribute = gl.getAttribLocation(program, 'aColor');
+    // Begin worst hack eva //
+    // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters?
+    // maybe its somthing to do with the current state of the gl context.
+    // Im convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel
+    // If theres any webGL people that know why could happen please help :)
+    if (this.colorAttribute === -1) {
+      this.colorAttribute = 2;
+    }
+    this.attributes = [this.aVertexPosition, this.aPositionCoord, this.aScale, this.aRotation, this.aTextureCoord, this.colorAttribute];
+    // End worst hack eva //
+    this.program = program;
+  }
+
+  destroy() {
+    this.gl.deleteProgram(this.program);
+    this.uniforms = null;
+    this.gl = null;
+    this.attributes = null;
+  }
+
+}