Shadertoy: Use buffers - 001.

This tutorial is about how to use buffers with shadertoy webpage.

Create an account and use the New item from main menu to start a shader.

The default source code when you start the new shader is:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    // Output to screen
    fragColor = vec4(col,1.0);
}

The buffers, Buffer A, Buffer B, Buffer C, and Buffer D, let you create "multi-pass" shaders.

You can run different shaders in each buffer and you can be passed to another buffer with fragColor.

Press the + tab to add a new buffer into the new shader.

See the next image.

The BufferA comes with this source code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragColor = vec4(0.0,0.0,1.0,1.0);
}

The next step is about the link between BufferA and main shader program.

Click on iChannel0 and select the BufferA, see the next image:

I change teh default BufferA source code with my old source code from another example:

// the my old example: https://www.shadertoy.com/view/XlSBz3
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy;
    // set center for circle
	vec2 center = iResolution.xy * 0.5;
    // set radius of circle
	float radius = 0.30 * iResolution.y;
    // create circle with delta and theta function
    // make delta 
    float d = length(center - uv) - radius;
    // make theta with color transparency to 0.4 and set 1 for clamp
    // the clamp is a returned value computed as min(max( x , minVal ), maxVal ).
	float t = clamp(d, 0.4, 1.0);
	fragColor = vec4( t, center, (120,230,0));
}    

Let's see one simple example:

New episode from StarTrek Online game.

Something sinister stirs in the shadows of a parallel reality. Longtime enemy, Mirror Leeta, has come from her universe, the Mirror Universe, to warn players of a great danger to all living creatures. Can you cast aside your previous squabbles and unravel the mystery of the Terran

Shadertoy: iChannel texture - 006.

Another simple example with the online shadertoy tool. In this example, I will show you how to use a webcam with a heat predator effect. And how to combine this effect with the webcam image.

vec3 predatorHeat(float v) {
float value = 1.0 - v;
return (0.5+0.5*smoothstep(0.0, 0.1, value))*vec3(
smoothstep(0.5, 0.3, value),
value < 0.3 ? smoothstep(0.0, 0.3, value) : smoothstep(1.0, 0.6, value),
smoothstep(0.4, 0.6, value)
);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

vec4 temp = texture(iChannel0, uv);
vec4 temp2 = texture(iChannel1,uv);

float average = ((temp.r + temp.g + temp.b) / 2.5);

temp.rgb = vec3(predatorHeat(average));

if(uv.x > 0.5)
fragColor = temp;
else
fragColor = temp2;
}

CodePen: Webcam with RGB color shader and the three.js javascript library.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

This library is not really used in website development. It has some great real-time information display capabilities.

Today I show you a combined example of a webcam with a simple shader set with an RGBA color.