7. cocos-2dx Shader(三) 实例应用

Mark~ 

HSV and HLS color systems are problematic for a number of reasons. I talked with a color scientist about this recently, and his recommendation was to convert to YIQ or YCbCr space and adjust the the chroma channels (I&Q, or Cb&Cr) accordingly. (You can learn how to do that here and here.)

Once in one of those spaces, you can get the hue from the angle formed by the chroma channels, by doing hue = atan(cr/cb) (watching for cb == 0). This gives you a value in radians. Simply rotate it by adding the hue rotation amount. Once you've done that, you can calculate the magnitude of the chroma with chroma = sqrt(cr*cr+cb*cb). To get back to RGB, calculate the new Cb and Cr (or I & Q) using Cr = chroma * sin (hue), Cb = chroma * cos (hue). Then convert back to RGB as described on the above web pages.

EDIT: Here's a solution that I've tested and seems to give me the same results as your reference. You can probably collapse some of the dot products into matrix multiplies:



uniform sampler2DRect inputTexture;
uniform float hueAdjust;
void main ()
{
const vec4 kRGBToYPrime = vec4 (0.299, 0.587, 0.114, 0.0);
const vec4 kRGBToI = vec4 (0.596, -0.275, -0.321, 0.0);
const vec4 kRGBToQ = vec4 (0.212, -0.523, 0.311, 0.0);

const vec4 kYIQToR = vec4 (1.0, 0.956, 0.621, 0.0);
const vec4 kYIQToG = vec4 (1.0, -0.272, -0.647, 0.0);
const vec4 kYIQToB = vec4 (1.0, -1.107, 1.704, 0.0);

// Sample the input pixel
vec4 color = texture2DRect (inputTexture, gl_TexCoord [ 0 ].xy);

// Convert to YIQ
float YPrime = dot (color, kRGBToYPrime);
float I = dot (color, kRGBToI);
float Q = dot (color, kRGBToQ);

// Calculate the hue and chroma
float hue = atan (Q, I);
float chroma = sqrt (I * I + Q * Q);

// Make the user's adjustments
hue += hueAdjust;

// Convert back to YIQ
Q = chroma * sin (hue);
I = chroma * cos (hue);

// Convert back to RGB
vec4 yIQ = vec4 (YPrime, I, Q, 0.0);
color.r = dot (yIQ, kYIQToR);
color.g = dot (yIQ, kYIQToG);
color.b = dot (yIQ, kYIQToB);

// Save the result
gl_FragColor = color;
}




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

相关推荐

【cocos shader 002】开发如何使用GLProgram shader编程

