【OpenGL ES】正方形图片贴到圆形上

1 前言

​ 纹理贴图 中介绍了将矩形图片贴到矩形模型上，本文将介绍：在不裁剪图片的情况下，将正方形的图片贴到圆形模型上。

​ 思考：实数区间 [0, 1] 与 [0, 2] 的元素可以建立一一映射关系么？答案是肯定的，如：y=2x、y=2x^2、y=2*ex/e^2、y=2ln(x+1)/ln2、y=2sin(π/2*x) 等等，其中 x∈[0, 1]，y∈[0, 2]。

​ 同理，在二维平面上，也可以构造一个函数，使得正方形上的点与圆形上的点一一对应。映射的构建如下图：

​ 原图如下：

​ 映射如下：

​

​ 读者如果对 OpenGL ES 不太熟悉，请回顾以下内容：

• 绘制三角形
• 绘制立方体
• MVP矩阵变换
• 纹理贴图

​ 本文完整代码资源见→【OpenGL ES】正方形图片贴到圆形上

​ 项目目录如下：

2 案例

​ MainActivity.java

package com.zhyan8.squaretocircle.activity;

import android.opengl.GLSurfaceView;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.zhyan8.squaretocircle.opengl.MyGLSurfaceView;
import com.zhyan8.squaretocircle.opengl.MyRender;

public class MainActivity extends AppCompatActivity {
    private GLSurfaceView mGlSurfaceView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mGlSurfaceView = new MyGLSurfaceView(this);
        setContentView(mGlSurfaceView);
        mGlSurfaceView.setRenderer(new MyRender(this));
    }

    @Override
    protected void onResume() {
        super.onResume();
        mGlSurfaceView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mGlSurfaceView.onPause();
    }
}

​ MyGLSurfaceView.java

package com.zhyan8.squaretocircle.opengl;

import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;

public class MyGLSurfaceView extends GLSurfaceView {
    public MyGLSurfaceView(Context context) {
        super(context);
        setEGLContextClientVersion(3);
    }

    public MyGLSurfaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setEGLContextClientVersion(3);
    }
}

​ MyRender.java

package com.zhyan8.squaretocircle.opengl;

import android.content.Context;
import android.opengl.GLES30;
import android.opengl.GLSurfaceView;
import com.zhyan8.squaretocircle.model.Model;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

public class MyRender implements GLSurfaceView.Renderer {
    private Context mContext;
    private Model mModel;
    private int mProgramId;

    public MyRender(Context context) {
        mContext = context;
        mModel = new Model();
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) {
        //设置背景颜色
        GLES30.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        //创建程序id
        mProgramId = mModel.onModelCreate(mContext.getResources());
        GLES30.glUseProgram(mProgramId);
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        //设置视图窗口
        GLES30.glViewport(0, 0, width, height);
        mModel.onModelChange(width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        //将颜色缓冲区设置为预设的颜色
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);
        //启用顶点的数组句柄
        GLES30.glEnableVertexAttribArray(0);
        GLES30.glEnableVertexAttribArray(1);
        //绘制模型
        mModel.onModelDraw();
        //禁止顶点数组句柄
        GLES30.glDisableVertexAttribArray(0);
        GLES30.glDisableVertexAttribArray(1);
    }
}

​ Model.java

package com.zhyan8.squaretocircle.model;

import android.content.res.Resources;
import android.graphics.Point;
import android.opengl.GLES30;
import com.zhyan8.squaretocircle.R;
import com.zhyan8.squaretocircle.utils.ArraysUtils;
import com.zhyan8.squaretocircle.utils.ShaderUtils;
import com.zhyan8.squaretocircle.utils.TextureUtils;
import java.nio.FloatBuffer;

