首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在OpenGLES中翻转精灵/纹理?

翻转精灵(Flip Sprites)是指在OpenGL ES中通过修改像素的x和y坐标来实现纹理的翻转,从而可以绘制翻转的动画效果。OpenGL ES本身是一种基于顶点的渲染器,通过编写代码可以控制场景中所有的物体。这里要说明的是OpenGL ES本身并不支持翻转效果,而是我们应用层需要在绘制时通过翻转坐标来实现。

以下是几种在OpenGL ES中翻转精灵/纹理的方法:

  1. 水平翻转:纹理的x坐标翻转,y坐标不变。实现方法:将纹理坐标的x值乘以(-1).
代码语言:csharp
复制
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, texture_data);
glViewport(0, 0, width, height);
glTexSubImage2D(GL_TEXTURE_2D, 0, 0, width, 0, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, texture_data);
  1. 垂直翻转:纹理的y坐标翻转,x坐标不变。实现方法:将纹理坐标的y值乘以(-1)。
代码语言:csharp
复制
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, texture_data);
glViewport(0, height, width, 0);
glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, height, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, texture_data);
  1. 对称翻转:水平和垂直方向都可以翻转,例如从左边翻转到右边(或从右边翻转到左边)。实现方法:根据用户的自定义来翻转。
代码语言:scss
复制
float flip = 1.0f + random_float(); // 以0到1区间内的随机数作为翻转开关。
float tx = flip * -texture_data_width / 2.0f; // x坐标翻转
float ty = flip * -texture_data_height / 2.0f; // y坐标翻转
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

OpenGLES(二)- GLKit: 纹理贴图OpenGLES(二)- GLKit: 纹理贴图

OpenGLES(二)- GLKit: 纹理贴图 运行结果 思维导图 准备工作 //1.导入头文件 #import #import <OpenGLES/ES3/gl.h...*content; GLKBaseEffect *bEffect; 以下配置上下文、配置坐标、加载纹理数据都是在-viewDidLoad调用 配置上下文 //创建EAGL上下文,并设置使用GLES3.../将顶点数据读入顶点着色器 /* 将顶点缓存区的数据上传到顶点着色器 index: 指定修改的顶点缓存区属性索引值 size: 每次读取的数量(position...type: 指定数组每个组件的数据类型。...此键指定是否应垂直翻转图像数据以匹配OpenGL的坐标系。 如果为否,则不翻转图像数据。如果是,则在加载图像数据之前将其翻转

1K20

【v2.x OGE课程 14】 控制使用

(bar_up); 2.精灵翻转 //两者默认是false bar_up.setFlippedHorizontal(pFlippedHorizontal);//水平翻转 bar_up.setFlippedVertical...(pFlippedVertical)//垂直翻转 3.精灵分离 方法一: object.detachChild(bar_up);//object必须是attachChild时所引用的对象 方法二: bar_up.detachSelf...();//引用其Parent对象将其detach 二、动画精灵相关 1.加入动画精灵 //创建动画精灵 所需帧图必须在同一纹理上 AnimatedSprite bird = new AnimatedSprite...(0, 0, Res.BRID_YELLOW, getVertexBufferObjectManager()); //将精灵加入至BaseEntityGroup或其子类(:Scene、Layer等)...加强表达效果,重写onAreaTouched方法给予用户良好体验,注冊OnClickListener监听点击事件发生 1.加入button //创建button精灵 所需帧图必须在同一纹理上 ButtonSprite

