Shadertoy – conversion of a GLSL example. – free-tutorials.org with free tutorials and source code

Today I will show you how to convert a GLSL source code to Shadertoy source code.
This tutorial will help you better understand the elements involved in shaders and the display interface.
Let’s see what the source code written in GLSL looks like:

// A simple, if a little square, water caustic effect.
// David Hoskins.
// htthttps://www.shadertoy.com/view/MdKXDmps://www.shadertoy.com/view/MdKXDm
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// Inspired by akohdr's "Fluid Fields"
// https://www.shadertoy.com/view/XsVSDm

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 resolution;

#define f length(fract(q*=m*=.6+.1*d++)-.5)
void main()
{
    float d = 0.;
    vec3 q = vec3(gl_FragCoord.xy / resolution.yy-13., time*.2);
    // Yes, I realise this mat3 looks a little gay in a homo way ... :)teehee
    mat3 m = mat3(-2,-1,2, 3,-2,1, -1,1,3);
    vec3 col = vec3(pow(min(min(f,f),f), 7.)*40.);
    gl_FragColor = vec4(clamp(col + vec3(0., 0.35, 0.5), 0.0, 1.0), 1.0);
}

// A simple, if a little square, water caustic effect.

// David Hoskins.

// htthttps://www.shadertoy.com/view/MdKXDmps://www.shadertoy.com/view/MdKXDm

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// Inspired by akohdr's "Fluid Fields"

// https://www.shadertoy.com/view/XsVSDm

#ifdef GL_ES

precision mediump float;

#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;

uniform vec2 resolution;

#define f length(fract(q*=m*=.6+.1*d++)-.5)

void main()

{

float d = 0.;

vec3 q = vec3(gl_FragCoord.xy / resolution.yy-13., time*.2);

// Yes, I realise this mat3 looks a little gay in a homo way ... :)teehee

mat3 m = mat3(-2,-1,2, 3,-2,1, -1,1,3);

vec3 col = vec3(pow(min(min(f,f),f), 7.)*40.);

gl_FragColor = vec4(clamp(col + vec3(0., 0.35, 0.5), 0.0, 1.0), 1.0);

}

To convert it into the source code for Shadertoy online tool, we need to see what is already defined in this tool and what corresponds to the GLSL source code.
Here are some elements:
gl_FragCoord.xy and fragCoord.xy
resolution.yy and iResolution.yy (iResolution.xy )
time and iTime
The Shadertoy does not need special definitions and it is already implemented.
Let’s see the final code to see where there are changes and where not:

// Created by Cătălin George Feștilă - http://free-tutorials.org
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// convert example from http://glslsandbox.com/e#44875.0

#define f length(fract(q*=m*=.6+.1*d++)-.5)

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float d = 0.;
    //vec3 uv = vec3(fragCoord.xy / iResolution.xy,iTime*.2);
    vec3 q = vec3(fragCoord.xy/iResolution.yy-13., iTime*.2);
    mat3 m = mat3(-2,-1,2, 3,-2,1, -1,1,3);
    vec3 col = vec3(pow(min(min(f,f),f), 7.)*40.);
    fragColor = vec4(clamp(col + vec3(0., 0.35, 0.5), 0.0, 1.0), 1.0);
}

// Created by Cătălin George Feștilă - http://free-tutorials.org

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// convert example from http://glslsandbox.com/e#44875.0

#define f length(fract(q*=m*=.6+.1*d++)-.5)

void mainImage( out vec4 fragColor, in vec2 fragCoord )

{

float d = 0.;

//vec3 uv = vec3(fragCoord.xy / iResolution.xy,iTime*.2);

vec3 q = vec3(fragCoord.xy/iResolution.yy-13., iTime*.2);

mat3 m = mat3(-2,-1,2, 3,-2,1, -1,1,3);

vec3 col = vec3(pow(min(min(f,f),f), 7.)*40.);

fragColor = vec4(clamp(col + vec3(0., 0.35, 0.5), 0.0, 1.0), 1.0);

}

Let’s see the result of this source code on shadertoy:

Leave a Reply Cancel reply