Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 22:52:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Finished Circle shader and CircleFX Pipeline

Browse source
This commit is contained in:
Richard Davey 2023-02-15 23:48:34 +00:00
parent ffa50913f4
commit 9aa58008bf
8 changed files with 141 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/gameobjects/components/FX.js
View file

@ -262,8 +262,24 @@ var FX = {
this.fx.push(fx);
return fx;
},
addCircleFX: function ()
{
if (!this.fx)
{
this.enableFX();
}
var fx = new Effects.Circle(this);
this.fx.push(fx);
return fx;
}
};
module.exports = FX;

45
src/gameobjects/fx/Circle.js Normal file
View file

@ -0,0 +1,45 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013-2023 Photon Storm Ltd.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var BaseFX = require('./BaseFX');
var Class = require('../../utils/Class');
var FX_CONST = require('./const');
/**
* @classdesc
*
* @class Circle
* @extends Phaser.GameObjects.FX.BaseFX
* @memberof Phaser.GameObjects.FX
* @constructor
* @since 3.60.0
*
* @param {Phaser.GameObjects.GameObject} gameObject - A reference to the Game Object that has this fx.
*/
var Circle = new Class({
Extends: BaseFX,
initialize:
function Circle (gameObject)
{
BaseFX.call(this, FX_CONST.CIRCLE, gameObject);
this.scale = 1;
// 0.005 = strength of the ring (0.5 = super soft, 0.05 = gentle, 0.005 = harsh)
this.feather = 0.005;
this.thickness = 8;
this.glcolor = [ 1, 0.2, 0.7 ];
this.glcolor2 = [ 1, 0, 0, 0.4 ];
}
});
module.exports = Circle;

12
src/gameobjects/fx/const.js
View file

@ -94,7 +94,17 @@ var FX_CONST = {
* @const
* @since 3.60.0
*/
COLOR_MATRIX: 14
COLOR_MATRIX: 14,
/**
* The Circle FX.
*
* @name Phaser.GameObjects.FX.CIRCLE
* @type {number}
* @const
* @since 3.60.0
*/
CIRCLE: 15
};

1
src/gameobjects/fx/index.js
View file

