47 WebGL雾化(大气效果)

2018-03-04 03:31:05 人阅读

案例查看有问题?
全屏试试!

案例解析

 在三维图形学中,术语雾化(fog)用来描述远处的物体看上去较为模糊的现象。在现实中,任何介质中的物体都可能表现出雾化现象,比如水下的物体。

如何实现雾化:

实现雾化的方式有很多种,这里使用最简单的一种:线性雾化(linear fog)。在线性雾化中,某一点的雾化程度取决于它与视点之间的距离,距离越远雾化程度越高。线性雾化有起点和终点,起点表示开始雾化之处,终点表示完全雾化之处,两点之间的某一点的雾化程度与该点与视点的距离呈线性关系。注意,比终点更远的点完全雾化了,即完全看不见了。某一点雾化的程度可以被定义为雾化因子(fog factor),并在线性雾化公式中被计算出来。

<雾化因子> = ( <终点> - <当前点与视点间的距离>) / ( <终点> - <起点> )

这里

<起点> 小于等于 <当前点与视点间的距离> 小于等于 <终点>

如果雾化因子为1.0,表示该点完全没有被雾化,可以很清晰地看到此处的物体。如果其为0.0,就表示该点完全雾化了,此处的物体完全看不见,如图10.8所示。在视线上,起点之前的点的雾化因子为1.0,终点之后的点的雾化因子为0.0 。

在片元着色器中根据雾化因子计算片元的颜色:

<片元颜色> = <物体表面颜色> x <雾化因子> + <雾的颜色> x ( 1 - <雾化因子> )

顶点着色器计算了顶点与视点间的距离:首先将顶点坐标转换到世界坐标系下,然后调用内置函数distance()并将视点坐标(也是在世界坐标系下)和顶点坐标作为参数传入,distance()函数算出两者间的距离,并赋值v_Dist变量以传入片元着色器。

片元着色器根据上面的两个式子计算出雾化后的片元颜色。我们分别通过u_FogColor变量和u_FogDist变量来传入雾的颜色和范围,其中u_FogDist.x和u_FogDist.y分别是起点和终点与视点间的距离。

 

使用w分量

在顶点着色器中计算顶点与视点的距离,会造成较大的开销,也许会影响性能。我们可以使用另外一种方法来近似估算出这个距离,那就是使用顶点经过模型视图投影矩阵变换后的坐标的w分量。在本例中,顶点变换后的坐标就是gl_Position。之前,我们并未显式使用过gl_Psoition的w分量,实际上,这个w分量的值就是顶点的视图坐标的z分量乘以-1.在视图坐标系中,视点是原点,视线沿着Z轴负方向,观察者看到的物体其视图坐标系值z分量都是负的,而gl_Position的w分量值正好是z分量值乘以-1,所以可以直接使用该值来近似顶点与视点的距离。

案例源代码


                        
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            background-size: cover;
        }
 
        #canvas {
            margin: 0;
            display: block;
            position: absolute;
        }
 
        #canvas {
            z-index: 0;
        }
    </style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="/lib/webgl-utils.js"></script>
