Phaser 3 Tutorial: Getting Started with Shaders!

#gamedev #phaser
Interested in learning more about WebGL and how we can use this API to create awesome shaders, and how we can use those shaders in our Phaser 3 games? Then you will not want to miss this video!
We start off by covering the basics of what a shader is, how you can create a shader by writing a shader program, and then we switch gears and focus on how we can implement shaders in our Phaser 3 games. We start off by focusing on the basics to get a shader running in Phaser 3, and go over some of the key built in functions and variables that you will need when building your shaders.
We then explore some of the different techniques we can use for creating a variety of shaders by using the built in mix function, seeing how we can use custom variables in our shader and how we can pass data from our Phaser 3 Scene to the shader that is actively running. We then wrap up the video by taking a look at some of the built in shaders we can use in our Phaser 3 Game!
You can find the started code for the project on GitHub here:
github.com/devshareacademy/ph...
Additional Resources:
Book of Shaders: thebookofshaders.com/
Shader Toy: www.shadertoy.com/
WebGL Fundalmentals: webglfundamentals.org/
Video Chapters
0:00 - Intro
01:18 - What are shaders
4:29 - Basics of a shader program
8:20 - Additional resources
9:55 - Demo examples
11:32 - Review starter code
12:34 - Start coding first shader
23:49 - Basic color shader
25:51 - Mix color example
31:05 - Using variables
37:55 - Scene transition shader
43:12 - Built in shaders
47:01 - Thanks and links to other content
The completed code for this part of the project can be found here on GitHub:
github.com/devshareacademy/ph...
github.com/devshareacademy/ph...
You can see an example of what we will build here: devshareacademy.github.io/pha...
(Make sure you press the spacebar to navigate between the various examples!)
Interested in more great content?
Check out my videos on Phaser 3 here on KZbin:
• Phaser 3
Check out my free courses here on KZbin:
Monster Tamer - Pokemon like RPG Tutorial with Phaser 3:
• Monster Tamer - Pokemo...
Introduction To GitHub Actions Course:
• Introduction To GitHub...
JavaScript Course:
• Learn JavaScript Course
Follow Me:
/ scott-westover-77393a97
github.com/scottwestover
Blog:
scottwestover.dev/

[@deltagamma1442]

The built in methods for game objects is such a time saver!

[@andreabeabrahamsen9069]

Great overview :)

[@swestover]

Thanks!

[@MisterFaucker]

Great intro. Thank you

[@swestover]

Thanks!

[@gamedevshrimp7489]

Hello sir! thanks for the tutorial but I can't use your example project because an error 'Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.' I'm not a skilled developer so I can't resolve it by myself, can you help to fix it?

[@swestover]

Can you please share more details on how you are trying to run the project locally? For that error, it sounds like the project is trying run the TypeScript files directly, but would need more details to confirm.

[@DavidSchmidt07]

What are some of the performance implications of using shaders if any?

[@swestover]

This will vary depending on a number of factors, 2 of the main ones though will be the end users computer and how large your canvas is, since this will result in more pixels that need to be processed in parallel. Also, the heavier your shader program is, the longer it will take to compile. Since the shader compilation is synchronous, if you are compiling a lot of shaders, it can block your site while the code being compiled. Another thing to keep in mind is that some of the operations when working with webgl shaders is that some of the methods are synchronous that can block the thread, example: developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_blocking_api_calls_in_production.

[@DavidSchmidt07]

@@swestover Thanks good to know!

[@kingkang3763]

What is the difference between shader and pipeline? Which one should be used?

[@swestover]

At a high level, pipelines are something that are specific to Phaser while a shader is is the specific code, or program, that makes up the fragment or vertex shader that you can create. A good way to think of it is that shaders are basically the instructions you send to the GPU to tell the GPU how to render out a single pixel. In WebGL, to actually use the shaders to do something, you will need at least 2 shaders: a fragment shader and a vertex shader. In the video, we are only creating fragment shaders. So in Phaser, Pipelines are how game objects are rendered and each pipeline abstracts away the two shaders that are used for WebGL. In order to create a Pipeline, you need at least 1 of each shader type, and by extending one of the core pipelines, like the PostFXPipeline class, we don't have to write the code for the vertex shader, Phaser will automatically use the vertex shader associated with that class. For getting started with Shaders in Phaser, I would recommend using the built in Pipelines until you get more familiar with the Shader code.