[Solved] How to apply shader?

You need three things:

  1. A mesh (surface) to draw your grid on
  2. A material with a shader program that is used by the model component
  3. A shader program that draws a grid

1. Mesh to draw on
Here you can for instance add a model component to a game object and use the /builtins/assets/meshes/quad.dae which is a basic rectangle

2. A material with a shader program that is used by the model component
Copy the default model.material and model.vp and model.fp from /builtins/materials. Edit your copy of the model.material so that it uses your copied model.vp and model.fp. In the example below I decided to name my material grid.material:

3. A shader program that draws a grid
Like you said, there are many such shaders on shader toy.

https://www.google.com/search?q=shadertoy+grid+shader

One additional thing to consider is how the mesh should be rendered. You can keep the default projection in the render script and simply stretch the game object with the mesh so that it covers the entire screen. The mesh will be 1x1 pixel but if you stretch the game object to the size of the display it will obviously cover the entire screen. The other option is to add a perspective camera and position it so that your mesh is rendered properly.

Here’s me using the default projection and simply stretching the game object with the mesh:

And the result:

The gradient is done with some basic modifications of the default model.fp:

void main()
{
    // Pre-multiply alpha since all runtime textures already are
    vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
    vec4 color = texture2D(tex0, var_texcoord0.xy) * tint_pm;
    color.x = var_texcoord0.x;
    color.y = var_texcoord0.y;

    // Diffuse light calculations
    vec3 ambient_light = vec3(1.0);
    vec3 diff_light = vec3(normalize(var_light.xyz - var_position.xyz));
    diff_light = max(dot(var_normal,diff_light), 0.0) + ambient_light;
    diff_light = clamp(diff_light, 0.0, 1.0);

    gl_FragColor = vec4(color.rgb*diff_light,1.0);
}

The ambient_light was set to 1.0 and the color takes the UV’s as input.

Now that you have this setup it should be possible for you to simply replace the fragment program to whatever shadertoy shader you find. Good luck!

3 Likes