OpenGL ES透视投影实现方法(四)

在之前的学习中,我们知道了一个顶点要想显示到屏幕上,它的x、y、z分量都要在[-1,1]之间,我们回顾一下渲染管线的图元装配阶段,它实际上做了以下几件事:剪裁坐标、透视分割、视口变换。图元装配的输入是顶点着色器的输出,抓哟是物体坐标gl_Position,之后到光栅化阶段。

图元装配

剪裁坐标

当顶点着色器写入一个值到gl_Position时,这个点要求必须在剪裁空间中,即它的x、y、z坐标必须在[-w,w]之间,任何这个范围之外的点都是不可见的。

这里需要注意以下,对于attribute类型的属性量。OpenGL会用默认的值替换属性中未指定的分量,前三个分量会被设定为0,最后一个分量w会被设定为1.

站在gl_position的角度来说,[-w,w]之间的坐标点才是可见的,否则都是不可见会被剪裁掉。往前看,在做投影变换的时候我们说,在视景体内的物体有效,视景体外的会被剪裁,实际上是对应的,剪裁就是发生在图元装配阶段判断所有的坐标是否在[-w,w]之间。

剪裁实际上就是判断每一个最小三角形、直线、点单元的坐标是否规范。

透视除法

对上面的剪裁坐标的点的x、y、z坐标除以它的w分量,除以w的坐标叫做归一化设备坐标。如果w分量大,除以w后的点就接近(0,0,0),在三维空间中,距离我们较远的坐标如果它的w分量较大,进行透视除法后,就距离原点越近,原点作为远处物体的消失点,就有三维场景的效果。

视口变换

前面已经使用过视口变换的函数glViewport了,视口是一个而为矩形窗口区域。是OpenGL渲染操作最终显示的地方。

public static native void glViewport(
  int x,
  int y,
  int w,
  int h
 );

从归一化设备坐标(x,y,z)到窗口坐标(X,Y,Z)的转换公式

上面公式中的f和n是如下API设置的

public static native void glDepthRangef(
  float n,
  float f
 );

n,f指定所需的深度范围,n,f的取值限于(0.0,1.0)之间,n,f的默认值为0.0和1.0

glDepthRangef函数和glViewport函数指定的值用于将顶点位置从归一化设备坐标转换为窗口坐标。

利用w分量产生三维效果

在前面的代码中,修改传入的顶点坐标,增加w分量

float[] vertexArray = new float[] {
   (float) -0.5, (float) -0.5, 0, 1,
   (float) 0.5, (float) -0.5, 0, 1,
   (float) -0.5, (float) 0.5, 0, 3,
   (float) 0.5, (float) 0.5, 0, 3
  };

同时修改顶点着色器:

private String vertexShaderCode = "uniform mat4 uMVPMatrix;"
   + "attribute vec4 aPosition;"
   + "void main(){"
   + "gl_Position = uMVPMatrix * aPosition;"
   + "}";

以及获取uProjectionMatrix以及传入顶点数据对应的代码,就可以看到如下所示效果

透视投影

然而这样让物体产生三维效果的做法太死板了,如果我们还要让物体平移缩放旋转,这样固定的指定w的值就不太好了。

透视投影这个时候就能派上用场了,利用透视投影矩阵自动生成w的值。投影矩阵主要是为w产生正确的值,这样在渲染管线的后续操作中做透视除法,远处的物体就看起来比进出物体小,很容易想到,可以利用顶点位置的z分量,将这个距离映射到w分量上,z越大,w也越大。

有两个函数可以生成透视投影矩阵frustumM和perspectiveM。参数具体含义可以参考下面的图

public static void perspectiveM(float[] m, // 生成的投影矩阵
        int offset,
        float fovy, // 视角角度
        float aspect, // 近平面的宽高比
        float zNear, // 近平面
        float zFar) // 远平面

frustumM函数原型

