opengl - GLSL fixed function fragment program replacement

Question

When using the OpenGL fixed function pipeline for vertex setup, how a fragment program looks like that is compatible to the fixed function vertex setup? I guess that usually depends on the number of light sources and texture layers etc.. So for example how does a simple non-texture one-lightsource goraud shading fragment program look like that replaces GL's fixed function shader?

question from:https://stackoverflow.com/questions/65894390/opengl-migrate-from-fixed-function-to-modern-glsl-lighting-and-material

Answer 1

While Gouraud shading calculates the light in the the vertex shader, Phong shading calculates the light in the fragment shader.

The standard OpenGL light model is a Gouraud shading model, with a Blinn-Phong light model (Do not confuse with Phong shading).

The standard OpenGL Blinn-Phong light model is calcualted like this:

Ka ... ambient material
Kd ... difusse material
Ks ... specular material

La ... ambient light
Ld ... diffuse light
Ls ... specular light
sh ... shininess

N  ... norlmal vector 
L  ... light vector (from the vertex postion to the light) 
V  ... view vector (from the vertex psotion to the eye)

Id    = max(dot(N, L), 0.0);

H     = normalize(V + L);
NdotH = max(dot(N, H), 0.0);
Is    = (sh + 2.0) * pow(NdotH, sh) / (2.0 * 3.14159265);

fs    = Ka*La + Id*Kd*Ld + Is*Ks*Ls;

The following function calculates a single directional Blinn-Phong light source:

struct TLightSource
{
    vec3  lightDir;
    vec3  ambient;
    vec3  diffuse;
    vec3  specular;
    float shininess;
};

uniform TLightSource u_lightSource;

vec3 Light( vec3 eyeV, vec3 N )
{
    vec3  lightCol  = u_lightSource.ambient;
    vec3  L         = normalize( -u_lightSource.lightDir );
    float NdotL     = max( 0.0, dot( N, L ) );
    lightCol       += NdotL * u_lightSource.diffuse;
    vec3  H         = normalize( eyeV + L );
    float NdotH     = max( 0.0, dot( N, H ) );
    float kSpecular = ( u_lightSource.shininess + 2.0 ) * pow( NdotH, u_lightSource.shininess ) / ( 2.0 * 3.14159265 );
    lightCol       += kSpecular * u_lightSource.specular;
    return lightCol; 
}

See also the answers to the following questions:

• How does this faking the light work on aerotwist?

This function can be applied to a vertex shader, as to a fragment shader, too.

The full coding of a gouraud shader program and a phong shader program can be found in the following WebGL example:

