Android OpenGL ES 绘图 -- 热力图

最新推荐文章于 2022-05-21 11:00:57 发布

不一样的清流

最新推荐文章于 2022-05-21 11:00:57 发布

阅读量4.5k

点赞数 4

分类专栏： Android 文章标签： android opengl es 算法

本文链接：https://blog.csdn.net/z896435317/article/details/77853470

版权

Android 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

使用高斯核密度估计算法绘制热力图

绘图数据是一个一维的图形数组：

宽：50
高：60

一、OpenGL 绘图准备配置

在Render中
onSurfaceCreated方法：

        // 黑色背景
        gl.glClearColor(0, 0, 0, 0);
        // 设置深度缓存
        gl.glClearDepthf(1.0f);
        // 启用深度测试
        gl.glEnable(GL10.GL_DEPTH_TEST);
        // 所作深度测试的类型
        gl.glDepthFunc(GL10.GL_LEQUAL);
        // 设置点大小
        gl.glPointSize(1.5f);
        // 设置所画的点为圆点
        gl.glEnable(GL10.GL_POINT_SMOOTH);

onSurfaceChanged方法：

        //设置可显示区域
        gl.glViewport(0, 0, width, height);
        //设备正投影
        gl.glMatrixMode(GL10.GL_PROJECTION);
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        //初始化数据宽高与View的宽高
        this.mWidth = 50 * 5;
        this.mHeight = 60 * 5;
        this.mViewWidth = width;
        this.mViewHeight = height;
        //重设投影模型
        gl.glLoadIdentity();
        // 校准显示内容区域
        gl.glTranslatef(-0.15f, 0.15f, 0f);
        gl.glRotatef(-90f, 0, 0, 1);
        gl.glScalef(0.8f, 0.8f, 1f);
        //初始化数据缓冲区
        ByteBuffer colorTmp = ByteBuffer.allocateDirect(mHeight * mWidth * 4 * 4);
        colorTmp.order(ByteOrder.nativeOrder());
        colorBuff = colorTmp.asFloatBuffer();
        ByteBuffer quateTmp = ByteBuffer.allocateDirect(mHeight * mWidth * 2 * 4);
        quateTmp.order(ByteOrder.nativeOrder());
        vertexBuff = quateTmp.asFloatBuffer();

二、图形数组处理

扩大原数组并转化为一个二维数组

        double[][] intensity = new double[mWidth + 2 * mRadius][mHeight + 2 * mRadius];
        int n; //数组索引位置
        double value; //数据的值
        mMaxIntensity = 0;
        for (int i = 0; i < 50; i++) {
            for (int j = 0; j < 60; j++) {
                n = i * 60 + j;
                value = data[n];
                if (value > 0) {
                    //根据原有的数组，填充到一个更大的数组
                    int bucketX = (int) (clamp((float) i / 50 , 0.0f, mWidth));
                    int bucketY = (int) (clamp((float) j / 60, 0.0f, mHeight));
                    if (bucketX < mWidth && bucketX >= 0
                            && bucketY < mHeight && bucketY >= 0) {
                        intensity[bucketX][bucketY] = value;
                    }
                    //获取数据中的最大值
                        if (value > mMaxIntensity) {
                            mMaxIntensity = value;
                        }
                }
            }
        }

计算核的大小

    private double[] mKernel = generateKernel(mRadius, mRadius / 3.0);
    static private double[] generateKernel(int radius, double sd) {
        double[] kernel = new double[radius * 2 + 1];
        for (int i = -radius; i <= radius; i++) {
            kernel[i + radius] = (Math.exp(-i * i / (2 * sd * sd)));
        }
        return kernel;
    }

使用高斯核密度算法处理数组

 double[][] convolved = convolve(intensity, mKernel);
 static private double[][] convolve(double[][] grid, double[] kernel) {
        int radius = mRadius;
        int dimOldW = grid.length;
        int dimOldH = grid[0].length;
        int dimW = dimOldW - 2 * radius;
        int dimH = dimOldH - 2 * radius;

        int lowerLimit = radius;
        int upperLimitW = radius + dimW - 1;
        int upperLimitH = radius + dimH - 1;


        double[][] intermediate = new double[dimOldW][dimOldH];

        int x, y, x2, xUpperLimit, initial;
        double val;
        for (x = 0; x < dimOldW; x++) {
            for (y = 0; y < dimOldH; y++) {
                val = grid[x][y];
                if (val != 0) {
                    xUpperLimit = ((upperLimitW < x + radius) ? upperLimitW : x + radius) + 1;
                    initial = (lowerLimit > x - radius) ? lowerLimit : x - radius;
                    for (x2 = initial; x2 < xUpperLimit; x2++) {
                        intermediate[x2][y] += val * kernel[x2 - (x - radius)];
                    }
                }
            }
        }

        double[][] outputGrid = new double[dimW][dimH];
        int y2, yUpperLimit;

        for (x = lowerLimit; x < upperLimitW + 1; x++) {
            for (y = 0; y < dimOldH; y++) {
                val = intermediate[x][y];
                if (val != 0) {
                    yUpperLimit = ((upperLimitH < y + radius) ? upperLimitH : y + radius) + 1;
                    initial = (lowerLimit > y - radius) ? lowerLimit : y - radius;
                    for (y2 = initial; y2 < yUpperLimit; y2++) {
                        outputGrid[x - radius][y2 - radius] += val * kernel[y2 - (y - radius)];

                    }
                }
            }
        }

        return outputGrid;
    }

