User Tag List

Results 1 to 6 of 6

Thread: How to make a shader - Quick documentation

  1. #1
    Clickteam Clickteam

    Join Date
    Jun 2006
    Location
    France
    Posts
    14,640
    Mentioned
    279 Post(s)
    Tagged
    3 Thread(s)

    How to make a shader - Quick documentation

    The documentation below is very basic, it explains the global structure and how it interfaces with MMF2, it doesn't explain how shaders work. For more info about shaders look at the DirectX documentation.

    A DirectX effect is contained in a .fx file. A .fx file is a source code file that usually contains :

    - the definition of input / output data structures
    - the global variables used by the shader
    - the shader function(s)

    This documentation only explains the structure of a .fx file.

    In MMF2 the .fx file is associated with a .XML file that contains info about the shader : name, parameters, author, etc.

    If you have never made a pixel shader, I suggest that you look at the source code of the Horizontal Flip effect of MMF2 (FlipX.fx/xml files in the MMF2 Effects directory) while you are reading this documentation.


    FX file


    Input / output parameters

    Code:
    struct PS_INPUT
    {
        float4 Position   : POSITION;
        float2 Texture    : TEXCOORD0;
    };
    This structure defines the input parameters passed to the pixel shader function. The Texture variable contains the X and Y coordinates of the pixel in the texture being processed. Those coordinates are UV coordinates, between 0 (left/top) and 1 (right/bottom).

    Code:
    struct PS_OUTPUT
    {
        float4 Color   : COLOR0;
    };
    This structure defines the output value of the pixel shader function. It's a simple RGBA value.


    Variables

    Code:
    sampler2D img;
    This is the minimum global variable to define in a shader, it contains a 2D sampler associated with the texture passed to the shader (the object's image).

    If your shader needs to access the background, add the following sampler2D for the background texture :

    sampler2D bkd : register(s1);

    You will need to specify <BackgroundTexture>1</BackgroundTexture> in your XML file, see below.

    If your shader accesses other images, add one sampler2D per image :

    sampler2D image1 : register(s1);
    sampler2D image2 : register(s2);
    etc.

    Start from register(s2) if you also use a background image sampler. And you will need to add these images as parameters in your XML file.

    Other variables :

    Code:
    int var1;
    float var2;
    float4 var3;
    Optional, defines global variables that you can use in your shader function. You have to add a <parameter> section in the XML file for each variable you need to retrieve/change from the MMF events and properties. 3 data types are supported in the MMF2 events and properties :

    int = integer value
    float = floating point value
    float4 = set of 4 floating point values between 0 and 1 that correspond in MMF to a RGBA color (each component between 0 and 255 in MMF is converted to a floating point value between 0 and 1). In the XML file this type of variable must be used in conjunction with the int_float4 property type.

    Predefined variables

    - declare the fPixelWidth and fPixelHeight values if you need to know the width and height of a pixel (equal to 1/texture_width and 1/texture_height) :

    float fPixelWidth;
    float fPixelHeight;


    Shader function

    The shader function is called for each pixel in your object's image. It gets as input parameter the coordinates of the pixel in the texture and must return the color of the pixel.

    Example of pixel shader function :

    Code:
    PS_OUTPUT ps_main( in PS_INPUT In )
    {
        PS_OUTPUT Out;
    
        float2 coord;
        coord.x = 1.0-In.Texture.x;
        coord.y = In.Texture.y;
        Out.Color = tex2D(img, coord);
    
        return Out;
    }
    As explained above in the "input / ouput parameters" section, In.Texture contains the pixel coordinates (between 0 and 1), and the function returns the color of the pixel.

    tex2D(img, xy) is a HLSL function that returns the color of the pixel at the xy coordinates in the img sampler.

    The routine above just flips the image horizontally.

    Code:
    technique tech_main
    {
        pass P0
        {
            // shaders
            VertexShader = NULL;
            PixelShader  = compile ps_1_4 ps_main();
        }  
    }
    This section allows to specify the shader function (ps_main) and the minimum shader version number it requires, here 1.4. You can also set render states.

    More info about shaders in the HLSL documentation on MSDN :

    http://msdn.microsoft.com/en-us/libr...61(VS.85).aspx

    Some tutorials found via Google :

    http://blogs.microsoft.co.il/blogs/tamir/archive/2008/06/17/hlsl-pixel-shader-effects-tutorial.aspx

    http://www.neatware.com/lbstudio/web/hlsl.html

    http://www.ziggyware.com/Articles/HLSL_intro.pdf

    http://www.facewound.com/tutorials/shader1/

    http://www.coniserver.net/wiki/index.php/Simple_HLSL_Shader_Tutorial

    There are others. And take a look at the source code of the MMF2 shaders made by Sphax, Looki, etc, they probably contain examples for everything you want to do.


    XML file

    Contains info about the shader and its (optional) parameters :

    Code:
    <effect>
    <name>Put here the effect name</name>
    <description>Put here a description of the effect, displayed in the Effects dialog box</description>
    <author>Your name here</author>
    <company>Your company here</company>
    <copyright>Copyright @ 2009 Your Company</copyright>
    <website>www.your_web_site.com</website>
    <email>someone@somewhere.com</email>
    <dx8>yes or no, depends if your shader works wirh DirectX 8 (usually no unless your shader is in asm)</dx8>
    <parameter>
    	<name>Name of parameter 1, displayed in the properties</name>
    	<variable>Variable name in the .FX file (and used in the event editor)</variable>
    	<description>This variable does this...</description>
    	<type>variable type : either INT, FLOAT, INT_FLOAT4, IMAGE</type>
    	<property>Property type : EDIT, SPIN, SLIDER, CHECKBOX, COLOR, IMAGE</property>
    	<value>initial value</value>
    	<min>minimum value</min>
    	<max>maximum value</max>
    	<delta>step value, for FLOAT + SPIN only</delta>
    	<preview_value>value used for the preview in the Effects dialog box</preview_value>
    </parameter>
    <parameter>
    	<name>Name of parameter 2</name>
    	etc...
    </parameter>
    etc...
    </effect>
    All the fields are optional, except for the name of the shader and the parameters if any.

    The content of the "value" line depends on the variable type :
    - INT : integer value
    - FLOAT : floating point value
    - INT_FLOAT4 : integer value that contains 4 values between 0 and 255, used for RGBA color values. These values are transformed to a float4 variable, that contains 4 floating point values between 0 and 1 (1 corresponds to 255). This parameter type is generally used with the COLOR property type.
    - IMAGE : the value is the name of a graphic file in the Effects directory. This file is loaded when the user sets up the shader in the properties, and then the image is stored in the MFA file, the user can modify it with the MMF picture editor. The IMGE property type can be used only with the IMAGE type (and reciprocally).

  2. #2
    Clicker Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleSWF Export ModuleUnicode Add-on
    Looki's Avatar
    Join Date
    Aug 2006
    Location
    Karlsruhe, Germany
    Posts
    3,741
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)

    Re: How to make a shader - Quick documentation

    Nice tutorial and a great reference to look up the XML elements.

    Anyway, I have a question.
    Why do you use PS_OUTPUT and PS_INPUT?

    The ps_main() example function could be done like this as well.

    Code:
    float4 ps_main( in float2 In :TEXCOORD0 ) :COLOR0
    {
        float4 Out;
    
        float2 coord;
        coord.x = 1.0-In.Texture.x;
        coord.y = In.Texture.y;
        Out = tex2D(img, coord);
    
        return Out;
    }

  3. #3
    Clickteam Clickteam

    Join Date
    Jun 2006
    Location
    France
    Posts
    14,640
    Mentioned
    279 Post(s)
    Tagged
    3 Thread(s)

    Re: How to make a shader - Quick documentation

    You're correct, no need to use the input / output structures. Initially I took a shader example from the DX SDK, and I didn't want to modify it. I also thought vertex shaders would work, but that was not possible - that will be possible probably in MMF3.

    So yes one can use your syntax too.

  4. #4
    Forum Moderator

    Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleXNA Export ModuleInstall Creator Pro
    nivram's Avatar
    Join Date
    Jul 2006
    Location
    Bandon, Oregon
    Posts
    6,839
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Re: How to make a shader - Quick documentation

    Thank you Yves. A very useful tutorial and a great learning experience.

    Marv
    ​458 TGF to CTF 2.5+ Examples and games
    http://www.castles-of-britain.com/mmf2examples.htm

  5. #5
    Clicker Multimedia Fusion 2
    Valerien's Avatar
    Join Date
    Jun 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: How to make a shader - Quick documentation

    Great ! The fundamentals delivered in no time, thanks .

  6. #6
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleSWF Export Module
    happygreenfrog's Avatar
    Join Date
    May 2011
    Location
    I.L.T.D.O.I.R (I.L.T.D.O.I.R's Location: The Dimension Of Infinite Recursion)
    Posts
    4,310
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm having difficulties with making a shader. I've been trying to make one that scales the object. This is the code:

    The FX file:

    Code:
    struct PS_INPUT{
    
    
    float4 Position : POSITION;
    float2 Texture : TEXCOORD0;
    
    
    };
    
    
    struct PS_OUTPUT
    {
    
    
    float4 Color : COLOR0;
    
    
    };
    
    
    sampler2D Tex0;
    
    
    float scaleX;
    
    
    float scaleY;
    
    
    PS_OUTPUT ps_main( in PS_INPUT In )
    {
    PS_OUTPUT Out;
    
    
    float2 coord;
    coord.x = In.Texture.x*scaleX;
    coord.y = In.Texture.y*scaleY;
    Out.Color = tex2D(Tex0, coord);
    
    
    return Out;
    };
    
    
    technique tech_main
    {
    
    
    pass P0
    {
    VertexShader = NULL;
    PixelShader = compile ps_1_4 ps_main();
    }
    }
    And the XML file:

    Code:
    <effect><name>Scale shader WIP</name>
    <description>Should be an alternative to scaling in MMF2.</description>
    <author>Happygreenfrog</author>
    <company>...</company>
    <parameter>
        <name>X Scale</name>
    	<variable>scaleX</variable>
    	<description>X scale size. (scaleX)</description>
    	<property>SPIN</property>
    	<value>1.0</value>
    	<min>-999999.999999</min>
    	<max>999999.999999</max>
    	<delta>0.1</delta>
    	<preview_value>5.0</preview_value>
    </parameter>
    <parameter>
        <name>Y Scale</name>
    	<variable>scaleY</variable>
    	<description>Y scale size. (scaleY)</description>
    	<property>SPIN</property>
    	<value>1.0</value>
    	<min>-999999.999999</min>
    	<max>999999.999999</max>
    	<delta>0.1</delta>
    	<preview_value>5.0</preview_value>
    </parameter>
    </effect>
    It's supposed to grow/shrink the object. However, it doesn't work. The shader does absolutely nothing (unless the value is below 1.0, in which case, it makes the object disappear altogether). Can anybody help me out here?

Similar Threads

  1. Tilemap Pixel Shader (aka "texture atlas" shader)
    By MuddyMole in forum Hardware Accelerated Runtime
    Replies: 3
    Last Post: 10th May 2013, 08:21 PM
  2. Any shader that can make underwater reflections like this?
    By Outcast in forum Multimedia Fusion 2 - Technical Support
    Replies: 1
    Last Post: 16th October 2012, 10:14 PM
  3. Replies: 0
    Last Post: 16th June 2009, 12:11 PM
  4. How do I make shader effects?
    By Game_Master in forum Hardware Accelerated Runtime
    Replies: 2
    Last Post: 16th June 2009, 07:04 AM
  5. How do I make shader effects?
    By Game_Master in forum Multimedia Fusion 2 - Technical Support
    Replies: 5
    Last Post: 15th June 2009, 11:40 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •