Cocos2d-x shader学习1: 灰度shader
灰度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)
vec4 c = texture2D(CC_Texture0, v_texCoord);
gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
gl_FragColor.w = c.w;
}
代码分析
precision mediump float
是open es特有的精度限定符,原本的浮点数精度是double
,opengl es为了提高渲染效率,限定精度为float
类型。
v_fragmentColor
是从顶点着色器设置的颜色经过光栅化阶段的线性插值后传给片段着色器的颜色。
v_texCoord
同样是经过线性插值而来的纹理坐标。
下面是顶点着色器的代码:
const char* ccPositionTextureColor_noMVP_vert = STRINGIFY(
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
\n#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
\n#else\n
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
\n#endif\n
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
);
CC_Texture0
是一个采样器,在load shader的时候,引擎会预先把这些uniform
变量给加载进来。
下面这部分代码就是引擎预先加载进来的uniform
变量:
static const char * COCOS2D_SHADER_UNIFORMS =
"uniform mat4 CC_PMatrix;\n"
"uniform mat4 CC_MVMatrix;\n"
"uniform mat4 CC_MVPMatrix;\n"
"uniform mat3 CC_NormalMatrix;\n"
"uniform vec4 CC_Time;\n"
"uniform vec4 CC_SinTime;\n"
"uniform vec4 CC_CosTime;\n"
"uniform vec4 CC_Random01;\n"
"uniform sampler2D CC_Texture0;\n"
"uniform sampler2D CC_Texture1;\n"
"uniform sampler2D CC_Texture2;\n"
"uniform sampler2D CC_Texture3;\n"
"//CC INCLUDES END\n\n";
这些变量在shader里面如果没有用到的话,会被引擎给优化掉。
texture2D()
是shader的内建方法,作用是从CC_Texture0
采样器中进行纹理采样,得到当前片段的颜色值。
gl_FragColor
是shader的内建变量,表示当前片段的颜色,代码中是把从采样器中拿到的颜色值进行一个变灰处理后,最后得到的颜色值再赋值给gl_FragColor
。gl_FragColor
就是最终的颜色。
这个shader很简单,就是改变了一下rgb的值。0.2126
,0.7152
,0.0722
这几个系数据说是根据人眼对rgb这三种基本颜色识别的强弱算出来的。
使用示例
在cocos2dx 3.x版本中sprite变灰的代码例子:
auto sprite = Sprite::create("HelloWorld.png");
sprite->setGLProgramState(GLProgramState::getOrCreateWithGLProgramName(GLProgram::SHADER_NAME_POSITION_GRAYSCALE));
效果如下图所示:
Cocos2d-x shader学习1: 灰度shader的更多相关文章
- Unity3D 灰度shader(改编自NGUI)
原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 QQ群:[] 本文链接地址: 灰度shader 废话不多说,直接图解流程: 1.原图 2.改动shader 打开NGUI自带的shader ...
- 【Unity Shaders】Shader学习资源和Surface Shader概述
写在前面 写这篇文章的时候,我断断续续学习Unity Shader半年了,其实还是个门外汉.我也能体会很多童鞋那种想要学好Shader却无从下手的感觉.在这个期间,我找到一些学习Shader的教程以及 ...
- ugui 灰度shader mask冲突解决 转。。。
项目上遇到了一个问题,灰度shader无法在mask下使用,两个之间会一定的冲突.经查验是mask组件对shader的相关属性有要求,添加相关的属性则可符合要求使其他shader使用UGui里的mas ...
- Unity Shader 学习之旅
Unity Shader 学习之旅 unityshader图形图像 纸上学来终觉浅,绝知此事要躬行 美丽的梦和美丽的诗一样 都是可遇而不可求的——席慕蓉 一.渲染流水线 示例图 Tips:什么是 GP ...
- Unity Shader 学习之旅之SurfaceShader
Unity Shader 学习之旅之SurfaceShader unity shader 图形图像 如果大地的每个角落都充满了光明 谁还需要星星,谁还会 在夜里凝望 寻找遥远的安慰——江河 官方文档 ...
- Shader 学习工具篇 可视化公式工具ZGrapher
大家好,我是怒风,本篇介绍公式可视化公式工具ZGrapher,尝试通过可视化的方式分析一下Shader中应用的公式,以求帮助初学者快速理解Shader编程中的一些常用公式 本篇的目的两个, 第一,介绍 ...
- Unity3D for VR 学习(9): Unity Shader 光照模型 (illumination model)
关于光照模型 所谓模型,一般是由学术算法发起, 经过大量实际数据验证而成的可靠公式 现在还记得2009年做TD-SCDMA移动通信算法的时候,曾经看过自由空间传播模型(Free space propa ...
- Shader学习笔记
Shader学习笔记 例子: Shader "SrfShader1"{ //定义显示在Inspector中的变量,并从Inspector中获取值 Properties{ _Colo ...
- u3d shader学习笔记1
促使我学习SHADER的重要原因是希望深入理解3D渲染的机制,在此基础上可以灵活达到某种效果与性能的平衡,开发出具有良好体验的VR应用. 因为VR应用体验的好坏,直接由游戏的帧率决定,而游戏的帧率则受 ...
随机推荐
- magento1.x 运行在 php7 优惠券的问题
diff --git app/code/core/Mage/Sales/etc/config.xml index 5bb43d7..7db62ca 100644 --- app/code/core/M ...
- MongoDB_GridFS_存储文件
GridFS mongoDB除了保存各种文档(JOSN结构)外还能够保存文件.GridFS规范提供了一种透明机制,可以将一个大文件分割成为多个较小的文档,这样的机制允许我们有效的保存大文件对象,特别对 ...
- WPF 实现验证码功能
产生验证码的类:ValidCode.cs public class ValidCode { #region Private Fields /// <summary> /// PI /// ...
- apache 运行php环境之困扰,无法加载多个不同的.html文件
又是一个项目,为多个纯静态html页面h5游戏页,原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoot目录,进行测试了. 刚开始使用目 ...
- android Fragment和FragmentActivity
MainActivity.java import android.app.AlertDialog; import android.app.Notification; import android.co ...
- 一个基于node 的小demo
首先我们新建一个文件夹 demo-test-node-1 目录目录如下 -- blog_recents.js --template.html --titles.jspn 首先我们新建一个 templ ...
- Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...
- oracle__wm_concat函数
首先让我们来看看这个神奇的函数wm_concat(列名),该函数可以把列值以","号分隔起来,并显示成一行,接下来上例子,看看这个神奇的函数如何应用 准备测试数据 SQL> ...
- (@WhiteTaken)设计模式学习——单例模式
单例模式,个人理解就是,使用了这个模式,可以保证一个类只生成唯一的实例对象.就是在整个程序中,这个类只存在一个实例对象. GoF对单例模式的定义:保证一个类,只有一个实例存在,同时提供能对该实例加以访 ...
- io的四个分类
1.首先是字节操作:InputStream和OutputStream 2.字符操作:Reader和Writer 3.磁盘操作:File 4.网络操作:scoket(不在java.io包)