SDL3 入门(5):纹理渲染
创建纹理
有三个 API 可以用来创建纹理:
SDL_CreateTexture参数少,使用方便,适用于创建简单的纹理SDL_CreateTextureFromSurface
适用于从已有图像数据创建纹理SDL_CreateTextureWithProperties可以指定各种属性,功能强大,用起来也比较复杂,适用于另外两个 API 无法满足需求的情况
实际上前两个 API 内部都是通过调用 SDL_CreateTextureWithProperties 实现纹理创建的。这也是 SDL API 设计的特点,对于常用操作有简洁的 API 实现,同时也有使用复杂但是功能更灵活强大的 API 提供。
这里我们准备创建一个最小的四种颜色的纹理,像素尺寸 2x2,也就是总计只有 4 个像素。首先使用数组定义图像数据:
uint8_t pixels[4 * 2 * 2] = {
0, 0, 255, 255, // b, g, r, a
0, 255, 0, 255, //
255, 0, 0, 255, //
0, 255, 255, 255 //
};
SDL 对像素格式的定义是按照从高位到低位的颜色命名的,所以上面的数据对应的格式是 SDL_PIXELFORMAT_ARGB8888。
由于已经有像素数据,所以我们可以从图像数据创建 Surface 然后调用 SDL_CreateTextureFromSurface 从 Surface 创建纹理:
SDL_Surface* surface = SDL_CreateSurfaceFrom(pixels, 2, 2, 4 * 2, SDL_PIXELFORMAT_ARGB8888);
if (!surface) {
SDL_Log("Create surface failed: %s", SDL_GetError());
return -1;
}
SDL_Texture* texture = SDL_CreateTextureFromSurface(renderer, surface);
if (!texture) {
SDL_Log("Create texture failed: %s", SDL_GetError());
return -1;
}
图像混合模式选择 None 也就是忽略透明通道,缩放模式选择临近点插值:
SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_NONE);
SDL_SetTextureScaleMode(texture, SDL_SCALEMODE_NEAREST);
渲染纹理
渲染纹理使用的 API 是 SDL_RenderTexture,可以通过参数指定渲染纹理的矩形区域,也可以指定目标矩形区域。这里我们选择渲染整个纹理到目标中心附近宽高各为窗口一般的矩形区域:
// 计算目标矩形
int width = 0;
int height = 0;
SDL_GetRenderOutputSize(renderer, &width, &height);
SDL_FRect dst_rect{};
dst_rect.w = width * 0.5f;
dst_rect.h = height * 0.5f;
dst_rect.x = (width - dst_rect.w) * 0.5f;
dst_rect.y = (height - dst_rect.h) * 0.5f;
// 渲染
SDL_SetRenderDrawColor(renderer, 16, 0, 16, 255);
SDL_RenderClear(renderer);
SDL_RenderTexture(renderer, texture, nullptr, &dst_rect);
SDL_RenderPresent(renderer);
渲染效果如下:

图中每种颜色对应的是最初的 2x2 图像中的一个像素,因为前面我们选择的缩放模式是临近点插值。实际图像处理中使用更多的是双线性插值,我们可以修改前面的代码看下效果:
SDL_SetTextureScaleMode(texture, SDL_SCALEMODE_LINEAR);
渲染效果:

