WebGL自学教程——WebGL示例：12. 要有光

最新推荐文章于 2024-08-14 14:54:46 发布

铁文

最新推荐文章于 2024-08-14 14:54:46 发布

阅读量3.9k

点赞数

分类专栏：编程：Web 文章标签： function buffer null input byte float

本文链接：https://blog.csdn.net/tiewen/article/details/6917718

版权

编程：Web 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

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文件的内容如下(我会在以后不断完善它)：

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

完整的代码如下：

<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>

<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;
uniform bool u_bUseLighting;
uniform vec3 u_v3AmbientScale;
uniform vec3 u_v3PointLightPosition;
uniform vec3 u_v3PointLightScale;
varying vec3 v_v3ColorScale;

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

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

                v_v3ColorScale = u_v3AmbientScale + u_v3PointLightScale * f;//将衰减后的点光源颜色比例合并到环境光
            }
            else v_v3ColorScale = u_v3AmbientScale;
        }
    }
}
</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_v3ColorScale;

void main(void)
{
    if(u_iShadowMode == 0)
    {
        vec4 color = textureCube(u_samplerCube, v_v3TexCoord);
        gl_FragColor = vec4(color.rgb * v_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>

运行起来之后，你会发现，立方体上的表面的光照效果比较柔和。这是因为我们使用的是“逐顶点”的渲染方式。在顶点着色器中，我们计算好了顶点的颜色比例，然后传递给了片段着色器，计算出了顶点的颜色。之后，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>

<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>