WebGL之通过外部传入a_PontSize值改变点着色器vshader内置变量gl_PointSize的值

最近分配到一个看起来非常简单的优化需求、通过地图上设置工具来改变地图上显示的点的大小和透明度。无非过程就是从控件面板获取到用户设置的值保存到数据库中、然后地图上画点的时候取出设置的值渲染出点即可。前端绘制图形无非canvas、这个方面我之前也是不怎么涉及的部分、所以趁这次分配的任务比较轻时间相对宽裕的情况下、可谓是好好学了一把WebGL的内容。通过一个星期的查找学习、总算有了比较清晰的理解、足以好好理解代码了。

俗话说、工欲善其事必先利其器、我这次可是深刻体会了一把。一开始觉得好像蛮容易的、后来怎么也搞不到一起才静下心来认认真真看了webGL的内容、比较不好理解、反正我对着代码翻来覆去看了四五六七遍以上吧、才终于理解了代码执行的逻辑顺序。

学习准备：

WebGL教程：  http://www.yanhuangxueyuan.com/WebGL_course.html   （推荐、跟着里面说明的方法来学习理解）

W3C关于WebGL的基础学习 （动手前最好看明白的基础理论学习） https://www.w3cschool.cn/webgl/157h1oh3.html

WebGL入门教程(一)-初识webgl  （可以跟着搞起来的实例教程）  http://www.cnblogs.com/bsman/p/6128447.html

从OpenGL传颜色数值到Shader，改变绘图颜色（看了这篇才找到答案的）   http://blog.csdn.net/huutu/article/details/21460835

WebGL基础（辅助理解）  https://www.cnblogs.com/mazhenyu/p/3804518.html

开始解题：

1.大体的思路如下图、代码有省略

其实图上看明白了题已经解了、屡一下思路、WebGL先要声明点着色器和片着色器、然后放在program上建立起来、在建立好program后我们定义一个变量gl.aPointSize，将点着色器的一个属性值a_pointSize赋值给这个变量gl.aPointSize，然后我们根据实际项目需求通过控制这个gl.aPointSize进而改变点着色器中内部变量gl_PointSize。就这么简单，主要是看明白webGL每一个语句的用法，就容易做了。

2.代码参考

①在main.aspx中声明点着色器

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Ext5.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="F5WS.Web" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">var tinyItems = <%= ViewData["TinyItems"] %></script>
    <script id="vshader" type="x-shader/x-vertex">
        uniform mat4 u_matrix;
        attribute vec4 a_vertex;
        attribute float a_pointSize;
        attribute vec4 a_color;
        varying vec4 v_color;

        void main() {
        // Set the size of the point
        // a_pointSize;

        gl_PointSize = a_pointSize;

        // multiply each vertex by a matrix.
        gl_Position = u_matrix * a_vertex;

        // pass the color to the fragment shader
        v_color = a_color;
        }
    </script>
    <!-- fragment shader -->

    <!-- vec4 color1 = vec4(v_color[], v_color[], v_color[], 0.6);调整透明度在这里 -->
    <script id="fshader" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 v_color;
        uniform sampler2D uSampler;
        void main() {

        float border = 0.1;
        float radius = 0.5;
        vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);
        // 最后一个参数为 透明度设定
        vec4 color1 = vec4(v_color[], v_color[], v_color[], v_color[]);

        vec2 m = gl_PointCoord.xy - vec2(0.5, 0.5);
        float dist = radius - sqrt(m.x * m.x + m.y * m.y);

        float t = 0.0;
        if (dist > border)
        t = 1.0;
        else if (dist > 0.0)
        t = dist / border;

        // float centerDist = length(gl_PointCoord - 0.5);
        // works for overlapping circles if blending is enabled

        gl_FragColor = mix(color0, color1, t);

        }

    </script>

    </script>
</asp:Content>

main.aspx

