Parameters for Lighting in Computer Graphics

 Lighting esp in a graphics library such as OpenGL can be implemented with techniques such as ray tracing, ray casting which solve visibility problem and shading as in phong shading which is for applying color.

Let's begin with basics:

Objects are represented in either boundary representations or using solid modeling. When it comes to coloring a 3D scene the objects in the scene interact with the light from light sources. There are multiple reflections, refractions etc..

If multiple reflections and refractions are neglected and light in the scene is modeled by splitting into ambient, diffuse and specular light then phong shading model becomes useful. In this matter is modeled as having a Bi-Directional Reflectance Distribution Function(BRDF). How much light falling on a surface is reflected is specified by it. Gouraud shading: you evaluate the light color using the reflectance model at the known points, and interpolate on the color; Phong shading: you interpolate the normals and apply the reflectance model at every interpolated point.

There are several parameters of lighting that go into the phong shading calculations. Firstly the number and type of light sources. Light source types include point source, directional light and spot light.

Phong Shading parameters(Taken from wiki):

For each light source in the scene, components ${\displaystyle i_{\text{s}}}$ and ${\displaystyle i_{\text{d}}}$ are defined as the intensities (often as RGB values) of the specular and diffuse components of the light sources, respectively. A single term ${\displaystyle i_{\text{a}}}$ controls the ambient lighting; it is sometimes computed as a sum of contributions from all light sources.

For each material in the scene, the following parameters are defined:

${\displaystyle k_{\text{s}}}$, which is a specular reflection constant, the ratio of reflection of the specular term of incoming light,

${\displaystyle k_{\text{d}}}$, which is a diffuse reflection constant, the ratio of reflection of the diffuse term of incoming light (Lambertian reflectance),

${\displaystyle k_{\text{a}}}$, which is an ambient reflection constant, the ratio of reflection of the ambient term present in all points in the scene rendered, and

${\displaystyle \alpha }$, which is a shininess constant for this material, which is larger for surfaces that are smoother and more mirror-like. When this constant is large the specular highlight is small.

Vectors for calculating Phong and Blinn–Phong shading

Furthermore, we have

${\displaystyle {\text{lights}}}$, which is the set of all light sources,

${\displaystyle {\hat {L}}_{m}}$, which is the direction vector from the point on the surface toward each light source (${\displaystyle m}$ specifies the light source),

${\displaystyle {\hat {N}}}$, which is the normal at this point on the surface,

${\displaystyle {\hat {R}}_{m}}$, which is the direction that a perfectly reflected ray of light would take from this point on the surface, and

${\displaystyle {\hat {V}}}$, which is the direction pointing towards the viewer (such as a virtual camera).

Then the Phong reflection model provides an equation for computing the illumination of each surface point ${\displaystyle I_{\text{p}}}$:

${\displaystyle I_{\text{p}}=k_{\text{a}}i_{\text{a}}+\sum _{m\;\in \;{\text{lights}}}(k_{\text{d}}({\hat {L}}_{m}\cdot {\hat {N}})i_{m,{\text{d}}}+k_{\text{s}}({\hat {R}}_{m}\cdot {\hat {V}})^{\alpha }i_{m,{\text{s}}}).}$

where the direction vector ${\displaystyle {\hat {R}}_{m}}$ is calculated as the reflection of ${\displaystyle {\hat {L}}_{m}}$ on the surface characterized by the surface normal ${\displaystyle {\hat {N}}}$ using

${\displaystyle {\hat {R}}_{m}=2({\hat {L}}_{m}\cdot {\hat {N}}){\hat {N}}-{\hat {L}}_{m}}$

and the hats indicate that the vectors are normalized.

Here's how to create an SVG component and draw it in ReactJS

 ReactJS project on SVG drawing using functional components-

Here is a really short piece of ReactJS code to draw SVGs:

import React from 'react';

function Parabola() {

    return <path d="M 100 350 q 150 -300 300 0" stroke="blue"

    stroke-width="5" fill="none" />;

  }

function Line()

{

    return <path d='M 175 200 l 150 0' stroke='green' stroke-width='3'

    fill='none' />;

}

class SVG extends React.Component

{

    render()

    {

        

        return(

            <svg width="400" height="450">

            <Line/>

            <Parabola/> </svg>

        );

    }

}

export default SVG;

Which draws the following output on the screen:

I have the project link here:

https://github.com/bmkamath2000/React-Projs/tree/master/path-svg

Sample Chart.js visualization of vertical bar

I have posted a Chart.js example of vertical bar chart.

It is from the site https://www.chartjs.org/samples/latest/

This chart for some strange reason does not show up on viewing all blog posts. SO to see this chart please view(click on title) this post individually

Truechet Tiles

While you may have observed there were a few posts on Kaleidoscope and patterns in my blog and I have promised on several occasions to create such patterns but I never delivered on my promise.

I feel the time has come to make good some of the promises and I want to now make some tiling code that repeats certain patterns on the screen.

Here is a pattern of truchet tiles:

Here is how its created:

Vertex Shader code:

        void main() {

            gl_Position = vec4( position, 1.0 );

        }

    

Fragment Shader Code:

// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform float u_time;

vec2 brickTile(vec2 _st, float _zoom){

    _st *= _zoom;

    // Here is where the offset is happening

    _st.x += step(1., mod(_st.y,2.0)) * 0.5;

    return fract(_st);

}

float box(vec2 _st, vec2 _size){

    _size = vec2(0.5)-_size*0.5;

    vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);

    uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);

    return uv.x*uv.y;

}

void main(void){

    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    vec3 color = vec3(0.0);

    // Modern metric brick of 215mm x 102.5mm x 65mm

    // http://www.jaharrison.me.uk/Brickwork/Sizes.html

    // st /= vec2(2.15,0.65)/1.5;

    // Apply the brick tiling

    st = brickTile(st,5.0);

    color = vec3(box(st,vec2(0.9)));

    // Uncomment to see the space coordinates

    // color = vec3(st,0.0);

    gl_FragColor = vec4(color,1.0);

}

Post a message for me in Group Talk(Hangouts)

Leave a message here:

Mercenaries of Change - Group Talk

This is a google hangout that I am frequenting. Any queries on graphics, game development or programming in general would be entertained.

India is a country with a huge skill gap between engineering and technology professionals and Industry trends and requirements.

We should join forces to combat unemployment by helping each other out in doing what we would love to.

I am skilled in OpenGL(immediate mode), Graphics, Gaming(2D) and a host of languages from Java, C, C++, C#, ASP.Net, Javascript, CSS, HTML, ReactJS(web) and Excel VBA.

Visualizations of different kinds interest me the most. Want to learn Python in the near future.

Thanks for reading about me. Now Its your turn. Introduce yourself.

(All chat will be archived)

Book of Shaders- Second Shader on Randomness(chaos)

In this post I have shared a shader I found on the "Book of Shaders" site. I selected a shader on randomness. You can easily lookup the code of this shader by right clicking and selecting inspect. Now this is something you do very often to inspect your DOM from the browser. And some more advice to you is to experiment with Three.js that I used to render the shader.

Book of Shaders- Shader in Blogger

Hi There, I have used Three.js and posting some shader from the site: Book of Shaders This is the vertex shader used here:

        void main() {
            gl_Position = vec4( position, 1.0 );
        }

and this is the corresponding fragment shader:

        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }

For some strange reason my code for this post is interfering with the code of the other post. I am really sorry about my lack of understanding of the nuances of HTML/CSS/JS. Swalpa Adjust Maadi(Adjust a little) and view this post individually.