Shadertoy : Warp of the West

... see this shader at the official website.

News : Real-time height map shadows | HUGE Improvements from BarneyCodes.

A good example with p5js and a video from the BarneyCodes.

Godot 4: Warped plasma shader (tutorial) from FencerDevLog.

Shader Editor - example 005.

... another shader for Shader Editor:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec2 resolution;
uniform float time;
uniform vec4 mouse;
uniform vec4 date;

//#define time  iTime
#define R resolution.xy
void mainImage( out vec4 fragC, in vec2 fC)
{
   vec2 pos = (fC.xy/R.xy) * 8. - 4.;
    pos.x *= R.x / R.y;
    float s = .26, f = 10.0, k = f;
    vec3 p = vec3(pos, sin(time ) * .15)* s;

    for( int i=0; i< 5; i++ )
    {
           p = (abs(p)/dot(p,p) - 1.33);
           k = length(p);
        
           p = 0.95*s/(p*k-p)*k;
   }
   f = (dot(dot(p,p),0.9*s)/(s/dot(p,p)));
   fragC= vec4(f, f *1.2, f * 9.1, 1.0);;
}

void main() {
vec4 fragment_color;
mainImage(fragment_color, gl_FragCoord.xy);
gl_FragColor = fragment_color;
}

Shader Editor - example 004.

This is not 100% my shader, I found an example on the web and adapted it for March. It is quite optimized and can be further optimized. I did it rather quickly because I can't really afford to use up my time and resources without having a financial or health-related gain. You can turn it into wallpaper with the ShaderToy Android application.

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

#define _ParticlesAmount 10
uniform vec2 resolution;
uniform float time;
float rnd(float x)
{
    return fract(sin(dot(vec2(x + 47.49,38.2467 / (x + 2.3)), vec2(12.9898, 78.233))) * (43758.5453));
}

float draw_leaf(vec2 uv, float scale, float d) {
    float ret;
    vec2 root = uv - vec2(1.0, scale);
    float r = length(root) / scale;
    float t = abs(atan(root.x, root.y) / 3.1415);
    float edge = (3.0 * t - 8.0 * t*t*t*t + 6.0 * t*t*t*t*t) / (4.0 - 3.0 * t);
    ret = smoothstep(edge - d, edge + d, r);
    return ret;
}

mat2 rotate(float t) {
    return mat2(cos(t), -sin(t), sin(t), cos(t));
}

float drawClover(vec2 uv, float scale, float d) {
    float ret = draw_leaf(uv, scale, d);
    uv = rotate(2.0) * uv;
    ret *= draw_leaf(uv, scale, d);
    return 1.0 - ret;
}

vec4 alphaBlend(vec4 base, vec4 blend)
{
    return vec4(base.rgb * base.a * (1.0 - blend.a) + blend.rgb * blend.a, blend.a + base.a * (1.0 - blend.a));
}
// conversion from a web shadertoy
//void mainImage( out vec4 fragColor, in vec2 fragCoord )

void main() {
{
    vec2 uv = (2.0 * gl_FragCoord.xy - resolution.xy) / min(resolution.x, resolution.y);
    float t = smoothstep(1.5, 0.0, length(uv));
    gl_FragColor = vec4(t * vec3(1, 0.8784, 0.9333) + (1.0 - t) * vec3(0.9568, 0.7451, 0.8118), 1.0);
    float j;
    float move_max = 1.0;
    vec2 spawn_center = vec2(0.0, 0.0);
    float spawn_length = 0.5;
    float _ParticlesAmount_f = float(_ParticlesAmount);
    for (int i = 1; i < _ParticlesAmount; i++)
    {
        j = float(i);
        float rnd1 = rnd(cos(j));
        float delayedTime = (0.2 + 0.2 * rnd1) * time;
        float d = floor(delayedTime / move_max);
        float rnd2 = rnd(j * d);
        float rnd3 = rnd(j * j * d);
        float r = delayedTime / move_max - d;
        float x_wave = 0.15 * sin(delayedTime * 7.0 + 6.282 / j);
        vec2 spawn = vec2(0.0, rnd3 * spawn_length);
        float ease = pow(2.0, 5.0 * (r - 1.0));
        float y_move = move_max * ease;
        float opacity = 1.0 - ease - pow(2.0, -30.0 * r);
        float scale = 1.0 - 0.65 * rnd1 + 0.15 * sin(1.8 * time * j / _ParticlesAmount_f + 6.282 / j);
        float rot_wave = 2.0 * sin(delayedTime * 3.0 * j / _ParticlesAmount_f * 2.0 + 6.282 / j);
        vec2 center = rotate(rot_wave) * (rotate(6.282 * rnd2) * (uv + spawn_center) + spawn + vec2(x_wave, y_move)) * scale;
        vec3 cloverColor = vec3(0.3 + 0.3 * rnd2, 0.98, 0.3) * (1.0 - 0.3 * rnd3);
        vec3 cloverCenterColor = cloverColor + (vec3(1.0) - cloverColor) * 0.5;
        vec3 cloverBgColor = vec3(1.0, 0.98, 0.7);
        gl_FragColor = alphaBlend(gl_FragColor, vec4(cloverBgColor, opacity * drawClover(center, 0.1, 0.3)));
        gl_FragColor = alphaBlend(gl_FragColor, vec4(cloverColor, opacity * drawClover(center, 0.1, 0.01)));
        gl_FragColor = alphaBlend(gl_FragColor, vec4(cloverCenterColor, opacity * drawClover(center, 0.05, 0.3)));
    }
 }
} 

