News : twigl.app another shader editor.

twigl.app is an online editor for One tweet shader, with GIF generator, sound shader, and broadcast live coding.

Today I tested this online shader editor , my hardware is not very good and browser is low, but works ...

News : SHADERed tool.

SHADERed is a lightweight tool for writing and debugging shaders. It is easy to use, open source, cross-platform (runs on Windows, Linux & Web - HLSL shaders work on all platforms) and frequently updated with new features.

See the official website.

Shadertoy : ... shader SpaceX's 7th Starship test by XorDev .

"Starship" by @XorDev Inspired by the debris from SpaceX's 7th Starship test: https://x.com/elonmusk/status/1880040599761596689

News : Godot 4: Earthquake shader (tutorial)

... another video tutorial about Godot shader feature, by FencerDevLog.

News : Coding Adventure: Rendering Fluids.

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.