@ -13,6 +13,7 @@ module.exports = {
BaseFX: require('./BaseFX'),
Bloom: require('./Bloom'),
Blur: require('./Blur'),
Circle: require('./Circle'),
ColorMatrix: require('./ColorMatrix'),
Glow: require('./Glow'),
Gradient: require('./Gradient'),

19
src/renderer/webgl/pipelines/FXPipeline.js
View file

@ -7,7 +7,9 @@
var BlurHighFrag = require('../shaders/FXBlurHigh-frag.js');
var BlurLowFrag = require('../shaders/FXBlurLow-frag.js');
var BlurMedFrag = require('../shaders/FXBlurMed-frag.js');
var CircleFrag = require('../shaders/FXCircle-frag.js');
var Class = require('../../../utils/Class');
var ColorMatrixFrag = require('../shaders/ColorMatrix-frag.js');
var FX_CONST = require('../../../gameobjects/fx/const');
var GetFastValue = require('../../../utils/object/GetFastValue');
var GlowFrag = require('../shaders/FXGlow-frag.js');
@ -53,7 +55,9 @@ var FXPipeline = new Class({
{ fragShader: BlurMedFrag },
{ fragShader: BlurHighFrag },
{ fragShader: GradientFrag },
{ fragShader: BloomFrag }
{ fragShader: BloomFrag },
{ fragShader: ColorMatrixFrag },
{ fragShader: CircleFrag }
];
PreFXPipeline.call(this, config);
@ -66,6 +70,7 @@ var FXPipeline = new Class({
this.vignette = new FX.Vignette(game);
this.shine = new FX.Shine(game);
this.gradient = new FX.Gradient(game);
this.circle = new FX.Circle(game);
// This array is intentionally sparse. Do not adjust.
this.fxHandlers = [];
@ -79,6 +84,7 @@ var FXPipeline = new Class({
this.fxHandlers[FX_CONST.GRADIENT] = this.onGradient;
this.fxHandlers[FX_CONST.BLOOM] = this.onBloom;
this.fxHandlers[FX_CONST.COLOR_MATRIX] = this.onColorMatrix;
this.fxHandlers[FX_CONST.CIRCLE] = this.onCircle;
this.source;
this.target;
@ -256,6 +262,17 @@ var FXPipeline = new Class({
this.set1fv('uColorMatrix', config.getData());
this.set1f('uAlpha', config.alpha);
this.runDraw();
},
onCircle: function (config, width, height)
{
var shader = this.shaders[FX_CONST.CIRCLE];
this.setShader(shader);
this.circle.onPreRender(config, shader, width, height);
this.runDraw();
}

15
src/renderer/webgl/pipelines/fx/CircleFXPipeline.js
View file

@ -22,8 +22,13 @@ var CircleFXPipeline = new Class({
fragShader: CircleFrag
});
// A value between 0 and 100, with 0 being 'no ring' and 100 being 'very thick'
this.width = 10;
this.scale = 1;
// 0.005 = strength of the ring (0.5 = super soft, 0.05 = gentle, 0.005 = harsh)
this.feather = 0.005;
this.thickness = 8;
this.glcolor = [ 1, 0.2, 0.7 ];
this.glcolor2 = [ 1, 0, 0, 0.4 ];
},
@ -33,9 +38,9 @@ var CircleFXPipeline = new Class({
// eslint-disable-next-line consistent-this
if (config === undefined) { config = this; }
var circleWidth = GetFastValue(config, 'width');
this.set1f('width', 0.4 + (0.1 - (circleWidth / 1000)), shader);
this.set1f('scale', GetFastValue(config, 'scale'), shader);
this.set1f('feather', GetFastValue(config, 'feather'), shader);
this.set1f('thickness', GetFastValue(config, 'thickness'), shader);
this.set3fv('color', GetFastValue(config, 'glcolor'), shader);
this.set4fv('backgroundColor', GetFastValue(config, 'glcolor2'), shader);

35
src/renderer/webgl/shaders/FXCircle-frag.js
View file

@ -5,28 +5,31 @@ module.exports = [
'uniform vec2 resolution;',
'uniform vec3 color;',
'uniform vec4 backgroundColor;',
'uniform float width;',
'uniform float thickness;',
'uniform float scale;',
'uniform float feather;',
'varying vec2 outTexCoord;',
'float circle (in vec2 _st, in float _radius)',
'{',
' vec2 dist = _st - vec2(0.5);',
' return 1.0 - smoothstep(_radius - (_radius * 0.01), _radius + (_radius * 0.01), dot(dist, dist) * 4.0);',
'}',
'void main ()',
'{',
' vec4 texture = texture2D(uMainSampler, outTexCoord);',
' float a = min(resolution.x, resolution.y);',
' vec2 st = gl_FragCoord.xy / vec2(a, a);',
' vec3 color = vec3(circle(st, 0.5));',
' gl_FragColor = vec4(color, 1.0);',
' /*',
' vec2 tc = vec2(outTexCoord.x - 0.5, outTexCoord.y - 0.5);',
' float grad = length(tc);',
' float circle = smoothstep(0.50, 0.49, grad);',
' float ring = circle - smoothstep(width, width - 0.005, grad);',
' vec2 position = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;',
' float aspectRatio = resolution.x / resolution.y;',
' position.x *= aspectRatio;',
' float grad = length(position);',
' float outer = aspectRatio;',
' float inner = outer - (thickness * 2.0 / resolution.y);',
' if (aspectRatio >= 1.0)',
' {',
' float f = 2.0 + (resolution.y / resolution.x);',
' outer = 1.0;',
' inner = 1.0 - (thickness * f / resolution.x);',
' }',
' outer *= scale;',
' inner *= scale;',
' float circle = smoothstep(outer, outer - 0.01, grad);',
' float ring = circle - smoothstep(inner, inner - feather, grad);',
' texture = mix(backgroundColor * backgroundColor.a, texture, texture.a);',
' texture = (texture * (circle - ring));',
' gl_FragColor = vec4(texture.rgb + (ring * color), texture.a);',
' */',
'}',
].join('\n');

70
src/renderer/webgl/shaders/src/FXCircle.frag
View file

@ -7,74 +7,46 @@ uniform sampler2D uMainSampler;
uniform vec2 resolution;
uniform vec3 color;
uniform vec4 backgroundColor;
uniform float width;
// uniform float radius;
// uniform vec2 position;
// uniform vec4 borderColor;
// uniform float borderThickness;
uniform float thickness;
uniform float scale;
uniform float feather;
varying vec2 outTexCoord;
float circle (in vec2 _st, in float _radius)
{
vec2 dist = _st - vec2(0.5);
return 1.0 - smoothstep(_radius - (_radius * 0.01), _radius + (_radius * 0.01), dot(dist, dist) * 4.0);
}
void main ()
{
vec4 texture = texture2D(uMainSampler, outTexCoord);
float a = min(resolution.x, resolution.y);
vec2 st = gl_FragCoord.xy / vec2(a, a);
vec2 position = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;
// vec2 st = gl_FragCoord.xy / resolution.xy;
float aspectRatio = resolution.x / resolution.y;
vec3 color = vec3(circle(st, 0.5));
position.x *= aspectRatio;
gl_FragColor = vec4(color, 1.0);
float grad = length(position);
// height > width
float outer = aspectRatio;
float inner = outer - (thickness * 2.0 / resolution.y);
// width > height
if (aspectRatio >= 1.0)
{
float f = 2.0 + (resolution.y / resolution.x);
outer = 1.0;
inner = 1.0 - (thickness * f / resolution.x);
}
// float radius = 128.0;
outer *= scale;
inner *= scale;
// vec2 position = vec2(400.0, 300.0);
// vec4 baseColor = vec4(0.0, 1.0, 0.0, 1.0);
// vec4 borderColor = vec4(1.0, 0.0, 0.0, 1.0);
// float borderThickness = 16.0;
float circle = smoothstep(outer, outer - 0.01, grad);
// vec2 tc = vec2(outTexCoord.x - 0.5, outTexCoord.y - 0.5);
// vec2 uv = gl_FragCoord.xy - position;
// vec2 uv = tc.xy - position;
// float d = sqrt(dot(uv, uv));
// float t1 = 1.0 - smoothstep(radius - borderThickness, radius, d);
// float t2 = 1.0 - smoothstep(radius, radius + borderThickness, d);
// gl_FragColor = vec4(mix(color.rgb, baseColor.rgb, t1), t2);
/*
vec2 tc = vec2(outTexCoord.x - 0.5, outTexCoord.y - 0.5);
float grad = length(tc);
float circle = smoothstep(0.50, 0.49, grad);
// 0.005 = strength of the ring (0.5 = super soft, 0.05 = gentle, 0.005 = harsh)
float ring = circle - smoothstep(width, width - 0.005, grad);
float ring = circle - smoothstep(inner, inner - feather, grad);
texture = mix(backgroundColor * backgroundColor.a, texture, texture.a);
texture = (texture * (circle - ring));
gl_FragColor = vec4(texture.rgb + (ring * color), texture.a);
*/
}