②在CanvasOverlayGL.js中使用、截取了WebGL部分的代码、方便核对自己的代码理解

    setWebGL: function () {
        var me = this;
        var gl = this._canvas.getContext('experimental-webgl', { antialias: true });
        if (!gl) {
            me._usingGL = false;
            return;
        }

        me._gl = gl;

        this._pixelsToWebGLMatrix = new Float32Array(16);
        this._mapMatrix = new Float32Array(16);

        // -- WebGl setup
        if (!gl) return;
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        if (!document.getElementById('vshader')) return;
        gl.shaderSource(vertexShader, document.getElementById('vshader').text);
        gl.compileShader(vertexShader);

        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        if (!document.getElementById('fshader')) return;
        gl.shaderSource(fragmentShader, document.getElementById('fshader').text);
        gl.compileShader(fragmentShader);

        // link shaders to create our program
        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);
        gl.enable(gl.BLEND);

        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

        // look up the locations for the inputs to our shaders.
        this._u_matLoc = gl.getUniformLocation(program, "u_matrix");
        this._colorLoc = gl.getAttribLocation(program, "a_color");
        this._vertLoc = gl.getAttribLocation(program, "a_vertex");
        gl.aPointSize = gl.getAttribLocation(program, "a_pointSize");

        // Set the matrix to some that makes 1 unit 1 pixel.
        this._pixelsToWebGLMatrix.set([2 / this._canvas.width, 0, 0, 0, 0, -2 / this._canvas.height, 0, 0, 0, 0, 0, 0, -1, 1, 0, 1]);
        gl.viewport(0, 0, this._canvas.width, this._canvas.height);

        gl.uniformMatrix4fv(this._u_matLoc, false, this._pixelsToWebGLMatrix);
    },
    loadData: function (data, total) {

        var me = this;
        var gl = me._gl;
        var usingGL = me._usingGL;
        var verts = data;  //你自己要渲染的数据

        this._size = verts[2];    //我这里的verts[2] = -50
        this._cSize = verts[7]; // 我这里的verts[7] = 5.0

        this._numPoints = total;
        if (usingGL) {
            if (!this._buffer) {
                var vertBuffer = gl.createBuffer();
                this._buffer = vertBuffer;
                gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
                gl.enableVertexAttribArray(this._vertLoc);
                gl.enableVertexAttribArray(this._colorLoc);
            }

            var vertArray = new Float32Array(verts);

            var fsize = vertArray.BYTES_PER_ELEMENT;

            gl.bufferData(gl.ARRAY_BUFFER, vertArray, gl.STATIC_DRAW);

            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, fsize * 7, 0);

            // -- offset for color buffer
            gl.vertexAttribPointer(this._colorLoc, 4, gl.FLOAT, false, fsize * 7, fsize * 3);

        }

        this.redraw();
    },
    drawingOnCanvas: function () {
        if (this._gl == null) return;
        var gl = this._gl;
        gl.clear(gl.COLOR_BUFFER_BIT);
        this._pixelsToWebGLMatrix.set([2 / this._canvas.width, 0, 0, 0, 0, -2 / this._canvas.height, 0, 0, 0, 0, 0, 0, -1, 1, 0, 1]);

        //debugger;
        var pointSize = 78271.5170 / Math.pow(2, this._map.getZoom() - 1);
        var size = this._size;
        if (size < 0.0) {
            size = -size / pointSize;
            if (size < 7.0) {
                //size = 7.0;
                size = this._cSize + 2 ;  //我这里 this._cSize=5，我想设定点大小为7，所以+2了
            }
        }

       // console.log(size);
        gl.vertexAttrib1f(gl.aPointSize, size);  //将size传给点着色器的gl.aPointSize，从而改变到点的大小了

        // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates
        this._mapMatrix.set(this._pixelsToWebGLMatrix);
        //debugger;
        var bounds = this._map.getBounds();
        var topLeft = new L.LatLng(bounds.getNorth(), bounds.getWest());

        var newLatlng = this.offsetFn(topLeft.lat, topLeft.lng);

        var offset = this.LatLongToPixelXY(topLeft.lat - newLatlng.lat + topLeft.lat, topLeft.lng - newLatlng.lng + topLeft.lng);

        this._offset.x = offset.x;
        this._offset.y = offset.y;
        this._offset.topLeft = topLeft;

        // -- Scale to current zoom
        var scale = Math.pow(2, this._map.getZoom());
        this.scaleMatrix(this._mapMatrix, scale, scale);

        this.translateMatrix(this._mapMatrix, -offset.x, -offset.y);

        // -- attach matrix value to 'mapMatrix' uniform in shader
        gl.uniformMatrix4fv(this._u_matLoc, false, this._mapMatrix);
        //debugger;
        gl.drawArrays(gl.POINTS, 0, this._numPoints);
    },
    LatLongToPixelXY: function (latitude, longitude) {
        var pi_180 = Math.PI / 180.0;
        var pi_4 = Math.PI * 4;
        var sinLatitude = Math.sin(latitude * pi_180);
        var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (pi_4)) * 256;
        var pixelX = ((longitude + 180) / 360) * 256;

        var pixel = { x: pixelX, y: pixelY };

        return pixel;
    },
    translateMatrix: function (matrix, tx, ty) {
        // translation is in last column of matrix
        matrix[12] += matrix[0] * tx + matrix[4] * ty;
        matrix[13] += matrix[1] * tx + matrix[5] * ty;
        matrix[14] += matrix[2] * tx + matrix[6] * ty;
        matrix[15] += matrix[3] * tx + matrix[7] * ty;
    },
    scaleMatrix: function (matrix, scaleX, scaleY) {
        // scaling x and y, which is just scaling first two columns of matrix
        matrix[0] *= scaleX;
        matrix[1] *= scaleX;
        matrix[2] *= scaleX;
        matrix[3] *= scaleX;

        matrix[4] *= scaleY;
        matrix[5] *= scaleY;
        matrix[6] *= scaleY;
        matrix[7] *= scaleY;
    },

CanvasOverlayGL.js