ImageProcessing | Nakoblog

Memorandum of Shadertoy Learning. part1

2020-01-25 Computer Graphics ImageProcessing

I’m trying shadertoy these days. This is my tutorial for shadertoy.

1 main function

void mainImage( out vec4 fragColor, in vec2 fragCoord ) is the entry point in Shadertoy.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 //main drawing process is here
}

Variable fragCoord contains the pixel coordinates for which the shader needs to compute a color. The resulting color is gathered in fragColor as a four component vector

Modifiers

in
- an “in” variable is used only in this function and not output.
out
- an “out” variable is an output variable that can be passed by reference.
inout
- an “inout” variable is an output and input variable.

2 fragColor

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

Assign vec4 (R, G, B, alpha) to fragColor variable.

3 fragCoord

variable fragCoord is coordinate of target pixel. fragCoord.x is x coordinate and fragCoord.y is y coordinate and fragCoord.xy is (x,y) coordinate.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 color1 = vec3(1.0, 1.0, 0.5);
    vec3 color2 = vec3(0.98, 0.808, 0.333);
    if (int(fragCoord.x )% 50 < 25){
        fragColor = vec4(color1, 1.0);
    }
    else{
        fragColor = vec4(color2, 1.0);
    }
}

4 iResolution

Uniform variable iResolution passes the resolution of the image to the shader. iResolution.x is x coordinate and iResolution.y is y coordinate and iResolution.xy is (x,y) coordinate.

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    int n = 4;
    int width = int(iResolution.x)/n;
    if (int(fragCoord.x )% width < width/2){
        fragColor = vec4(1.0, 1.0, 1.0-fragCoord.y/iResolution.y, 1.0);
    }
    else{
        fragColor = vec4(1.0, 0.0, fragCoord.y/iResolution.y, 1.0);
    }
}

5 Conditional branch and color setting

Check the article “How to Convert HSV to RGB” for more information about hsv2rgb.

vec3 hsv2rgb(in vec3 hsv){
    vec3 rgb;
    float h = hsv.x * 360.0;
    float s = hsv.y;
    float v = hsv.z;
    float c =v * s;
    float h2 = h/60.0;
    float x = c*(1.0 - abs( mod(h2, 2.0) - 1.0));
    switch(int(h2)){
        case 0: rgb = vec3(v-c) + vec3(c, x, 0.0); return rgb;
        case 1: rgb = vec3(v-c) + vec3(x, c, 0.0); return rgb;
        case 2: rgb = vec3(v-c) + vec3(0.0, c, x); return rgb;
        case 3: rgb = vec3(v-c) + vec3(0.0, x, c); return rgb;
        case 4: rgb = vec3(v-c) + vec3(x, 0.0, c); return rgb;
        case 5: rgb = vec3(v-c) + vec3(c, 0.0, x); return rgb;
        case 6: rgb = vec3(v-c) + vec3(c, x, 0.0); return rgb;
    }
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 coordinate =  fragCoord.xy - 0.5*iResolution.xy;
    vec3 pixel_color = vec3(0.5);
    
    int gradation = 10;
    
    int r_width = int(0.5*iResolution.y/float(gradation));
    int r;
    for(int i =0; i<gradation+1; i++){
        r = r_width*i;
        float i_flaot = float(float(i)/float(gradation+1));
        if(coordinate.x*coordinate.x + coordinate.y*coordinate.y < float(r*r)){
        	pixel_color = hsv2rgb(vec3((1.0/float(gradation))*float(i), 1.0, 1.0));
            break;
    	}
    }
    fragColor = vec4(pixel_color, 1.0);
}

What is color manager

2020-01-03 AfterEffects ImageProcessing Maya

GOAL

To understand color space and color manager.

What is color manager?

Color manager (also called “color management system” or “management solution”) is an application to change the color space of image and video.

In VFX production, many color spaces are used according to the tools such as digital cinema camera, rendered CG, photos and matte paint. it is necessary to unify or convert the color space. Color space conversion is an important process in VFX production.

What is color space?

Color space is a specific organization of colors in which colors are represented as coordinates.

Color model

Color model is an abstract mathematical model describing colors with some channels ( e.g. RGB, CMYK). Although color model is not the same thing as color space, some color system such as Adobe RGB and sRGB are based on color model.

Representative color space

Color spaces in Adobe Photoshop Color Picker

*Comparison of some RGB and CMYK colour gamut on a CIE 1931 xy chromaticity diagram, based on* *http://commons.wikimedia.org/wiki/File:CIE1931xy_blank.svg* *and data from Blatner and Fraser’s “Real World Photoshop CS”, p179:* *http://canopuscomputing.com.au/gallery2/d/8631-1/Gamuts_comparison-B_F.jpg* *. (* *CC BY-SA 3.0* )

