使用OpenGL ES进行缩放和滑动 - 腾讯云开发者社区

在上一篇文章中我们介绍了使用OpenGL ES 播放视频，在末尾提到如果渲染视频的窗口宽高比和视频宽高比不一致会导致视频拉伸，这篇文章将会介绍如何通过视频的缩放来解决这个问题。...我们希望当视频的比例和窗口的比例不一样时，其中一边占满全屏，另一边等比缩放并居中，其余部分显示黑色，这个效果和我们平时使用的视频播放器的效果是一样的，效果如图： ?...我们在OpenGL ES 播放视频的基础进行修改，修改顶点shader attribute vec4 a_Position; attribute vec2 a_TexCoordinate; varying...计算矩阵假设视频的宽高比小于屏幕的宽高比，那么视频则在高度上铺满窗口，在宽度上进行缩放，为了不拉伸视频，缩放的系数为1 - ((屏幕的宽高比 - 视频的宽高比) / 2),反之如果视频的宽高比大于屏幕的宽高比...视频的旋转、平移和缩放是一样的，我们只需要对矩阵进行相应的操作，比如将视频旋转45度，代码如下： Matrix.rotateM(modelMatrix,0,45F,0F,0F,1F) 效果如下： ?

2.8K2 0

OpenGL ES 投影和坐标

我们想要进行的操作叫作正交投影。使用正交投影，不管多远或者多近，所有物体看上去大小总是相同的。...4.线性代数基础 OpenGL大量使用了向量和矩阵，矩阵的最重要的用途之一就是建立正交和透视投影。...在OpenGL里，我们一般使用矩阵作向量投影，如正交或者透视投影，并且也用它们旋转物体，平移物体以及缩放物体。我们把矩阵与每个要变换的向量相乘可实现这些变换。下面就是一个矩阵： ?...它在OpenGL里十分常用。使用这种类型的矩阵，我们可以把一个物体沿着指定的距离移动。这个矩阵和单位矩阵差不多，但在右侧指定了三个额外的元素： ?...这个位置正是我们所期望和（5，5）。 5.正交投影要定义正交投影，我们将使用Android的Matrix类，它在android.opengl包中。

1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【OpenGL ES】 Android OpenGL ES -- 透视投影和正交投影

