What files do I need to import for WebGL?

Phaser 3
1

I am trying to enable WebGL for my project so I can use fragments/shaders

In my index.html I have

<script src="phaser-3.20.1/dist/phaser-arcade-physics.min.js"></script>
<script src="phaser-3.20.1/src/renderer/webgl/index.js"></script>
<script src="phaser-3.20.1/src/renderer/index.js"></script>

…but this is not working. I’m getting an error in reference to webgl/index.js that module is not defined

Are there other files I need to be including or is this a bug?

2

I tried including src/phaser.js as well and now I also get the error ‘require’ is not defined

4

The src directory is not meant to be loaded directly by a browser, as it contains CommonJS modules which must be processed by a bundler. The dist files, which you’re already loading, include the WebGL renderer, and it will be used by default if your device supports it.

To force WebGL, set the type in your game config to Phaser.WEBGL:

new Phaser.Game({
    type: Phaser.WEBGL
});
5

Yes, I discovered I have to make a ridiculous project build using node and webpack. This really takes away from the appeal of Phaser 3

6

You don’t. Phaser includes pre-built files which include all features, including the WebGL renderer. You have to build it yourself only if you want to exclude a feature.

1 Like
7

Where are they located and how do I reference them then? I already have type: Phaser.WEBGL in my file

class Custom_Shader extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {

constructor(scene) {
    let config = {game: scene,
        renderer: game.renderer,
        fragShader: `
        precision mediump float;
        uniform sampler2D uMainSampler;
        varying vec2 outTexCoord;
        void main(void) {
            vec4 color = texture2D(uMainSampler, outTexCoord);
            vec4 colorU = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y - 0.001));
            vec4 colorD = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y + 0.001));
            vec4 colorL = texture2D(uMainSampler, vec2(outTexCoord.x + 0.001, outTexCoord.y));
            vec4 colorR = texture2D(uMainSampler, vec2(outTexCoord.x - 0.001, outTexCoord.y));
            
            gl_FragColor = color;
            
            if (color.a == 0.0 && (colorU.a != 0.0 || colorD.a != 0.0 || colorL.a != 0.0 || colorR.a != 0.0)  ) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, .2);
            }
        }`};
    super(config);
}

}

^ That’s my class and I’m getting the error Unable to get property ‘WebGL’ of undefined or null reference

8

Updated that^ code to:

class Custom_Shader extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {

constructor(scene) {super(config);
    let config = {game: scene.game,
        renderer: scene.game.renderer,
        fragShader: `
        precision mediump float;
        uniform sampler2D uMainSampler;
        varying vec2 outTexCoord;
        void main(void) {
            vec4 color = texture2D(uMainSampler, outTexCoord);
            vec4 colorU = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y - 0.001));
            vec4 colorD = texture2D(uMainSampler, vec2(outTexCoord.x, outTexCoord.y + 0.001));
            vec4 colorL = texture2D(uMainSampler, vec2(outTexCoord.x + 0.001, outTexCoord.y));
            vec4 colorR = texture2D(uMainSampler, vec2(outTexCoord.x - 0.001, outTexCoord.y));
            
            gl_FragColor = color;
            
            if (color.a == 0.0 && (colorU.a != 0.0 || colorD.a != 0.0 || colorL.a != 0.0 || colorR.a != 0.0)  ) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, .2);
            }
        }`};
    
}

}

Then this is my call

  this.shadey = new Custom_Shader(this);
  this.filterr = this.game.renderer.addPipeline('outline', this.shadey);

But I still get this error: Unable to get property ‘WebGL’ of undefined or null reference and Use before declaration

9

phaser-arcade-physics doesn’t expose the Renderer namespace. Switch to phaser.js (or phaser.min.js).

The second code block you posted will probably throw an error. The first one looks correct.

1 Like
10

I got it to work, you were right about switching to phaser.js, although I had included it in my file, I guess also having phaser-arcade-physics.js caused conflict

Working code

class Custom_Shader extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {

constructor(game) { //game is child of scene, so scene.game = game
    var config = {
    	game: game,
        renderer: game.renderer,
        fragShader: `
			precision mediump float;

            uniform sampler2D uMainSampler;
            uniform vec2 uResolution;
            uniform float uTime;

            varying vec2 outTexCoord;
            varying vec4 outTint;

            vec4 plasma()
            {
                vec2 pixelPos = gl_FragCoord.xy / uResolution * 20.0;
                float freq = 0.8;
                float value =
                    sin(uTime + pixelPos.x * freq) +
                    sin(uTime + pixelPos.y * freq) +
                    sin(uTime + (pixelPos.x + pixelPos.y) * freq) +
                    cos(uTime + sqrt(length(pixelPos - 0.5)) * freq * 2.0);

                return vec4(
                    cos(value),
                    sin(value),
                    sin(value * 3.14 * 2.0),
                    cos(value)
                );
            }

            void main() 
            {
                vec4 texel = texture2D(uMainSampler, outTexCoord);
                texel *= vec4(outTint.rgb * outTint.a, outTint.a);
                gl_FragColor = texel * plasma();
            }`};
    
	super(config);
}

}

And this goes in preload()

	this.shadey = new Custom_Shader(this.game);
	this.filterr = this.game.renderer.addPipeline('outline', this.shadey);
	this.filterr.setFloat2('uResolution', this.game.config.width, this.game.config.height);

Then in update()

this.background.setPipeline(“outline”);

Going to play around with this some more and see if any other problems arise…