Introduction to Three.js

  Three.JS is a graphics framework/library that can render into canvas/svg/webgl contexts. The library has powerful capabilities to display complex 3D scenes with multiple models/camera/lights in it. I will demonstrate a program that rotates a cube continuously. I will attach event handlers to stop rotation when mouse or finger touch/click event happens.

Qt / QML - a tool for modern application programming

 Qt and QML are tools that can increase productivity of application development big time. Qt is a framework consisting of C++ libraries that can do almost everything conceivable as far as app development is concerned. It can even create android/ios applications.

 Qt Creator is the IDE you can use to develop Qt/QML applications.

The best thing about Qt is that you can even use javascript like QML language to program the widgets on screen.

In fact you can write an entire application in QML without even touching C++.

Loading glTF models in Three.js

Hoi you... I am loading a glTF model to display a 3d scene. Please don't ask me how I did this. Just inspect in the browser the code. Better still visit this site: Link to Threejsfundamentals site

Informal Talk: I wanted to play video games before doing B.E.

 Hi There,

I can only hope that you the reader are doing good. I did do B.E. and was compelled to pursue an M.Tech from the prestigious Manipal Institute of Technology. I am not going to boast of it any further. What I wanna say is in retrospect I posted something in my FB post which students wanted to make viral.

We'll I was working for Christ University, Faculty of Engineering, Bengaluru back then. Once it so happened that I in my creative outburst penned or typed a post that read:

I wanted to play video games before doing B.E, after B.E I wanted to make games

I wanted to watch Porn before doing M.Tech, after M.Tech I wanted to ....

This short post garnered all round appreciation from the students. They were gung ho because they got another chance to besmirch the college reputation by making this post viral and I co-operated with them by making my post public for a short duration so that they could take snapshots. I even added masala to the post by commenting on it saying:

Now, I am very careful what I want from a PhD.

They would not fathom what I had to endure during my student days. They knew only to complain of lack of placements and bad food in the canteen. Anyways past is past. Those were the days when Jio was recently launched and even a middle class kid got to enjoy high speed broadband.

I posted another post some time later that read:

Din mein piyo raat mein Jio

I feel this much content is enough for the day as I don't want to bore you people with some more of my tasteless sarcasm.

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)