Improved guide

This commit is contained in:
Ne_Eo
2024-08-18 18:55:49 +02:00
parent ddd4be8755
commit 49a8861420
2 changed files with 70 additions and 41 deletions
@@ -0,0 +1,70 @@
## Here are guides on common mistakes and advices for writting shaders for flixel and openfl.
It's important to follow this guide as most shader coders make these mistakes a lot and end up with shaders that only work on certain devices.
-------
### Common mistakes and how to avoid them
Avoid using `0.` or `.0` for floats, instead, use `0.0` (ending the float number with an `.0`)
(please note that despite half floats working on nVidia gpus, other gpus like AMD gpus don't support this feature)
Avoid using switch cases, and use if statements where possible.
(switch cases are not supported on macOS or miscellaneous platforms)
Ints are not recommended when initiating vectors. (ex, vec2(1, 1) is not supported on certain platforms).
And use floats where it's expected. Like mod(1.0, 2.0) instead of mod(1, 2)
Avoid using the following types:
- ivec2,3,4
- bvec2,3,4
- uvec2,3,4
- uint
as they are unsupported on certain platforms.
Avoid using `gl_` at the start of your variables (ex, `float gl_Number` can break your shaders).
Applying defaults to uniforms is not possible, so please set the defaults in your shader constructor or after initializing the shader.
Avoid using `<number>u` (ex, 8u)
Avoid initializing variables with the name `input` or `sample`, as those cause the shader to stop working on AMD gpus or other platforms.
Avoid using the % operator, instead use the mod function.
Avoid using arrays if possible.
### Guide to porting shaders from shadertoy.com
This is a sample shader that simply renders the texture of a sprite/camera.
```glsl
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec4 col = texture(iChannel0, uv);
// Output to screen
fragColor = col;
}
```
We will show each step to converting this shader into an usable openfl/flixel shader
1. replace ``void mainImage( out vec4 fragColor, in vec2 fragCoord )`` with a simple ``void main()`` (flixel and openfl do not have any parameters since the coords are defined outside the function)
2. replace ``vec2 uv = fragCoord/iResolution.xy;`` with ``vec2 uv = openfl_TextureCoordv`` (or in some cases, add ``vec2 fragCoord = openfl_TextureCoordv*openfl_TextureSize.xy`` before it and replace `iResolution.xy` with ``openfl_TextureSize.xy`` (if the uv value is different than usual))
3. replace ``vec4 col = texture(iChannel0, uv);`` with ``vec4 col = texture2D(bitmap, uv);`` or ``vec4 col = flixel_texture2D(bitmap, uv);`` (keep in mind bitmap is the pixels of the camera/sprite the shader is aplied to)
4. finally, replace ``fragColor = col;`` with ``gl_FragColor = col;``
###### Keep in mind that this covers the most basic on how to convert a shader from shadertoy.com, complex shaders will need more expertise with handling shaders before converting those.
-------
### Common Practice:
Use ``texture2D`` for camera shaders, and FlxGame shaders, and ``flixel_texture2D`` for sprite shaders.
``flixel_texture2D`` applies the .colorTransform, while ``texture2D`` doesn't.
-------
Extra:
Use tabs for indentation
@@ -1,41 +0,0 @@
Here are guides on writing shaders for flixel and openfl.
And to make sure that the shaders works on as many devices as possible.
-------
Always have numbers be 0.0 not 0. or .0
Don't use Switch cases, use if statements instead
Use floats where its expected, such as vec2,3,4
Don't use "texture" use "flixel_texture2D" or "texture2D"
(These might work, but its not recommended)
Don't use ivec2,3,4
Don't use bvec2,3,4
Don't use uvec2,3,4
Don't use uint
Don't name variables starting with "gl_"
Don't have default values for uniforms, set it in the constructor if a class, or after loading the shader
Don't use <number>u, like 8u
Don't use the variable name "input"
Don't use the variable name "sample"
-------
Common Practice:
Use texture2D for camera shaders, and FlxGame shaders, and flixel_texture2D for everything else
flixel_texture2D applies the .colorTransform.
texture2D doesn't apply it.
-------
Extra:
Use tabs for indentation