Modeling with Blockbench tool.

This tool named Blockbench is a good tool for 3D modeling if you like the Minecraft game style.

You can use it online or download it for desktop.

The target platforms are: 

• Minecraft: Java Edition 
• Minecraft: Bedrock Edition 
• Hytale 
• Rendering / Game Engine

This video shows the basics of modeling in Blockbench to create custom models for Minecraft bedrock that you can put in Minecraft maps and worlds.

Online tool webglstudio.

WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app.

You can find this online tool on this webpage.

This video from Vimeo Javi Tamat channel shows how this tool works.

WebGLStudio Coding Demo from Javi Tamat on Vimeo.

Online tool ZapBG.

ZapBG is a brand-new background removal tool based on AI and ML algorithms that will help you remove background from your graphic assets at lightning-speed!

It’s 2020. You don’t need to manually remove left-out parts. We want you to spend your time doing the most important things.

You can test this online tool on the ZapBG webpage.

Online tool badge builder.

Badges or logos are often required in design and graphics.

An intermediate solution to a company logo or badge is to use a tool to create or generate it.

This is an online tool that can be used quickly with a very good output.

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:

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;
}

Online tool shader-playground.

Here's an online tool for shaders.

This time it is a development with multiple shader specific languages and these compilers: ANGLE, Clspv, DXC, FXC, Glslang, hlsl2glslfork, HLSLcc, HLSLParser, Mali offline compiler, Naga, PowerVR compiler, Radon GPU Analyzer (RGA), Rust GPU, Slang, SPIRV-Cross, SPIRV-Cross - Intel fork with ISPC backend, SPIRV-Tools, spirv-as, Tint, XShaderCompiler.

Slices of Mars in full 3D.

Graphics contain elements with complex informational content and require human and technical processing resources.

The complexity of the informational content is the result of the processing and assimilation process.

I could continue on this topic but it would not be fair for readers to give courses on this topic.

However, we can see multiple examples on the web that highlight these arguments.

Here is a pretty interesting example for both developers and scientists.

Shadertoy: iChannel texture - 005.

This simple example is a kaleidoscope distorsion with math functions: sine and cosine.

You can see this book name it A Mathematical Kaleidoscope: Applications in Industry, Business and Science by B Conolly, S. Vajda how math can solve many issues.

You can change the parameters to see how they interact and how the distortions and use the mouse.

Shadertoy: iChannel texture - 004.

Here is a simple example that can help us understand a bit about the theory of spatial frequency.

This theory is used in various fields as wave propagation.

The example is very simple for a better understanding.

You can change the parameters to see how they interact and how the distortions are.

Shadertoy: iChannel texture - 003.

In the last tutorial I add a sphere distortion and sphere distortion with movement.

Today I use iChannel2 ro get input from keyboard and use this input to move with an offset.

The source code is not perfect because I used multiple areas with texture and I add keyboard offset.

This can be solve easy if I use a buffer.

The main goal of this tutorial is to see how you can use keyboard with iChannel input.

Shadertoy: iChannel texture - 002.

In the last example I created a surface with a texture by channel inputs.

Now, I add a sphere distortion and sphere distortion with movement.

This is the source code I used:

#define PI 3.1415926

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    // get poins 
    vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
    // set surface formula
    vec3 v = vec3(p.x, p.y, sqrt(1.0 - p.x * p.x - p.y * p.y));
    // create normals 
    vec3 n = normalize(v);
    
    // https://en.wikipedia.org/wiki/Distortion_(optics)
    vec2 sphere_distortion = vec2(atan(n.z, n.x) / PI,0.00000001 * p.y);

    vec4 color = vec4(0.0,0.0,0.0,0.0);
    
    if (uv.x > 0.0 && uv.x < 0.5)
    {
   		//color = texture(iChannel0, vec2(1.0 - (uv.x/0.5),uv.y/0.5)+ sphere_distortion);
        // with movement iTime
        color = texture(iChannel0, vec2(1.0 * iTime- (uv.x/0.5),uv.y/0.5)+ sphere_distortion);
    } 
    else if (uv.x > 0.5 && uv.x < 1.0) 
    { 
        //color = texture(iChannel1, vec2((uv.x/0.5),uv.y)+ sphere_distortion);
        // with movement iTime
        color = texture(iChannel0, vec2(iTime-(uv.x/0.5),uv.y)+ sphere_distortion);
        
    } 
	fragColor = color;
}