纹理格式
可以使用如下代码查询当前渲染器支持的纹理格式:
void PrintSupportedTextureFormats(SDL_Renderer* renderer)
{
SDL_PixelFormatEnum* texture_format = static_cast<SDL_PixelFormatEnum*>(SDL_GetProperty(
SDL_GetRendererProperties(renderer), SDL_PROP_RENDERER_TEXTURE_FORMATS_POINTER, nullptr));
int index = 0;
while (texture_format && *texture_format != SDL_PIXELFORMAT_UNKNOWN) {
SDL_Log("Texture format[%d]: %s", index, SDL_GetPixelFormatName(*texture_format));
++texture_format;
++index;
}
}
使用不同的图形引擎创建渲染器时支持的纹理格式也不相同,下面是在一台 Windows 11 系统笔记本上的测试结果:
| Format | direct3d11 | direct3d12 | direct3d(9) | opengl | opengles2 | vulkan | software |
|---|---|---|---|---|---|---|---|
| SDL_PIXELFORMAT_ARGB8888 | Y | Y | Y | Y | Y | Y | Y |
| SDL_PIXELFORMAT_ABGR8888 | - | - | - | Y | Y | - | - |
| SDL_PIXELFORMAT_XRGB8888 | Y | Y | - | Y | Y | Y | Y |
| SDL_PIXELFORMAT_XBGR8888 | - | - | - | Y | Y | - | - |
| SDL_PIXELFORMAT_XBGR2101010 | Y | Y | - | - | - | Y | - |
| SDL_PIXELFORMAT_RGBA64_FLOAT | Y | Y | - | - | - | Y | - |
| SDL_PIXELFORMAT_YV12 | Y | Y | Y | Y | Y | Y | - |
| SDL_PIXELFORMAT_IYUV | Y | Y | Y | Y | Y | Y | - |
| SDL_PIXELFORMAT_NV12 | Y | Y | - | Y | Y | Y | - |
| SDL_PIXELFORMAT_NV21 | Y | Y | - | Y | Y | Y | - |
| SDL_PIXELFORMAT_P010 | Y | Y | - | - | - | Y | - |
可以看到 SDL_PIXELFORMAT_ARGB8888 格式被包括软件实现在内的所有图形引擎支持,这正是我们前面选择使用该格式创建纹理的原因,可以方便的选择各个图形引擎进行测试。
SDL3 入门(5):纹理渲染的更多相关文章
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- SDL 开发实战(五): SDL 纹理渲染
本文我们讲一下如何使用SDL_Texture将视频纹理渲染出来. 1. SDL 视频渲染相关对象 SDL 视频渲染主要涉及到四个对象:SDL_Window.SDL_Render.SDL_Texture ...
- DXVA2解码数据用texture纹理渲染
FFmpeg DXVA2解码得到的数据使用surface来承载的,surface限制很多,如果能用纹理来渲染的话,那我们就可以充分开发D3D,比如可以用坐标变换来实现电子放大的功能,还可以用坐标变换来 ...
- 转 cocos2d-x 优化(纹理渲染优化、资源缓存、内存优化)
概述 包括以下5种优化:引擎底层优化.纹理优化.渲染优化.资源缓存.内存优化 引擎优化 2.0版本比1.0版本在算法上有所优化,效率更高.2.0版本使用OpenGl ES 2.0图形库,1.0版本 ...
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- IOS 中openGL使用教程3(openGL ES 入门篇 | 纹理贴图(texture)使用)
在这篇文章中,我们将学习如何在openGL中使用纹理贴图. penGL中纹理可以分为1D,2D和3D纹理,我们在绑定纹理对象的时候需要指定纹理的种类.由于本文将以一张图片为例,因此我们为我们的纹理对象 ...
- [WebGL入门]四,渲染准备
注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家 ...
- 【JAVASCRIPT】React入门学习-文本渲染
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...
- D3D三层Texture纹理经像素着色器实现渲染YUV420P
简单记录一下这两天用Texture实现渲染YUV420P的一些要点. 在视频播放的过程中,有的时候解码出来的数据是YUV420P的.表面(surface)通过设置参数是可以渲染YUV420P的,但Te ...
- 什么是渲染目标(render target)&& 渲染到纹理(Render To Texture, RTT)详解
渲染到纹理(Render To Texture, RTT)详解 RTT是现在很多特效里面都会用到的一项很基本的技术,实现起来很简单,也很重要.但是让人不解的是网上搜索了半天只找到很少的文章说这个事儿, ...
随机推荐
- C语言:汉诺塔问题(Hanoi Tower)------递归算法
汉诺塔问题是一个经典的问题.汉诺塔(Hanoi Tower),又称河内塔,源于印度一个古老传说.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆 ...
- Python基础篇(流程控制)
流程控制是程序运行的基础,流程控制决定了程序按照什么样的方式执行. 条件语句 条件语句一般用来判断给定的条件是否成立,根据结果来执行不同的代码,也就是说,有了条件语句,才可以根据不同的情况做不同的事, ...
- 使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我门会使用 console.log 等方式查看数据.但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的. 虽然我们可以把图片数据通过 img 标签展示 ...
- PasteSpider之接口的授权实现为什么不采用JWT方式
PasteTemplate序列的接口权限控制使用的都是一套逻辑 包括不限于PasteSpider,PasteTimer,PasteTicker等 大致逻辑一致,具体的细节可能会根据项目做一些调整! 实 ...
- post请求和get请求区别及其实例
1.一般我们在浏览器输入一个网址访问网站都是GET请求;在FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式.HTTP定义了与服务器交互的不同方法, ...
- JDK动态代理的深入理解
引入代理模式 代理模式是框架中经常使用的一种模式,动态代理是AOP(面向切面编程)思想的一种重要的实现方式,在我们常用的框架中也经常遇见代理模式的身影,例如在Spring中事务管理就运用了动态代理,它 ...
- redis 使用lua脚本 一次性获取多个hash key 字段值
客户端命令行代码: eval "local rst={};local field='schoolid'; for i,v in pairs(KEYS) do rst[i]=redis.cal ...
- Python实现五子棋人机对战的二次开发
Python实现人机对战的二次开发 在网上找到了一个使用python实现五子棋游戏,其中通过加入一个简单的AI算法实现了人机对战的功能,我觉得这个人机对战还是蛮有意思的,下面我分析一下五子棋游 ...
- redhat8 添加scsi类型的硬盘后开机重配虚拟机 且黑屏
原因:因为vmware磁盘优先级里nvme类型的磁盘比scsi类型的磁盘优先级高,所以开机先启动scsi类型的磁盘 又因为scsi并不是系统盘所以不能够实现开机 解决方法: 改变vmware的磁盘优先 ...
- ElasticSearch性能原理拆解
逐层拆分ElasticSearch的概念 Cluster:集群,Es是一个可以横向扩展的检索引擎(部分时候当作存储数据库使用),一个Es集群由一个唯一的名字标识,默认为"elasticsea ...