0.前言
最近在做游戏，所以博客就改成双周更了。诚恳的地说，我不是一个火影迷，初中的时候看了几集，高中的时候看了几集，然后就拉倒了。我觉得嘴遁鸣人的螺旋丸挺不错的，今天准备做一个9.9元包邮版螺旋丸。看效果图
1.分析
1.1这个球是个立体的
立体的话这里采用opengl es进行实现
1.2球分三层
最里面是白色，碗面浅蓝，再者更蓝，最后是白色线段框架
1.3球要旋转
螺旋丸螺旋丸，自然得转圈了
2.代码
2.1绘制球体
HelicalCircle是主体，包括program和shader的创建，球坐标的创建，最后的绘制
2.1.1准备球体坐标
private fun preparePosList() {
var x0 = 0f
var y0 = 0f
var z0 = radius
var x1 = 0f
var y1 = 0f
var z1 = radius
val h = 360 / precision
val v = 360 / precision
for (i in 0 until h) {
val arc0 = Math.PI / 180 * i * precision
val arc1 = Math.PI / 180 * (i + 1) * precision
y0 = (radius * Math.cos(arc0)).toFloat()
y1 = (radius * Math.cos(arc1)).toFloat()
for (j in 0 until v) {
val arc = Math.PI / 180 * j * precision
x0 = (radius * Math.sin(arc0) * sin(arc)).toFloat()
z0 = (radius * Math.sin(arc0) * cos(arc)).toFloat()
x1 = (radius * Math.sin(arc1) * sin(arc)).toFloat()
z1 = (radius * Math.sin(arc1) * cos(arc)).toFloat()
posList.add(x0)
posList.add(y0)
posList.add(z0)
posList.add(x1)
posList.add(y1)
posList.add(z1)
}
}
pos= posList.toFloatArray()
}
复制代码这段代码生成了一个float数组，就是每个球体上点的坐标。这里采用的是球坐标，原理很简单，你可以把球体横向按照precision为梯度进行横切，然后每个切面也按照precision进行竖切，每个点的坐标计算出来后添加进一个List然后转换为float数组。
2.1.2准备program和shader
private val vertexSlgl="#version 300 es\n" +
"\n" +
"layout(location=0) in vec3 pos;\n" +
"uniform mat4 model;\n" +
"uniform mat4 view;\n" +
"uniform mat4 projection;\n" +
"void main()\n" +
"{\n" +
" gl_Position=projection*view*model*vec4(pos,1.0);\n" +
"}"
private val fragmentSlgl="#version 300 es\n" +
"precision mediump float;\n" +
"uniform vec4 aColor;\n" +
"out vec4 fragColor;\n" +
"void main()\n" +
"{\n" +
" fragColor=aColor;\n" +
"}"
private fun prepareProgram()
{
programId = createProgram(vertexSlgl, fragmentSlgl)
val vaoArray = IntArray(1)
GLES30.glGenVertexArrays(1, vaoArray, 0)
VAO = vaoArray[0]
GLES30.glBindVertexArray(VAO)
val vboArray = IntArray(1)
GLES30.glGenBuffers(1, vboArray, 0)
VBO = vboArray[0]
GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, VBO)
val posBuffer = ByteBuffer.allocateDirect(4 * pos.size).order(ByteOrder.nativeOrder()).asFloatBuffer()
posBuffer.put(pos)
posBuffer.position(0)
GLES30.glBufferData(GLES30.GL_ARRAY_BUFFER, 4 * pos.size, posBuffer, GLES30.GL_STATIC_DRAW)
GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 3 * 4, 0)
GLES30.glEnableVertexAttribArray(0)
}
private fun createProgram(vertexSource: String, fragmentSource: String): Int {
val vertexShader = createShader(GLES30.GL_VERTEX_SHADER, vertexSource)
val fragmentShader = createShader(GLES30.GL_FRAGMENT_SHADER, fragmentSource)
return createProgram(vertexShader, fragmentShader)
}
private fun createShader(type: Int, source: String): Int {
val shaderId = GLES30.glCreateShader(type)
if (shaderId <= 0) {
Log.d(TAG, "create shader failed")
}
GLES30.glShaderSource(shaderId, source)
GLES30.glCompileShader(shaderId)
val status = IntArray(1)
GLES30.glGetShaderiv(shaderId, GLES30.GL_COMPILE_STATUS, status, 0)
if (status[0] <= 0) {
Log.d(TAG, "compile shader failed")
val infoLog = GLES30.glGetShaderInfoLog(shaderId)
Log.d(TAG, infoLog)
GLES30.glDeleteShader(shaderId)
}
return shaderId
}
private fun createProgram(vertexShader: Int, fragmentShader: Int): Int {
val programId = GLES30.glCreateProgram()
if (programId <= 0) {
Log.d(TAG, "create program failed")
}
GLES30.glAttachShader(programId, vertexShader)
GLES30.glAttachShader(programId, fragmentShader)
GLES30.glLinkProgram(programId)
val status = IntArray(1)
GLES30.glGetProgramiv(programId, GLES30.GL_LINK_STATUS, status, 0)
if (status[0] <= 0) {
Log.d(TAG, "link program failed")
val infoLog = GLES30.glGetProgramInfoLog(programId)
Log.d(TAG, infoLog)
}
return programId
}
复制代码这段代码就是创建shader和program，很简单，没什么可说的。
2.1.2绘制
fun draw(aspect:Float,r:Float=0.0f,g:Float=0.0f,b:Float=1.0f,a:Float=0.5f,scale:Float=1.0f)
{
degree+=10
GLES30.glUseProgram(programId)
val colorLocation=GLES30.glGetUniformLocation(programId,"aColor")
GLES30.glUniform4f(colorLocation,r,g,b,a)
val modelMatrixLocation=GLES30.glGetUniformLocation(programId,"model")
Matrix.setIdentityM(modelMatrix,0)
Matrix.scaleM(modelMatrix,0,scale,scale,scale)
Matrix.rotateM(modelMatrix,0, Math.toRadians(degree).toFloat(),0f,1f,0f)
GLES30.glUniformMatrix4fv(modelMatrixLocation,1,false,modelMatrix,0)
val viewMatrixLocation=GLES30.glGetUniformLocation(programId,"view")
Matrix.setLookAtM(viewMatrix,0,0f,0f,10f,0f,0f,0f,0f,1f,0f)
GLES30.glUniformMatrix4fv(viewMatrixLocation,1,false,viewMatrix,0)
val projectionMatrixLocation=GLES30.glGetUniformLocation(programId,"projection")
Matrix.perspectiveM(projectionMatrix,0,45.0f, aspect,0.1f,100f)
GLES30.glUniformMatrix4fv(projectionMatrixLocation,1,false,projectionMatrix,0)
GLES30.glDrawArrays(model,0,pos.size / 3)
}
}
复制代码绘制球体，设置球体颜色和缩放程度
2.HelicalCircleRender
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
helicalCircle.prepare()
}
override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
GLES30.glViewport(0, 0, width, height)
screenWidth = width.toFloat()
screenHeight = height.toFloat()
}
override fun onDrawFrame(gl: GL10?) {
GLES30.glEnable(GLES30.GL_BLEND)
GLES30.glClearColor(0f,0f,0f,1.0f)
GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT or GLES30.GL_DEPTH_BUFFER_BIT)
val aspect=screenWidth / screenHeight
GLES30.glDisable(GLES30.GL_DEPTH_TEST)
helicalCircle.model=GLES30.GL_TRIANGLE_STRIP
helicalCircle.draw(aspect,r=0.67f,g=0.85f,b=0.98f,a=0.5f,scale = 0.99f*scale)
helicalCircle.draw(aspect,r=0.85f,g=0.96f,b=0.99f,a=0.5f,scale= 0.5f*scale)
helicalCircle.draw(aspect,r=0.97f,g=1.0f,b=0.99f,a=0.5f,scale= 0.3f*scale)
GLES30.glEnable(GLES30.GL_DEPTH_TEST)
helicalCircle.model=GLES30.GL_LINE_STRIP
helicalCircle.draw(aspect,r=1.0f,g=1.0f,b=1.0f,a=0.2f,scale = 0.998f*scale)
}
复制代码onSurfaceCreated里进行球坐标的计算和program以及shader的准备，在onDrawFrame里绘制三个球
2.3旋转
override fun onTouchEvent(event: MotionEvent?): Boolean {
when(event?.action)
{
MotionEvent.ACTION_DOWN->{
touchX=event.x
}
MotionEvent.ACTION_MOVE->{
val scaleOffset=(event.x-touchX)/width
render.scale+=scaleOffset
touchX=event.x
}
}
return true
}
复制代码复写HelicalCircleView的onTouchEvent方法，通过修改HelicalCircleRender的scale来对球体进行缩放。
3源码
关注我的公众号
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