= GLES20.GL_TRUE){ Log.e("ES20.ERROR", "链接程序失败 : "); Log.e("ES20.ERROR", GLES20.glGetProgramInfoLog...mProgram; // 自定义渲染管线着色器程序id static float[] mMMatrix = new float[16]; // 具体物体的3D变换矩阵，包括旋转、平移、缩放...设置 OpenGL ES 版本 * b. 创建场景渲染器 * c. 设置场景渲染器 * d. 设置场景渲染器模式 * ② 自定义场景渲染器 * a....public static boolean isOrth = true; private final float TOUCH_SCALE_FACTOR = 180.0f / 320; // 角度缩放比例...(Context context) { super(context); this.setEGLContextClientVersion(2); // 设置OpenGL ES 版本为 2.0

2.6K3 0

OpenGL ES 之uniform和varying

uniform定义如下： uniform float uTexPos; uniform 变量通常是存储在GPU的”常量区”，这一区域的内存是有限的，因此uniform有个数限制，但比attribute要多很多，OpenGL...标准化组织规定OpenGL ES 2.0规定至少支持128个顶点uniform和16个片段（Fragment）uniform。...设置vec类型的变量也可以使用如下方法： GLES20.glUniform2fv() 设置int类型数据使用如下方法： GLES20.glUniform1i(location,x) 设置mat类型使用如下方法...代码如下： precision mediump float; varying vec4 color; void main() { gl_FragColor = color; } 与attribute和uniform...一样，varying也有数量限制，OpenGL ES 2.0至少支持8个，获取varying的最大个数，代码如下： fun getMaxSupportNum(): Int { var count

2.3K2 1

使用Opencv-python对图像进行缩放和裁剪

使用Opencv-python对图像进行缩放和裁剪在Python中使用opencv-python对图像进行缩放和裁剪非常简单，可以使用resize函数对图像进行缩放，使用对cv2.typing.MatLike...操作，如img = cv2.imread(“Resources/shapes.png”)和img[46:119,352:495] 进行裁剪，如有下面一副图像：可以去https://github.com.../murtazahassan/Learn-OpenCV-in-3-hours/blob/master/Resources/shapes.png地址下载使用Opencv-python对图像进行缩放和裁剪的示例代码如下所示...("Resources/shapes.png") # 读取本地图像 print(img.shape) imgResize = cv2.resize(img,(1000,500)) # 将原图缩放成...1000*500 print(imgResize.shape) # 打印缩放后的图像大小 imgCropped = img[46:119,352:495] # 对原图进行裁剪 cv2.imshow

3180 0

使用 iOS OpenGL ES 实现长腿功能

本文介绍了如何使用 OpenGL ES 来实现长腿功能。学习这个例子可以加深我们对纹理渲染流程的理解。另外，还会着重介绍一下「渲染到纹理」这个新知识点。...警告：本文属于进阶教程，阅读前请确保已经熟悉 OpenGL ES 纹理渲染的相关概念，否则强行阅读可能导致走火入魔。注：下文中的 OpenGL ES 均指代 OpenGL ES 2.0。...三、为什么要使用 OpenGL ES 可能有人会说：你这个功能平平无奇，就算不懂 OpenGL ES，我用其它方式也能实现呀。确实，在 iOS 中，我们绘图一般是使用 CoreGraphics。...假设我们使用 CoreGraphics，也按照上面的实现思路，对原图进行拆分绘制，重复调整的时候进行重新拼接，目测也是能实现相同的功能。...而使用 OpenGL ES 则不存在这样的问题。四、实现拉伸逻辑从上面我们知道，渲染图片我们需要 8 个顶点，而拉伸逻辑的关键就是顶点坐标的计算，在拿到计算结果后再重新渲染。

8026 0

OpenGL ES 3.0 使用着色器（OC）

（旋转，移动，放缩）步骤： 1.设置OpenGL ES 3.0环境 2.Shader和链接程序（myProgram）关联 3.绑定顶点坐标，纹理坐标 4.设置顶点属性对象 5.加载纹理 6.渲染下面就拆分上面的...**几乎每行代码都会增加注释** 1.OpenGL ES 3.0环境在iOS需要先引用 ES2/gl.h> * 上屏上屏部分需要使用GLKView...每个程序对象必须连接一个顶点着色器和一个片段着色器。...在成功状态之后才可以使用glUseProgram方法。只有在glUseProgram之后program才可以正常使用。...着色器对象和程序对象组成了OpenGL ES 3.0中的基本对象。

1.2K8 0

OpenGL ES 实现刮刮卡和手写板功能

不过话又说回来，Android Canvas 实现类似刮刮卡功能虽然方便，但是性能一言难尽，通常在复杂的应用界面不宜采用此类方法，此时就不得不考虑使用 OpenGL 进行优化。...本文尝试使用 OpenGL 来实现类似刮刮卡的功能，简而言之就是利用 OpenGL 根据手指滑动的坐标去构建一条一条的带状网格，然后基于此网格实现纹理映射。...实现原理图我们基于 2 点之间滑动轨迹构建的形状如上图所示，形状由一个矩形和 2 个半圆组成。...设 P0、P1 为手指在屏幕上滑动时前后相邻的 2 个点（注意屏幕坐标需要进行归一化转换为纹理坐标），r 为圆的半径，同时也用于控制矩形的宽度。...2 OpenGL 实现刮刮卡 OpenGL 实现刮刮卡效果的关键在于利用滑动轨迹构建网格，我们在 GLSurfaceView 类的 onTouchEvent 回调方法中获得滑动轨迹传入 Native

1.1K2 0

OpenGL ES for Android 绘制矩形和正方形

前面的文章介绍了如何绘制三角形，在OpenGL ES中没有直接绘制矩形的方式，通过绘制2个三角形的方式绘制矩形。...mProgramHandle = GLTools.createAndLinkProgram(vertexCode, fragmentCode) } triangle_vertex.glsl和triangle_vertex.glsl...分别表示顶点shader和片段shader的文件，存放于assets/glsl目录下，readAssetsTxt为读取assets目录下文件的公用方法。

1.1K1 0

OpenGL ES 使用着色器（OC）（一）

（旋转，移动，放缩）步骤： 1.设置OpenGL ES 3.0环境 2.Shader和链接程序（myProgram）关联 3.绑定顶点坐标，纹理坐标 4.设置顶点属性对象 5.加载纹理...几乎每行代码都会增加注释 1.OpenGL ES 3.0环境在iOS需要先引用 ES2/gl.h> 上屏上屏部分需要使用GLKView，CAEAGLLayer...每个程序对象必须连接一个顶点着色器和一个片段着色器。...在成功状态之后才可以使用glUseProgram方法。只有在glUseProgram之后program才可以正常使用。...着色器对象和程序对象组成了OpenGL ES 3.0中的基本对象。

6542 0

【说站】css如何使用scale()方法进行缩放

css如何使用scale()方法进行缩放 1、缩放是指缩放和放大。在CSS3中，我们可以使用scale()方法根据中心点缩放元素。...2、三种方法可以缩放scale()，scaleX(x)、scaleY(y)、scale(x,y)。...(1)scaleX(x)：元素仅水平缩放(X轴缩放)； (2)scaleY(y)：元素仅垂直缩放(Y轴缩放)； (3)scale(x,y)：元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)；实例...对元素进行缩放： img{ transition: .2s;} .img-wrapper:hover img{ transform: scale(1.2); ...} scaleX()水平方向 scaleY()垂直方向 scale()双方向以上就是css使用scale()方法进行缩放的方法，希望对大家有所帮助。

2.6K2 0

OpenGL ES 3D 模型的加载和渲染

OpenGL ES 3D 模型加载和渲染 ?...3D 模型渲染上一节简单介绍了常用的 3D 模型文件 Obj 的数据结构和模型加载库 Assimp 的编译，本节主要介绍如何使用 Assimp 加载 3D 模型文件和渲染 3D 模型。...a_texCoord; vec4 position = vec4(a_position, 1.0); gl_Position = u_MVPMatrix * position; } 而使用的片段着色器需要根据使用到的纹理数量和类型的不同做不同的调整...uniform sampler2D texture_specular2; uniform sampler2D texture_specular3; 总结起来就是我们需要根据 Mesh 中纹理的数量和类型以及模型光照需求来使用不同的片段着色器和顶点着色器...OpenCV 对图片进行解码 cv::Mat textureImage = cv::imread(filename); if (!

1.8K2 0

使用 Axure RP 8 进行滑动页面设计

流程图、原型和规格说明文档。...作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。 Axure RP 已被一些大公司采用。...Axure RP 的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用 Axure。...以下简称 Axure: 今天我们就来介绍一下如何使用 Axure 进行滑动页面的设计。滑动页面分为两种，分别是垂直滑动和水平滑动；垂直滑动就是上下滑动；水平滑动就是左右滑动。...一、垂直滑动垂直滑动需要两个动态面板，为了区分方便，我们将其命名为一级页面和二级页面。首先新建一个手机原型： ?

1.9K1 0

FFmpeg + OpenGLES 实现视频解码播放和视频滤镜

但是，当你想为播放器做一些视频滤镜时，如加水印、旋转缩放等效果，使用 OpenGL ES 实现起来就极为方便。 ?...视频解码播放和视频滤镜 1 OpenGL ES 渲染解码帧经过上面几节的介绍，我们对音视频的解码过程已经比较熟悉了。本文要用 OpenGL 实现视频的渲染，这里再回顾下视频的解码流程： ?...视频的解码流程从流程图中可以看出，解码一帧图像后，首先将对图像进行格式转换，转换成 RGBA 格式，使用 OpenGL 或 ANativeWindow 可以直接进行渲染。...当然，使用 OpenGL 进行渲染时，为了提升性能，可以将格式转换放到 GPU 上来做（即 shader 实现 YUV 到 RGB 的转换），也可以使用 OES 纹理直接接收 YUV 图像数据，这里就不进行展开讲了...动态网格滤镜缩放和旋转我们在 GLSurfaceView 监听用户的滑动和缩放手势，控制 OpenGLRender 的变换矩阵，从而实现视频图像的旋转和缩放。 ? 视频图像的旋转和缩放

3K1 0

OpenGL ES实践教程（二）摄像头采集数据和渲染

教程这一篇教程是摄像头采集数据和渲染，包括了三部分内容，渲染部分-OpenGL ES，摄像头采集图像部分-AVFoundation和图像数据创建纹理部分-GPUImage。...，分别用GL_LUMINANCE格式和GL_LUMINANCE_ALPHA格式读取。...OpenGL ES渲染 OpenGL ES的渲染流程在前文多有介绍，这里不再赘述。讲讲自己遇到的问题。...光看教程是学不会OpenGL ES的，下载教程自己改改代码，自己感兴趣的想法就去实现它。还有就是，遇到问题多尝试，多查资料。如果绝望，那么就洗洗睡，明天说不定就解决了。...error: -6683) 这两个错误，一般是配置的颜色输出格与 CVOpenGLESTextureCacheCreateTextureFromImage的参数不对应；代码地址 - 你的star和fork