35220
  • HGE系列之九 管中窥豹(精灵动画)

    HGE系列之九管中窥豹(精灵动画) 这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:) HGE内部对于精灵以及动画的实现其实相对简单...{ quad.blend=blend; } // 设置“热点”(中心点) void SetHotSpot(float x, float y) { hotX=x; hotY=y; } // 设置纹理翻转...false bXFlip=false; bYFlip=false; bHSFlip=false; // 设置quad结构纹理(tex) quad.tex=texture; texx1=texx...tex_width; texy1=texy/tex_height; texx2=(texx+w)/tex_width; texy2=(texy+h)/tex_height; // 设置quad结构纹理坐标...bYFlip; } } 设置翻转的原理其实非常简单,交换纹理坐标而已 :) 最后让我们来看看hgeSprite是如何来重新设置纹理的: void hgeSprite::SetTexture(HTEXTURE

    59220

    OpenGL ES简介

    如果只是在某个小部分显示OpenGLES图形则可以考虑TextureView。当然你也可以直接继承自OpenGLES view创建一个View,不过一般都不会这么做。...OpenGL ES 的Android实例 1,在Manifest声明使用OpenGLES 为了能使用OpenGLES 2.0 API,你必须在你的manifest添加以下声明: <uses-feature...:顶点着色器使用的常量数据,不能被着色器修改,一般用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量,当前光源的位置。...图元(primitive)是一个能用opengl es绘图命令绘制的几何体,包括三角形、直线或者点精灵等几何对象,绘图命令指定了一组顶点属性,描述了图元的几何形状和图元类型。...在图元装配阶段,这些着色器处理过的顶点被组装到一个个独立的几何图元,例如三角形、线、点精灵

    1.8K50

    OpenGL ES简介

    如果只是在某个小部分显示OpenGLES图形则可以考虑TextureView。当然你也可以直接继承自OpenGLES view创建一个View,不过一般都不会这么做。...OpenGL ES 的Android实例 1,在Manifest声明使用OpenGLES 为了能使用OpenGLES 2.0 API,你必须在你的manifest添加以下声明: <uses-feature...:顶点着色器使用的常量数据,不能被着色器修改,一般用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量,当前光源的位置。...图元(primitive)是一个能用opengl es绘图命令绘制的几何体,包括三角形、直线或者点精灵等几何对象,绘图命令指定了一组顶点属性,描述了图元的几何形状和图元类型。...在图元装配阶段,这些着色器处理过的顶点被组装到一个个独立的几何图元,例如三角形、线、点精灵

    2K70

    视频直播与虚拟现实的渲染 - OpenGL ES

    教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门教程3-Tutorial03-三维变换...OpenGLES入门教程4-Tutorial04-GLKit进阶 OpenGLES进阶教程1-Tutorial05-地球月亮 OpenGLES进阶教程2-Tutorial06-光线 OpenGLES...纹理 一个用来保存图像颜色的OpenGL ES缓存。 渲染过程的取样可能会导致纹理被拉伸、压缩、翻转等。 视口坐标 帧缓存的像素位置叫做视口坐标。...设备,有GL_RGB和RL_RGBA 第四、五个参数指定图像的宽度和高度,必须是2的幂 第六个 确定纹理纹素的边界大小,OpenGL ES总是被设置为0 第七个 指定初始化缓存所用的图像数据的每个像素要保存的信息...,在OpenGL ES与inernalFormat 第八个 纹素的位编码类型 第九个 像素颜色数据的指针 多重纹理 多重纹理可以避免多通道渲染导致的内存访问限制性能情况 self.baseEffect.texture2d1

    1.6K80

    OpenGLES(三)- GLKit: 多边形纹理、旋转OpenGLES(三)- GLKit: 多边形纹理、旋转

    OpenGLES(三)- GLKit: 多边形纹理、旋转 本文中会省略关于GLKit最基本的API的注释,如果需要详细注释可以看另一篇OpenGLES(二)- 纹理贴图 展示效果 ?...在本案例增加了固定光源,让物体更加逼真。 1. 上下文创建 不同于上文中的GLKView的创建方式。使用这种initWithFrame方式可以不用依赖GLKViewController。...glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24; glClearColor(0.3, 0.1, 0.7, 1.0f); //这里相当于翻转...bufferId); glBufferData(GL_ARRAY_BUFFER, sizeof(HRVertex) * 36, vertexs, GL_STATIC_DRAW); //将顶点、纹理坐标...GLKVector4Make(1, 1, 1, 1); //光源位置 effect.light0.position = GLKVector4Make(-0.5, 0.5, 5, 1); baseEffect可以支持

    83250

    NDK OpenGLES 3.0 开发(一):绘制一个三角形

    手机、平板等。...OpenGLES 3.0 主要新特性 纹理 sRGB 纹理和帧缓冲区——允许应用程序执行伽马校正渲染。 2D 纹理数组——保存一组 2D 纹理纹理目标。 3D 纹理。...一些 OpenGL ES 2.0 实现通过扩展支持3D纹理,而 OpenGL ES3.0 将此作为强制的功能。 深度纹理和阴影比较——启用存储在纹理的深度缓冲区。 无缝立方图。...在 OpenGL ES 3.0 ,立方图可以进行采样过滤来使用相邻面的数据并删除接缝处的伪像。 浮点纹理。 着色器 二进制程序文件。...创建 OpenGLES 环境(可以借助于 GLSurfaceView 创建的上下文对象); 2. 编译并链接着色器程序; 3. 指定着色器程序,为着色器程序的变量赋值; 4. 绘制。

    1.4K30

    NDK OpenGLES 3.0 开发(二):纹理映射

    OpenGLES 开发纹理除了用于装饰物体表面,还可以用来作为存储数据的容器。...那么在 OpenGLES 纹理实际上是一个可以被采样的复杂数据集合,是 GPU 的图像数据结构,纹理分为 2D 纹理、 立方图纹理和 3D 纹理。...2D 纹理OpenGLES 中最常用和最常见的纹理形式,是一个图像数据的二维数组。纹理的一个单独数据元素称为纹素或纹理像素。 立方图纹理是一个由 6 个单独的 2D 纹理面组成的纹理。...在 OpenGLES 纹理映射就是通过为图元的顶点坐标指定恰当的纹理坐标,通过纹理坐标在纹理图中选定特定的纹理区域,最后通过纹理坐标与顶点的映射关系,将选定的纹理区域映射到指定图元上。...当我们调整纹理坐标的顺序保持顶点坐标的顺序不变, T0T1T2T3 -> T1T2T3T0 ,绘制后将得到一个顺时针旋转 90 度的纹理贴图。

    1.1K30

    【DB笔试面试511】如何在Oracle写操作系统文件,写日志?

    题目部分 如何在Oracle写操作系统文件,写日志? 答案部分 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。...image.png 其它常见问题如下表所示: 问题 答案 Oracle哪个包可以获取环境变量的值? 可以通过DBMS_SYSTEM.GET_ENV来获取环境变量的当前生效值。...在CLIENT_INFO列存放程序的客户端信息;MODULE列存放主程序名,包的名称;ACTION列存放程序包的过程名。该包不仅提供了设置这些列值的过程,还提供了返回这些列值的过程。...如何在存储过程暂停指定时间? DBMS_LOCK包的SLEEP过程。例如:“DBMS_LOCK.SLEEP(5);”表示暂停5秒。 DBMS_OUTPUT提示缓冲区不够,怎么增加?...如何在Oracle写操作系统文件,写日志? 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。

    28.8K30

    iOS开发-OpenGLES进阶教程4

    教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门教程3-Tutorial03-三维变换...OpenGLES入门教程4-Tutorial04-GLKit进阶 OpenGLES进阶教程1-Tutorial05-地球月亮 OpenGLES进阶教程2-Tutorial06-光线 OpenGLES...在OpenGL的渲染管道,几何数据和纹理通过一系列变换和测试后,变成渲染到屏幕上的二维像素。渲染的目标管道就是帧缓存区。...OpenGL的帧缓存 具体细节 弯路 在实现过程,走过了几个弯路,先提出来,希望后来者不要再重复: 新建上下文。...把纹理对象关联到帧缓存 1、新建纹理 2、设置纹理格式 3、分配纹理内存 4、新建帧缓存 5、切换帧缓存为纹理对象 GLuint colorTexture; // 1 glGenTextures

    86740

    第二集 主线 - 绘制面与图片贴图

    说起OpenGLES,大家可能都敬而远之,其实它并没有想象的那么可怕,当然也并没有那么容易 都0202年了,本系列使用OpenGLES3.0,这是一次有预谋的计 [- 多媒体 -] OpenGLES3.0...- ] 第三集 主线 - shader着色器与图片特效 [ - OpenGLES3.0 - ] 第四集 支线1 - 相机接入OpenGLES3.0实现特效 [ - OpenGLES3.0 - ]...第五集 支线1 - 视频接入OpenGLES3.0实现特效 [ - OpenGLES3.0 - ] 第六集 主线 - OpenGL视口详解与矩阵变换(上篇) [ - OpenGLES3.0 - ]...,//仅x轴重复 REPEAT_Y,//仅y轴重复 REPEAT//x,y重复 } ---- 3.3 shader着色器更改 主要将vsh颜色的输入变量缓存坐标变量,在fsh通过...){ vec4 color= texture(uTexture, vTexCoord); vec4 color2 = texture(uTexture2, vTexCoord);//从纹理采样出颜色值

    63210

    OpenGLES-07 纹理

    前面的文章都是绘制实实在在的图形的,在OpenGL,我们还可以使用纹理图片来渲染图形,使用图片可以让描绘出来的物体更加真实也可以让我们的开发更加简单。...,TexCoordOut为要传入到片元着色器纹理坐标。...*/ + (GLuint)getTextureImage:(UIImage *)image; @end 在.m实现对应功能,代码给出了相应解释: #import "TextureManager.h..." #import @implementation TextureManager /* * 通过UIImage的方式获取纹理对象 */ + (GLuint.../ 这里也稍稍提一下多级渐远纹理,上面链接对多级渐远纹理的解释很详细,我们在iOS端使用的时候最简单的只需要调用 glGenerateMipmap(GL_TEXTURE_2D); 然后设置纹理缩小时的过滤模式为多级渐远纹理过滤就行

    1.4K130

    OpenGLES进阶教程7-天空盒效果

    教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门教程3-Tutorial03-三维变换...OpenGLES入门教程4-Tutorial04-GLKit进阶 OpenGLES进阶教程1-Tutorial05-地球月亮 OpenGLES进阶教程2-Tutorial06-光线 OpenGLES...进阶教程3-Tutorial07-粒子效果 OpenGLES进阶教程4-Tutorial08-帧缓存 OpenGLES进阶教程5-Tutorial09-碰碰车 OpenGLES进阶教程6-Tutorial10...写这个demo的过程遇到了一些坎,最后会提到。 特别留意天空盒纹理坐标推导和顶点数据对象切换。...glEnableVertexAttribArray()和glVertexAttribPointer()函数(用不同的顶点属性来渲染多个对象) 新的顶点数据对象(VAO) 扩展会几率当前上下文中的与顶点属性相关的状态,并存储这些信息到一个小的缓存

    1.3K60

    OpenGLES(五)- ESLS案例:纹理贴图OpenGLES(五)- ESLS案例:纹理贴图

    OpenGLES(五)- ESLS案例:纹理贴图 阅读时间大概10-15分钟 ? 结果效果图 首先梳理一下大体思路,下方代码也会按照这个顺序: 1...., "textureMap"); //8.2 设置texture读取帧缓存区的对应纹理ID=0(参数2)的纹理 glUniform1f(texture, 0); //...激活纹理空间 //OpenGL纹理ID0默认打开,所以该方法可省略 //glActiveTexture(0); //8....载入纹理到帧缓存区,并对应纹理ID=0 float fw = width, fh = height; /* 参数1:纹理模式,GL_TEXTURE_1D、GL_TEXTURE_...目前有4种思路来解决: 在CoreGraphic解压缩图片时,旋转图片(最常使用的方案) 在顶点着色器中使用矩阵旋转、缩放变换 在顶点、片元着色器中将纹理Y地址进行1-Y的翻转操作 修改纹理坐标,使之翻转

    1.1K20

    OpenGLES讲解稿

    第一,我们来讲下写一个openGLES代码的基本流程。 ? image.png ?...openGLES的应用不要想得太复杂,流程还是很简单的。...在 openGL 编程顶点着色器是必须的,我们开始没用是因为我们还没绘制图形呢,顶点着色器的功能有: 1.使用矩阵进行顶点位置变换 2.法线变换,法线工规范化 3.纹理坐标生成和变换 4.计算每个顶点的光照...TexCoordIn.x, 1.0-TexCoordIn.y); } 我们看这段代码,这段代码里有输入的顶点数据Position,输出的顶点数据gl_Position,gl_Position是经过一些变换的,这段代码根据外部变量...7).Framebuffer:这是流水线的最后一个阶段,Framebuffer 存储这可以用于渲染到屏幕或纹理的像素值。

    1.1K20

    【iOS】(三)GPUImageFilter,GPUImageInput

    一、前言 通过前面的两篇文章,我们知道了滤镜链的工作原理,以及纹理数据是怎么产生的,那么接下来,就从源码的角度继续分析GPUImageFilter,GPUImageInput。...GPUImageFilter @interface GPUImageFilter : GPUImageOutput 看到GPUImageFilter的头文件,我们就知道它再滤镜链,...GPUImageFilter主要是用于封装OpenGLES 的vertexShader和fragmentShader生成program的一个类,并且封装了访问shader里面属性的方法。...例如GPUImagePoissonBlendFilter,可以直接通过对mix修改,然后将mix的值调用program传递给shader - (void)setMix:(CGFloat)newValue...的工具类就是GLProgram,其作用就是加载vertexShader和fragmentShader生成program,并且提供attributeIndex和uniformIndex的获取,具体源码需要OpenGLES

    69710

    OpenGLES-02 绘制基本图元(点、线、三角形)

    6.To Framebuffer:这是流水线的最后一个阶段,Framebuffer 存储这可以用于渲染到屏幕或纹理的像素值,也可以从Framebuffer 读回像素值,但不能读取其他值(深度值,...Shader program:由 main 申明的一段程序源码,描述在顶点上执行的操作:坐标变换,计算光照公式来产生 per-vertex 颜色或计算纹理坐标。...www.cnblogs.com/kesalin/archive/2012/11/25/opengl_es_tutorial_02.html 五,使用顶点着色器与片元着色器 好了,理论知识讲得足够多了,下面我们来看看如何在代码添加顶点着色器与片元着色器...我们在前一篇文章《OpenGLES-01 渲染第一步》代码的基础上进行编码。...,颜色,法线,纹理或点精灵大小)在着色器程序的槽位; 参数 size :指定每一种数据的组成大小,比如顶点由 x, y, z 3个组成部分,纹理由 u, v 2个组成部分; 参数 type :表示每一个组成部分的数据格式

    2.2K90

    Golang语言情怀--第117期 全栈小游戏开发:第8节:资源工作流

    Flip Vertical 是否沿 X 轴垂直翻转导入的贴图。 useComponentTexture 是否使用压缩纹理,详情请参考 压缩纹理。...需要注意的是,如果材质没有定义 USE NORMAL MAP 就没有该属性。 sprite-frame:精灵帧资源,用于 UI 制作上,详情可参考 SpriteFrame。...normal map 的子资源属性与 texture 一致,可参考如下 纹理贴图资源(Texture) 纹理贴图资源是一种用于程序采样的资源,模型上的贴图、精灵上的 UI。...纹理贴图资源可由图像资源(ImageAsset)转换而来,图像资源包括一些通用的图像转换格式 PNG、JPEG 等等。...Texture2D Texture2D 是纹理贴图资源的一种,通常用于 3D 模型的渲染,模型材质的反射贴图、环境光遮罩贴图等等。

    20540
    领券