mapbox-gl添加下雪效果

最新推荐文章于 2024-08-14 17:24:57 发布

weixin_30882895

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量296

点赞数

原文链接：http://www.cnblogs.com/lilei2blog/p/9292799.html

版权

原理：

webgl制作snowing效果
叠加上一个制作的snowing canvas到mapbox gl的canvas下面

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        #canvas{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

    </style>

</head>
<body>
<canvas id="canvas"></canvas>
<script src="../resources/webgl-utils.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform vec2 u_wh;

void main() {

   gl_PointSize = 4.0;



   vec2 t1 = a_position * 2.0 / u_wh ;

   vec2 t4 = vec2(t1.x - 1.0,(t1.y - 1.0) * -1.0);

   gl_Position = vec4(t4, 0, 1);
}
</script>


<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">

precision mediump float;

void main() {

   float d = distance(gl_PointCoord , vec2(0.5,0.5));

   if (d <= 0.5){
   gl_FragColor = vec4(0.0,1.0,0.0,1.0);
   }else{
    discard;
   }



}
</script>
<script>

    var canvas = document.getElementById('canvas')

    canvas.width = screen.width;
    canvas.height = screen.height;

    var gl = canvas.getContext('webgl')



    if (gl){



        var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);

        gl.useProgram(program);


        var uwh = gl.getUniformLocation(program,"u_wh");

        //gl.uniform2f(uwh,screen.width,screen.height)


        gl.uniform2fv(uwh,new Float32Array([screen.width,screen.height]))

        var buffer = gl.createBuffer();



        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);


        call()

        function call(){

            console.log(new Date())

            window.setTimeout(render,1000)
        }




        function render() {

            gl.clearColor(0,0,0,1)
            gl.clear(gl.COLOR_BUFFER_BIT)

            var data = []

            for(var i=0;i<1000;i++){
                data.push(Math.random() * screen.width)
                data.push(Math.random() * screen.height)
            }


            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

            var positionLocation = gl.getAttribLocation(program, "a_position");

            gl.enableVertexAttribArray(positionLocation);

            gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.POINTS, 0, data.length / 2);


            window.requestAnimationFrame(call)
        }




    }else{
        alert('go fuck')
    }

</script>


</body>
</html>