2.4K5 0

使用libyuv对YUV数据进行缩放，旋转，镜像，裁剪等操作

Android上如何使用Libyuv libyuv并不能直接为Android开发直接进行使用，需要对它进行编译的操作。...Libyuv库进行YUV数据的操作接下来就是要libyuv对yuv数据进行缩放，旋转，镜像，裁剪等操作。...在libyuv的实际使用过程中，更多的是用于直播推流前对Camera采集到的YUV数据进行处理的操作。...3.2 I420数据的缩放和旋转经过上面的NV21转化为I420操作之后，我们就可以对I420数据进行后续的缩放和旋转的操作，它们的传参跟上面的NV21ToI420是类似的，这里就不具体的介绍了。...(libyuv::FilterMode)，它的值分别有0，1，2，3四种，代表不同的缩放模式，在我实际的使用过程中，0的缩放速度是最快的，且远远快与其他的3种，并且就缩放的效果来看，以我的肉眼观察，看不出有什么区别

4.9K2 0

OpenGL 中的颜色混合和使用

参数的含义为指定混合方程式，用来计算最终片元的颜色，其值为混合方程式的名字 glBlendEquationSeparate(int modeRGB,int modeAlpha) modeRGB 参数为颜色的 RGB 通道进行混合时所使用的混合方程式名...，modeAlpha 参数的含义是颜色的 Alpha 透明度通道进行混合时所使用的混合方程式名字，通过其可以实现 RGB 和 Alpha 通道单独指定混合方程式的功能源因子和目标因子对于颜色混合来说...具体的使用过程很简单，大致代码如下： 1 // 先绘制好背景内容 2 // 开启颜色混合进行绘制 3 GLES20.glEnable(...当然，还可以使用另外一种混合因子组合 GL_SRC_ALPHA 和 GL_ONE_MINUS_SRC_ALPHA，根据源因子的透明度来设置混合因子。...关于如何使用 GL_SRC_ALPHA 和 GL_ONE_MINUS_SRC_ALPHA 混合因子，可以参考之前的文章用 OpenGL 对视频帧内容进行替换，大概原理都一样的，就是图片换成带透明度的，