<script src="/lib/webgl-debug.js"></script>
<script src="/lib/cuon-utils.js"></script>
<script src="/lib/cuon-matrix.js"></script>
<script>
    //设置WebGL全屏显示
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    //顶点着色器
    var vertexShaderSource = "" +
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Color;\n" +
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform mat4 u_ModelMatrix;\n" +
        "uniform vec4 u_Eye;\n" +//世界坐标下的视点的位置
        "varying vec4 v_Color;\n" +
        "varying float v_Dist;\n" +
        "void main(){\n" +
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   v_Color = a_Color;\n" +
        "   v_Dist = distance(u_ModelMatrix * a_Position, u_Eye);\n" +//计算出来顶点和视点的距离
        "}\n";
 
    //片元着色器
    var fragmentShaderSource = "" +
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "uniform vec3 u_FogColor;\n" + //雾的颜色
        "uniform vec2 u_FogDist;\n" + //雾化的起点和终点(starting point, end point)
        "varying vec4 v_Color;\n" +
        "varying float v_Dist;\n" +
        "void main(){\n" +
        //计算雾化因子(当它远离眼睛位置时,系数变小)
        "   float fogFactor = clamp((u_FogDist.y - v_Dist) / (u_FogDist.y - u_FogDist.x), 0.0, 1.0);\n" +
        //越远雾化程度越高 u_FogColor * (1 - fogFactor) + v_Color * fogFactor
        "   vec3 color = mix(u_FogColor, vec3(v_Color), fogFactor);\n" +
        "   gl_FragColor = vec4(color, v_Color.a);\n" +
        "}\n";
 
    function main() {
        //获取WebGL对象
        var gl = getWebGLContext(canvas);
 
        //初始化着色器
        initShaders(gl, vertexShaderSource, fragmentShaderSource);
 
        //将数据存入缓冲区
        var n = initVertexBuffers(gl);
        if (n < 0) {
            console.log("数据存入缓冲区失败");
            return;
        }
 
        //设置雾的颜色
        var fogColor = new Float32Array([0.15, 0.23, 0.426]);
 
        //雾化的起点和终点与视点间的距离【起点距离, 终点距离】
        var fogDist = new Float32Array([55, 100]);
 
        //视点在世界坐标系下的位置
        var eye = new Float32Array([25, 65, 35, 1.0]);
 
        //获取相关uniform变量的存储位置
        var u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix");
        var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix");
        var u_Eye = gl.getUniformLocation(gl.program, "u_Eye");
        var u_FogColor = gl.getUniformLocation(gl.program, "u_FogColor");
        var u_FogDist = gl.getUniformLocation(gl.program, "u_FogDist");
        if (!u_MvpMatrix || !u_ModelMatrix || !u_Eye || !u_FogColor || !u_FogDist) {
            console.log("无法获取uniform变量的相关位置");
            return;
        }
 
        //将雾的颜色,起点与终点,视点坐标传给对应的uniform变量
        gl.uniform3fv(u_FogColor, fogColor); //雾的颜色
        gl.uniform2fv(u_FogDist, fogDist); //起点和终点
        gl.uniform4fv(u_Eye, eye); //视点
 
        //将雾的颜色设置为背景色
        gl.clearColor(fogColor[0], fogColor[1], fogColor[2], 1.0);
        gl.enable(gl.DEPTH_TEST);
 
        //设置模型矩阵并赋值
        var modeMatrix = new Matrix4();
        modeMatrix.setScale(10.0, 10.0, 10.0);
        gl.uniformMatrix4fv(u_ModelMatrix, false, modeMatrix.elements);
 
        //设置视图投影矩阵
        var mvpMatrix = new Matrix4();
        mvpMatrix.setPerspective(30.0, canvas.width/canvas.height, 1.0, 1000.0);
        mvpMatrix.lookAt(eye[0], eye[1], eye[2], 0.0, 2.0, 0.0, 0.0, 1.0, 0.0);
        mvpMatrix.multiply(modeMatrix);
        gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
 
        //绑定一个点击事件
        document.onkeydown = function () {
            keydown(event, gl, n, u_FogDist, fogDist);
        };
 
        //清除背景色及层级关系
        gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);
 
        //绘制
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
 
        var modelViewMatrix = new Matrix4();
        modelViewMatrix.setLookAt(eye[0], eye[1], eye[2], 0.0, 2.0, 0.0, 0.0, 1.0, 0.0);
        modelViewMatrix.multiply(modeMatrix);
        modelViewMatrix.multiplyVector4(new Vector4([1.0, 1.0, 1.0, 1.0]));
        mvpMatrix.multiplyVector4(new Vector4([1.0, 1.0, 1.0, 1.0]));
        modelViewMatrix.multiplyVector4(new Vector4([-1.0, 1.0, 1.0, 1.0]));
        mvpMatrix.multiplyVector4(new Vector4([-1.0, 1.0, 1.0, 1.0]));
    }
 
    function keydown(event, gl, n, u_FogDist, fogDist) {
        switch (event.keyCode){
            case 38:
                fogDist[1] += 1;
                break;
            case 40:
                if(fogDist[1] > fogDist[0]){
                    fogDist[1] -= 1;
                }
                break;
            default:
                return;
        }
 
        gl.uniform2fv(u_FogDist, fogDist);
 
        gl.clear(gl.COLOR_BUFFER_BIT | gl.EDPTH_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
    }
 
    function initVertexBuffers(gl) {
        // Create a cube
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3
 
        var vertices = new Float32Array([   // Vertex coordinates 顶点的位置
            1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1,    // v0-v1-v2-v3 front
            1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1,    // v0-v3-v4-v5 right
            1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1,    // v0-v5-v6-v1 up
            -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,    // v1-v6-v7-v2 left
            -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1,    // v7-v4-v3-v2 down
            1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1     // v4-v7-v6-v5 back
        ]);
 
        var colors = new Float32Array([     // Colors 顶点的颜色
            0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,  // v0-v1-v2-v3 front
            0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,  // v0-v3-v4-v5 right
            1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,  // v0-v5-v6-v1 up
            1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
            1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
            0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0   // v4-v7-v6-v5 back
        ]);
 
        var indices = new Uint8Array([       // Indices of the vertices 顶点的索引
            0, 1, 2, 0, 2, 3,    // front
            4, 5, 6, 4, 6, 7,    // right
            8, 9, 10, 8, 10, 11,    // up
            12, 13, 14, 12, 14, 15,    // left
            16, 17, 18, 16, 18, 19,    // down
            20, 21, 22, 20, 22, 23     // back
        ]);
 
        //将顶点位置和颜色存入颜色缓冲区
        if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1;
        if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) return -1;
 
        //创建一个索引的缓冲区对象
        var indexBuffer = gl.createBuffer();
        if(!indexBuffer){
            console.log("无法创建缓冲区对象");
            return -1;
        }
 
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
 
        return indices.length;
    }
 
    function initArrayBuffer(gl, data, num, type, attribute) {
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log("无法创建缓冲区对象");
            return;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
        var a_attribute = gl.getAttribLocation(gl.program, attribute);
        if (a_attribute < 0) {
            console.log("无法获取变量的存储位置" + attribute);
            return false;
        }
        gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribute);
 
        return true;
    }
 
</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多