Android利用OpenGLES绘制天空盒实例教程

前言

天空盒这个效果最早是在腾讯的实景地图里看到的,当时觉得很牛逼,但是没有想过自己去实现以下。最近这段时间对opengl很有兴趣,顺便就搞了这个天空盒,话不多说,先上效果。

天空盒的原理就是在三维空间中放置一个正方体,然后将我们的相机放置在正方体内,当我们的视点转动,相机跟着转动。我们就可以看到相应的景色的变换了,天空盒本质上是一个立方体。

OpenGL

关于什么是OpenGL,什么是OpenGLES就不细说了,不了解的就自行百度吧,我们主要是关注代码。整个项目采用了Kotlin + Ndk的形式进行的开发。现在NDK的环境搭建比以前容易了,而且现在是使用CMakeList来构建C++代码的,不熟悉的可以去查看一下。整个项目就两个关键类,SkyBoxView和SkyBoxRender。下面分别来看一下。

第一步

SkyBoxView继承了GLSurfaceView,为什么要继承GLSurfaceView,因为在使用OpenGLES需要建立一个窗口和一个上下文,GLSurfaceView帮我们做了这些工作。下面是SkyBoxView的主要代码:

class SkyBoxView(context: Context, attributeSet: AttributeSet?) : GLSurfaceView(context, attributeSet)
{

private lateinit var skyBoxRender: SkyBoxRender

private var lastX=0F

private var lastY=0F

private var yaw=0f

private var pitch=0f

private var screenWidth=0

private var screenHeight=0

private var horSensity=0.03f

private var verSensity=0.03f

constructor(context: Context) : this(context, null)

init
{
// initSensor()
 initSensity()
 initConfig()
}

private fun initSensity()
{
 screenWidth=resources.displayMetrics.widthPixels
 screenHeight=resources.displayMetrics.heightPixels
 horSensity= 360.0f/screenWidth
 verSensity=180.0f/screenHeight
}

private fun rotate(pitch:Float,yaw:Float)
{
 queueEvent {

 skyBoxRender.rotate(pitch,yaw)
 }
}
private fun initConfig()
{
 setEGLContextClientVersion(3)
 skyBoxRender=SkyBoxRender(context)
 setRenderer(skyBoxRender)
 renderMode = GLSurfaceView.RENDERMODE_CONTINUOUSLY

}

override fun onTouchEvent(event: MotionEvent?): Boolean
{
 when(event?.action)
 {
 MotionEvent.ACTION_DOWN->
 {
  lastX=event.x
  lastY=event.y
  return true
 }

 MotionEvent.ACTION_MOVE->
 {
  val offsetX=event.x-lastX
  val offsetY=lastY-event.y
  yaw+=offsetX*horSensity
  pitch+=offsetY*verSensity
  lastX=event.x
  lastY=event.y
  skyBoxRender.rotate(pitch,yaw)
 }
 }

 return true
}
}

在initConfig方法里,设置了render为SkyBoxRender,真正的绘制是在这里进行的。在initSensity方法里设置了旋转精度, horSensity和verSensity,水平和数值旋转时的精度,就像你玩fps游戏设置的鼠标灵敏度一样。在onTouchEvent则根据手指滑动的距离设置俯仰角pitch和偏移脚yaw,调用skyBoxRender进行相机的旋转。另外如果你看github可能发现我注释掉了很多代码,那是用传感器旋转的尝试,但是觉得麻烦,也没继续做,有兴趣的读者可以自己搞一下。

第二步

SkyboxRender的主要工作就是加载贴在正方体表面的6个图片纹理,从文件读取着色器语言,而真正创建opengles program和绘制是用C++代码来写的,所以主要看一下这里。

#include <jni.h>
#include <string>
#include <GLUtils/GLUtils.h>
#include <glm/glm.hpp>
#include <glm/gtc/type_ptr.hpp>
#include <glm/gtc/matrix_transform.hpp>

