47 WebGL雾化（大气效果）

最新推荐文章于 2024-09-28 07:49:34 发布
最新推荐文章于 2024-09-28 07:49:34 发布
阅读量3.4k 收藏 7
点赞数 2
分类专栏： WebGL 文章标签： WebGL 雾化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/73294711
版权

案例查看地址：点击这里

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

如何实现雾化：

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

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

这里

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

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


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

<片元颜色> = <物体表面颜色> x <雾化因子> + <雾的颜色> x ( 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: url("lib/banner.jpg");
            background-size: cover;
        }

        #canvas {
            margin: 0;
            display: block;
            position: absolute;
        }

        #canvas {
            z-index: 0;
        }
    </style>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="webgl/webgl-utils.js"></script>
<script src="webgl/webgl-debug.js"></script>
<script src="webgl/cuon-utils.js"></script>
<script src="webgl/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>

顶点着色器计算了顶点与视点间的距离：首先将顶点坐标转换到世界坐标系下，然后调用内置函数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: url("lib/banner.jpg");
            background-size: cover;
        }

        #canvas {
            margin: 0;
            display: block;
            position: absolute;
        }

        #canvas {
            z-index: 0;
        }
    </style>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="webgl/webgl-utils.js"></script>
<script src="webgl/webgl-debug.js"></script>
<script src="webgl/cuon-utils.js"></script>
<script src="webgl/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" +
        "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 = gl_Position.w;\n" +//使用视图坐标系的负z值
        "}\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.5, 1.0, 1.0]);

        //雾化的起点和终点与视点间的距离【起点距离， 终点距离】
        var fogDist = new Float32Array([55, 200]);

        //视点在世界坐标系下的位置
        var eye = new Float32Array([25, 65, 35, 1.0]);

        //获取相关uniform变量的存储位置
        var u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix");
        var u_FogColor = gl.getUniformLocation(gl.program, "u_FogColor");
        var u_FogDist = gl.getUniformLocation(gl.program, "u_FogDist");
        if (!u_MvpMatrix || !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);

        //设置视图投影矩阵
        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);

    }

    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>


