5. cocos-2dx Shader(一) 着色器和GLSL

在移动游戏中,GPU大部分时间都是闲着的,而我们很多时刻可以直接来操作[b]着色器[/b]在屏幕上的显示来节约我们的图片资源,容量以及内存等等。

[b]着色器[/b]
着色器(英语:shader)应用于计算机图形学领域,指一组供计算机图形资源在执行渲染任务时使用的指令。程序员将着色器应用于图形处理器(GPU)的可编程流水线,来实现三维应用程序。这样的图形处理器有别于传统的固定流水线处理器,为GPU编程带来更高的灵活性和适应性。

用过opengl的同学对着色器应该不会陌生,作为移动游戏终端设备的开发者,对于图形图像的了解是必不可少的,对于opengl es 2.x才引入的着色器,WWDC的专题讲座有一节就是讲opengl es的新特性的,结合AVFoundation那一节,我们也能从中可以学到不少东西的。

opengl es的着色器 有.fsh和.vsh两个文件 这两个文件在被编译和链接后就可以产生可执行程序 与GPU交互.vsh 是顶点shader 用与顶点计算 可以理解控制顶点的位置 在这个文件中我们通常会传入当前顶点的位置,和纹理的坐标.

[b]GLSL[/b]
GLSL - OpenGL Shading Language 也称作 GLslang,是一个以C语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立,提供开发者对绘图管线更多的直接控制,而无需使用汇编语言或硬件规格语言。

随着近年来绘图卡的进步, 已在渲染管线中的顶点(vertex)和片断(fragment)层次中,加入更具弹性的新功能。 达到在这个层次中,使用片断和顶点着色器的可编程性。



void main(void)
{
gl_Position = ftransform();
}



void main(void)
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}


GLSL的函式和控制结构

类似于 C语言,GLSL 支援循环和分支,包括 if、else、if/else、for、do-while、break、continue 等。

支援使用者定义函式,且各种常用的函式也已内建。这也就让绘图卡制造商,能够在硬件层次上最佳化这些内建的函式。许多函式与 C 语言相同,如 exp() 以及 abs(),其它绘图编程特有的,如 smoothstep() 以及 texture2D()


OpenGL 着色语言规格定义了 22 个基本资料类型,有些用法与 C 相同,其它的是绘图处理器特有的。
.
void – 用于没有返回值的函式
bool – 条件类型,其值可以是真或假
int – 带负号整数
float – 浮点数
vec2 – 2 个浮点数组成的向量
vec3 – 3 个浮点数组成的向量
vec4 – 4 个浮点数组成的向量
bvec2 – 2 个布林组成的向量
bvec3 – 3 个布林组成的向量
bvec4 – 4 个布林组成的向量
ivec2 – 2 个整数组成的向量
ivec3 – 3 个整数组成的向量
ivec4 – 4 个整数组成的向量
mat2 – 浮点数的 2X2 矩阵
mat3 – 浮点数的 3X3 矩阵
mat4 – 浮点数的 4X4 矩阵
sampler1D – 用来存取一维纹理的句柄(handle)(或:操作,作名词解。)
sampler2D – 用来存取二维纹理的句柄
sampler3D – 用来存取三维纹理的句柄
samplerCube – 用来存取立方映射纹理的句柄
sampler1Dshadow – 用来存取一维深度纹理的句柄
sampler2Dshadow – 用来存取二维深度纹理的句柄



下面一章,我会举例介绍一下操作着色器在移动游戏(cocos-2dx)开发中的应用。


[部分资料来源于wiki ]
Cocos2d-x 3.x 图形学渲染系列二十一 笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,优快云社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。 模型材质的高光、法线渲染在游戏中使用的最多,加上高光、法线的材质凹凸感更强。UE4(虚幻4引擎)对模型材质的渲染非常逼真,它在对材质渲染方面做的更好,算法更强大。效果如下图:下面利 阅读详情

相关推荐

Cocos2d-x 3D渲染技术 (一)