extern "C" {

JNIEXPORT jint JNICALL
Java_com_skateboard_skybox_SkyBoxRender_genProgram(JNIEnv *env, jobject thiz, jstring vertexPath,
      jstring fragmentPath) {
//load program
const char *cVertexPath = env->GetStringUTFChars(vertexPath, nullptr);
const char *cFragmentPath = env->GetStringUTFChars(fragmentPath, nullptr);
int program = glutils::loadProgram(cVertexPath, cFragmentPath);
return program;

}

JNIEXPORT jint JNICALL
Java_com_skateboard_skybox_SkyBoxRender_preparePos(JNIEnv *env, jobject thiz, jfloatArray pos) {
//gen vao vbo

unsigned int VAO, VBO;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
int posSize = env->GetArrayLength(pos);
float* p=env->GetFloatArrayElements(pos, nullptr);
glBufferData(GL_ARRAY_BUFFER, posSize* sizeof(float), p,
  GL_STATIC_DRAW);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), 0);
glBindVertexArray(0);
return VAO;
}

JNIEXPORT jint JNICALL
Java_com_skateboard_skybox_SkyBoxRender_prepareTexture(JNIEnv *env, jobject thiz) {
//gen texture
unsigned int TEXTURE;
glGenTextures(1, &TEXTURE);
glBindTexture(GL_TEXTURE_CUBE_MAP, TEXTURE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
return 1;
}

glm::vec3 cameraPos = glm::vec3(0.0f, 0.0f, 0.0f);
glm::vec3 cameraFront = glm::vec3(0.0f, 0.0f, -1.0f);

 JNIEXPORT void JNICALL
Java_com_skateboard_skybox_SkyBoxRender_draw(JNIEnv *env, jobject thiz, jint program, jint VAO,
      jint texture,jfloat width,jfloat height) {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glClearColor(0.0, 1.0, 0.0, 1.0);
glUseProgram(program);

glEnable(GL_DEPTH_TEST);
glm::mat4 viewMatrix = glm::mat4(1.0f);
glm::mat4 projectionMatrix = glm::mat4(1.0f);
glm::vec3 v = glm::vec3(cameraFront.x - cameraPos.x, cameraFront.y - cameraPos.y,
   cameraFront.z - cameraPos.z);
viewMatrix = glm::lookAt(cameraPos, v, glm::vec3(0.0f, 1.0f, 0.0f));
projectionMatrix = glm::perspective(glm::radians(45.0f), width / height, 0.1f,
     100.0f);
int viewMatrixLocation = glGetUniformLocation(program, "view");
int projectMatrixLocation = glGetUniformLocation(program, "projection");
glUniformMatrix4fv(viewMatrixLocation, 1, GL_FALSE, &viewMatrix[0][0]);
glUniformMatrix4fv(projectMatrixLocation, 1, GL_FALSE, &projectionMatrix[0][0]);

glBindVertexArray(VAO);
glBindTexture(GL_TEXTURE_CUBE_MAP, texture);
glDrawArrays(GL_TRIANGLES, 0, 36);
}
JNIEXPORT void JNICALL
Java_com_skateboard_skybox_SkyBoxRender_rotate(JNIEnv *env, jobject thiz,jfloat pitch,jfloat yaw) {

if(pitch>89)
{
 pitch=89.0;
}
if(pitch<-89)
{
 pitch=-89.0;
}
cameraFront.x=glm::cos(glm::radians(pitch))*glm::cos(glm::radians(yaw));
cameraFront.y=glm::sin(glm::radians(pitch));
cameraFront.z=glm::cos(glm::radians(pitch))*glm::sin(glm::radians(yaw));
cameraFront=glm::normalize(cameraFront);
}

}

genProgram主要是用来产生opengl es的program的,如果对这个概念不太理解请参考C++编译过程。

preparePos是将java层顶点位置数组传入进来并写入顶点着色器。

prepareTexture用来生成纹理。

draw用来进行绘制。

旋转的时候就是通过改变cameraFront的单位向量的方向来做到的。

源码下载

最后附上

