Differences

This shows you the differences between two versions of the page.

--- 1.0.0:postfx [2023/02/23 14:15] – admin
+++ 1.0.0:postfx [2023/02/23 14:41] (current) – [Shaders] admin
@@ Line 1: / Line 1: @@
 ====== PostFX ======
-Even though Gorilla3D is compatible Firemonkey post effects, it is difficult for many users to build their own post effect.
+Even though Gorilla3D is compatible with Firemonkey post effects, it is difficult for many users to build their own post effect.
 To solve this issue we provide the TGorillaRenderPassPostFX component.
-It is now possible for you to easily create your own effect and to design it in the IDE at design time.
+It is now possible for you to easily create your own effect and to write a shader in the IDE at design time.
 {{:1.0.0:g3d-postfx.jpg?nolink|}}
+===== DesignTime =====
+  - Drop a TGorillaRenderPassPostFX component from component palette onto your form
+  - Select your TGorillaRenderPassPostFX instance in structure view
+  - Link the GorillaViewport instance to the "Viewport" property of your TGorillaRenderPassPostFX instance
+  - Open "SurfaceShader" property editor
+  - Write GLSL shader code using "vec3 SurfaceShader(inout TLocals DATA){...}" as entry function
+Here is some nice television post-effect for the surface shader.
+Just copy & paste into **GorillaRenderPassPostFX1.SurfaceShader** property editor:
 <file glsl>
@@ Line 84: / Line 94: @@
 </file>
-__WARNING:__ GLSL compiler does not allow comments in shader code.
+Source: [[https://www.shadertoy.com/view/XtK3W3]]
+===== Runtime =====
+Of course you can also setup post effects at runtime.
+Have a look at the following function simply extracting the red-color channel from main render pass.
+<file pascal>
+var LPostFX := TGorillaRenderPassPostFX.Create(GorillaViewport1, 'RedChannelPostEffect');
+LPostFX.Viewport := GorillaViewport1;
+LPostFX.SurfaceShader.Text :=
+  'vec3 SurfaceShader(inout TLocals DATA){'#13#10 +
+  '  return vec3(tex2D(_RenderedTexture, DATA.TexCoord0.xy).r, 0.0, 0.0));'#13#10 +
+  '}'#13#10;
+</file>
+===== Shaders =====
+You can write shaders in GLSL syntax compatible with OpenGL 4.3 (on Windows) and OpenGLES 3.1+ (on Android).
+__WARNING:__ GLSL compiler does not allow comments in shader code. The framework currently does not filter comments.
+The **SurfaceShader** property of the PostFX instance allows to put a string with compatible shader code into.
+At least every shader needs a "SurfaceShader" function with the following header. Besides that you can add further functions to the shader.
+<file glsl>
+vec3 SurfaceShader(inout TLocals DATA){
+...
+}
+</file>
+The shader itself provides some variables for usage:
+^Shader Variable ^Type ^ Description ^
+|_RenderedTexture|sampler2D|The main render pass result texture.|
+|_MaskTexture|sampler2D|Optional texture for post effects. You can use this texture for additional shader computation.|
+|_TimeInfo.x|float|Starting timestamp of the post effect shader|
+|_TimeInfo.y|float|Current timestamp of the post effect shader|
+|_TimeInfo.z|float|Previous timestamp of the post effect shader|
+|_TimeInfo.w|float|Delta timestamp of the post effect shader|
+|DATA.TexCoord0|vec2|Texture coordinate of the post effect plane.|
+|DATA.WorldViewProjVertPos|vec4|World-View-Projected vertex position of the post effect plane.|
+|DATA.Normal|vec3|Normal vector of the post effect plane.|
+==== Links ====
+You can find many free shaders in the web with less need of change.
+  * https://www.shadertoy.com/
+  * https://glslsandbox.com/
+  * https://shaderpark.com/
+  * ...