History of Post-process shader(No. 5) - WarmeY2K - A complete, fast and fun game engine for the web

History
View the diff.
View the diff current.
View the source.
Go to Post-process shader.
- 1 (2024-05-29 (Wed) 22:21:27)
- 2 (2024-05-29 (Wed) 22:53:11)
- 3 (2024-06-07 (Fri) 19:59:38)
- 4 (2024-06-08 (Sat) 02:18:40)
- 5 (2024-06-20 (Thu) 21:30:35)
- 6 (2024-07-13 (Sat) 20:23:16)

Shader customization†

The post-process effects shader is customizable with four global variables (window object).

Variables	Description
---------------	-----------------------------------------
PPE_VERT_BEFORE	Insert code before vertex computation
PPE_FRAG_BEFORE	Insert code before fragment computation
PPE_VERT_AFTER	Insert code after vertex computation
PPE_FRAG_AFTER	Insert code after fragment computation

Create a shader.ts file at the same level of your main.ts.
Set variables of your choices and import the script in index.html on top of main.ts.
By this way all these variables are set before the engine start and by extension before the shader program compilation start.

↑

Table fragment vars†

Variables	Scope	Type	Description	In before	In after
------------------------	-------	--------------	---------------------------------------------	-------------	--------------
fragUV	Var	vec2	The pixel position.
outputColor	Var	vec4	Output color
id	Var	vec4	The pixel id coming from id buffer
flags	Var	integer	The pixel id bitmask (a)
normal	Var	vec3	The pixel normal coming from normal buffer
depth	Var	float	The pixel depth
shadowFactor	Var	float	The pixel shadow factor (shadow-volume)
shadowDepthCW	Var	float	The pixel depth clock-wise
shadowDepthCCW	Var	float	The pixel depth counter clock-wise
s0	Var	float	Texel from free texture 0
s1	Var	float	Texel from free texture 1
-------------	-------	--------------	---------------------------------------------	-------------	--------------
PARAMS	Uniform	Params	Global parameters
INFOS	Uniform	Infos	Various infos (screen resolution, time ...)
SOURCE_TEXTURE	Uniform	Texture	Colored source texture (with lit)
NORMALS_TEXTURE	Uniform	Texture	Normals source texture
IDS_TEXTURE	Uniform	Texture	Drawable Indexes source texture
DEPTH_TEXTURE	Uniform	Texture	Depth source texture
SHADOW_FACTOR_TEXTURE	Uniform	Texture	Shadow-volume texture
SHADOW_DEPTH_CCW_TEXTURE	Uniform	Texture	Shadow-volume ccw depth texture
SHADOW_DEPTH_CW_TEXTURE	Uniform	Texture	Shadow-volume cw depth texture
S0_TEXTURE	Uniform	Texture	Free texture 0
S1_TEXTURE	Uniform	Texture	Free texture 1

↑

What about new uniforms ?†

For numeric there is:

16 built-in floats available in PARAMS from S00 to S15 you can set by Gfx3PPERenderer.setCustomParam.

About texture there is:

2 built-in texture available in S0_TEXTURE and S1_TEXTURE you can set by Gfx3PPERenderer.setCustomTextures.

History of Post-process shader (No. 5)

Shader customization†

Table fragment vars†

What about new uniforms ?†