public static void frustumM(float[] m, int offset,
 float left, float right, float bottom, float top, // 近平面左右下上部与中心点的距离
 float near, float far //近平面和元平面与摄像机观察点的距离
 )

透视投影背后的数学原理

创建下面的矩阵

a表示视角焦距,焦距等于1/tan(视野/2)
取aspect=1.8,视野45度即a = 1,f = 10,n = 5,得到的透视投影矩阵为

计算下面几个点

上面这三个点越来越远,通过透视投影后,z和w都变大了,可以想到,在后面的透视除法时,x和y分量都会变小,于是就会出现距离越远,汇聚到一个点,也就是三维效果。

同时也可以看到,上面的几个点他们的z坐标都是负值,这也从侧面表达了,事实上所有的有效的点z坐标必须是负值,也就是从摄像机的坐标来看是在z轴负方向,也就是必须在视景体里面,这一点通过摄像机矩阵来保证。

前面使用正交投影,它的矩阵不会使得w粉量增加,于是通过透视除法也不会使w分量增加,所以正交投影不会出现近大远小的效果,透视投影会出现近大远小的效果

透视投影例子

在上面矩形Demo的基础上修改上面的正方形的顶点数据

float vertices[] = new float[] {
  (float) -0.5, (float) -0.5 + + (float)(-0.1*i), (float) (1*i),
  (float) 0.5, (float) -0.5 + + (float)(-0.1*i), (float) (1*i),
  (float) -0.5, (float) 0.5 + + (float)(-0.1*i), (float) (1*i),
  (float) 0.5, (float) 0.5 + + (float)(-0.1*i), (float) (1*i)
};

在绘图时,定义一个数组,传递不同的i值,比如绘制四个正方形,这四个正方形的距离越来越远。

mRectangles = new Rectangle[5];
   for (int i = 0; i < mRectangles.length; i++) {
    mRectangles[i] = new Rectangle(i);
   }

在onSurfaceChanged函数里面设置摄像机位置和透视投影矩阵

Matrix.perspectiveM(mProjectionMatrix, 0, 45, (float)width/height, 2, 15);
   Matrix.setLookAtM(mViewMatrix, 0, 0, 0, 12, 0, 0, 0, 0, 1, 0);

然后在onDrawFram函数里面绘制这5个矩形

