渲染一个球
几种不同着色方法的比较:
平面法线+顶点着色(半路向量)
平面法线+面片着色
顶点法线+顶点着色
顶点法线+面片着色
Gouraud着色(平面法线+顶点着色)
Phong着色(平面法线+面片着色)
按键设置
a
d
w
s
z
x
增加theta
减少theta
增加phi
减少phi
增大半径radius
减少半径radius
v
b
增加分块
减小分块
您的浏览器不支持HTML5 Canvas元素
true normals and per vertex shading
true normals and per fragment shading
vertex normals and per vertex shading
vertex normals and per fragment shading
Gouraud Shading
Phong Shading
Vertex shader:
attribute vec4 vPosition; attribute vec4 vNormal; varying vec4 fColor; uniform vec4 ambientProduct, diffuseProduct, specularProduct; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform float shininess; uniform mat3 normalMatrix; void main() { // pos is vertex position in eye coordinates vec3 pos = (modelViewMatrix * vPosition).xyz; // vector from vertex position to light source vec3 L; // check for directional light if(lightPosition.w == 0.0) { L = normalize(lightPosition.xyz); } else { L = normalize( lightPosition.xyz - pos ); } // Because the eye point the is at the orgin // the vector from the vertex position to the eye is vec3 E = -normalize( pos ); // halfway vector vec3 H = normalize( L + E ); // Transform vertex normal into eye coordinates vec3 N = normalize( normalMatrix*vNormal.xyz); // Compute terms in the illumination equation vec4 ambient = ambientProduct; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd*diffuseProduct; float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * specularProduct; if( dot(L, N) < 0.0 ){ specular = vec4(0.0, 0.0, 0.0, 1.0); } gl_Position = projectionMatrix * modelViewMatrix * vPosition; fColor = ambient + diffuse +specular; fColor.a = 1.0; }
Fragment shader:
precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; varying vec4 fColor; uniform vec4 ambientProduct, diffuseProduct, specularProduct; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform float shininess; uniform mat3 normalMatrix; void main() { // pos is vertex position in eye coordinates vec3 pos = (modelViewMatrix * vPosition).xyz; // vector from vertex position to light source vec3 L; // check for directional light if(lightPosition.w == 0.0) { L = normalize(lightPosition.xyz); } else { L = normalize( lightPosition.xyz - pos ); } // Because the eye point the is at the orgin // the vector from the vertex position to the eye is vec3 E = -normalize( pos ); // halfway vector vec3 H = normalize( L + E ); // Transform vertex normal into eye coordinates vec3 N = normalize( normalMatrix*vNormal.xyz); // Compute terms in the illumination equation vec4 ambient = ambientProduct; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd*diffuseProduct; float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * specularProduct; if( dot(L, N) < 0.0 ){ specular = vec4(0.0, 0.0, 0.0, 1.0); } gl_Position = projectionMatrix * modelViewMatrix * vPosition; fColor = ambient + diffuse +specular; fColor.a = 1.0; }
precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; varying vec3 N, L, E; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform mat3 normalMatrix; void main() { vec3 pos = (modelViewMatrix * vPosition).xyz; // check for directional light if(lightPosition.w == 0.0) { L = normalize(lightPosition.xyz); } else { L = normalize( lightPosition.xyz - pos ); } E = -normalize(pos); N = normalize( normalMatrix*vNormal.xyz); gl_Position = projectionMatrix * modelViewMatrix * vPosition; }
precision mediump float; uniform vec4 ambientProduct; uniform vec4 diffuseProduct; uniform vec4 specularProduct; uniform float shininess; varying vec3 N, L, E; void main() { vec4 fColor; vec3 H = normalize( L + E ); vec4 ambient = ambientProduct; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd*diffuseProduct; float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * specularProduct; if( dot(L, N) < 0.0 ) specular = vec4(0.0, 0.0, 0.0, 1.0); fColor = ambient + diffuse +specular; fColor.a = 1.0; gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; varying vec4 fColor; uniform vec4 ambientProduct, diffuseProduct, specularProduct; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform float shininess; uniform mat3 normalMatrix; void main() { vec3 pos = (modelViewMatrix * vPosition).xyz; vec3 light = lightPosition.xyz; vec3 L; // check for directional light if(lightPosition.w == 0.0) L = normalize(lightPosition.xyz); else L = normalize( lightPosition.xyz - pos ); vec3 E = -normalize( pos ); vec3 H = normalize( L + E ); // Transform vertex normal into eye coordinates vec3 N = normalize( normalMatrix*vNormal.xyz); // Compute terms in the illumination equation vec4 ambient = ambientProduct; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd*diffuseProduct; float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * specularProduct; if( dot(L, N) < 0.0 ) { specular = vec4(0.0, 0.0, 0.0, 1.0); } gl_Position = projectionMatrix * modelViewMatrix * vPosition; fColor = ambient + diffuse +specular; fColor.a = 1.0; }
precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; varying vec3 N, L, E; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform mat3 normalMatrix; void main() { vec3 light; vec3 pos = (modelViewMatrix * vPosition).xyz; if(lightPosition.z == 0.0) { L = normalize(lightPosition.xyz); } else { L = normalize(lightPosition).xyz - pos; } E = -normalize(pos); N = normalize( normalMatrix*vNormal.xyz); gl_Position = projectionMatrix * modelViewMatrix * vPosition; }
precision mediump float; uniform vec4 ambientProduct; uniform vec4 diffuseProduct; uniform vec4 specularProduct; uniform float shininess; varying vec3 N, L, E; void main() { vec4 fColor; vec3 H = normalize( L + E ); vec4 ambient = ambientProduct; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd*diffuseProduct; float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * specularProduct; if( dot(L, N) < 0.0 ){ specular = vec4(0.0, 0.0, 0.0, 1.0); } fColor = ambient + diffuse +specular; fColor.a = 1.0; gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform mat3 normalMatrix; uniform vec4 lightPosition; uniform float shininess; // material uniform vec4 ambientProduct; uniform vec4 diffuseProduct; uniform vec4 specularProduct; varying vec3 normalInterp; varying vec4 fColor; void main(){ vec4 pos = modelViewMatrix * vPosition; normalInterp = normalize(normalMatrix * vNormal.xyz); gl_Position = projectionMatrix * pos; vec4 ambient = ambientProduct; vec3 N = normalize( normalInterp ); vec3 L; if( lightPosition.w == 0.0 ) { L = normalize( lightPosition.xyz ); } else { L = normalize( lightPosition.xyz - pos.xyz ); } float Kd = max( dot( L, N ), 0.0 ); vec4 diffuse = Kd * diffuseProduct; float Ks = 0.0; if( Kd > 0.0 ) { vec3 R = reflect( -L, N ); vec3 E = -normalize( pos.xyz ); float specAngle = max( dot( R, E ), 0.0 ); Ks = pow( specAngle, shininess ); } vec4 specular = Ks * specularProduct; fColor = ambient + diffuse + specular; fColor.a = 1.0; }
precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }
attribute vec4 vPosition; attribute vec4 vNormal; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform mat3 normalMatrix; varying vec3 normalInterp; varying vec4 vertexPos; void main(){ vertexPos = modelViewMatrix * vPosition; normalInterp = normalize(normalMatrix * vNormal.xyz); gl_Position = projectionMatrix * vertexPos; }
precision mediump float; varying vec3 normalInterp; varying vec4 vertexPos; uniform vec4 lightPosition; uniform float shininess; uniform vec4 ambientProduct; uniform vec4 diffuseProduct; uniform vec4 specularProduct; void main() { vec3 N = normalize( normalInterp ); vec3 L; if( lightPosition.w == 0.0 ) L = normalize( lightPosition.xyz ); else L = normalize( lightPosition.xyz - vertexPos.xyz ); vec4 ambient = ambientProduct; float Kd = max( dot( L, N ), 0.0 ); vec4 diffuse = Kd * diffuseProduct; float Ks = 0.0; if( Kd > 0.0 ) { vec3 R = reflect( -L, N ); vec3 V = normalize( -vertexPos.xyz ); float speculaAngle = max( dot( R, V ), 0.0 ); Ks = pow( speculaAngle, shininess ); } vec4 specular = Ks * specularProduct; gl_FragColor = ambient + diffuse + specular; }