2.5K1 1

全网最全的 Android 音视频和 OpenGL ES 干货，都在这了

有位大佬说，“这是全网最全的 Android OpenGL ES 教程”，哈哈，对于这种善意的“商业互吹”，当然是欣然接受，这无疑给了我更多的动力和激情来完善这几个系列的文章。...ES 3.0 开发（04）：VBO、EBO 和 VAO OpenGL ES 3.0 开发（05）：FBO 离屏渲染 OpenGL ES 3.0 开发（06）：EGL OpenGL ES 3.0...模型 OpenGL ES 3.0 开发（21）：3D 模型加载和渲染 OpenGL ES 3.0 开发（22）：PBO OpenGL ES 3.x 开发（23）：UBO 和 TBO ?...3D 阿凡达效果应用篇利用 OpenGL ES 给视频播放器做个字符画滤镜 OpenGL ES 实现动态（水波纹）涟漪效果 OpenGL ES 实现 3D 阿凡达效果 OpenGL ES 实现刮刮卡和手写板功能...为什么要进行写作一句话，通过输出来倒逼自己输入，技术输入也好，认知感悟也好，记录生活也好，这都是输出。

3.2K2 1

VR+全景播放器+头控讲解-01

.下一曲 7.手势滑动 8.单击手势隐藏功能菜单 9.是否可以播放(不可播放出现小菊花) 10.声音加/减功能 11.捏合手势-缩放画面 VR 模式特有的头控功能 1.显示/隐藏菜单功能...声音加/减功能扩展功能 1.视频滤镜 ---- 实现方案选择近两年随着AR/VR逐渐火热,企业为了给自己的产品中加入新的元素,有可能会将3D元素添加到应用中去,对于IOS 工程师,你有三种选择 OpenGL...ES / Metal/SceneKit ,按照性能排名 Metal 第一位,SceneKit性能相对来说没有前两者高,但是对于开发难度来说,SceneKit的难度最低,因为他是面向对象的,对于iOS...SCNCamera的用法(SceneKit框架) UIGestureRecognizer CIFilter 处理视频滤镜(可选项) 掌握以上知识点轻松完成播放器的全部需求后面我会分为以下几个模块进行讲解...捏合手势如何缩放画面 f. 头控部分布局 g. 如何实现分屏显示 SceneKit 中文教程