Victor Lopez - online tool !

Online tool for graphics ... https://victhorlopez.github.io/editor/.

Prototype Node Based Shader Editor in WebGL to edit and create materials interactively with nodes, where you can drag and drop textures and use multiple features similar to other editors.

Shader Editor - example 005.

Today I posted on my instagram three shaders created to be used as phone wallpapers using the Shader Editor Android software option.

Somewhere in my posts I specified that this android application allows you to create shaders and then you can add them as dynamic wallpaper on phone.

The three source codes are open-source and you can test and use them with the android application and they will run very well as wallpapers:

This is a shader that I like as a design because it is relaxing and I put a more feminine color because spring is coming.

#ifdef GL_ES
precision highp float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 resolution;


void main( void ) {
vec2 uv = 0.5-(gl_FragCoord.xy - resolution * 0.15) / max(resolution.x, resolution.y) * 5.0;
uv *= 1.0;

float e = 0.0;
for (float i=3.0;i<=16.0;i+=1.0) {
e += 0.081/abs( (i/11.) +sin((time/1.20) + 0.18*i*(uv.y) *( cos(i/2.10 + (time / 11.0) - uv.y*.4) ) ) + 2.5*uv.x);
gl_FragColor = vec4( vec3(e/1.6, e/18.6, e/1.6), 1.0);

}

}

This is a dynamic sin cos combination

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main( void ) {

vec2 p = ( gl_FragCoord.xy / resolution.xy ) -0.5;//+ mouse / 4.0;
// float color = 0.0;

float sx =cos(0.123*time)*(p.x)*sin(7.6*p.x-0.5*time);
float dy =1.1/(1000.*abs(p.y-sx));

float dy2 =(50.*abs(p.y-dy));
float dy3 =(150.*abs(p.y-dy));

gl_FragColor = vec4( vec3( .01, dy*dy3 ,dy2*.1),4);

}

This shader has a darker style:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 resolution;
uniform float time;

mat2 m(float a) {
    float c=cos(a), s=sin(a*1.0);
    return mat2(c,-s,s,c);
}

float map(vec3 p) {
    p.xz *= m(time * 0.1);p.xy*= m(time * 0.1);
    vec3 q = p * 4.0 + time;
    return length(p+vec3(sin(time * 0.17))) * log(length(p) + 0.10) + sin(q.x + sin(q.z + sin(q.y))) * 1.8;
}

void main() {
    vec2 a = gl_FragCoord.xy / resolution.y - vec2(0.5, 0.5);
    vec3 cl = vec3(0.0);
    float d =0.15;

    for (int i = 0; i <= 5; i++) {
        vec3 p = vec3(0, 0, 4.0) + normalize(vec3(a, -1.0)) * d;
        float rz = map(p);
        float f = clamp((rz - map(p + 0.1)) * 0.5, -0.1, 1.0);
        vec3 l = vec3(0.1, 0.3, 0.44) + vec3(1.5, 1.0, 1.0) * f;
        cl = cl * l + smoothstep(0.5,0.31, rz) * 0.16 * l;
        d += min(rz, 1.0);
    }

    gl_FragColor = vec4(cl*8.0, 1.0);
}

News : From Shadertoy to Godot 4: Learn to convert the shader code (tutorial) !

... this is not current news, but it is informative and, you can see more on youtube channel named FencerDevLog.

News : Shaderfrog online tool new updates.

This tool can help you edit online and you can see the differences of shader and glsl type source code and now it comes with news.

I also presented this tool last year in April, it is quite old as an online tool.

The author of this online tool tells us:

Hi, my name is Andy. Almost 8 years ago, I created a tool called Shaderfrog. Shaderfrog is a Three.js shader editor and ‟composer.” Shaderfrog lets you author shader GLSL in nodes, and then combine them together using a graph editor.