最近因为工作需要阅读《Cocos2D-X 3.X 3D图形学渲染技术讲解》这本书所做的笔记。

canjiangmengyuan的专栏 842

Cocos2d-x shader学习1: 灰度shader

最近在学习shader,就把cocos2d-x 3.x版本中的很简单也很常用的灰度shader拿出来学习一下。 #ifdef GL_ES precision mediump float; // ES版本的精度限定符,精度变低后可以提高效率 #endif varying vec4 v_fragmentColor; varying vec2 v_texCoord; void main(void)

皓月微风 893

游戏UI跑马灯效果:基于角度渐变与极坐标的Shader实现方案

在游戏UI与视觉特效开发中,Shader是实现高性能、高灵活性动态效果的核心技术。其原理在于通过GPU并行计算,直接操作像素颜色与位置信息,从而摆脱传统序列帧动画或脚本逐帧控制的性能瓶颈。这种技术价值在于能以极低的资源消耗,创造出平滑、可实时调整的视觉反馈,广泛应用于技能冷却、道具高亮、状态指示等UI交互场景。本文聚焦于利用“角度渐变”这一Shader技术,通过极坐标映射与渐变纹理采样,重构经典的“跑马灯”效果,在Unity UGUI与Cocos Creator中均能实现资源消耗极低、效果完美平滑的解决方案

hqmln的博客 532

《我所理解的cocos2dx》第八章 OpenGL ES 着色器程序

《我所理解的cocos2dx》第八章 OpenGL ES 着色器程序 具体参考之前写的Opengl内容

笃笃前行的专栏 191

SRAM compiler选项中 Soft Error Repair (SER)

引起的瞬时故障,可能会影响 SRAM 中存储的数据。SER 功能通过某种机制检测并修复这些错误,从而提高存储器的可靠性。在 SRAM 编译器中,

hzmscut的博客 1154

Android开发者必看:F2FS文件系统如何优化你的手机存储性能(附实测数据对比)

本文深入解析了F2FS文件系统如何针对闪存特性优化Android设备存储性能。通过对比ext4,F2FS采用追加写和冷热数据分离策略,将随机写转化为顺序写,显著提升写入速度并减少GC卡顿。实测数据显示,其在随机写入和SQLite事务等场景下性能提升显著,为开发者提供了优化应用IO性能的关键思路。

weixin_29248313的博客 325

cocos-2dx Shader 着色器和GLSL

在移动游戏中,GPU大部分时间都是闲着的,而我们很多时刻可以直接来操作着色器在屏幕上的显示来节约我们的图片资源,容量以及内存等等。  着色器  着色器(英语:shader)应用于计算机图形学领域,指一组供计算机图形资源在执行渲染任务时使用的指令。程序员将着色器应用于图形处理器(GPU)的可编程流水线,来实现三维应用程序。这样的图形处理器有别于传统的固定流水线处理器,为GPU编程带来更高的灵

fybing1986的专栏 1337

Python地理空间库安装指南:从gdal到geopandas的完整流程

本文详细介绍了Python地理空间库的完整安装流程,包括gdal、rasterio和geopandas等核心库的安装与配置。通过Anaconda环境管理和conda-forge频道,帮助开发者高效解决依赖问题,确保地理空间数据处理环境的稳定运行。

weixin_29091105的博客 465

3步打造Cocos 2D相机滤镜:零基础Shader特效教程

你还在为游戏画面单调发愁?3行代码+5分钟,用Cocos引擎实现专业级2D滤镜效果。读完你将获得:自定义灰度/模糊滤镜、相机渲染层级控制、跨平台着色器兼容方案。 ## 一、准备工作 ### 环境要求 支持Cocos Creator 3.0+,通过[package.json](https://link.gitcode.com/i/e8a04080cbd5eca115104b3db87322db)确...

gitblog_00940的博客 1183

【数据清洗】数据清洗流程及经验

