Dynamic Lighting using Primitive ID

This is an initial demo that failed as I could not eliminate popping. You click and rotate the model ( a statue of Lenin ) to get an idea. Also try clicking "Per face/Per vertex" button to switch between per vertex/per face lighting.

Here is the post that describes what was wrong and how I solved it.

Click to show WebGL demo

//<!--
precision highp float;
attribute vec3 v_in;
attribute vec3 vn_in;
attribute float vid_in;

varying vec3 pos;
varying vec3 vn;
varying vec3 color;
varying float pid;

uniform mat3 cam;
uniform vec3 campos;
uniform vec2 screen;
uniform float dmax;

const float pi = 3.14159265;
const float lperface = 32.;

uniform float vmode;
uniform vec2 ltexsize;
uniform sampler2D ltex;

float round(float v){ return floor(v+.5); }

vec3 getc(float x) {

vec3 colors[5];

colors[0]=vec3(70, 90, 70)/255.;
  colors[1]=vec3(80, 60, 100)/255.;
  colors[2]=vec3(180, 50, 80)/255.;
  colors[3]=vec3(70, 80, 100)/255.;
  colors[4]=vec3(180, 60, 40)/255.;

float v = floor( fract(abs(x)*333.)*5. );

if(v==0.) return colors[0];
  if(v==1.) return colors[1];
  if(v==2.) return colors[2];
  if(v==3.) return colors[3];
  return colors[4];
}

void main() {

vec3 ar = vec3(1);
  if( screen.x > screen.y ) 
    ar = vec3(screen.y/screen.x,1,1);
  else
    ar = vec3(1,screen.x/screen.y,1);
  vn = cam*vn_in;
  pid = floor( vid_in/3. + 0.05 );
  vec3 p = cam*v_in;
  pos = p/dmax;
  p = p+campos;
  float far = 10000.0;
  float near = 1.0;
  float z = p.z;
  p = ar * p;
  p.z = far*(z-near)/(far-near);
  gl_Position = vec4(p,z);

if( vmode == 1. ) {

vec3 norm = normalize(vn);
    vec2 px = 1./ltexsize;
    vec2 uv = vec2( fract(lperface*round(vid_in)/ltexsize.x)+.5*px.x,
              floor(lperface*round(vid_in)/ltexsize.x)/ltexsize.y+.5*px.y);
    float kd = 1., n = .0;
    vec3 c = vec3(0,0,0);
    for(float i=.0; i<lperface; i++ ) {
      vec4 l = texture2DLod( ltex, uv+i*vec2(px.x,0), 0. );
      if( l.w == .0 ) break;
      n++;
      vec3 ldir = l.xyz-pos;
      float d = 1.+length(ldir);
      kd = abs(dot(normalize(ldir),norm));
      kd = 6.0 * pow(kd, 1.75) / pow( d, 18.);
      vec3 col = getc(l.x);
      c = c+col*kd;
    }
    float gamma = 1./2.2;
    color = pow(c, vec3(gamma));
  }
}
//-->

//<!--
precision highp float;
varying vec3 pos;
varying vec3 vn;
varying vec3 color;
varying float pid;

const float pi = 3.14159265;
const float lperface = 32.;

uniform float vmode;
uniform vec2 ltexsize;
uniform sampler2D ltex;

float round(float v){ return floor(v+.5); }

vec3 getc(float x) {

vec3 colors[5];

colors[0]=vec3(70, 90, 70)/255.;
  colors[1]=vec3(80, 60, 100)/255.;
  colors[2]=vec3(180, 50, 80)/255.;
  colors[3]=vec3(70, 80, 100)/255.;
  colors[4]=vec3(180, 60, 40)/255.;

float v = floor( fract(abs(x)*333.)*5. );

if(v==0.) return colors[0];
  if(v==1.) return colors[1];
  if(v==2.) return colors[2];
  if(v==3.) return colors[3];
  return colors[4];
}

void main() {

if( vmode == 1. ) {
    gl_FragColor = vec4(color,1);
    return;
  }

vec3 norm = normalize(vn);
  vec2 px = 1./ltexsize;
  vec2 uv = vec2( fract(lperface*round(pid)/ltexsize.x)+.5*px.x,
            floor(lperface*round(pid)/ltexsize.x)/ltexsize.y+.5*px.y);
  float kd = 1., n = .0;
  vec3 c = vec3(0,0,0);
  for(float i=.0; i<lperface; i++ ) {
    vec4 l = texture2D( ltex, uv+i*vec2(px.x,0) );
    if( l.w == .0 ) break;
    n++;
    vec3 ldir = l.xyz-pos;
    float d = 1.+length(ldir);
    kd = abs(dot(normalize(ldir),norm));
    kd = 6.0 * pow(kd, 1.75) / pow( d, 18.);
    vec3 col = getc(l.x);
    c = c+col*kd;
  }
  float gamma = 1./2.2;
  c = pow(c, vec3(gamma));
  gl_FragColor = vec4(c, 1);
}
//-->

read and write commentaries