github (本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Android OpenGLES2.0等腰直角三角形和彩色的三角形(三)

    上一篇博客中我们已经绘制出了一个直角三角形,虽然我们相对于坐标,我们设置的直角三角形的两腰是相等的,但是实际上展示出来的却并不是这样,虽然通过计算,我们可以把三角形的两腰计算一下比例,使它们在坐标上不等,但是现实出来相等,但是当绘制的图形比较复杂的话,这个工作量对我们来说实在太庞大了.那么我们怎么做呢?答案是,使用变换矩阵,把计算交给OpenGL. 矩阵 在数学中,矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合 ,最早来自于方程组的系数及常数所构成的方阵.这一概念由19世纪英国数学家

  • Android OpenGLES2.0绘制三角形(二)

    选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提到的,点.线.三角形是OpenGL ES世界的图形基础.无论多么复杂的几何物体,在OpenGL ES的世界里都可以用三角形拼成.关于Android OpenGL ES 三角形的绘制,在Android官方文档中有详细的说明和步骤,本文实例也是依照官方文档步骤绘制的三角形. 步骤 依照官方文档中的说明,Android中利用OpenGL ES 2.0绘制三角形的步骤为: 1. 在AndroidManifest.xml文件中设置使用

  • 了解Android OpenGLES2.0(一)

    什么是OpenGL ES? OpenGL(全写Open Graphics Library)是指定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. OpenGL在不同的平台上有不同的实现,但是它定义好了专业的程序接口,不同的平台都是遵照该接口来进行实现的,思想完全相同,方法名也是一致的,所以使用时也基本一致,只需要根据不同的语言环境稍有不同而已.OpenGL这套3D图形API从1992年发布的1.0版本到目前最新20

  • Android OpenGLES如何给相机添加滤镜详解

    滤镜介绍 目前市面上的滤镜有很多,但整体归类也就几样,都是在fragment shader中进行处理.目前滤镜最常用的就是 lut滤镜以及调整RGB曲线的滤镜了.其他的类型变更大同小异. 动态滤镜的构建 为了实现动态下载的滤镜,我们接下来实现一套滤镜的json参数,主要包括滤镜类型.滤镜名称.vertex shader.fragment shader 文件.统一变量列表.与统一变量绑定的纹理图片.默认滤镜强度.是否带纹理宽高偏移量.音乐路径.音乐是否循环播放等参数. json 以及各个字段的介绍

  • Android利用OpenGLES绘制天空盒实例教程

    前言 天空盒这个效果最早是在腾讯的实景地图里看到的,当时觉得很牛逼,但是没有想过自己去实现以下.最近这段时间对opengl很有兴趣,顺便就搞了这个天空盒,话不多说,先上效果. 天空盒的原理就是在三维空间中放置一个正方体,然后将我们的相机放置在正方体内,当我们的视点转动,相机跟着转动.我们就可以看到相应的景色的变换了,天空盒本质上是一个立方体. OpenGL 关于什么是OpenGL,什么是OpenGLES就不细说了,不了解的就自行百度吧,我们主要是关注代码.整个项目采用了Kotlin + Ndk的

  • Android利用HelloChart绘制曲线

    本文实例为大家分享了Android利用HelloChart绘制曲线的具体代码,供大家参考,具体内容如下 1.将jar包放到app下的libs文件夹中 2.build.gradle(app): implementation files('libs\\hellocharts-library-1.5.8.jar') 3.MainActivity.java package com.dj.drawlinestest; import android.graphics.Color; import androi

  • Android利用Andserver搭建服务器的详细教程

    效果 需求   在手机上有一个功能,但是需要使用电脑控制什么时候开始这个功能,然后上网搜索,找到了AndServer可以满足要求,我只是实现了简单的功能,如果感兴趣的话,可以深入的研究一下. 地址如下:https://github.com/yanzhenjie/AndServer 1.步骤引入 implementation 'com.yanzhenjie:andserver:1.0.2' 2.申请权限 <uses-permission android:name="android.permi

  • Python利用matplotlib绘制散点图的新手教程

    前言 上篇文章介绍了使用matplotlib绘制折线图,参考:https://www.jb51.net/article/198991.htm,本篇文章继续介绍使用matplotlib绘制散点图. 一.matplotlib绘制散点图 # coding=utf-8 import matplotlib.pyplot as plt years = [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019] turnovers =

  • Android利用MPAndroidChart绘制曲线图表的基础教程

    前言 最近看了一下 Android 上的图表控件,去年做过一款应用也已上架了,也用到了图表控件,但是只是按照官方 demo 集成了,并没有过多的研究. 我最近基本上是面向 Github 编程了,拿别人造好的轮子拿来用,不能直接用的就改改再用,实在不好实现的就劝说产品去改需求,基本这是个套路. 既然是图表控件,就上 github 一番搜索,关键字 chart,按照 java 一筛选,再按照 start 数量排序,由高到低.基本上 start 从高到低的图表控件就是 MPAndroidChart.h

  • 利用d3.js力导布局绘制资源拓扑图实例教程

    前言 最近公司业务服务老出bug,各路大佬盯着链路图找问题找的头昏眼花.某天大佬丢了一张图过来"我们做一个资源拓扑图吧,方便大家找bug". 就是这个图,应该是马爸爸家的 好吧,来仔细瞧瞧这个需求咋整呢.一圈资源围着一个中心的一个应用,用曲线连接起来,曲线中段记有应用与资源间的调用信息.emmm 这个看起来很像女神在遛一群舔狗... 啊不,是 d3.js 力导向图! d3.js 力导向图 d3.js 是著名的数据可视化基础工具,他提供了基本的将数据映射至网页元素的能力,同时封装了大量实

  • Android利用ViewPager实现滑动广告板实例源码

    •android-support-v4.jar,这是谷歌官方给我们提供的一个兼容低版本Android设备的软件包,里面包囊了只有在Android3.0以上可以使用的api.而ViewPager就是其中之一,利用它我们可以做很多事情,从最简单的导航,到页面切换菜单等等. •ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样. •本Demo向大家演示ViewPager的使用,并在用户未滑动View时,每隔5s钟自动切换到下一个View(循环切换),而当用户有Touch到Vi

  • Android App中使用ListFragment的实例教程

    ListFragment继承于Fragment.因此它具有Fragment的特性,能够作为activity中的一部分,目的也是为了使页面设计更加灵活. 相比Fragment,ListFragment的内容是以列表(list)的形式显示的.ListFragment的布局默认包含一个ListView.因此,在ListFragment对应的布局文件中,必须指定一个 android:id 为 "@android:id/list" 的ListView控件! ListFragment基础使用 下面

  • 自定义View之kotlin绘制折线图实例教程

    什么是Kotlin Kotlin,它是JetBrains开发的基于JVM的面向对象的语言.2017年的时候被Google推荐Android的官方语言,同时Android studio 3.0正式支持这门语言,在这个编译器上创建一个Kotlin项目,非常方便,甚至可以Java转为Kotlin. 引言 早上看到有个童鞋在群里面发牢骚,说这个自定义view怎么画,不太会,ok,正好我也没事,那我就花两个小时帮你搞定他吧,先看下他要的效果; 再来看下我实现的效果 实现过程 主要分为x轴和y轴,由效果图可

  • C#利用GDI+画图的基础实例教程

    前言 最近做一个微信公众号服务,有一些简单的图片处理功能.主要就是用户在页面操作,前端做一些立刻显示的效果,然后提交保存时后端真正修改原图. 从程序设计的角度看,GDI包括两部分:一部分是GDI对象,另一部分是GDI函数.GDI对象定义了GDI函数使用的工具和环境变量,而GDI函数使用GDI对象绘制各种图形,在C#中,进行图形程序编写时用到的是GDI+(Graphics Device Interface Plus图形设备接口)版本,GDI+是GDI的进一步扩展,它使我们编程更加方便. C#中的G

随机推荐