sRGB

sRGB (standard Red Green Blue) is an RGB color space to use mainly on monitors, printers, and the Internet. The color gamut that can be represented in this method is the color triangle defined by three primary colors, Red, Green and Blue.

Adobe RGB

Adobe RGB is a color space definition proposed by Adobe Systems. It has a wider RGB color reproduction range than sRGB (especially green), designed to cover most of the colors achievable with CMYK color printers. It encompasses about 50% of the visible colors specified in the CIELAB color space.

NTSC (BT.601)

NTSC Color Space is designed for television. It features a color gamut that is much wider than sRGB.While NTSC is not used in modern displays, it is commonly used to compare and specify color gamut.
This is also one of the major television formats in the world including PAL, SECAM.

Rec.2020

ITU-R Recommendation BT.2020 aka Rec.2020 or BT.2020 defines various aspects of ultra-high-definition television (UHDTV) with standard dynamic range (SDR) and wide color gamut (WCG).
It defines picture resolutions, frame rates with progressive scan, bit depths, color primaries, RGB and luma-chroma color representations, chroma subsamplings, and an opto-electronic transfer function. full HD and HDR are not supported.

Rec.2100

Rec.2100 is upward compatible with Rec.2020. ITU-R Recommendation BT.2100 aka Rec.2100 or BT.2100 is an international standard for specifications that must be met by devices that handle full HD(2K), 4K and 8K resolutions. It was established by the International Telecommunication Union Wireless Communication Sector (ITU-R).

CMYK(or just CMY)

CMYK uses subtractive color mixing used in the printing process.
CMYK corresponds to Ink colors, Cyan, Magenta, Yellow and Black.

HSV

HSV(Hue, Saturation, Value) is used for painting or color sample on computers. Painting artists use it because it is more natural and intuitive to consider colors in terms of hue, color and saturation than additive mixing or subtractive mixing. HSV is a transformation of an RGB color space. HSV is also called HSB (hue, saturation, brightness).

HSL

HSL (hue, saturation, lightness / luminance) is quite similar to HSV, with “lightness” replacing “brightness”. The difference is a value calculation method. HSV uses a hexagonal pyramid model in which the brightness of pure color is equal to the brightness of white, while HLS uses a bi-hexagonal pyramid model in which the brightness of pure color is 50% of the brightness of white.(Please refer this image). It is also called HSI (hue, saturation, intensity).

LMS

LMS color place is based on three kinds of cone cells that human eye with normal vision has. These cone cells sense light and have peaks of spectral sensitivity in Short wavelength, Middle wavelength and Long wavelength.
The three parameters corresponding to levels of stimulus of the three kinds of cone cells(L, M, S) describe any human color sensation. So LMS color space can contain all visible colors.
However LMS is not objective representation of colors because parameters L, M and S is different between people and emvironment.

CIE 1931 color spaces

CIE (Commission internationale de l’éclairage, the International Commission on Illumination) is the organization that creates international standards related to light and color.
CIE 1931 color spaces is the first defined quantitative relations between distributions of wavelengths in the electromagnetic visible spectrum, and physiologically perceived colors.

The CIE XYZ is remap of the color space in which the tristimulus values are conceptualized as amounts of three primary colors.These primary colors are unvisible for human. The CIE XYZ color space is designed so that Y component corresponds to luminance.
CIE XYZ can contain all visible colors.While RGB can’t represent some of visible colors without using negative value, CIE XYZ can contain all visible colors in positive quadrant.

Why is color management needed?

When you transfer exported video to another media, color gamut remapping, gamma correction, setting of white chromaticity (white point) are required and so on.

What is ACES?

ACES(Academy Color Encoding System) is a color image encoding system created under the auspices of the Academy of Motion Picture Arts and Sciences. The system defines its own primary color that encompass the visible spectral locus as defined by the CIE xyY specification.

When you use ACES in Video editing software such as Adobe AfterEffects , Maya and Nuke, color manager is needed. Color manager is usually provided as a plugin or built-in function.

Representative Color manager

OpenColorIO

OpenColorIO (OCIO) is a complete color management solution geared towards motion picture production with an emphasis on visual effects and computer animation.
OpenColorIO official web site( https://opencolorio.org/ )

OCIO is compatible with ACES and is LUT-format agnostic, supporting many popular formats.

SynColor

SynColor is the Autodesk Color Management component.

Adobe Color Management Module（CMM）

CMM is color manager for Adobe software such as Photoshop.

Nakoblog Engineering and Design for Storytelling

Category: ImageProcessing