public class Model {
    private static final int ROW_NUM = 60; // 纹理行数
    private static final int COL_NUM = 60; // 纹理列数
    private static final float ROW_WIDTH = 1.0f / ROW_NUM; // 每行宽度
    private static final float COL_WIDTH = 1.0f / COL_NUM; // 每列宽度
    private static final float SCALE = 1.0f; // 模型缩放系数
    private static final int TEXTURE_DIMENSION = 2; // 纹理坐标维度
    private static final int VERTEX_DIMENSION = 3; // 顶点坐标维度
    private static final double EPSILON = 0.00000000001; // epsilon，比较小的浮点常量
    private MyTransform mTransform = new MyTransform();
    private float[][] mTextures;
    private float[][] mVertices;
    private FloatBuffer[] mTexturesBuffers;
    private FloatBuffer[] mVerticesBuffers;
    private int mTextureId;
    private int mProgramId;
    private int mPointNumPerRow;

    public Model() {
        mPointNumPerRow = (COL_NUM + 1) * 2;
        mTextures = new float[ROW_NUM][mPointNumPerRow * TEXTURE_DIMENSION];
        mVertices = new float[ROW_NUM][mPointNumPerRow * VERTEX_DIMENSION];
        mTexturesBuffers = new FloatBuffer[ROW_NUM];
        mVerticesBuffers = new FloatBuffer[ROW_NUM];
    }

    // 模型创建
    public int onModelCreate(Resources resources) {
        getTexture();
        getVertex();
        for (int i = 0; i < ROW_NUM; i++) {
            mTexturesBuffers[i] = ArraysUtils.getFloatBuffer(mTextures[i]);
            mVerticesBuffers[i] = ArraysUtils.getFloatBuffer(mVertices[i]);
        }
        mProgramId = ShaderUtils.createProgram(resources, R.raw.vertex_shader, R.raw.fragment_shader);
        Point bitmapSize = new Point();
        mTextureId = TextureUtils.loadTexture(resources, R.raw.zzz, bitmapSize);
        mTransform.onTransformCreate(mProgramId, bitmapSize);
        return mProgramId;
    }

    // 模型参数变化
    public void onModelChange(int width, int height) {
        mTransform.onTransformChange(width, height);
    }

    // 模型绘制
    public void onModelDraw() {
        mTransform.onTransformExecute();
        for (int i = 0; i < ROW_NUM; i++) { // 一行一行绘制纹理
            //准备顶点坐标和纹理坐标
            GLES30.glVertexAttribPointer(0, VERTEX_DIMENSION, GLES30.GL_FLOAT, false, 0, mVerticesBuffers[i]);
            GLES30.glVertexAttribPointer(1, TEXTURE_DIMENSION, GLES30.GL_FLOAT, false, 0, mTexturesBuffers[i]);
            //激活纹理
            GLES30.glActiveTexture(GLES30.GL_TEXTURE);
            //绑定纹理
            GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureId);
            //绘制贴图
            GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, mPointNumPerRow);
//            GLES30.glDrawArrays(GLES30.GL_LINE_STRIP, 0, mPointNumPerRow);
        }
    }

    // 计算纹理坐标
    private void getTexture() {
        for (int i = 0; i < ROW_NUM; i++) {
            int index = 0;
            float y1 = i * ROW_WIDTH;
            float y2 = y1 + ROW_WIDTH;
            float x = 0;
            for (int j = 0; j <= COL_NUM; j++) {
                mTextures[i][index++] = x;
                mTextures[i][index++] = y1;
                mTextures[i][index++] = x;
                mTextures[i][index++] = y2;
                x += COL_WIDTH;
            }
        }
    }

    // 计算顶点坐标
    private void getVertex() {
        for (int i = 0; i < ROW_NUM; i++) {
            int index = 0;
            for (int j = 0; j < mTextures[i].length; j += TEXTURE_DIMENSION) {
                float[] pos = getPosInWorldAxis(mTextures[i][j], mTextures[i][j + 1]);
                textureVertexMapping(pos);
                mVertices[i][index++] = pos[0] * SCALE;
                mVertices[i][index++] = pos[1] * SCALE;
                mVertices[i][index++] = pos[2] * SCALE;
            }
        }
    }

    // 纹理坐标映射到顶点坐标
    private void textureVertexMapping(float[] pos) {
        float x = Math.abs(pos[0]);
        float y = Math.abs(pos[1]);
        double norm = Math.sqrt(x * x + y * y);
        if (norm < EPSILON) {
            return;
        }
        double normX = pos[0] / norm; // 归一化坐标
        double normY = pos[1] / norm; // 归一化坐标
        double rate = x > y ? y / x : x / y; // 短边与长边的比率
        double dist = Math.sqrt(1 + rate * rate); // 圆心到正方形边上的距离
        double factor = norm / dist; // 相对位置缩放因子
//        double adjustNorm = adjustDist(norm);
//        double adjustDist = adjustDist(dist);
//        double factor = adjustNorm / adjustDist; // 相对位置缩放因子
        pos[0] = (float) (normX * fun(factor));
        pos[1] = (float) (normY * fun(factor));
    }

    // 调整距离
    private double adjustDist(double dist) {
        if (dist < 1) return dist;
        double rest = dist - 1;
        double more = rest / 2;
        return 1 + more;
    }

    // 因子变换函数
    private double fun(double x) {
        return x;
//        return Math.sqrt(x);
//        return Math.pow(x, 0.3);
//        return Math.log(x + 1) / Math.log(2);
//        return Math.log10(x + 1) / Math.log10(2);
//        return Math.sin(Math.PI / 2 * x);
    }

    //纹理坐标转换为世界坐标
    private float[] getPosInWorldAxis(float x, float y) {
        float [] pos = new float[VERTEX_DIMENSION];
        pos[0] = x * 2 - 1;
        pos[1] = 1 - y * 2;
        pos[2] = 0f;
        return pos;
    }
}