Shadertoy: iChannel texture - 001.

In this example with shadertoy online tool I will show you how to map a texture from iChannel texture input and UV areas.

 void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;
    
   vec4 color = vec4(0.0,0.0,0.0,0.0);
    
    if (uv.x > 0.0 && uv.x < 0.5)
    {
   		color = texture(iChannel0, vec2(1.0 - (uv.x/0.5), uv.y/0.5));
    } 
    else if (uv.x > 0.5 && uv.x < 1.0) 
    { 
        color = texture(iChannel1, vec2(1.0 - (uv.x/0.5), uv.y));
    } 
	fragColor = color;
} 

You can see this example online:

Shadertoy: create the environment - 001.

Today I will show you two ways to create an environment using shader toy online tool.

One uses a cube map and the other uses the classic ray marching method.

Both examples are mathematically simple to understand.

For a better understanding of the method ray marching you can see this link.

Vectr comes with WordPress Plugin.

I wrote about this online tool in the past but now comes with WordPress plugin.

Take a look on this video tutorial:

The bobsprite editor - web tool .

This online editor has several functions to create sprites and animations used in game development

The development team tells us:

BobSprite is a browser-based free online sprite editor excellent for pixel art. It also has tools and effects for normal drawing and painting.

I found an video tutorial on youtube with this online tool:

The batwerk online game.

This online game is a simple game with bats that must eat gifts.
Depending on this craving you will be rewarded with winnings.
A simple game that you can play in your free time.

Shadertoy: The sin math function - 002.

This is another shader example to draw a sine math function using a sine wave, see Wikipedia. I used shadertoy website and the mat sin function by time. The source code is commented for a better understanding of it.

// this size of line to paint each pixel from screen
const float size = 0.01;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    // resize uv 
    uv = uv  * 2.0;
    // translate normalized pixel coordinates uv from [0,1] to [-1, 1] with 
    uv = (uv - 1.0);

    // get uv.x aspect ratio
    uv.x *= iResolution.x / iResolution.y;
  
    // get simple sine 
    //float t = sin(uv.x);

    // get sine * 3 with same size uv will zoom the sine graphic
    // see also https://en.wikipedia.org/wiki/Sine_wave
    float t = sin(uv.x * 3.0);
    
 // select domain area of sine and drwa yellow color 
    // else put an blue color on rest
    if (uv.y >= t - size && uv.y <= t + size) {
        // draw sine
     fragColor = vec4(1.0,1.0,0.0,1.0);
    } else {
        // draw background
        fragColor = vec4(0.0,0.0,1.0,1.0);
    }
}

The result of this shader is this:

Multiple online tools on angrytools webpage.

The angrytools webpage comes with multiple online tools.
These tools solve multiple issues for you, like:

• Online CSS Gradient Generator;
• Gradient to Image Maker;
• Android Button Maker;
• Code for Email;
• CSS Generator;
• Android Pixel Calculator;
• Basic Commands - Ubuntu/Windows;
• CSS Animation Kit;
• Total Text Converter;
• Ultimate Bootstrap Editor;
• CSS Media Query;

Click on bottom button for each online tool.
A new webpage is open with the tool, make changes, and use the result.
For example, click on Gradient to Image Maker button to use this feature.
The new page is open with a gradient area and example.
Select your gradient from Presets and use generate source button to fill CSS code area with the CSS source code for that gradient.
You can copy this source code and use it in your project.

Another online math editor named mathcha.

If you like math whether you are a student, teacher, or parent, then this online editor is very suitable for you.
Take a look at the official youtube channel: