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.

AR Tagging with ViewAR

See how you can use augmented reality tagging by ViewAR to bring your store online and provide a virtual tour within 24 hours.

A Matterport Scanner, a tripod, and a smartphone, is all you need to create an online version of your physical store and have all the benefits that come with it. All that in less than one day.

AR Tagging uses optical character recognition (OCR) looking for text, barcodes or QR codes. AR Tagging will automatically find the desired characters from the label using defined filters, create a point of interest and save its position to your scan.

ViewAR also provides a better customer experience for your visitors on site. Help your customers find the right product or present special offerings directly on their smartphone.

If your customers want to see a product, they can simply be guided there with our augmented reality indoor navigation app.

Windwalker Echo from Unreal Engine 5 and a speak demo from askNK.

Windwalker Echo Epic Games - Aug 30, 2021

Windwalker Echo, fresh off her starring roles in Lumen in the Land of Nanite, Valley of the Ancient, and Slay is now available as a standalone character asset for both Unreal Engine 4 and 5., see this webpage.

You can see a speech demonstration from askNK with this character.