几年前写了一篇Android SurfaceView 多线程绘图，多线程计算分形图案绘制到屏幕上，这种并行运算更适合用GPU处理。目前手机GPU有几百乃至上千个ALU运算单元，简单地说，相当于一个几百核的处理器，那么处理速度也就比CPU开启多线程快多了。
那么我们用OpenGL来实现一下，效果如下：
7mgto-qwaih.gif
绘制的这个分形有点像煤气灶 (-_ -)!。不过3D效果很明显，动画也非常流畅，远远不是CPU运算所能比的（有点模糊是录屏设置的，真机效果还是很清晰的）。这已经不是“鸟枪换炮”了，简直就是“鸟枪换火箭”！
来看看代码实现。
Activity相关
在 GLActivity 中添加 GLSurfaceView，设置 Renderer 。
public class GLActivity extends AppCompatActivity {
GLSurfaceView glSurfaceView;
OurCamera ourCamera;
BaseRender render;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
glSurfaceView = new GLSurfaceView(this);
setContentView(glSurfaceView);
glSurfaceView.setEGLContextClientVersion(3);
glSurfaceView.setRenderer(render = new FractorRender());
}
Renderer 实现
创建一个401*401的顶点数组，分配Native内存，绑定VAO和VBO。
float vertices[] = new float[401 * 401 * 2];
int program;
FloatBuffer vertexBuffer;
int[] vao;
IntBuffer intBuffer;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
int p = 0;
for (int i = -200; i <= 200; i++) {
for (int j = -200; j <= 200; j++) {
vertices[p] = i;
vertices[p + 1] = j;
p += 2;
}
}
program = ShaderUtils.loadProgramFractor();
//分配内存空间,每个浮点型占4字节空间
vertexBuffer = ByteBuffer.allocateDirect(vertices.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
//传入指定的坐标数据
vertexBuffer.put(vertices);
vertexBuffer.position(0);
vao = new int[1];
glGenVertexArrays(1, vao, 0);
glBindVertexArray(vao[0]);
int[] vbo = new int[1];
glGenBuffers(1, vbo, 0);
glBindBuffer(GL_ARRAY_BUFFER, vbo[0]);
glBufferData(GL_ARRAY_BUFFER, vertices.length * 4, vertexBuffer, GL_STATIC_DRAW);
}
将顶点坐标按三角形条带方式排列，使用 GL_TRIANGLE_STRIP 方式绘制，效率更高。(如果直接用点方式绘制，点之间空隙太大，无法展示3D图形效果)。
总共有400 * 400个方格子，每个方格子绘制两个三角形，也就是每一帧绘制32万个三角形。
// 用GL_TRIANGLE_STRIP方式把平面上所有点转化成一个三角形条带
public static int[] strip(int w, int h) {
List<Integer> list = new ArrayList<>();
int k = 0;
boolean reverse = false;
for (int j = 0; j < h - 1; j++) {
for (int i = 0; i < w; i++) {
if (reverse) {
int p = j * w + w - 1 - i;
if (i == 0) {
list.add(p);
list.add(p + w);
}
list.add(p + w);
list.add(p);
if (i == w - 1) {
list.add(p);
list.add(p + w);
}
} else {
int p = j * w + i;
list.add(p);
list.add(p + w);
}
}
reverse = !reverse;
}
int[] a = new int[list.size()];
for (int i = 0; i < list.size(); i++) {
a[i] = list.get(i);
}
return a;
}
glDrawElements(GL_TRIANGLE_STRIP, vertices.length, GL_UNSIGNED_INT, 0);
分形计算参数 float[] c绘制每一帧后自动改变，用glUniform2fv方法传给Shader，形成动画效果。
float[] c = {0.225f, 0.01f};
@Override
public void onDrawFrame(GL10 gl) {
// Clear the color buffer
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// Use the program object
glUseProgram(program);
c[0] += 0.0001f;
// c[1] += 0.00001f;
int loc = glGetUniformLocation(program, "c");
glUniform2fv(loc, 1, c, 0);
}
Shader实现
顶点Shader：shader_fractor_v.glsl
根据顶点位置和Render传进来的分形参数 c 计算分形迭代数 k
uniform vec2 c;
vec2 z = vPosition / 200.0;
int k = 0;
for (; k < 63; k++) {
if (z.x * z.x + z.y * z.y > 4.0) break;
z = mul(z,z) + c;
}
网上找一个热度渐变色数组colors，根据 k大小选择不同颜色，并转换成 vec3 格式
// 热度渐变色 64
const int[] colors = int[](-16777216,-16318464,-15859712,-15400960,-14876672,-14417920,-13959168,-13500416,-12976128,-12517376,-12058624,-11599872,-11075584,-10158080,-9240576,-8323072,-7405568,-6488064,-5570560,-4653056,-3735552,-2818048,-1900544,-983040,-65536,-61440,-57088,-52736,-48640,-44288,-39936,-35840,-31488,-27136,-23040,-18688,-14336,-13312,-12032,-11008,-9728,-8704,-7424,-6144,-5120,-3840,-2816,-1536,-256,-235,-214,-193,-171,-150,-129,-108,-86,-65,-44,-23,-1,-1,-1,-1);
layout (location = 0) in vec2 vPosition;
out vec3 aColor;
vec3 generateColor(int k) {
int c = colors[k];
int r = (c >> 16) & 0xff;
int g = (c >> 8) & 0xff;
int b = c & 0xff;
return vec3(float(r)/255.0f, float(g)/255.0f, float(b)/255.0f);
}
片段着色器：shader_fractor_f.glsl
顶点着色器将颜色传给片段着色器展示即可
#version 300 es
precision mediump float;
in vec3 aColor;
out vec4 fragColor;
void main() {
fragColor = vec4(aColor, 1.0);
}
Github
完整代码在SurfacePaint项目的opengles3模块的fractal中
网友评论