预处理阶段 预处理阶段主要做两件事情: 一是将数据导入处理工具。 二是看数据。包含两个部分:一是看元数据,包括字段解释、数据来源、代码表等等一切描述数据的信息;二是抽取一部分数据,对数据本身有一个直观的了解,并且初步发现一些问题,为之后的处理做准备。 第一步:缺失值清洗 四个步骤: 1、确定缺失值范围:对每个字段都计算其缺失值比例,然后按照缺失比例和字段重要性,分别制定策略。 2、去除不需要的...

JoJo93723的博客 6497

SRAM Bank数量配置:性能、面积与功耗的权衡指南

SRAM(静态随机存取存储器)是芯片设计中的关键存储单元,其Bank数量配置直接影响访问延迟、吞吐率、功耗和面积。Bank切分通过将存储阵列分区,缩短位线和字线延迟,从而提升性能,但会增加外围电路开销。合理配置Bank数量可优化PPA(性能、功耗、面积),在28nm和16nm工艺下,2个Bank通常是性价比最高的选择。本文基于实测数据,探讨不同场景下的Bank配置策略,帮助工程师避免常见误区,提升设计效率。

weixin_27230891的博客 179

cocos2dx 使用shader实现圆形裁剪

最近在做联网象棋游戏,需要将在线获取的图形裁剪成圆形图片,由于之前了解过shader相关知识,所以就想试试用shader来实现圆形裁剪,代码如下: 顶点着色器代码: attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; #ifdef GL_ES varying mediump vec2 v_texCoord; varying lowp vec4 v_fragmentColor; #else vary

三思而先行的博客 1341

SAP_MM模块非限制库存转冻结库存

项目非限制 → 冻结事务码移动类型343影响库存不可用,不参与MRP常见用途质量问题封存、盘点冻结、待退货品通过本文,我们了解了 SAP 的[SAP_MM模块非限制库存转冻结库存]的基本概念和应用方法。希望这些信息能帮助您在实际工作中更好地使用 SAP 系统,提高工作效率和管理水平。更多SAP文章请点击更多SAP文章更新,大家一起学习进步!!!文章中如有错误。敬请指正!搜索公众号:SAP资料文库微信号:SPRO_PP时间:2025-10-14。

我小时候很黑的博客 586

cocos2dx-js Shader的使用(高斯模糊)

可以参考http://blog.csdn.net/afei198409/article/details/50594665了解必须的shader使用知识。 首先.vsh文件(这里有两个,一个test_noMVP.vsh用于本地,一个test.vsh用于浏览器) test_noMVP.vsh描述如下: attribute vec4 a_position; attribute vec2 a_te

afei198409的专栏 2942

Linux 完全卸载 Neovim 的方法:解决权限问题和清除残留文件

Neovim 没有被完全卸载的原因,可能是因为它是通过非官方方式(如手动编译或二进制包)安装的。对于这种情况,使用apt卸载命令无法删除这些文件。因此,需要手动删除和中的相关文件。建议在安装软件时,尽量使用包管理器(如apt)进行安装,以便以后能够方便地卸载。如果你不太熟悉 Linux 系统,避免手动操作系统目录,除非你非常清楚自己的操作。通过上述方法,你应该能够彻底卸载 Neovim 并重新安装。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 4942

芒果YOLOv5改进107:ARConv自适应旋转卷积,全网首发 | 即插即用:以增强其表征能力,从而准确检测方向物体,ICCV顶会论文idea

ARConv自适应旋转卷积,全网首发 | 即插即用:以增强其表征能力,从而准确检测方向物体,ICCV顶会论文idea

包括YOLOv5、YOLOv7、YOLOv8等模型改进 956

cocos creator 1 x 中使用自定义shader

cocos creator 1 x 中使用自定义shader

qq_44910471的博客 261

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

Cocos Creator图形抽象层解析:GFXDeviceManager与GFXDevice源码剖析