先看效果 废话不多说,直接上代码,本篇做一个图片变灰的特效,打开cocos2dx-lua的helloWorld工程,在MainScene的onCreate函数里添加如下代码 --新建一张默认的图片 local img = display.newSprite("HelloWorld.png") :move(display.center) :addTo(s...

刀客 1433

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

Cocos2dx 2.x Shader效果演示与实现解析

Cocos2dx是一个开源的游戏开发框架,它支持2D游戏的开发,也具备3D图形渲染能力,广泛应用于iOS和Android平台。该框架具有丰富的功能模块和灵活的扩展性,因此成为了移动游戏开发者首选的工具之一。在Cocos2dx中,游戏开发人员可以通过其提供的API,高效地构建游戏界面、处理用户输入、实现音效与动画等。Cocos2dx框架的核心是场景、层、精灵以及动作。场景是游戏的最高层次,层是场景中包含的元素,精灵则是游戏中的最小视觉单元。动作和时间调度器为框架增添动画与时间控制的能力。

weixin_26850469的博客 876

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

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

中苑 739

基于cocos2dx 2.x做的一些shader效果Demo

原文地址:http://blog.csdn.net/teng_ontheway/article/details/39190919

Quick Cocos Lua+shader实现的搓牌效果

文件是用Quick Cocos Lua 加上shader实现的搓牌效果文件,内有使用方法 需要使用plist文件(plist的大小最好保证不要使用8192x8192及以上大小的尺寸,ios加载尺寸有限制,同时保证plist文件中图片的排版为同一方向,因为代码的实现是根据plist文件中的size去绘制的)

OpenGL ES2.0教程:编写自己的shader(2)

转自:http://4gamers.cn/archives/131

hhy018的专栏 940

保姆级教程:用ROS2 Humble + Gazebo Classic 从零搭建一个能键盘控制的差分AGV模型

本文提供了一份详细的ROS2 Humble与Gazebo Classic教程,指导用户从零开始搭建一个键盘控制的差分AGV模型。内容涵盖环境配置、Xacro文件设计、Gazebo仿真集成以及键盘控制实现,特别针对常见问题提供解决方案,帮助开发者快速掌握ROS2机器人仿真技术。

weixin_30387423的博客 169

在cocos2dx中实现水波滤镜

因为工作原因,开始转向cocos2d-x开发方向了。 自然的,凭着之前引擎的经验偏向底层渲染研究。 在此期间看了两本书 《cocos2d-x 权威指南》 《cocos2d-x 高级开发教程》 不得不说,第一本书完全是API介绍,也许适合新手入门,但是于我,只是烂书一本。 第二本书还是不错的,最后的项目有全套源码,教程的风格也很有我的风格,哈哈,就是文章中不一定贴全代码,只贴核心,后

zmzsoftware的专栏 1万+

告别手动群发!用IDA Pro和CE搞定企业微信4.1.38.6011的HOOK开发(附完整代码)

本文详细介绍了如何利用IDA Pro和Cheat Engine进行企业微信4.1.38.6011的HOOK开发,实现自动化群发功能。从逆向工程环境配置、关键函数定位到HOOK框架设计,提供完整代码示例,帮助企业提升运营效率。

weixin_42533120的博客 479

RT-2(robotics-transformer2)论文--阅读笔记

谷歌RT-2机器人论文的阅读笔记。

weixin_61255639的博客 1828

Cocos2dx--使用Shader

Cocos2dx的Shader架构 Cocos2dx的Shader由GLProgram、GLProgramState、GLProgramCache、GLProgramStateCache组成。 GLProgram是Cocos2dx对Program的封装,一般提供一些静态方法,被多个节点复用。而GLProgramState是对GLProgram的封装,提供更加便捷的操作接口,内部记录了Unifo...

疯狂的程序员 7578

Windows 11安装 SQLServer 2008 R2 失败问题处理

Windows 11安装SQL Server 2008 R2失败解决方案 由于Windows 11移除了对PowerShell 2.0的支持,导致SQL Server 2008 R2安装失败。经过多次尝试,最终通过**方案六(修改注册表模拟PowerShell 2.0环境)**成功安装。其他可行方案包括: 使用SP3集成版安装包 通过命令行跳过检查(/SUPPRESSPOWERShellCHECK参数) 创建特殊配置文件 替代方案建议: 使用Docker容器运行 在虚拟机中安装 升级到新版SQL Serve

oDengWei的博客 7187

cocos之Shader

Shader 纹理和管线 纹理的概念 在现实生活中,物体都是有边界的,比如一颗石头,有一层表面,当我们给它拍个照片,就能变成一张二维的图片了,那么这个图片就是石头的纹理。 可是石头是立体的,并不是二维的,立体这种东西,是我们人对石头的一种感觉,如果把石头拿在手里,转动这个石头或者转动我们的位置,我们可以看到这个石头的多个面,于是给我们一种立体的概念。 计算机图形学要将这种感觉给绘制出来,

陆癫子的博客 1390

竞拍算法(Auction Algorithm)原理及工作过程分析

因一些项目工作需要对竞拍算法进行深入了解。但百度了大部分资料都未找到一篇文章能对此算法进行较为深入的介绍。在一番努力之下,终于找打了最初提出该算法的论文,本文内容主要结合该论文对竞拍算法进行分析。 竞拍算法简介 竞拍算法(Auction Algorithm)是一种用于解决分配问题的分布式算法,经相关文献查询,最早由麻省理工学院信息和决策系统实验室的Bertsekas(教授?)提出 1,于1988年发表于期刊Annals of Operations Research。 顾名思义,竞拍算法本质就是模拟人类拍.

weixin_47546390的博客 3万+

prplOS介绍

介绍prplOS是什么,特性、框架、编译等。

四儿家的小祖宗的博客 2131

6. cocos-2dx Shader(二) 实例应用

shader在处理资源上有很多种应用。 比如[b]按钮的变灰,角色的冰冻,石化,中毒等效果,再比如水波的滤镜实现[/b]~ . 先来个类似于最近比较火的刀塔传奇里的中毒效果把。(ps:抽的亚龙不怎么给力。o(︶︿︶)o 唉)。 资源我就拿天天酷跑里的loading男孩了。 先来个对比效果图把~ [img]http://dl2.iteye.com/upload/attac...

中苑 389

10、基于单倍型多样性隐马尔可夫模型的基因型错误检测

本文提出了一种基于单倍型多样性隐马尔可夫模型(HMM)的基因型错误检测方法,旨在提升三人组基因型数据中错误识别的准确性。通过利用群体水平的连锁信息,该方法克服了传统方法在小系谱数据中表现不佳的局限性。文章详细介绍了模型结构、三种替代似然函数及其计算方法,并通过模拟数据集和真实数据集验证了方法的有效性。实验结果显示,该方法在灵敏度、特异度和准确率方面均表现出色,为基因数据质量控制提供了新的解决方案。

moon9的博客 96

cocos2dx 字体外发光_Cocos Creator Shader Effect 系列 - 6 - 内发光特效

本章为大家带来内发光特效。2d-sprite-glow-inner.gif一、内发光原理学习 Shader 过程中,偶然在网上看到一句的内发光原理,十分精辟受用:采样周边像素alpha取平均值,叠加发光效果事实上,根据这句精辟的原理,就可以实现内发光了,你也试试吧?以下为我的实现过程。二、采样周边像素Alpha取平均值怎么采集某个点的周边像素呢?这里我们可以用 「按圆采样」 算法2.1 采样圆边上...

weixin_39978444的博客 1479

【Bug已解决】[Bug]: ValueError: No user query found in messages QWEN 3.5 27B VLLM 0.16.0 NIGHTLY 解决方案

用 vLLM 0.16.0 nightly 给发聊天请求时,服务端在处理消息时抛ValueError,请求失败。

博客 411

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

cocos中如何让背景模糊_cocos2dx-js Shader的使用(高斯模糊)

编程之家收集整理的这篇文章主要介绍了cocos2dx-js Shader的使用(高斯模糊),编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。可以参考http://blog.csdn.net/afei198409/article/details/50594665了解必须的shader使用知识。首先.vsh文件(这里有两个,一个test_noMVP.vsh用于本地,一个test.vsh用于...

weixin_39858245的博客 516

计算机控制技术及应用

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

cocos-2dx Shader 着色器和GLSL

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

fybing1986的专栏 1337

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

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

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

gitblog_00940的博客 1183

coco2dx shader内置变量和函数

1、uint CreateShader(enum type) : 创建空的shader object;    type: VERTEX_SHADER, 2、void ShaderSource(uint shader, sizeicount, const **string, const int *length):加载shader源码进shader object;可能多个字符串 3、

FoxGame的专栏 990

cocos中如何让背景模糊_Cocos2d-x shader学习2: 模糊(Blur)

模糊效果在游戏中经常会用到,有的为了突出前景会把背景给模糊化,有的是因为一些技能需要模糊效果。模糊是shader中较为简单的一种应用。cocos2dx 3.x给的demo中,就有sprite的模糊的效果。先说下这个模糊算法的大致思路,我们在片段着色器中可以得到当前像素点的颜色值,要想让这个颜色变得模糊,就要让它与它周围的像素点的颜色稍微接近一点,那么我们就需要拿到这个像素点周围的像素点的颜色值,我...

weixin_39738667的博客 692

cocos2dx:cocos之Shader

转自:http://blog.csdn.net/u013235682/article/details/46687383  Shader 纹理和管线 纹理的概念 在现实生活中,物体都是有边界的,比如一颗石头,有一层表面,当我们给它拍个照片,就能变成一张二维的图片了,那么这个图片就是石头的纹理。 可是石头是立体的,并不是二维的,立体这种东西,是我们人对石头的一种感觉,

nothing的专栏 1924
上一篇: C++ 指针和引用的区别
下一篇: C++ Map小结
Hel1C
博客等级 码龄17年 6粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值