12. 要有光

     WebGL没有光（没有像OpenGL中那样提供光方面的API）。要想有光，那就全靠我们自己进行计算了。

     在http://learningwebgl.com上，有老外写的WebGL系列教程；国人的翻译在http://www.html5china.com/HTML5features/WebGL/上；其中有几课和光有关：《第七课 平行光和环境光》，《第十二章 点光照》，《第十三课 逐片段光照和多重program》等（还发现另外一个学习WebGL的网站：https://developer.mozilla.org/en/WebGL，顺便标记一下）。

     所谓“光”就是通过一些方式、方法，根据片段的原始颜色和其他一些相关参数，计算出另一个相同或不同的颜色，并将之应用到片段。唯一要注意的是计算出的颜色要符合要求，要有一定的规律。真实世界中，某个光源中同样的两条光线照在同样的两个物体上，离光源近的比较亮；同样的两个物体，一个被一条光线照射，另外一个被两条同样的光线照射，后者会比前者亮；在全黑的封闭环境中，打开手电筒，不光可以看到手电筒前方的事物，连后方的事物也隐约可见；但无论是前方还是后方，只要距离够远，就看不到东西；手电筒照在箱子的前面，箱子前面很亮，侧面隐约可见，而箱子后面很暗、甚至不可见；...。根据这些现象，前人搞出了各种各样的光照模型、光照公式。对不同的光源类型，我们使用不同的光照模型、光照公式；并根据具体情况，使用不同的光照系数。

     光源，可以分为四类。第一类，叫环境光。它照射出的光，无处不在，像雾、像烟，笼罩着场景中的所有物体。当然，很多人不把它当作光源的一个种类，因为它总是存在。第二类，是平行光，又叫方向光。这种光源，发出的光线是平行的。第三类，是聚光灯。它发出的是一束光，中间最亮，向外围逐渐衰减。第四类，是点光源。它以所在位置为中心，向西面八方发出光线。除了环境光，其他三类光源总是能表示为光线的集合。单条光线和物体表面，要么平行，要么相交。如果平行或交点和光线方向相反（在光的背面，注意，这种情况和用手电筒照射箱子前面，但还可以看到箱子后面的情况完全不同，后者借助了其他物体的反射光线），那么我们就可以说，这条光线和物体没有什么关系。在同向的交点处，物体对光线进行折射、反射、散射。此处要说的是，在不同的位置，对该交点进行观察，可能会看到完全不同的颜色；因为，折射和反射带有方向性，若不在特定的方向上进行观察，就不会看到折射光和反射光。

     基于目的的不同，或要达到效果的不同，对这些光的定义和计算方法也会有很大的不同。比如环境光，我们可以用[0.0, 1.0]之间的数值来表示环境对物体原有颜色的反射比例。比如，在阴暗的环境下，物体看起来会比较暗，于是我们设置环境光为(0.5, 0.5, 0.5)。假设物体原色为(A,B,C)，则物体的新色可以计算为(0.5*A, 0.5*B, 0.5*C）。假设另有一种神奇的环境，能让物体呈现出反色，那么，此时，环境光可以定义为一个标志，如果该标志打开，我们就这么计算新色：(1.0-A, 1.0-B,1.0-C）。当然，还可能有更加神奇的环境，它能加强某种颜色、吸取某种颜色、替换某种颜色等等。

     在本章示例中，仅对立方体表面计算光照(使用贴图颜色)。它模拟接受一个“环境光”和一个“点光源”的光照。其中，环境光表示为原色的比例；点光源处于产生阴影矩阵的光源的位置；立方体总是散射所有的光。为了方便对比各个参数造成的效果，我仿照网上的教程，增加了输入。另外，我对源码作了一下简单的整理，将部分函数放到了js文件中。js文件的内容如下(我会在以后不断完善它)：

function ShaderSourceFromScript(scriptID)
{
var shaderScript = document.getElementById(scriptID);
if (shaderScript == null) return "";

var sourceCode = "";
var child = shaderScript.firstChild;
while (child)
{
if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
child = child.nextSibling;
}

return sourceCode;
}


function CWebGLProgram(webgl, programObject, vertexShaderObject, fragmentShaderObject)
{
this.programObject = programObject;
this.vertexShaderObject = vertexShaderObject;
this.fragmentShaderObject = fragmentShaderObject;

this._webgl = webgl;

this.BindAttribLocation = function(index, name){this._webgl.bindAttribLocation(this.programObject, index, name);}
this.GetAttribLocation = function(name){return this._webgl.getAttribLocation(this.programObject, name);}

this.GetUniformLocation = function(name){return this._webgl.getUniformLocation(this.programObject, name);}
this.GetUniform = function(location){return this._webgl.getUniform(this.programObject, location);}

this.LoadLocations = function()
{
var n = this._webgl.getProgramParameter(this.programObject, this._webgl.ACTIVE_ATTRIBUTES);
for(var i=0; i<n; ++i)
{
var ai = this._webgl.getActiveAttrib(this.programObject, i);
this[ai.name] = this.GetAttribLocation(ai.name);
}

n = this._webgl.getProgramParameter(this.programObject, this._webgl.ACTIVE_UNIFORMS);
for(var i=0; i<n; ++i)
{
var ai = this._webgl.getActiveUniform(this.programObject, i);
this[ai.name] = this.GetUniformLocation (ai.name);
}
}
}
function CWebGL(canvasId)
{
this.canvas = document.getElementById(canvasId);
this.webgl = null;

this.error = '';

this.buffer = {};

this.UseProgram = function(oWebGLProgram)
{
this._oWebGLProgram = oWebGLProgram ;
this.webgl.useProgram(oWebGLProgram.programObject);
}
this.Viewport = function(){return [this.canvas.clientWidth, this.canvas.clientHeight];}

this.Init = function()
{
try
{
if(this.canvas == null) throw "error:canvasId";
this.webgl = this.canvas.getContext("experimental-webgl");
this.webgl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
this._SetEvent(this.canvas, "onresize", this._OnResize);           

return true;
}
catch(e)
{
this.error = "Init:\r\n" + e;
return false;
}
}

this.SetupShaderObject = function(program, type, scriptId)
{
var shaderObject = this.webgl.createShader(type);
this.webgl.shaderSource(shaderObject , ShaderSourceFromScript(scriptId));
this.webgl.compileShader(shaderObject );
if(!this.webgl.getShaderParameter(shaderObject , this.webgl.COMPILE_STATUS))
{
this.error = this.webgl.getShaderInfoLog(shaderObject);
this.webgl.deleteShader(shaderObject);
return null;
}
if(program) this.webgl.attachShader(program, shaderObject);
return shaderObject;
}
this.SetupProgramObject = function(vertexShaderScriptId, fragmentShaderScriptId, useProgram)//CWebGLProgram
{
var program = new CWebGLProgram(this.webgl, null, null, null);
try
{
program.programObject = this.webgl.createProgram();
program.vertexShaderObject = this.SetupShaderObject(program.programObject, this.webgl.VERTEX_SHADER, vertexShaderScriptId);
if(program.vertexShaderObject == null) throw "vertexShader("+vertexShaderScriptId+"):\r\n" + this.error;
program.fragmentShaderObject = this.SetupShaderObject(program.programObject, this.webgl.FRAGMENT_SHADER, fragmentShaderScriptId);
if(program.fragmentShaderObject == null) throw "fragmentShader("+fragmentShaderScriptId+"):\r\n" + this.error;
this.webgl.linkProgram(program.programObject);
if(!this.webgl.getProgramParameter(program.programObject, this.webgl.LINK_STATUS)) throw this.webgl.getProgramInfoLog(program.programObject);
if(useProgram) this.UseProgram(program);
program.LoadLocations();
return program;

}
catch(e)
{
this.error = "SetupProgramObject:\r\n" + e;
if(program.vertexShaderObject) this.webgl.deleteShader(program.vertexShaderObject);program.vertexShaderObject = null;
if(program.fragmentShaderObject) this.webgl.deleteShader(program.fragmentShaderObject);program.fragmentShaderObject = null;
if(program.programObject) this.webgl.deleteProgram(program.programObject);program.programObject = null;
program = null;
return null;
}
}
this.SetupArrayBuffer = function(typedArray, usage)
{
var buffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, buffer );
this.webgl.bufferData(this.webgl.ARRAY_BUFFER, typedArray, usage);
return buffer;
}
this.SetupElementArrayBuffer = function(typedArray, usage)
{
var buffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ELEMENT_ARRAY_BUFFER, buffer );
this.webgl.bufferData(this.webgl.ELEMENT_ARRAY_BUFFER, typedArray, usage);
return buffer;
}
this.LoadArrayBuffer = function(bufferName, typedArray, usage)
{
this.buffer[bufferName] = this.SetupArrayBuffer(typedArray, usage);
}
this.LoadElementArrayBuffer = function(bufferName, typedArray, usage)
{
this.buffer[bufferName] = this.SetupElementArrayBuffer(typedArray, usage);
}



this.SetRender = function(onrender, interval)
{
if(this._interval)
{
window.clearInterval(this._interval);
this._interval = null;
}
if(onrender && interval && onrender != '')
{
this._eventOnRender = onrender;
window[this._id] = this;
this._interval = window.setInterval("CWebGL_OnTimer('"+this._id+"')", interval);
}
}
this.SetMouseCallback = function(down, move, up)
{
this._SetEvent(this.canvas, "onmousedown", down);
this._SetEvent(this.canvas, "onmousemove", move);
this._SetEvent(this.canvas, "onmouseup", up);
}
this.SetKeyboardCallback = function(down, up)
{
this._SetEvent(document, "onkeydown", down);
this._SetEvent(document, "onkeyup", up);
}



//this._eventOnMouseDown = null;    //function(event)
//this._eventOnMouseMove = null;    //function(event)
//this._eventOnMouseUp = null;    //function(event)
//this._eventOnKeyDown = null;    //function(event)
//this._eventOnKeyUp = null;        //function(event)
this._eventOnResized = null;    //function(webgl, w, h)，注：webgl的视见区已被更新
//this._eventOnLoad = null;        //function(webgl, oWebGLProgram)
this._eventOnRender = null;        //function(webgl, oWebGLProgram)

this._oWebGLProgram = null;
this._interval = null;
this._id = CWebGL_NewID();
this._OnResize = function(e)
{
this.webgl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
if(this._eventOnResized) this._eventOnResized(this.webgl, this.canvas.clientWidth, this.canvas.clientHeight);
}
this._SetEvent = function(obj, e, handler)
{
obj[e] = handler;
}
}
var gWebGL_ID = 0;
function CWebGL_NewID()
{
++gWebGL_ID;
return "CWebGL_ID_"+gWebGL_ID;
}
function CWebGL_OnTimer(id)
{
var oWebGL = window[id];
if(oWebGL) oWebGL._eventOnRender(oWebGL.webgl, oWebGL._oWebGLProgram);
}

     为了计算点光源光照，我们需要用到顶点法线。假设点光源位置为Vp，顶点位置为Vv，顶点法线为Vn。那么，当(Vv-Vp)和Vn的夹角大于90度的时候，Vv就无法被光照射到。现在，就出现一个矛盾的地方。立方体只有八个顶点，但是，当某顶点属于不同的面时，它也有不同的法线。着色器无法判断当前操作的顶点属于哪个面，因此，我只好修改原来的8个顶点为24个，顶点索引也做出了相应地改变(省点事，直接拷贝别人的了)。