​ MyTransform.java

package com.zhyan8.squaretocircle.model;

import android.graphics.Point;
import android.opengl.GLES30;
import android.opengl.Matrix;

public class MyTransform {
    private int mProgramId;
    private Point mBitmapSize;
    private Point mViewSize;
    private int mMvpMatrixHandle;
    private float[] mMvpMatrix = new float[16];

    public void onTransformCreate(int programId, Point bitmapSize) {
        mProgramId = programId;
        mBitmapSize = bitmapSize;
        mMvpMatrixHandle = GLES30.glGetUniformLocation(mProgramId, "mvpMatrix");
    }

    public void onTransformChange(int width, int height) {
        mViewSize = new Point(width, height);
    }

    //调整图片宽高适配屏幕尺寸
    public void onTransformExecute() {
        int mapWidth = mBitmapSize.x;
        int mapHeight = mBitmapSize.y;
        float mapRatio = mapWidth / (float) mapHeight;
        float ratio = mViewSize.x / (float) mViewSize.y;
        float w = 1.0f;
        float h = 1.0f;
        if (mapRatio > ratio) { //宽度最大，高度适配
            h = mapRatio / ratio;
        } else { //高度最大，宽度适配
            w = ratio / mapRatio;
        }
        Matrix.orthoM(mMvpMatrix, 0, -w, w, -h, h,-1, 1);
        GLES30.glUniformMatrix4fv(mMvpMatrixHandle, 1, false, mMvpMatrix, 0);
    }
}

​ ShaderUtils.java

package com.zhyan8.squaretocircle.utils;

import android.content.res.Resources;
import android.opengl.GLES30;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;

public class ShaderUtils {
    //创建程序id
    public static int createProgram(Resources resources, int vertexShaderResId, int fragmentShaderResId) {
        final int vertexShaderId = compileShader(resources, GLES30.GL_VERTEX_SHADER, vertexShaderResId);
        final int fragmentShaderId = compileShader(resources, GLES30.GL_FRAGMENT_SHADER, fragmentShaderResId);
        return linkProgram(vertexShaderId, fragmentShaderId);
    }

    //通过外部资源编译着色器
    private static int compileShader(Resources resources, int type, int shaderId){
        String shaderCode = readShaderFromResource(resources, shaderId);
        return compileShader(type, shaderCode);
    }

    //通过代码片段编译着色器
    private static int compileShader(int type, String shaderCode){
        int shader = GLES30.glCreateShader(type);
        GLES30.glShaderSource(shader, shaderCode);
        GLES30.glCompileShader(shader);
        return shader;
    }