See this online screenshot:

News : New shaders for my game.

As you know, I had some problems with Unity 3D and the game project North. The reason was the non-activation of the Windows OS operating system and some network problems. That's how we continued from the beginning with the Godot game engine that switched to the C# language. At this moment I worked on some shaders. The new version I'm working on is 4.1.2 and it's still not very well documented for the custom implementation of Godot shaders with gdshader type files.

Here are some new examples:

Halo sun shader

Smoke sphere shader

Basic fire shader

Graphics programming - Unity 3D shaders - 005.

If you working with shaders and you get this error

Shader error in '': Parse error: syntax error, unexpected TVAL_ID

Go to console area and find where is the line of source code ...

Shader error in '': Parse error: syntax error, unexpected TVAL_ID at line 15

In my case was an old defined source code ZWriteoff, after I change it with ZWrite Off the shader is compileted.

Shader Editor - example 004.

Another example with the Shader Editor android application, this time simpler:

This shader displays some concentric circles that change their colors according to a sine and cosine formula.

This is the source code for the shader:

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec2 resolution;
uniform float time;

void main(void) {
 float mx = max(resolution.x, resolution.y);
 vec2 uv = gl_FragCoord.xy / mx;
 vec2 center = resolution / mx * 0.5;
 float t = time * 10.0;

 gl_FragColor = vec4(cos(t+distance(uv, center) / 222.0)+1.0,
  vec2(sin(t - distance(uv, center) * 76.0)) * 10.5,
  1.0);
}

Graphics programming - Unity 3D shaders - 004.

In the previous tutorial number 002, I presented how a shader can be implemented using an HLSL type file that provides two output variables: _in1 and _in2. Theoretically, they should be renamed with _out because they are output. Today I will show you how to use the color variable as an input in the custom node. Here is the source code with a compound math function on a vector with size 4 for Color added in Shader Graph.

Let's see the source code :

#pragma shader_feature_local OutCode001

float DataInput_float( in float4  _in11, in float x , out float4 _out11)
{
    //_in11 = _input11Float;
    _in11 = _in11;
    _out11 = sin(_in11) * ( x * 1000 );
    return  _out11;
}

This is how to link the _in11, x and _out11 to Inputs and Outputs lists. You can see the function is used like DataInput and not DataInput_float in the GUI.

Graphics programming - Unity 3D shaders - 003.

This is a new default example like the one from the previous tutorial, it is a little more complex, but you can see the differences.

I commented the default source code generated by Unity 3D and added a default source code for coloring with RGB color range.

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

//Shader "Custom/CG_RGB"
//{
//    Properties
//    {
//        _Color ("Color", Color) = (1,1,1,1)
//        _MainTex ("Albedo (RGB)", 2D) = "white" {}
//        _Glossiness ("Smoothness", Range(0,1)) = 0.5
//        _Metallic ("Metallic", Range(0,1)) = 0.0
//    }
//    SubShader
//    {
//        Tags { "RenderType"="Opaque" }
//        LOD 200

//        CGPROGRAM
//        // Physically based Standard lighting model, and enable shadows on all light types
//        #pragma surface surf Standard fullforwardshadows

//        // Use shader model 3.0 target, to get nicer looking lighting
//        #pragma target 3.0

//        sampler2D _MainTex;

//        struct Input
//        {
//            float2 uv_MainTex;
//        };

//        half _Glossiness;
//        half _Metallic;
//        fixed4 _Color;

//        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
//        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
//        // #pragma instancing_options assumeuniformscaling
//        UNITY_INSTANCING_BUFFER_START(Props)
//            // put more per-instance properties here
//        UNITY_INSTANCING_BUFFER_END(Props)

//        void surf (Input IN, inout SurfaceOutputStandard o)
//        {
//            // Albedo comes from a texture tinted by color
//            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
//            o.Albedo = c.rgb;
//            // Metallic and smoothness come from slider variables
//            o.Metallic = _Metallic;
//            o.Smoothness = _Glossiness;
//            o.Alpha = c.a;
//        }
//        ENDCG
//    }
//    FallBack "Diffuse"
//}
Shader "Cg shader for RGB cube" { 
   SubShader { 
      Pass { 
         CGPROGRAM 
 
         #pragma vertex vert // vert function is the vertex shader 
         #pragma fragment frag // frag function is the fragment shader
 
         void vert(float4 vertexPos : POSITION,
            out float4 pos : SV_POSITION,
            out float4 col : TEXCOORD0)  
         {
            pos =  UnityObjectToClipPos(vertexPos);
            col = vertexPos + float4(0.5, 0.5, 0.5, 0.0);
            return;
         }
 
         float4 frag(float4 pos : SV_POSITION, 
            float4 col : TEXCOORD0) : COLOR 
         {
            return col; 
         }
 
         ENDCG 
      }
   }
}