convolved为处理好的数组

三、根据数组，添加点坐标与颜色

        int dimw = d.length;
        int dimh = d[0].length;
        //根据OpenGL坐标系统，坐标由-1到+1，范围为2，实际坐标需影射到OpenGL坐标系(0:-1, Max:1)
        //每个点坐标包含两个浮点数：X、Y
        float[] ver = new float[dimw * dimh * 2];
        //每个颜色数据包令４个浮点数：R、G、B
        float[] colorDBuff = new float[dimw * dimh * 3];
        //点颜色的RGB数组
        float[] colorArr;

        //每点的宽高
        float z = (float) mViewWidth / (float) dimw;
        float Ysplit = (2f / (float) mViewHeight) * z;
        float Xsplit = (2f / (float) mViewWidth) * z;

        int k = 0;//点坐标的序号
        int c = 0;//点颜色的序号
        int i, j;
        double val;
        indexNum = 0;
        for (i = 0; i < dimw; i++) {
            for (j = 0; j < dimh; j++) {
                val = d[i][j];
                if (val != 0) {
                    colorArr = getColor((float) (val / mMaxIntensity));
                    //point and color
                    ver[k++] = -1f + i * Ysplit;
                    ver[k++] = -1f + j * Xsplit;
                    colorDBuff[c++] = colorArr[0];
                    colorDBuff[c++] = colorArr[1];
                    colorDBuff[c++] = colorArr[2];
                    indexNum++;
                }
            }
        }
        colorBuff.put(colorDBuff);
        colorBuff.position(0);
        vertexBuff.put(ver);
        vertexBuff.position(0);    // 需重置数组位置，否则不能顶点数据访问为空，无图形输出

能量色条值获取方法

    /**
     * 能量色条值获取
     * @param value　实际数据值
     * @return　对应能量色条颜色数组[r, g, b]
     */
    protected float[] getColor(float value) {
        int sr1 = 0x00, sg1 = 0x00, sb1 = 0x00;
        int sr2 = 0x46, sg2 = 0xb7, sb2 = 0xec;
        int sr3 = 0x22, sg3 = 0xfe, sb3 = 0x2c;
        int sr4 = 0xff, sg4 = 0xea, sb4 = 0x00;
        int sr5 = 0xff, sg5 = 0x4e, sb5 = 0x00;
        double r = 0, g = 0, b = 0;

        if( value < 0.15 ) {
            r = sr1 + (sr2 - sr1) * (value / 0.15);
            g = sg1 + (sg2 - sg1) * (value / 0.15);
            b = sb1 + (sb2 - sb1) * (value / 0.15);
        } else if(value < 0.5){
            r = sr2 + (sr3 - sr2) * ((value - 0.15) / 0.35);
            g = sg2 + (sg3 - sg2) * ((value - 0.15) / 0.35);
            b = sb2 + (sb3 - sb2) * ((value - 0.15) / 0.35);
        } else if(value < 0.75){
            r = sr3 + (sr4 - sr3) * ((value - 0.5) / 0.25);
            g = sg3 + (sg4 - sg3) * ((value - 0.5) / 0.25);
            b = sb3 + (sb4 - sb3) * ((value - 0.5) / 0.25);
        } else {
            r = sr4 + (sr5 - sr4) * ((value - 0.75) / 0.25);
            g = sg4 + (sg5 - sg4) * ((value - 0.75) / 0.25);
            b = sb4 + (sb5 - sb4) * ((value - 0.75) / 0.25);
        }
        return new float[]{(float) (r / 0xFF), (float) (g / 0xFF), (float) (b / 0xFF)};
    }

四、绘制

onDrawFrame方法：

            //启动相关管道
            gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);    // 开启顶点数组画图模式，否则不能使用顶点数组画图
            gl.glEnableClientState(GL10.GL_COLOR_ARRAY);    // 打开着色数组，启用顶点着色功能
            //绘图
            gl.glVertexPointer(2, GL10.GL_FLOAT, 0, vertexBuff);
            gl.glColorPointer(3, GL10.GL_FLOAT, 0, colorBuff);
            gl.glDrawArrays(GL10.GL_POINTS, 0, indexNum);
            //关闭相关管道
            gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
            gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);