Morphing Phong MaterialΒΆ

X-visual Phong shader is designed for general material used by data object like bar in bar chart, with respect to light position.

This shader can also handle texture mixing.

test:

test/html/morph-color.html

Phong material is provided by xglsl.phongMorph2(vparas).

Reference:

  1. referencing implementation: WebGL - Phong Shading
  2. Lambertian Emitters & Scatters
attribute vec3 position;
attribute vec3 normal;
uniform mat4 projection, modelview, normalMat;
varying vec3 normalInterp;
varying vec3 vertPos;
uniform int mode;   // Rendering mode
uniform float Ka;   // Ambient reflection coefficient
uniform float Kd;   // Diffuse reflection coefficient
uniform float Ks;   // Specular reflection coefficient
uniform float shininessVal; // Shininess
// Material color
uniform vec3 ambientColor;
uniform vec3 diffuseColor;
uniform vec3 specularColor;
uniform vec3 lightPos; // Light position
varying vec4 color; //color

void main(){
  vec4 vertPos4 = modelview * vec4(position, 1.0);
  vertPos = vec3(vertPos4) / vertPos4.w;
  normalInterp = vec3(normalMat * vec4(normal, 0.0));
  gl_Position = projection * vertPos4;

  vec3 N = normalize(normalInterp);
  vec3 L = normalize(lightPos - vertPos);
  // Lambert's cosine law
  float lambertian = max(dot(N, L), 0.0);
  float specular = 0.0;
  if(lambertian > 0.0) {
    vec3 R = reflect(-L, N);      // Reflected light vector
    vec3 V = normalize(-vertPos); // Vector to viewer
    // Compute the specular term
    float specAngle = max(dot(R, V), 0.0);
    specular = pow(specAngle, shininessVal);
  }
  color = vec4(Ka * ambientColor +
               Kd * lambertian * diffuseColor +
               Ks * specular * specularColor, 1.0);

  // only ambient
  if(mode == 2) color = vec4(Ka * ambientColor, 1.0);
  // only diffuse
  if(mode == 3) color = vec4(Kd * lambertian * diffuseColor, 1.0);
  // only specular
  if(mode == 4) color = vec4(Ks * specular * specularColor, 1.0);
}

Sample: What’s actually the shader program generated by xglsl with ShaderFlag.colorArray.

1: precision highp float;
2: precision highp int;
3: #define HIGH_PRECISION
4: #define SHADER_NAME ShaderMaterial
5: #define VERTEX_TEXTURES
6: #define GAMMA_FACTOR 2
7: #define MAX_BONES 0
8: #define BONE_TEXTURE
9: uniform mat4 modelMatrix;
10: uniform mat4 modelViewMatrix;
11: uniform mat4 projectionMatrix;
12: uniform mat4 viewMatrix;
13: uniform mat3 normalMatrix;
14: uniform vec3 cameraPosition;
15: uniform bool isOrthographic;
16: #ifdef USE_INSTANCING
17:  attribute mat4 instanceMatrix;
18: #endif
19: attribute vec3 position;
20: attribute vec3 normal;
21: attribute vec2 uv;
22: #ifdef USE_TANGENT
23:         attribute vec4 tangent;
24: #endif
25: #ifdef USE_COLOR
26:         attribute vec3 color;
27: #endif
28: #ifdef USE_MORPHTARGETS
29:         attribute vec3 morphTarget0;
30:         attribute vec3 morphTarget1;
31:         attribute vec3 morphTarget2;
32:         attribute vec3 morphTarget3;
33:         #ifdef USE_MORPHNORMALS
34:                 attribute vec3 morphNormal0;
35:                 attribute vec3 morphNormal1;
36:                 attribute vec3 morphNormal2;
37:                 attribute vec3 morphNormal3;
38:         #else
39:                 attribute vec3 morphTarget4;
40:                 attribute vec3 morphTarget5;
41:                 attribute vec3 morphTarget6;
42:                 attribute vec3 morphTarget7;
43:         #endif
44: #endif
45: #ifdef USE_SKINNING
46:         attribute vec4 skinIndex;
47:         attribute vec4 skinWeight;
48: #endif
49:
50: uniform float u_alpha;
51:   //uniform vec3 u_color0; uniform float u_morph0;
52:
53: uniform vec3 u_color0; uniform float u_morph0;
54: uniform vec3 u_color1; uniform float u_morph1;
55: uniform vec3 u_color2; uniform float u_morph2;
56:
57:   varying vec4 vColor;
58:   varying float vAlpha;
59:
60:   vec4 mixColor() {
61:     vec3 morph = u_color0;
62: morph = mix(morph, u_color1, u_morph0);
63: morph = mix(morph, u_color2, u_morph1);
64: morph = mix(morph, u_color0, u_morph2);
65:     return vec4(morph, u_alpha);
66:   }
67:
68:   void main() {
69:     vColor = mixColor();
70:     vAlpha = u_alpha;
71:
72:     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
73:   }