Here is the result attached to the same material from the previous tutorial, but with this default shader.

ThreeJS : dissolve shader example.

This example with ThreeJS and shaders is created by Made with 🐪 by Faraz Shaikh, see more on the GitHub user.

Graphics programming - Unity 3D shaders - 002.

In this article - tutorial I will show you how to use the most simple HLSL source code with Unity 3D.

You need to install the Shader Graph package in Unity 3D.

Create a basic shader with Create - Shader Graph - BuildIn - Unlit Shader.

Open this shader in the Shader Graph package and add a Custom Function.

This allows you to create variables and use an HLSL file.

You can see how I create this in this image:

Create a file and name this file with this name: MyNewCode.hlsl then add this in the Shader Graph package like in that image.

For each variable is need to use the Outputs to add these two variables: _in1 and _in2.

In the HLSL file, you can add this simple source code.

// file for custom node shader function
static float _input1Float = 1;
static float _input2Float = 1;
void Data_float(out float _in1, out float _in2)
{
    _in1 = _input1Float;
    _in2 = _input2Float;
  
}

Now, you have a custom node shader in your Shader Graph package project with an HLSL source code.

Graphics programming - Unity 3D shaders - 001.

If you have studied shader theory and computational graphics in the past, then the only impediment would be the Unity 3D interface.

For a shader that uses the CG programming language, then you can use this type of shader in Unity 3D software.

You can create with right-click on Unity 3D interface.

This will create a shader file, you can open and see the default shader.

Let's make a CG shader with one color.

Remove all content from this file and add this source code:

Shader "Cg basic shader" { // this is the name of the shader 
   SubShader { // Unity chooses this like an subshader and works with your GPU specifications
      Pass { // passes in higher-level shader/material systems GLSL/Cg/HLSL is a way of setting up states necessary for multi-pass rendering, in this case is one pass
         CGPROGRAM // start programming with Unity's Cg

         #pragma vertex vert 
            // this specifies the vert function as the vertex shader 
         #pragma fragment frag
            // this specifies the frag function as the fragment shader
		// define vert for vertex shader 	
         float4 vert(float4 vertexPos : POSITION) : SV_POSITION 
            // vertex shader 
         {
            return UnityObjectToClipPos(vertexPos);
              // this line transforms the vertex input parameter 
              // and returns it as a nameless vertex output parameter 
              // (with semantic SV_POSITION)
         }
		 // define frag for fragment shader
         float4 frag(void) : COLOR // fragment shader
         {
            return float4(0.0, 1.9, 7.6, 1.0); 
               // this fragment shader returns a nameless fragment
               // output parameter (with semantic COLOR) that is set to
               // opaque red (red = 1, green = 0, blue = 0, alpha = 1)
         }

         ENDCG // ends the part in  programming with Unity's Cg
      }
   }
}

This is a standard shader and if you search on the web you can find more simple shaders.

Add an object to your scene, create a new material, and add to this object, drag the file shader to the material, and will fill with this RGBA color: 0.0, 1.9, 7.6, 1.0.

Shaderfrog 2.0 "Hybrid Graph" Tech Demo online tool.

This online tool is named Shaderfrog 2.0 "Hybrid Graph" Tech Demo.

You can find the source code on this GitHub project.

News : A new video from TheArtofCodeIsCool .

This is a good youtube channel if you want to learn the basic of shaders.

The real goal is to understand mathematics in a design mode.

Shadertoy: matrix rotation for uv.

Today I wrote a simple example in shadertoy about how to apply a rotation using rotation matrices with sin and cos for a uv, see wikipedia.

For uv I used already defined uv. I created a stripe using the modulo function to make rotation visible and completed the rotation with the iTime variable defined in shadertoy to rotate it continuously.

Here is the created source code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    //set the uv to a proper size on the center of screen 
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
    // set rotation angle value
    float rot = radians(0.0);
    // this set rotation by time and 
    rot = iTime;a
    // algebra formula for rotation by matrix , https://en.wikipedia.org/wiki/Rotation_matrix
    mat2 m = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
    // rotation of uv with matrix algebra formula where is set the rotation angle 
    uv = m* uv;
    // define float by function module from 1.0 and uv.x - uv.y
    float d = mod(uv.x - uv.y, 1.0);
    // color for fragColor is value of fload d by module function
    vec4 col = vec4(vec3(d), 1.0);
    fragColor = vec4(col);
}

Here is an example share from my shadertoy account.