1.3K1 0

OpenGL ES (iOS) 学习笔记 — 基础篇（一）

因为一直在iOS移动端开发，所以学习一下OpenGL ES 技术。目前OpenGL ES的学习，让我了解了一些基本概念和知识，算是对OpenGL ES在iOS上的应用有了初步的认识。...整个OpenGL ES基础知识可以分成四个部分：一、Shader的应用。二、基本图形的绘制和变换。三、透视投影和正交投影以及摄像机。四、光照和纹理的应用。...顶点shader可以编写代码实现如下功能： 1、使用模型视图矩阵以及投影矩阵进行顶点变换。 2、法线变换及归一化。 3、纹理坐标生成和变换。 4、逐顶点或逐像素光照计算。 5、颜色计算。...但是这种方式虽然可行但不够好，尤其是在GPU上这种方式产生的运算负担远大于使用矩阵。我们通过平移矩阵、缩放矩阵和旋转矩阵，与原来的位置矩阵进行运算。...以上是对OpenGL ES中Shader和2D世界创建图形的介绍，后续将进入奇妙的3D世界，学习OpenGL是如何描述3D世界中的物体的。

2.6K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

OpenGL ES for Android 视频缩放、旋转、平移

OpenGL ES 投影和坐标

【OpenGL ES】 Android OpenGL ES -- 透视投影和正交投影

OpenGL ES 之uniform和varying

使用Opencv-python对图像进行缩放和裁剪

使用 iOS OpenGL ES 实现长腿功能

OpenGL ES 3.0 使用着色器（OC）

OpenGL ES 实现刮刮卡和手写板功能

OpenGL ES for Android 绘制矩形和正方形

OpenGL ES 使用着色器（OC）（一）

【说站】css如何使用scale()方法进行缩放

OpenGL ES 3D 模型的加载和渲染

使用 Axure RP 8 进行滑动页面设计

FFmpeg + OpenGLES 实现视频解码播放和视频滤镜

OpenGL ES实践教程（二）摄像头采集数据和渲染

使用libyuv对YUV数据进行缩放，旋转，镜像，裁剪等操作

OpenGL 中的颜色混合和使用

全网最全的 Android 音视频和 OpenGL ES 干货，都在这了

VR+全景播放器+头控讲解-01

OpenGL ES (iOS) 学习笔记 — 基础篇（一）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