ShadertoyCategory

Shadertoy website tool

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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… Continue Reading Shadertoy – conversion of a GLSL example.

In this tutorial, I will deal with some examples. The goal of this tutorial is to understand how shadertoy works and what are the requirements to be able to work properly with this tool. You need an account then start with the New button to create a new shadertoy workspace.… Continue Reading Shadertoy – examples and circle .

The Shadertoy website is a great tool to test your skill in writing shaders. This is my first try with this tool. See the source code I write to make a notepad paper example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#define PI 3.14159265359
 
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 
    vec2 uv = (fragCoord.xy) / iResolution.xy;
    vec2 auv=vec2(uv.x*iResolution.x/iResolution.y,uv.y);
 
    vec3 col=vec3(1.,1,.95);
    vec4 ink=vec4(0.,.8,.8,0.1);
    ink.rgb+=col*0.009;
 
    col=mix(col,ink.rgb,1.-clamp(64.+cos(auv.y*PI*64.)*64.,0.,1.));
 
    col=mix(col,ink.bar,clamp((.5+(distance(auv.x,0.1)*-90.)),0.,1.));
    vec4 tex=vec4(0.,0.,0.,1.);
    col=mix(col,vec3(0.1),clamp(tex.r*0.1,0.,1.));
 
    col*=clamp((1./inversesqrt(2.4-distance(vec2(0.5),uv))),0.,1.);
    fragColor = vec4(col,1.0);
}

Use the fullscreen option to see correctly the result of this shader.