在游戏开发与计算机图形学中,渲染引擎的跨平台适配是核心技术挑战。其核心原理在于通过抽象层屏蔽底层图形API(如OpenGL、Metal、Vulkan)的差异,为上层提供统一接口。这项技术的核心价值在于实现“一次编写,多端运行”,大幅提升开发效率并确保渲染效果的一致性。典型的应用场景包括移动端游戏、跨平台应用及WebGL内容开发。本文聚焦于Cocos Creator引擎的图形抽象层实现,深入剖析其核心组件GFXDeviceManager与GFXDevice的设计哲学与工作机制。GFXDeviceManager

weixin_30514745的博客 310

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

Cocosd2d 实现灰度shader

灰度shader 最近在学习shader,就把cocos2d-x 3.x版本中的很简单也很常用的灰度shader拿出来学习一下。 #ifdef GL_ES precision mediump float; // ES版本的精度限定符,精度变低后可以提高效率 #endif varying vec4 v_fragmentColor; varying vec2 v_texCoord; v

在代码身上,用心去飞翔 750

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

Cocos2d-lua 初识shader之三:模糊

原理:遍历当前像素点周围的部分像素点,累加它们的rgba,根据距离设置权重并相乘,最后再根据总权重获取该总和的平均值,将该平均值设置为当前像素点的颜色。

哎!小本本上八卦羞答答,人生太复杂... 2743

cocos2dx3.0系统文本描边的shader实现方式

上面这个是系统文本的实现方式,所以我们只需要对_textSprite进一步处理就可以得到想要的效果,但是_textSprite这个成员是protected,个人比较懒散,就直接让他public了,于是出现了下面这个步骤: 接着可以对它进行任何想要的操作,我自己实现的glsl描边代码如下: varying vec4 v_fragmentColor;  varying vec2 v_te

lj820348789的专栏 1041

SFML实战:打造2D游戏核心体验——镜头、粒子、HUD与着色器

在2D游戏开发中,画面表现与交互反馈直接决定玩家的沉浸感。很多开发者掌握基础绘制后,常困惑于如何让游戏世界真正“活”起来——镜头不跟随、打击无反馈、信息不直观,都是常见短板。本文从游戏引擎的通用机制切入,讲解如何利用SFML构建完整的视觉表现系统。先理清View与窗口坐标系的关系,掌握镜头跟随、平滑插值与分屏原理;再通过自写粒子系统实现爆炸与尾焰效果,理解对象池与批量渲染的性能价值;接着用独立UI视图打造稳定的HUD文字界面;最后借助着色器为场景添加电影感特效。这些技术不仅适用于SFML,在Godot、Co

weixin_33798152的博客 341

cocos2dx lua 置灰图片

在 lua 中创建 shader 添加到节点上,实现置灰图片 functionsetGrayNode(node,flag) localcache=cc.GLProgramCache:getInstance() localname,shader=nil,ni...

chunieyu9610的博客 592

Axmol引擎:Cocos2d-x现代化演进与跨平台C++游戏开发实践

在游戏开发领域,跨平台2D引擎是连接创意与多端部署的关键技术。其核心原理在于通过抽象层统一渲染、输入与系统接口,使开发者能用同一套代码高效覆盖移动、桌面及新兴平台。这一架构的价值在于大幅降低移植成本,提升开发效率,尤其适合中轻度游戏、工具应用等场景。现代C++(如C++17)的引入,通过智能指针、标准库容器等特性,进一步增强了代码的安全性与表现力。Axmol Engine正是这一理念的实践典范,它作为Cocos2d-x的现代化社区分支,不仅继承了成熟的API设计,更通过重构内存管理、升级渲染后端至支持Met

weixin_34319111的博客 589

游戏开发笔记:手机端次时代海水如何实现?

https://www.fgba.net/sitemap.xml

ludongguoa的博客 235

cocos2d-x OpenGL ES语法

OpenGL的渲染流程说明和语法说明

鹤九日的博客 3687
上一篇: vs中转向定义提示未能找到符号的解决方法
下一篇: 6. cocos-2dx Shader(二) 实例应用
Hel1C
博客等级 码龄17年 6粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值