    //链接到着色器
    private static int linkProgram(int vertexShaderId, int fragmentShaderId) {
        final int programId = GLES30.glCreateProgram();
        //将顶点着色器加入到程序
        GLES30.glAttachShader(programId, vertexShaderId);
        //将片元着色器加入到程序
        GLES30.glAttachShader(programId, fragmentShaderId);
        //链接着色器程序
        GLES30.glLinkProgram(programId);
        return programId;
    }

    //从shader文件读出字符串
    private static String readShaderFromResource(Resources resources, int shaderId) {
        InputStream is = resources.openRawResource(shaderId);
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line;
        StringBuilder sb = new StringBuilder();
        try {
            while ((line = br.readLine()) != null) {
                sb.append(line);
                sb.append("\n");
            }
            br.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return sb.toString();
    }
}

​ TextureUtils.java

package com.zhyan8.squaretocircle.utils;

import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.opengl.GLES30;
import android.opengl.GLUtils;

public class TextureUtils {
    //加载纹理贴图
    public static int loadTexture(Resources resources, int resourceId, Point bitmapSize) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false;
        Bitmap bitmap = BitmapFactory.decodeResource(resources, resourceId, options);
        bitmapSize.set(bitmap.getWidth(), bitmap.getHeight());
        final int[] textureIds = new int[1];
        // 生成纹理id
        GLES30.glGenTextures(1, textureIds, 0);
        // 绑定纹理到OpenGL
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureIds[0]);
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_LINEAR_MIPMAP_LINEAR);
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR);
        // 加载bitmap到纹理中
        GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0);
        // 生成MIP贴图
        GLES30.glGenerateMipmap(GLES30.GL_TEXTURE_2D);
        // 取消绑定纹理
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0);
        return textureIds[0];
    }
}

​ ArraysUtils.java

package com.zhyan8.squaretocircle.utils;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class ArraysUtils {
    public static FloatBuffer getFloatBuffer(float[] floatArr) {
        FloatBuffer fb = ByteBuffer.allocateDirect(floatArr.length * Float.BYTES)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer();
        fb.put(floatArr);
        fb.position(0);
        return fb;
    }
}

​ vertex_shader.glsl

#version 300 es
layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec2 aTextureCoord;
uniform mat4 mvpMatrix;
out vec2 vTexCoord;
void main() {
     gl_Position  = mvpMatrix * vPosition;
     vTexCoord = aTextureCoord;
}

​ 顶点着色器的作用：进行矩阵变换位置、根据光照公式计算顶点颜⾊、⽣成 / 变换纹理坐标，并且把位置和纹理坐标发送到片元着色器。

​ 顶点着色器中，如果没有指定默认精度，则 int 和 float 的默认精度都为 highp。

​ fragment_shader.glsl

#version 300 es
precision mediump float;
uniform sampler2D uTextureUnit;
in vec2 vTexCoord;
out vec4 fragColor;
void main() {
     fragColor = texture(uTextureUnit,vTexCoord);
}

​ 片元着色器的作用：处理经光栅化阶段生成的每个片元，计算每个像素的颜色和透明度。

​ 在片元着色器中，浮点值没有默认的精度值，每个着色器必须声明一个默认的 float 精度。

3 运行效果

​ 1）因子变换函数：y=x

​

​ 2）因子变换函数：y=sqrt(x)

​

​ 3）因子变换函数：y=log10(1+x)/log10(2)

​

​ 4）因子变换函数：y=sin(πx/2)

​

​ 5）因子变换函数：y=x，对距离进行调整

​ 鉴于以上图片头发都鼓起一个大包，对距离进行调整，如下：

double adjustNorm = adjustDist(norm);
double adjustDist = adjustDist(dist);
double factor = adjustNorm / adjustDist; // 相对位置缩放因子

// 调整距离
private double adjustDist(double dist) {
    if (dist < 1) return dist;
    double rest = dist - 1;
    double more = rest / 2;
    return 1 + more;
}

​ 效果如下：

​

​ 虽然头发也有个小包，但比前面4种方案小了很多。

​ 声明：本文转自【OpenGL ES】正方形图片贴到圆形上