for (Rectangle rectangle : mRectangles) {
  Matrix.setIdentityM(mModuleMatrix, 0);
  Matrix.rotateM(mModuleMatrix, 0, xAngle, 1, 0, 0);
  Matrix.rotateM(mModuleMatrix, 0, yAngle, 0, 1, 0);
  Matrix.multiplyMM(mViewProjectionMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
  Matrix.multiplyMM(mMVPMatrix, 0, mViewProjectionMatrix, 0, mModuleMatrix, 0);
  rectangle.draw(mMVPMatrix);
}

为了呈现出3d效果,增加触摸旋转事件,这样滑动屏幕就可以看到三维物体的全貌

public boolean onTouchEvent(MotionEvent e) {
  float y = e.getY();
  float x = e.getX();
  switch (e.getAction()) {
  case MotionEvent.ACTION_MOVE:
   float dy = y - mPreviousY;
   float dx = x - mPreviousX;
   mMyRender.yAngle += dx;
   mMyRender.xAngle+= dy;
   requestRender();
  }
  mPreviousY = y;
  mPreviousX = x;
  return true;
 }

然后就可以看到三维效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • OpenGL Shader实例分析(1)Wave效果

    这篇文章主要分析一个Shader,从而感受shader的魅力,并学习相关shader的函数的用法. 先看Shader运行的效果: 下面是代码: Shader "shadertoy/Waves" { //see https://www.shadertoy.com/view/4dsGzH CGINCLUDE #include "UnityCG.cginc" #pragma target 3.0 struct vertOut { float4 pos:SV_POSITIO

  • SDL2和OpenGL使用踩坑笔记经验分享

    SDL + OpenGL使用笔记 LFTK 是一个嵌入式GUI,为了开发方便,需要提供PC运行环境.我选择了SDL2+OpenGL+nanovg来实现底层的渲染,让LFTK可以运行在各个平台上.GLFW+OpenGL也是一个不错的选择,但是GLFW没有Android和iOS的移植,而且没有提供原生输入法的支持.LFTK虽然最初是为嵌入式系统而生,但也有一个小目标:可以用于开发嵌入式系统,也可以开发PC软件和移动APP,所以最后选择了SDL2+OpenGL+nanovg.在使用SDL2+OpenG

  • android使用OPENGL ES绘制圆柱体

    本文实例为大家分享了android使用OPENGL ES绘制圆柱体的具体代码,供大家参考,具体内容如下 效果图: 编写jiem.java *指定屏幕所要显示的假面,并对见.界面进行相关设置     *为Activity设置恢复处理,当Acitvity恢复设置时显示界面同样应该恢复     *当Activity暂停设置时,显示界面同样应该暂停 package com.scout.eeeeeee; import android.app.Activity; import android.os.Bund

  • OpenGL Shader实例分析(7)雪花飘落效果

    研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0", 2D) = "white" {} iChannelReso

  • OpenGL ES着色器使用详解(二)

    本文介绍了OpenGL ES着色器使用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.着色器语言 着色器语言是一种高级图形编程语言,和C/C++语言很类似,但存在很大差别,比如,不支持double,byte ,short,不支持unin,enum,unsigned以及位运算等,但其加入了很多原生的数据类型,如向量,矩阵等. 数据类型可分为标量.向量.矩阵.采样器.结构体.数组等 向量 向量传递参数,如果只提供一个标量,这个值用于设置所有向量的值:如果输入是多个标量或者是矢量,从左到

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

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

  • OpenGL中的glutInitDisplayMode()函数的理解

    OpenGL中的glutInitDisplayMode()函数的作用主要是在创建窗口的时候,指定其显示模式的类型. 函数原型为:void glutInitDisplayMode(unsigned int mode); mode参数是一个GLUT库里预定义的可能的布尔组合.你使用mode去指定颜色模式,数量和缓冲区类型. 其中大部分情况下使用的参数为: GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL 颜色模式:GLUT_RGBA表示颜色模式,

  • opengl实现任意两点间画圆柱体

    本文实例为大家分享了opengl实现任意两点间画圆柱体的具体代码,供大家参考,具体内容如下 1.问题提出 两点间画线简单: glBegin(GL_LINES);  //注意是LINES不是LINE,这个错误一定要注意. glVertexf(x1, y1, z1); glVertexf(x2, y2, z2); glEnd(); 画线函数不会影响opengl的矩阵堆栈. 但是很多时候线条效果会比较差,比如我要做一个骨骼动画,关节点间的骨头用线条太难看,即使使用glLineWidth设置线宽,视觉效

  • OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解

    glStencilFunc()函数是OpenGL提供的对模板缓冲区进行控制的命令,这是OpenGL2.0之前使用的函数,其函数原型为 void glStencilFunc(GLenum func, GLint ref, GLuint mask). func指定比较函数,它指定了测试通过的条件,其取值可以是:(为方便表示,参考值为refValue, 缓冲区值bufferValue) GL_NEVER                        总是不通过测试 GL_ALWAYS        

  • OpenGL实现Bezier曲线的方法示例

    Bezier曲线的形状是通过一组多边折线(特征多边形)的各顶点唯一地定义出来的.在这组顶点中: (1)只有第一个顶点和最后一个顶点在曲线上: (2)其余的顶点则用于定义曲线的导数.阶次和形状: (3)第一条边和最后一条边则表示了曲线在两端点处的切线方向. // BezierCurve.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h"</div></div></li><li><div class=

随机推荐