暮志未晚NAN
关注
专栏目录
bloom-effect-example:近乎最佳的WebGL中基于次优的基于Regl的Bloom效果
05-06
布鲁姆效应示例 的WebGL中基于的Bloom效果 介绍 本示例使用在WebGL中执行Bloom效果。 为了以较少的通过次数实现相对平滑的模糊处理，在计算模糊时对完整尺寸的帧缓冲区进行下采样，并执行例如半径32、16、8、4、2，最后是1个像素的模糊处理。 这使得它实际上并不是精确的高斯模糊，但似乎可以完成工作。 请注意，这里的目标不是最佳实现Bloom效果，而是提供一种实现类似这些效果的后处理效果的。 我希望此仓库对某人有用，但不要高估其价值。 :grinning_face_with_smiling_eyes: 如果您真的要执行实时绽放，则标准似乎是mip-map /图像金字塔和某种组合。 更新：我还添加了一个FFT实现，该实现执行完整的转换并使用某种星形模式而不是高斯内核。 执照 分级为4 +:copyright:2020 Ricky Reusser。 MIT许可证。
WebGL－17.雾效果
Sun zi chao的博客
11-21 128
本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。通过对着色器的处理，我们可以产生很多好看的效果。而ＧＰＵ编程的重点也在于着色器的处理。雾效果在着色器里实现是非常容易的。下面的例子是这样的。一个前后移动的三角形。观察点位置不变（０，０，１）。雾化起点和终点分别是1.5和5.0。三角形表面颜色是黄色。雾的颜色是绿色。从1.5位置开始，越往后，颜色越绿。
WebGPU 实用工具库：webgpu-utils 推荐
最新发布
gitblog_00317的博客
09-28 809
WebGPU 实用工具库：webgpu-utils 推荐 webgpu-utils Some helpers for webgpu 项目地址: https://gitcode.com/gh_mirrors/we/webgpu-ut...
【愚公系列】2023年08月 WEBGL专题-3D特效-雾化
热门推荐
时光隧道
08-07 1万+
在3D图形渲染中，雾化是一种用于创建深度感的技术。它模拟了真实世界中的雾气效果，使远距离的物体看起来模糊不清，并且与背景融合在一起，从而增强了场景的真实感。实现3D中的雾化技术，通常通过在场景中添加一层透明的雾气效果，即雾层。这个雾层可以是线性的或指数的，具体的数学公式可以用来计算每个像素的雾化强度。这种技术使得远距离的物体看起来像是遮盖在一层雾气中，从而增强了场景的深度感。雾化技术在电影、游戏等领域广泛应用，能够提高场景的视觉效果和真实感。WEBGL中的雾化是一种视觉效果，可以模拟远处物体出现“雾气”或“
WebGL - 示例 添加雾化效果
ithanmang
07-08 1328
在三维图形学中， 雾化用来描述远处的物体看上去较为模糊的现象。 示例：雾化效果 实现雾化的方式有很多种，这里最简单的一种就是 线性雾化，在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高，线性雾化有起点和终点，起点表示雾化开始之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点的距离呈线性关系 比终点更远的点完全雾化了，即完全看不到东西，某一点的雾化的程度可以定义...
【笔记】《WebGL编程指南》学习（8）
饮冰室
04-06 1297
WebGL编程指南学习（8） 漫长的旅行即将到达终点…… 8. 高级技术 8.1 用鼠标控制物体旋转 如何实现物体的旋转？ 如何旋转物体？使用MVP矩阵来变换顶点的坐标； 根据鼠标的移动情况创建旋转矩阵，更新MVP矩阵 算法思路 在鼠标左键按下时记录鼠标的初始坐标；然后在鼠标移动的时候用当前坐标减去初始坐标，获得鼠标的位移；然后根据这个位移来计算旋转矩阵。这就需要一个鼠标移动事件的监听器。 注册event handler tick()函数，执行动画 function main() { ...
Webgl实现的天气效果（下雨和下雪）
01-31
Webgl实现的天气效果（下雨和下雪）
webgl-云彩效果
08-31
在这个“webgl-云彩效果”项目中，我们看到的是利用WebGL来模拟飞机视角下的云彩效果，为用户提供一种身临其境的视觉体验。 1. **WebGL基础**：WebGL是基于OpenGL ES 2.0的JavaScript绑定，它在浏览器的上下文中...
效果超棒的Webgl模型-人体肺
04-11
这个名为“效果超棒的Webgl模型-人体肺”的资源，显然是一个利用WebGL技术创建的、展示人体肺部结构的三维模型。在网页中，用户可以通过鼠标或触摸操作来旋转、缩放和平移模型，从而从不同角度观察肺部的细节。 ...
效果超棒的Webgl模型-人体头部模型
04-11
这个"效果超棒的WebGL模型-人体头部模型"是利用WebGL技术创建的一个三维人体头部展示，它能够在网页上实现逼真的、动态的三维渲染。下面将详细介绍这个模型所涉及的关键知识点： 1. **WebGL基础**：WebGL是Web图形...
效果超棒的Webgl模型-装甲车
04-11
这个“效果超棒的Webgl模型-装甲车”压缩包很可能是包含了一个或者多个高质量的3D装甲车模型，设计用于在网络环境中展示，比如游戏、教育应用或者军事模拟等场景。 首先，我们要理解WebGL的基本工作原理。它利用...
webgl:这是一个计算机图形学的大作业一个会飞的车
04-02
webgl 这是一个计算机图形学的大作业一个会飞的车
webgl之Three.js学习 day3使用Three.js的材质
chengzhaohui18的博客
03-06 753
在开始这一节前，我们先将要探究的材质列在下表中： 名称 描述 MeshBasicMaterial(网格基础材质) 基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框。 MeshDepthMaterial(网格深度材质) 根据网格到相机的距离，这种材质决定如何给网格染色。 MeshNorma...
【愚公系列】2023年08月 WEBGL专题-2D特效-小球融合
时光隧道
08-05 1万+
小球融合是一种物理现象，涉及到两个或更多球体在一起时融合成一个更大的球体。这个过程可以发生在不同的环境中，比如在熔融的金属中，或者在化学反应中。在熔融的金属中，小球融合可以通过热力学过程发生。当两个球体接触时，它们之间的热量和质量将开始交换。如果它们的温度足够高，那么它们的表面将会融化，并交错在一起形成一个新的大球。在化学反应中，小球融合通常是因为化学反应的反应物在一起时产生的化学反应。例如，两个小球可能包含不同的化学物质，而它们之间的反应将导致它们融合成一个不同的物质。
WebGL之旅（十九）雾化
寒风的技术博客
08-03 1245
一 原理雾化，即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化，会指定一个起点和终点，起点为开始雾化点，终点为完全雾化的点： 在起点之前的完全清晰，也就是说完全为场景中的物体颜色； 在起点和终点之间的点，根据距离计算雾的因子； 在终点之后就完成为雾的颜色。 物体颜色和雾的颜色叠加公私如下： 片元颜色 = 物体颜色 * 雾化因子 + 雾的颜色 * （1 - 雾化因子） 雾化因子 = (终点 - 当
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
点燃火柴的博客
04-19 854
立方体雾化效果1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值4. demo代码5. 使用gl_Position的w分量 1. demo效果 如上图，可以通过向上/向下键盘控制雾化的距离 2.相关知识点 2.1 雾化相关概念 雾化的方式有很多种，这里使用最简单方式：线性雾化,在这里介绍一些相关概念 视点 查看物体的眼睛(摄像机) 雾化的 起点 表示开始雾化之处 雾化的
WebGL编程指南-30 三维物体雾化效果，立方体雾化效果
weixin_46773434的博客
10-10 516
如果雾化影子为1.0则表示该点完全没有被雾化，可以清晰的看到物体，如果为0.0则表示该点完全雾化，此处完全看不到物体，雾化因子的取值范围 0.0~1.0。在着色器中可以使用 clamp(x,minVal,maxVal) 将x限制在minVal和maxVal之间 该方法限制雾化因子范围。同样可以使用 mix(x,y,a) 返回x和y的线性混合，即x*(1-a)+y*a 该方法计算片元颜色，两者结合可以得到新的公式。在片元着色器中根据雾化因子计算片元的颜色，公式如下。
web端webgl相关特效案例
现在学习也不晚
04-19 1851
自制迷宫小游戏 THREE.JS版全景图播放器 panorama 飞行员小游戏 旋转的地球
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 1万+
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
老式收音机WebGL模型效果展示
3. 实时渲染：WebGL的实时渲染能力使得开发者能够实现复杂的视觉效果，如动态光影和物理效果。 同时，WebGL技术也面临一些挑战： 1. 兼容性问题：不同的浏览器和设备对WebGL的支持程度不一。 2. 性能优化：高复杂度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值