完整的代码如下：

    运行起来之后，你会发现，立方体上的表面的光照效果比较柔和。这是因为我们使用的是“逐顶点”的渲染方式。在顶点着色器中，我们计算好了顶点的颜色比例，然后传递给了片段着色器，计算出了顶点的颜色。之后，WebGL在各个顶点颜色之间进行线性插值，这些插值就是其他各个片段的颜色。另外我们还可以使用“逐片段”的渲染方式。这种方式下，渲染出来的效果更接近光照公式：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script type="text/javascript" src="glt.js"></script>
<script type="text/javascript" src="gl.js"></script><!--部分函数转到了这个js文件中-->

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 a_v3Position;
attribute vec3 a_v3Normal;
uniform mat4 u_m4ModelView;
varying vec3 v_v3TexCoord;
uniform int u_iShadowMode;
varying vec3 v_v3Position;
varying vec3 v_v3Normal;

void main(void)
{
gl_Position = u_m4ModelView * vec4(a_v3Position, 1.0);

if(u_iShadowMode == 0)
{
v_v3TexCoord = a_v3Position;
v_v3Position = a_v3Position;
v_v3Normal = vec3(u_m4ModelView * vec4(a_v3Normal, 1.0));
}
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform samplerCube u_samplerCube;
varying vec3 v_v3TexCoord;
uniform int u_iShadowMode;
varying vec3 v_v3Position;
varying vec3 v_v3Normal;
uniform bool u_bUseLighting;
uniform vec3 u_v3AmbientScale;
uniform vec3 u_v3PointLightPosition;
uniform vec3 u_v3PointLightScale;

void main(void)
{
if(u_iShadowMode == 0)
{
vec3 v3ColorScale;
if(!u_bUseLighting) v3ColorScale = vec3(1.0, 1.0, 1.0);
else
{
vec3 v3PLV = u_v3PointLightPosition - v_v3Position;
if(dot(v_v3Normal, v3PLV) > 0.0)//可以被点光源照射到
{
//求出顶点到点光源的距离，假设在距离0-1.5范围内线性衰减；当然也可以使用其他的光照公式
float f = max(0.0, 1.0 - length(v3PLV) / 1.5);//要注意的是，示例中旋转的只有立方体，光源的位置并没有变动

v3ColorScale = u_v3AmbientScale + u_v3PointLightScale * f;//将衰减后的点光源颜色比例合并到环境光
}
else v3ColorScale = u_v3AmbientScale;
}

vec4 color = textureCube(u_samplerCube, v_v3TexCoord);
gl_FragColor = vec4(color.rgb * v3ColorScale, color.a);
}
else if(u_iShadowMode == 1) gl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);
else if(u_iShadowMode == 2) gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
else if(u_iShadowMode == 3) gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
</script>

<script>

var textureObject = null;
var shadowMat4 = null;//预先计算好的阴影矩阵
var mouseDown = false;
var mousePosition = [0, 0];
var perspectiveMat4 = null;//预先计算好的投影矩阵
var rotateMat4 = null;
var rotatePosV3 =  [0, 0, 0];;//记录离圆心的偏移，2D，弄成vec3只是为了方便执行加减操作

function LoadData()
{
var jsCubeData = [
// Front face
-0.3, -0.3,  0.3,
0.3, -0.3,  0.3,
0.3,  0.3,  0.3,
-0.3,  0.3,  0.3,

// Back face
-0.3, -0.3, -0.3,
-0.3,  0.3, -0.3,
0.3,  0.3, -0.3,
0.3, -0.3, -0.3,

// Top face
-0.3,  0.3, -0.3,
-0.3,  0.3,  0.3,
0.3,  0.3,  0.3,
0.3,  0.3, -0.3,

// Bottom face
-0.3, -0.3, -0.3,
0.3, -0.3, -0.3,
0.3, -0.3,  0.3,
-0.3, -0.3,  0.3,

// Right face
0.3, -0.3, -0.3,
0.3,  0.3, -0.3,
0.3,  0.3,  0.3,
0.3, -0.3,  0.3,

// Left face
-0.3, -0.3, -0.3,
-0.3, -0.3,  0.3,
-0.3,  0.3,  0.3,
-0.3,  0.3, -0.3,

];
oWebGL.LoadArrayBuffer("cube", new Float32Array(jsCubeData), webgl.STATIC_DRAW);//加载之后，可以通过oWebGL.buffer.cube进行访问

var jsCubeIndex = [
0, 1, 2,      0, 2, 3,    // Front face
4, 5, 6,      4, 6, 7,    // Back face
8, 9, 10,     8, 10, 11,  // Top face
12, 13, 14,   12, 14, 15, // Bottom face
16, 17, 18,   16, 18, 19, // Right face
20, 21, 22,   20, 22, 23  // Left face
];
oWebGL.LoadElementArrayBuffer("cubeIndex", new Uint8Array(jsCubeIndex), webgl.STATIC_DRAW);//加载之后，可以通过oWebGL.buffer.cubeIndex进行访问

var jsCubeNormals = [
// Front face
0.0,  0.0,  1.0,
0.0,  0.0,  1.0,
0.0,  0.0,  1.0,
0.0,  0.0,  1.0,

// Back face
0.0,  0.0, -1.0,
0.0,  0.0, -1.0,
0.0,  0.0, -1.0,
0.0,  0.0, -1.0,

// Top face
0.0,  1.0,  0.0,
0.0,  1.0,  0.0,
0.0,  1.0,  0.0,
0.0,  1.0,  0.0,

// Bottom face
0.0, -1.0,  0.0,
0.0, -1.0,  0.0,
0.0, -1.0,  0.0,
0.0, -1.0,  0.0,

// Right face
1.0,  0.0,  0.0,
1.0,  0.0,  0.0,
1.0,  0.0,  0.0,
1.0,  0.0,  0.0,

// Left face
-1.0,  0.0,  0.0,
-1.0,  0.0,  0.0,
-1.0,  0.0,  0.0,
-1.0,  0.0,  0.0,
];
oWebGL.LoadArrayBuffer("cubeNormals", new Float32Array(jsCubeNormals), webgl.STATIC_DRAW);//加载之后，可以通过oWebGL.buffer.cubeNormals进行访问

textureObject = webgl.createTexture();
webgl.bindTexture(webgl.TEXTURE_CUBE_MAP, textureObject);
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture1'));
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture2'));
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture3'));
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture4'));
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture5'));
webgl.texImage2D(webgl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, document.getElementById('myTexture6'));


var jsShadowPlaneData = [-1.0, -1.0, 1.0,   -1.0,-0.25,-1.0,   1.0,-0.25,-1.0,   1.0, -1.0, 1.0];
oWebGL.LoadArrayBuffer("shadowPlane", new Float32Array(jsShadowPlaneData), webgl.STATIC_DRAW);

shadowMat4 = mat4.create();
gltMakeShadowMatrix([[-1, -1, 1], [1, -1, 1], [0, -0.25, -1]], [-1, 1, 0, 1], shadowMat4);//预先计算好阴影矩阵，这样就不用重复计算

var lookAtMat4 = mat4.create();
mat4.lookAt([0, 0, 1], [0,0,0], [0,1,0], lookAtMat4);
perspectiveMat4 = mat4.create();
var wh = oWebGL.Viewport();
mat4.perspective(60, wh[0]/wh[1], 0.1, 2, perspectiveMat4);
mat4.multiply(perspectiveMat4, lookAtMat4, perspectiveMat4);

var jsConeData = [0, 0.2, 0];//圆锥的顶部顶点为(0, 0.2, 0)
for(var i=0; i<13; ++i)//计算圆锥顶部圆面上的12个点；圆的半径为0.1
{
//保证各个顶点为顺时针顺序
var radians = -i*30*Math.PI/180;
jsConeData[jsConeData.length] = parseInt(0.1 * Math.cos(radians)*1000)/1000;
jsConeData[jsConeData.length] = 0;
jsConeData[jsConeData.length] = -parseInt(0.1 * Math.sin(radians)*1000)/1000;
}
oWebGL.LoadArrayBuffer("cone", new Float32Array(jsConeData), webgl.STATIC_DRAW);

rotateMat4 = mat4.create();
mat4.identity(rotateMat4);

return 0;
}

function RenderScene()
{
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clearDepth(1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT|webgl.DEPTH_BUFFER_BIT);

webgl.texParameteri(webgl.TEXTURE_CUBE_MAP, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_CUBE_MAP, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_CUBE_MAP, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
webgl.texParameteri(webgl.TEXTURE_CUBE_MAP, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);

webgl.activeTexture(webgl.TEXTURE0);
webgl.bindTexture(webgl.TEXTURE_CUBE_MAP, textureObject);
webgl.uniform1i(oWebGLProgram.u_samplerCube, 0);

webgl.frontFace(webgl.CW);
webgl.cullFace(webgl.BACK);

//画平面
webgl.disable(webgl.DEPTH_TEST);//相当于地面，禁止深度测试，此时深度缓冲中值保持1.0不变，表示可以被任何其它物体所遮挡
webgl.bindBuffer(webgl.ARRAY_BUFFER, oWebGL.buffer.shadowPlane);
webgl.enableVertexAttribArray(oWebGLProgram.a_v3Position);
webgl.vertexAttribPointer(oWebGLProgram.a_v3Position, 3, webgl.FLOAT, false, 0, 0);
webgl.disableVertexAttribArray(oWebGLProgram.a_v3Normal);
webgl.uniform1i(oWebGLProgram.u_iShadowMode, 2);
//只需要透视投影
webgl.uniformMatrix4fv(oWebGLProgram.u_m4ModelView, false, perspectiveMat4);
webgl.drawArrays(webgl.TRIANGLE_FAN, 0, 4);

var mat4Temp = null;
//画立方体
//先旋转，再透视投影
webgl.bindBuffer(webgl.ARRAY_BUFFER, oWebGL.buffer.cube);
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, oWebGL.buffer.cubeIndex);
webgl.enableVertexAttribArray(oWebGLProgram.a_v3Position);
webgl.vertexAttribPointer(oWebGLProgram.a_v3Position, 3, webgl.FLOAT, false, 0, 0);
//画阴影
webgl.disable(webgl.DEPTH_TEST);
webgl.uniform1i(oWebGLProgram.u_iShadowMode, 1);
mat4Temp = mat4.create();
mat4.multiply(shadowMat4, rotateMat4, mat4Temp);
mat4.multiply(perspectiveMat4, mat4Temp, mat4Temp);//perspectiveMat4*(shadowMat4*rotateMat4)
webgl.uniformMatrix4fv(oWebGLProgram.u_m4ModelView, false, mat4Temp);
webgl.disableVertexAttribArray(oWebGLProgram.a_v3Normal);
webgl.drawElements(webgl.TRIANGLES, 36, webgl.UNSIGNED_BYTE, 0);
//画立方体
webgl.uniform1i(oWebGLProgram.u_bUseLighting, document.getElementById("lighting").checked);
webgl.uniform3f(oWebGLProgram.u_v3AmbientScale,
parseFloat(document.getElementById("ambientR").value),
parseFloat(document.getElementById("ambientG").value),
parseFloat(document.getElementById("ambientB").value));
webgl.uniform3fv(oWebGLProgram.u_v3PointLightPosition, [-1, 1, 0]);
webgl.uniform3f(oWebGLProgram.u_v3PointLightScale,
parseFloat(document.getElementById("pointR").value),
parseFloat(document.getElementById("pointG").value),
parseFloat(document.getElementById("pointB").value));
webgl.enable(webgl.DEPTH_TEST);
webgl.depthFunc(webgl.LEQUAL);
webgl.uniform1i(oWebGLProgram.u_iShadowMode, 0);
mat4Temp = mat4.create();
mat4.multiply(perspectiveMat4, rotateMat4, mat4Temp);
webgl.uniformMatrix4fv(oWebGLProgram.u_m4ModelView, false, mat4Temp);
webgl.bindBuffer(webgl.ARRAY_BUFFER, oWebGL.buffer.cubeNormals);
webgl.vertexAttribPointer(oWebGLProgram.a_v3Normal, 3, webgl.FLOAT, false, 0, 0);
webgl.enableVertexAttribArray(oWebGLProgram.a_v3Normal);
webgl.drawElements(webgl.TRIANGLES, 36, webgl.UNSIGNED_BYTE, 0);

//画圆锥
webgl.enable(webgl.DEPTH_TEST);
webgl.depthFunc(webgl.LEQUAL);
webgl.uniform1i(oWebGLProgram.u_iShadowMode, 3);
mat4Temp = mat4.create();
mat4.identity(mat4Temp);
mat4.rotateX(mat4Temp, Math.PI/2);var mat4Temp2 = mat4.create();mat4.identity(mat4Temp2);
mat4.translate(mat4Temp2, [0, 0, 0.3]);
mat4.multiply(mat4Temp2, mat4Temp, mat4Temp);
mat4.multiply(rotateMat4, mat4Temp, mat4Temp);
mat4.multiply(perspectiveMat4, mat4Temp, mat4Temp);//perspectiveMat4*(rotateMat4*translateMat4)
webgl.uniformMatrix4fv(oWebGLProgram.u_m4ModelView, false, mat4Temp);
webgl.bindBuffer(webgl.ARRAY_BUFFER, oWebGL.buffer.cone);
webgl.enableVertexAttribArray(oWebGLProgram.a_v3Position);
webgl.vertexAttribPointer(oWebGLProgram.a_v3Position, 3, webgl.FLOAT, false, 0, 0);
webgl.disableVertexAttribArray(oWebGLProgram.a_v3Normal);
webgl.drawArrays(webgl.TRIANGLE_FAN, 0, 14);
}

//这些事件代码仍然只适合FF浏览器
function OnMouseDown(e)
{
mouseDown = true;
mousePosition = [parseInt(e.screenX), parseInt(e.screenY)];
}
function OnMouseUp(e)
{
mouseDown = false;
vec3.add(rotatePosV3, [parseInt(e.screenX)-mousePosition[0], parseInt(e.screenY)-mousePosition[1], 0]);
}
function OnMouseMove(e)
{
if(!mouseDown) return;
var tV3 = [];
vec3.add(rotatePosV3, [parseInt(e.screenX)-mousePosition[0], parseInt(e.screenY)-mousePosition[1], 0], tV3);//上次偏移加拖动形成的临时偏移成为本次拖动的最终偏移
mat4.identity(rotateMat4);//首先设置为单位矩阵，然后再构造成旋转矩阵
if(tV3[0] == 0 && tV3[1] == 0) return;
//根据位移，计算出当前的方向
var v3 = null;
var wh = oWebGL.Viewport();
var r = Math.min(wh[0], wh[1])/2;
var l = Math.sqrt(tV3[0]*tV3[0] + tV3[1] * tV3[1]);
if(l <= r) v3 = [tV3[0], tV3[1], Math.sqrt(r*r - l*l)];
else v3 = [r*tV3[0]/l, r*tV3[1]/l, 0];
v3[1] = - v3[1];
var radians = Math.acos(vec3.dot([0,0,1], v3)/r);
var vn = [];
gltGetNormalVector([0,0,0], [0,0,1], v3, vn);//或vec3.cross([0,0,1], v3, vn);

mat4.rotate(rotateMat4, radians, vn);
}

var oWebGL = null;
var oWebGLProgram = null;
var webgl = null;

function Init()
{
oWebGL  = new CWebGL ('myCanvas');
try
{
if(!oWebGL.Init()) throw oWebGL.error;

webgl = oWebGL.webgl;
oWebGLProgram = oWebGL.SetupProgramObject("shader-vs", "shader-fs", true);

if(oWebGLProgram  == null) throw oWebGL.error;//如果oWebGLProgram生成成功，则各个活动属性和活动uniform的位置/索引都将自动保存到oWebGLProgram对象下的同名变量

if(LoadData() != 0) throw "error:LoadData()!";


oWebGL.SetMouseCallback(OnMouseDown, OnMouseMove, OnMouseUp);
oWebGL.SetRender(RenderScene, 300);
}
catch(e){alert(e);}
}

</script>
</head>
<body οnlοad='Init()'>
<canvas id="myCanvas" style="border:1px solid red;" width='600px' height='450px'></canvas><table>
<tr><td>光照控制：</td><td colspan=3><input type="checkbox" id="lighting" checked />启用光照</td></tr>
<tr><td>环境光(比例)：</td>
<td>R: <input type="text" id="ambientR" value="0.5"></td>
<td>G: <input type="text" id="ambientG" value="0.5"></td>
<td>B: <input type="text" id="ambientB" value="0.5"></td></tr>
<tr><td>点光源(比例)：</td>
<td>R: <input type="text" id="pointR" value="1.0"></td>
<td>G: <input type="text" id="pointG" value="1.0"></td>
<td>B: <input type="text" id="pointB" value="1.0"></td></tr>
</table><br>
<img id="myTexture1" src='cubeTexture1.bmp'>
<img id="myTexture2" src='cubeTexture2.bmp'>
<img id="myTexture3" src='cubeTexture3.bmp'><br>
<img id="myTexture4" src='cubeTexture4.bmp'>
<img id="myTexture5" src='cubeTexture5.bmp'>
<img id="myTexture6" src='cubeTexture6.bmp'>   
</body>
</html>

    很简单，只是把原来顶点着色器中的一些操作移动到了片段着色器中。现在，顶点着色器只需要计算顶点位置和法线，然后传递给片段着色器即可，运行结果如下：