(function loadscene() {

var resize, gl, gouraudDraw, phongDraw, vp_size;
var bufCube, bufSphere, bufTorus;
var sliderScale = 100.0;

function render(delteMS){

    var ambient_col = hexToRgb( document.getElementById( "ambient_col" ).value );
    var diffuse_col = hexToRgb( document.getElementById( "diffuse_col" ).value );
    var specular_col = hexToRgb( document.getElementById( "specular_col" ).value );
    var ambient = document.getElementById( "ambient" ).value / sliderScale;
    var diffuse = document.getElementById( "diffuse" ).value / sliderScale;
    var specular = document.getElementById( "specular" ).value / sliderScale;
    var shininess = document.getElementById( "shininess" ).value;
    var ambientCol = [ambient_col.r*ambient/256.0, ambient_col.g*ambient/256.0, ambient_col.b*ambient/256.0];
    var diffuseCol = [diffuse_col.r*diffuse/256.0, diffuse_col.g*diffuse/256.0, diffuse_col.b*diffuse/256.0];
    var specularCol = [specular_col.r*ambient/256.0, specular_col.g*ambient/256.0, specular_col.b*ambient/256.0];
    var form = document.getElementById( "form" ).value;
    var shading = document.getElementById( "shading" ).value;

    Camera.create();
    Camera.vp = vp_size;
        
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);
    //gl.frontFace(gl.CW);
    gl.frontFace(gl.CCW);
    
    var progDraw = shading == 0 ? gouraudDraw : phongDraw;;
    // set up draw shader
    ShaderProgram.Use( progDraw.prog );
    ShaderProgram.SetUniformM44( progDraw.prog, "u_projectionMat44", Camera.Perspective() );
    ShaderProgram.SetUniformM44( progDraw.prog, "u_viewMat44", Camera.LookAt() );
    ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.lightDir", [-1.0, -0.5, -2.0] )
    ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.ambient", ambientCol )
    ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.diffuse", diffuseCol )
    ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.specular", specularCol )
    ShaderProgram.SetUniformF1( progDraw.prog, "u_lightSource.shininess", shininess )
    var modelMat = IdentityMat44()
    modelMat = RotateAxis( modelMat, CalcAng( delteMS, 13.0 ), 0 );
    modelMat = RotateAxis( modelMat, CalcAng( delteMS, 17.0 ), 1 );
    ShaderProgram.SetUniformM44( progDraw.prog, "u_modelMat44", modelMat );
    
    // draw scene
    bufObj = form == 0 ? bufCube : form == 1 ? bufSphere : bufTorus;
    VertexBuffer.Draw( bufObj );
   
    requestAnimationFrame(render);
}

function resize() {
    //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
    vp_size = [window.innerWidth, window.innerHeight]
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
    gl.viewport( 0, 0, vp_size[0], vp_size[1] );
}

function initScene() {

    document.getElementById( "ambient_col" ).value = "#FFFFFF";
    document.getElementById( "diffuse_col" ).value = "#FFFFFF";
    document.getElementById( "specular_col" ).value = "#FFFFFF";
    document.getElementById( "ambient" ).value = 0.2 * sliderScale;
    document.getElementById( "diffuse" ).value = 0.6 * sliderScale;
    document.getElementById( "specular" ).value = 0.8 * sliderScale;
    document.getElementById( "shininess" ).value = 25.0;
    document.getElementById( "shading" ).value = 0;
    document.getElementById( "form" ).value = 1;

    canvas = document.getElementById( "canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return null;

    gouraudDraw = {}
    gouraudDraw.prog = ShaderProgram.Create( 
      [ { source : "gouraud-shader-vs", stage : gl.VERTEX_SHADER },
        { source : "gouraud-shader-fs", stage : gl.FRAGMENT_SHADER }
      ],
      [ "u_projectionMat44", "u_viewMat44", "u_modelMat44", 
        "u_lightSource.lightDir", "u_lightSource.ambient", "u_lightSource.diffuse", "u_lightSource.specular", "u_lightSource.shininess", ] );
    if ( gouraudDraw.prog == 0 )
      return;  
    gouraudDraw.inPos = gl.getAttribLocation( gouraudDraw.prog, "inPos" );
    gouraudDraw.inNV  = gl.getAttribLocation( gouraudDraw.prog, "inNV" );
    gouraudDraw.inCol = gl.getAttribLocation( gouraudDraw.prog, "inCol" );

    phongDraw = {}
    phongDraw.prog = ShaderProgram.Create( 
      [ { source : "phong-shader-vs", stage : gl.VERTEX_SHADER },
        { source : "phong-shader-fs", stage : gl.FRAGMENT_SHADER }
      ],
      [ "u_projectionMat44", "u_viewMat44", "u_modelMat44", 
        "u_lightSource.lightDir", "u_lightSource.ambient", "u_lightSource.diffuse", "u_lightSource.specular", "u_lightSource.shininess", ] );
    if ( phongDraw.prog == 0 )
      return;
    phongDraw.inPos = gl.getAttribLocation( phongDraw.prog, "inPos" );
    phongDraw.inNV  = gl.getAttribLocation( phongDraw.prog, "inNV" );
    phongDraw.inCol = gl.getAttribLocation( phongDraw.prog, "inCol" );
    
    // create cube
    var cubePos = [
        -1.0, -1.0,  1.0,  1.0, -1.0,  1.0,  1.0,  1.0,  1.0, -1.0,  1.0,  1.0,
        -1.0, -1.0, -1.0,  1.0, -1.0, -1.0,  1.0,  1.0, -1.0, -1.0,  1.0, -1.0 ];
    var cubeCol = [ 1.0, 0.0, 0.0, 1.0, 0.5, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ];
    var cubeHlpInx = [ 0, 1, 2, 3, 1, 5, 6, 2, 5, 4, 7, 6, 4, 0, 3, 7, 3, 2, 6, 7, 1, 0, 4, 5 ]; 
    var cubePosData = [];
    for ( var i = 0; i < cubeHlpInx.length; ++ i ) {
        cubePosData.push( cubePos[cubeHlpInx[i]*3], cubePos[cubeHlpInx[i]*3+1], cubePos[cubeHlpInx[i]*3+2] );
    }
    var cubeNVData = [];
    for ( var i1 = 0; i1 < cubeHlpInx.length; i1 += 4 ) {
        var nv = [0, 0, 0];
        for ( i2 = 0; i2 < 4; ++ i2 ) {
            var i = i1 + i2;
            nv[0] += cubePosData[i*3]; nv[1] += cubePosData[i*3+1]; nv[2] += cubePosData[i*3+2];
        }
        for ( i2 = 0; i2 < 4; ++ i2 )
          cubeNVData.push( nv[0], nv[1], nv[2] );
    }
    var cubeColData = [];
    for ( var is = 0; is < 6; ++ is ) {
        for ( var ip = 0; ip < 4; ++ ip ) {
           cubeColData.push( cubeCol[is*3], cubeCol[is*3+1], cubeCol[is*3+2] ); 
        }
    }
    var cubeInxData = [];
    for ( var i = 0; i < cubeHlpInx.length; i += 4 ) {
        cubeInxData.push( i, i+1, i+2, i, i+2, i+3 );
    }
    bufCube = VertexBuffer.Create(
    [ { data : cubePosData, attrSize : 3, attrLoc : gouraudDraw.inPos },
      { data : cubeNVData, attrSize : 3, attrLoc : gouraudDraw.inNV },
      { data : cubeColData, attrSize : 3, attrLoc : gouraudDraw.inCol } ],
      cubeInxData );

    // create sphere
    var layer_size = 16, circum_size = 32;
    var rad_circum = 1.0;
    var rad_tube = 0.5;
    var sphere_pts = [];
    var sphere_nv = [];
    var sphere_col = [];
    sphere_pts.push( 0.0, 0.0, -2.0 );
    sphere_nv.push( 0.0, 0.0, -1.0 );
    //sphere_col.push( 0.8, 0.6, 0.3 );
    sphere_col.push( 0.75, 0.75, 0.75 );
    for ( var i_l = 1; i_l < layer_size; ++ i_l ) {
        var angH = (1.0 - i_l / layer_size) * Math.PI;
        var h = Math.cos( angH );
        var r = Math.sin( angH );
        for ( var i_c = 0; i_c < circum_size; ++ i_c ) {
            var circumX = Math.cos(2 * Math.PI * i_c / circum_size);
            var circumY = Math.sin(2 * Math.PI * i_c / circum_size);
            sphere_pts.push( r * circumX * 2.0, r * circumY * 2.0, h * 2.0 );
            sphere_nv.push( r * circumX, r * circumY, h );
            //sphere_col.push( 0.8, 0.6, 0.3 );
            sphere_col.push( 0.75, 0.75, 0.75 );
        }
    }
    sphere_pts.push( 0.0, 0.0, 2.0 );
    sphere_nv.push( 0.0, 0.0, 1.0 );
    //sphere_col.push( 0.8, 0.6, 0.3 );
    sphere_col.push( 0.75, 0.75, 0.75 );
    var sphere_inx = [];
    for ( var i_c = 0; i_c < circum_size; ++ i_c ) {
        sphere_inx.push( i_c+1, 0, (i_c+1) % circum_size + 1 )
    }
    for ( var i_l = 0; i_l < layer_size-2; ++ i_l ) {
        var l1 = i_l * circum_size + 1;
        var l2 = (i_l+1) * circum_size + 1
        for ( var i_c = 0; i_c < circum_size; ++ i_c ) {
            var i_n = (i_c+1) % circum_size;
            sphere_inx.push( l1+i_c, l1+i_n, l2+i_c, l1+i_n, l2+i_n, l2+i_c );
        }
    }
    for ( var i_c = 0; i_c < circum_size; ++ i_c ) {
        var i_start = 1 + (layer_size-2) * circum_size;
        var i_n = (i_c+1) % circum_size;
        sphere_inx.push( i_start + i_c, i_start + i_n, sphere_pts.length/3-1 );
    }
    bufSphere = VertexBuffer.Create(
    [ { data : sphere_pts, attrSize : 3, attrLoc : gouraudDraw.inPos },
      { data : sphere_nv, attrSize : 3, attrLoc : gouraudDraw.inNV },
      { data : sphere_col, attrSize : 3, attrLoc : gouraudDraw.inCol } ],
      sphere_inx );

    // create torus
    var circum_size = 32, tube_size = 32;
    var rad_circum = 1.4;