Comments (7)
更新:我想我发现了问题。我创建了自己的 postFX Blur 管道并将其添加到其中:
resize(width, height) { this.set2f('uResolution', width, height); }
现在,当我使用我的管道时,问题已解决。我认为需要在 Phaser 的模糊 postFX 管道中做类似的事情。
“朋友,你有完整且正确的使用掩码的代码示例吗?默认的 3.80.1 版本存在错误,但 3.552 中没有。你是怎么解决的?
我不得不编写自己的 BlurFXPostPipeline。我不是着色器方面的专家,而且仍然很新,所以可以更好地优化它,并且可以添加更多变量。这是我写的:
const fragShader = ` #define SHADER_NAME BLUR_FS precision mediump float; // "in" attributes from our vertex shader varying vec2 outTexCoord; // Declare uniforms uniform sampler2D uMainSampler; uniform vec2 iResolution; // Simple Gaussian Blur void main() { // Get the current UV coordinates vec2 uv = outTexCoord; vec4 texCol = texture2D(uMainSampler, uv); const int radius = 10; const float pi = 3.1415926; const float sigma = 5.; vec4 gaussSum = vec4(0.); for(int x = -radius; x <= radius; x++){ for(int y = -radius; y <= radius; y++){ vec2 newUV = uv + vec2(x, y) / iResolution.xy; gaussSum += texture2D(uMainSampler, newUV) * (exp(-(pow(float(x), 2.) + pow(float(y), 2.)) / (2. * pow(sigma, 2.))) / (2. * pi * pow(sigma, 2.))); } } gl_FragColor = vec4(gaussSum); } `; export default class BlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline { constructor(game) { super({ game, renderTarget: true, fragShader, uniforms: [ 'uMainSampler', 'iResolution', ] }); } onPreRender() { this.set2f('iResolution', this.renderer.width, this.renderer.height); } onBoot() { this.set2f('iResolution', this.renderer.width, this.renderer.height); } resize(width, height) { this.set2f('iResolution', width, height); } }
您可以将其添加到场景中,如下所示:
this.renderer.pipelines.addPostPipeline('BlurPostFX', BlurPostFX);
最后,我必须将其添加到我的场景中,以确保它在调整大小时正确更新。更改为管道设置的任何内容。
this.sceneAsset
this.renderer.on('resize', () => { this.sceneAsset.postFX.clear(); this.sceneAsset.setPostPipeline('BlurPostFX'); });
That's great to hear! Even if you're not fully sure how to use it yet, it's always a good idea to give it a try yourself. After all, everyone starts as a beginner in new things.
from phaser.
I just attempted to write my own Blur PostFXPipeline and shader to try to hack around this and ended up with the same issue.
Is there a way in Phaser to completely re-instantiate/initialize shaders/pipelines on resize to work around this? It does seem to be a bug in the WebGL renderer, but I am having trouble tracking it down.
from phaser.
This issue has been mentioned on Phaser. There might be relevant details there:
https://phaser.discourse.group/t/possible-bug-blur-post-fx-moves-on-resize/14198/4
from phaser.
Update:
I think I found the issue. I created my own postFX Blur pipeline and added this to it:
resize(width, height) {
this.set2f('uResolution', width, height);
}
Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.
from phaser.
Update:
I think I found the issue. I created my own postFX Blur pipeline and added this to it:
resize(width, height) { this.set2f('uResolution', width, height); }
Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.
"Friend, do you have a complete and correct code example using masks? There is a bug in the default 3.80.1 version, but not in 3.552. How did you solve it?"
from phaser.
Update:
I think I found the issue. I created my own postFX Blur pipeline and added this to it:resize(width, height) { this.set2f('uResolution', width, height); }
Now the issue is fixed, when I use my pipeline. I think something similar will need to be done in Phaser's blur postFX pipe.
"Friend, do you have a complete and correct code example using masks? There is a bug in the default 3.80.1 version, but not in 3.552. How did you solve it?"
I had to write my own BlurFXPostPipeline. I am not an expert on shaders and still very new, so it could be optimized better and more variables could be added. This is what I wrote:
const fragShader = `
#define SHADER_NAME BLUR_FS
precision mediump float;
// "in" attributes from our vertex shader
varying vec2 outTexCoord;
// Declare uniforms
uniform sampler2D uMainSampler;
uniform vec2 iResolution;
// Simple Gaussian Blur
void main()
{
// Get the current UV coordinates
vec2 uv = outTexCoord;
vec4 texCol = texture2D(uMainSampler, uv);
const int radius = 10;
const float pi = 3.1415926;
const float sigma = 5.;
vec4 gaussSum = vec4(0.);
for(int x = -radius; x <= radius; x++){
for(int y = -radius; y <= radius; y++){
vec2 newUV = uv + vec2(x, y) / iResolution.xy;
gaussSum += texture2D(uMainSampler, newUV) * (exp(-(pow(float(x), 2.) + pow(float(y), 2.)) / (2. * pow(sigma, 2.))) / (2. * pi * pow(sigma, 2.)));
}
}
gl_FragColor = vec4(gaussSum);
}
`;
export default class BlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
constructor(game) {
super({
game,
renderTarget: true,
fragShader,
uniforms: [
'uMainSampler',
'iResolution',
]
});
}
onPreRender() {
this.set2f('iResolution', this.renderer.width, this.renderer.height);
}
onBoot() {
this.set2f('iResolution', this.renderer.width, this.renderer.height);
}
resize(width, height) {
this.set2f('iResolution', width, height);
}
}
You add it to your scene like so:
this.renderer.pipelines.addPostPipeline('BlurPostFX', BlurPostFX);
Finally I had to add this to my scene to ensure it updates properly on resize. Change this.sceneAsset
to whatever you set the pipeline on.
this.renderer.on('resize', () => {
this.sceneAsset.postFX.clear();
this.sceneAsset.setPostPipeline('BlurPostFX');
});
from phaser.
Edit: Sorry, did not mean to close it. (Accidental click!)
from phaser.
Related Issues (20)
- A project launched using the Vue3 template, I don't know why it keeps repeatedly rendering the DOM HOT 1
- `getPipelineName()` errors with the Canvas renderer HOT 1
- scene plugin install failure HOT 4
- Nineslice objects
- Nineslice object bug
- Inconsistent Versioning and the Case for Adopting SemVer HOT 2
- Creating a dynamic texture from an image with preFX has wrong dimensions and coordinates HOT 1
- BitmapText setMaxWidth() bug
- Angle and rotation animations with tweens and scene update are smoother in 3.60 than 3.80 HOT 4
- Camera shaking HOT 1
- ConicGradient feature is very important HOT 1
- Meshes are missing parts when multiple batches are needed to render scene
- DomElement position is not kept correctly in the scene when a camera zooms out HOT 1
- [Input] disableInteractive() with NOT topOnly case
- SceneManager.getScene has wrong return type in ts definition HOT 1
- Tilemap support for spacing and/or margin broken since 3.80 HOT 2
- Lottie / Vector based Animation Support
- Please add support for planck.js, Matter is a terrible thing HOT 1
- Phaser sounds/music stop playing in the new iOS 17.5.1 after losing/gaining focus in safari HOT 2
- In TPhaser3.9 rectangle is err HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from phaser.