From 4bb2807627aab2d1dcf99b8ad12c111fc821a55e Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Tue, 10 Oct 2023 18:49:49 +0100 Subject: [PATCH 1/3] Added uRoundPixels and uResolution to the core shaders --- src/renderer/webgl/shaders/Mobile-vert.js | 10 ++++++---- src/renderer/webgl/shaders/Multi-vert.js | 16 ++++++++-------- src/renderer/webgl/shaders/Single-vert.js | 6 ++++++ src/renderer/webgl/shaders/src/Mobile.vert | 11 +++++++---- src/renderer/webgl/shaders/src/Multi.vert | 15 ++++----------- src/renderer/webgl/shaders/src/Single.vert | 7 +++++++ 6 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/renderer/webgl/shaders/Mobile-vert.js b/src/renderer/webgl/shaders/Mobile-vert.js index e915127e2..5f9cf0f7b 100644 --- a/src/renderer/webgl/shaders/Mobile-vert.js +++ b/src/renderer/webgl/shaders/Mobile-vert.js @@ -1,11 +1,9 @@ module.exports = [ '#define SHADER_NAME PHASER_MOBILE_VS', - '#ifdef GL_FRAGMENT_PRECISION_HIGH', - 'precision highp float;', - '#else', 'precision mediump float;', - '#endif', 'uniform mat4 uProjectionMatrix;', + 'uniform int uRoundPixels;', + 'uniform vec2 uResolution;', 'attribute vec2 inPosition;', 'attribute vec2 inTexCoord;', 'attribute float inTexId;', @@ -17,6 +15,10 @@ module.exports = [ 'void main ()', '{', ' gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0);', + ' if (uRoundPixels == 1)', + ' {', + ' gl_Position.xy = floor((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0;', + ' }', ' outTexCoord = inTexCoord;', ' outTint = inTint;', ' outTintEffect = inTintEffect;', diff --git a/src/renderer/webgl/shaders/Multi-vert.js b/src/renderer/webgl/shaders/Multi-vert.js index f08610e8c..9d72354bd 100644 --- a/src/renderer/webgl/shaders/Multi-vert.js +++ b/src/renderer/webgl/shaders/Multi-vert.js @@ -1,11 +1,9 @@ module.exports = [ '#define SHADER_NAME PHASER_MULTI_VS', - '#ifdef GL_FRAGMENT_PRECISION_HIGH', - 'precision highp float;', - '#else', 'precision mediump float;', - '#endif', 'uniform mat4 uProjectionMatrix;', + 'uniform int uRoundPixels;', + 'uniform vec2 uResolution;', 'attribute vec2 inPosition;', 'attribute vec2 inTexCoord;', 'attribute float inTexId;', @@ -15,15 +13,17 @@ module.exports = [ 'varying float outTexId;', 'varying float outTintEffect;', 'varying vec4 outTint;', + 'vec2 roundPixels (vec2 position, vec2 targetSize)', + '{', + ' return (floor((position * 0.5 + 0.5) * targetSize) / targetSize) * 2.0 - 1.0;', + '}', 'void main ()', '{', ' gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0);', - ' /*', - ' if (uRoundPixels)', + ' if (uRoundPixels == 1)', ' {', - ' gl_Position.xy = round((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0;', + ' gl_Position.xy = roundPixels(gl_Position.xy, uResolution);', ' }', - ' */', ' outTexCoord = inTexCoord;', ' outTexId = inTexId;', ' outTint = inTint;', diff --git a/src/renderer/webgl/shaders/Single-vert.js b/src/renderer/webgl/shaders/Single-vert.js index f9df7e0a3..d90c0655e 100644 --- a/src/renderer/webgl/shaders/Single-vert.js +++ b/src/renderer/webgl/shaders/Single-vert.js @@ -2,6 +2,8 @@ module.exports = [ '#define SHADER_NAME PHASER_SINGLE_VS', 'precision mediump float;', 'uniform mat4 uProjectionMatrix;', + 'uniform int uRoundPixels;', + 'uniform vec2 uResolution;', 'attribute vec2 inPosition;', 'attribute vec2 inTexCoord;', 'attribute float inTexId;', @@ -13,6 +15,10 @@ module.exports = [ 'void main ()', '{', ' gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0);', + ' if (uRoundPixels == 1)', + ' {', + ' gl_Position.xy = floor((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0;', + ' }', ' outTexCoord = inTexCoord;', ' outTint = inTint;', ' outTintEffect = inTintEffect;', diff --git a/src/renderer/webgl/shaders/src/Mobile.vert b/src/renderer/webgl/shaders/src/Mobile.vert index 2ca97de47..8b4fa3e7b 100644 --- a/src/renderer/webgl/shaders/src/Mobile.vert +++ b/src/renderer/webgl/shaders/src/Mobile.vert @@ -1,12 +1,10 @@ #define SHADER_NAME PHASER_MOBILE_VS -#ifdef GL_FRAGMENT_PRECISION_HIGH -precision highp float; -#else precision mediump float; -#endif uniform mat4 uProjectionMatrix; +uniform int uRoundPixels; +uniform vec2 uResolution; attribute vec2 inPosition; attribute vec2 inTexCoord; @@ -22,6 +20,11 @@ void main () { gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0); + if (uRoundPixels == 1) + { + gl_Position.xy = floor((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0; + } + outTexCoord = inTexCoord; outTint = inTint; outTintEffect = inTintEffect; diff --git a/src/renderer/webgl/shaders/src/Multi.vert b/src/renderer/webgl/shaders/src/Multi.vert index 5e511bdf2..8204bf886 100644 --- a/src/renderer/webgl/shaders/src/Multi.vert +++ b/src/renderer/webgl/shaders/src/Multi.vert @@ -1,14 +1,10 @@ #define SHADER_NAME PHASER_MULTI_VS -#ifdef GL_FRAGMENT_PRECISION_HIGH -precision highp float; -#else precision mediump float; -#endif uniform mat4 uProjectionMatrix; -// uniform bool uRoundPixels; -// uniform vec2 uResolution; +uniform int uRoundPixels; +uniform vec2 uResolution; attribute vec2 inPosition; attribute vec2 inTexCoord; @@ -25,13 +21,10 @@ void main () { gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0); - /* - if (uRoundPixels) + if (uRoundPixels == 1) { - // Round to nearest pixel - gl_Position.xy = round((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0; + gl_Position.xy = floor((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0; } - */ outTexCoord = inTexCoord; outTexId = inTexId; diff --git a/src/renderer/webgl/shaders/src/Single.vert b/src/renderer/webgl/shaders/src/Single.vert index 2a215263e..502be4c91 100644 --- a/src/renderer/webgl/shaders/src/Single.vert +++ b/src/renderer/webgl/shaders/src/Single.vert @@ -3,6 +3,8 @@ precision mediump float; uniform mat4 uProjectionMatrix; +uniform int uRoundPixels; +uniform vec2 uResolution; attribute vec2 inPosition; attribute vec2 inTexCoord; @@ -18,6 +20,11 @@ void main () { gl_Position = uProjectionMatrix * vec4(inPosition, 1.0, 1.0); + if (uRoundPixels == 1) + { + gl_Position.xy = floor((gl_Position.xy + 1.0) * 0.5 * uResolution) / uResolution * 2.0 - 1.0; + } + outTexCoord = inTexCoord; outTint = inTint; outTintEffect = inTintEffect; From 6360d765151d02e3ba6d5efd21daefc881b265df Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Tue, 10 Oct 2023 18:49:59 +0100 Subject: [PATCH 2/3] Removed use of `roundPixels` for now --- src/gameobjects/components/TransformMatrix.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/gameobjects/components/TransformMatrix.js b/src/gameobjects/components/TransformMatrix.js index 9389267e7..0195c4505 100644 --- a/src/gameobjects/components/TransformMatrix.js +++ b/src/gameobjects/components/TransformMatrix.js @@ -949,13 +949,13 @@ var TransformMatrix = new Class({ quad[6] = xw * a + y * c + e; quad[7] = xw * b + y * d + f; - if (roundPixels) - { - quad.forEach(function (value, index) - { - quad[index] = Math.round(value); - }); - } + // if (roundPixels) + // { + // quad.forEach(function (value, index) + // { + // quad[index] = Math.round(value); + // }); + // } return quad; }, From 0e145756bbbf73a2a0c90085072eef1bd4c56f60 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Tue, 10 Oct 2023 18:50:17 +0100 Subject: [PATCH 3/3] Added new uniforms and handle rounding in the shader --- .../webgl/pipelines/MobilePipeline.js | 4 +++ src/renderer/webgl/pipelines/MultiPipeline.js | 35 +++++++++++-------- .../webgl/pipelines/SinglePipeline.js | 4 +++ 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/renderer/webgl/pipelines/MobilePipeline.js b/src/renderer/webgl/pipelines/MobilePipeline.js index 1b1d8f400..6610f7618 100644 --- a/src/renderer/webgl/pipelines/MobilePipeline.js +++ b/src/renderer/webgl/pipelines/MobilePipeline.js @@ -104,7 +104,11 @@ var MobilePipeline = new Class({ { WebGLPipeline.prototype.boot.call(this); + var renderer = this.renderer; + this.set1i('uMainSampler', 0); + this.set2f('uResolution', renderer.width, renderer.height); + this.set1i('uRoundPixels', renderer.config.roundPixels); } }); diff --git a/src/renderer/webgl/pipelines/MultiPipeline.js b/src/renderer/webgl/pipelines/MultiPipeline.js index bd14b2f66..2b166d6d0 100644 --- a/src/renderer/webgl/pipelines/MultiPipeline.js +++ b/src/renderer/webgl/pipelines/MultiPipeline.js @@ -277,7 +277,11 @@ var MultiPipeline = new Class({ { WebGLPipeline.prototype.boot.call(this); - this.currentShader.set1iv('uMainSampler', this.renderer.textureIndexes); + var renderer = this.renderer; + + this.set1iv('uMainSampler', renderer.textureIndexes); + this.set2f('uResolution', renderer.width, renderer.height); + this.set1i('uRoundPixels', renderer.config.roundPixels); }, /** @@ -369,11 +373,11 @@ var MultiPipeline = new Class({ var gx = gameObject.x; var gy = gameObject.y; - // if (camera.roundPixels) - // { - // gx = Math.floor(gx); - // gy = Math.floor(gy); - // } + if (camera.roundPixels) + { + gx = Math.floor(gx); + gy = Math.floor(gy); + } spriteMatrix.applyITRS(gx, gy, gameObject.rotation, gameObject.scaleX * flipX, gameObject.scaleY * flipY); @@ -397,7 +401,7 @@ var MultiPipeline = new Class({ // Multiply by the Sprite matrix, store result in calcMatrix camMatrix.multiply(spriteMatrix, calcMatrix); - var quad = calcMatrix.setQuad(x, y, x + frameWidth, y + frameHeight, camera.roundPixels); + var quad = calcMatrix.setQuad(x, y, x + frameWidth, y + frameHeight); var getTint = Utils.getTintAppendFloatAlpha; var cameraAlpha = camera.alpha; @@ -416,6 +420,8 @@ var MultiPipeline = new Class({ this.manager.preBatch(gameObject); + this.currentShader.set1i('uRoundPixels', camera.roundPixels); + this.batchQuad(gameObject, quad[0], quad[1], quad[2], quad[3], quad[4], quad[5], quad[6], quad[7], u0, v0, u1, v1, tintTL, tintTR, tintBL, tintBR, gameObject.tintFill, texture, unit); this.manager.postBatch(gameObject); @@ -549,11 +555,11 @@ var MultiPipeline = new Class({ y += srcHeight; } - // if (camera.roundPixels) - // { - // srcX = Math.floor(srcX); - // srcY = Math.floor(srcY); - // } + if (camera.roundPixels) + { + srcX = Math.floor(srcX); + srcY = Math.floor(srcY); + } spriteMatrix.applyITRS(srcX, srcY, rotation, scaleX, scaleY); @@ -577,11 +583,10 @@ var MultiPipeline = new Class({ // Multiply by the Sprite matrix, store result in calcMatrix camMatrix.multiply(spriteMatrix, calcMatrix); - var quad = calcMatrix.setQuad(x, y, x + width, y + height, camera.roundPixels); + var quad = calcMatrix.setQuad(x, y, x + width, y + height); if (textureUnit === undefined) { - // textureUnit = this.renderer.setTexture2D(texture); textureUnit = this.setTexture2D(texture); } @@ -590,6 +595,8 @@ var MultiPipeline = new Class({ this.manager.preBatch(gameObject); } + this.currentShader.set1i('uRoundPixels', camera.roundPixels); + this.batchQuad(gameObject, quad[0], quad[1], quad[2], quad[3], quad[4], quad[5], quad[6], quad[7], u0, v0, u1, v1, tintTL, tintTR, tintBL, tintBR, tintEffect, texture, textureUnit); if (gameObject) diff --git a/src/renderer/webgl/pipelines/SinglePipeline.js b/src/renderer/webgl/pipelines/SinglePipeline.js index 238120f12..a20eebe6a 100644 --- a/src/renderer/webgl/pipelines/SinglePipeline.js +++ b/src/renderer/webgl/pipelines/SinglePipeline.js @@ -63,7 +63,11 @@ var SinglePipeline = new Class({ { WebGLPipeline.prototype.boot.call(this); + var renderer = this.renderer; + this.set1i('uMainSampler', 0); + this.set2f('uResolution', renderer.width, renderer.height); + this.set1i('uRoundPixels', renderer.config.roundPixels); } });