cocos shader学习之手电筒光效

一.效果

2.原理

计算每个uv的点距离点击屏幕的uv点的距离，根据已知的宽度计算显示的区域。

3.代码

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  CCEffect %{techniques:- passes:- vert: vsfrag: fsblendState:targets:- blend: truerasterizerState:cullMode: noneproperties:texture: { value: white }alphaThreshold: { value: 0.5 }center_point: { value: [0.3,0.3],editor: {tooltip: "显示的中心点"}}textureSize: {vaule: [1.0,1.0],editor: {tooltip: '图片的宽'}}textureWidth: {vaule: 1.0,editor: {tooltip: '图片的宽'}}textureHeight: {vaule: 1.0,editor: {tooltip: '图片的高'}}show_width: {value: 0.5,editor: {tooltip: "显示的宽度"}}
}%CCProgram vs %{precision highp float;#include <cc-global>#include <cc-local>in vec3 a_position;in vec4 a_color;out vec4 v_color;#if USE_TEXTUREin vec2 a_uv0;out vec2 v_uv0;#endifvoid main () {vec4 pos = vec4(a_position, 1);#if CC_USE_MODELpos = cc_matViewProj * cc_matWorld * pos;#elsepos = cc_matViewProj * pos;#endif#if USE_TEXTUREv_uv0 = a_uv0;#endifv_color = a_color;gl_Position = pos;}
}%CCProgram fs %{precision highp float;#include <alpha-test>#include <texture>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;uniform sampler2D texture;#endif#if USE_FLASHLIGHTuniform Light{vec2 center_point;vec2 textureSize;float textureWidth;float textureHeight;float show_width;};#endif/*** 计算显示的区域*/vec4 addLight(vec4 oldColor){#if USE_FLASHLIGHTif(oldColor.a == 0.0){return oldColor;}//计算向量差vec2 distance_vec = center_point - v_uv0;//将向量差正常化（因为图片不是标准的正方形）distance_vec = distance_vec * vec2(textureWidth / textureHeight,1.0);//三角函数 计算距离float distance_center = sqrt(distance_vec.x * distance_vec.x + distance_vec.y * distance_vec.y);//利用smoothstep函数得到一个渐变的过度因子float distance_factor = smoothstep(0.0,show_width,distance_center);oldColor *= (1.0 - distance_factor);#endifreturn oldColor;}void main () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTURECCTexture(texture, v_uv0, o);#endifo *= v_color;ALPHA_TEST(o);o = addLight(o);gl_FragColor = o;}
}%

cocos shader学习之手电筒光效相关推荐

Cocos Shader入门基础七：一文彻底读懂深度图。
开篇经过一段时间的持续输出,社区中越来越多的人踏上了3D图形渲染学习之旅,麒麟子非常开心,说明输出的内容对大家都产生了实际的帮助. 特别是上一篇 <用实时反射Shader增强画面颜值> ...
大神驾到 | 麒麟子带你初识Cocos Shader
一.什么是Cocos Shader 可能有朋友会感到奇怪,百度上搜不到Cocos Shader. 那就对了,因为Cocos Shader 是 Cocos Creator 3D Shader的简称. 是 ...
Unity Shader 学习笔记（33）全局光照（GI）、反射探针、线性空间和伽马空间、高动态范围（HDR）
Unity Shader 学习笔记(33) 全局光照(GI).反射探针.线性空间和伽马空间.高动态范围(HDR) 参考书籍:<Unity Shader 入门精要> [<Real-Ti ...
Shader学习笔记（三）学习Shader所需的数学基础
感受高数一.笛卡尔坐标系 1.二维笛卡尔坐标系 2.三维笛卡尔坐标系二.点和矢量 1.矢量和标量的乘法/除法 2.矢量的加法和减法 3.矢量的模 4.单位矢量 5.矢量的点积 6.矢量的叉积(cr ...
Unity Shader学习-高光反射
Unity Shader学习-高光反射高光反射计算公式高光反射 = 光源的色彩和强度 * 材质的高光反射系数 * pow(max(0,视角方向 · 反射方向),_Gloss) 视角方向 = ref ...
Unity Shader学习：SSAO屏幕环境光遮蔽
Unity Shader学习:SSAO屏幕环境光遮蔽主要思路:1.随机采样像素法线半球周围的像素,平均对比与该像素深度是否处在暗处.2.双边滤波去噪点.3.后期AO图与原图混合. 原文链接:http ...
Unity Shader学习：动态模糊(shutter angle方式)
Unity Shader学习:动态模糊动态模糊一般有帧混合和motion vector两种,这里主要介绍motion vector的方法. Keijiro源码:https://github.com/ ...
Shader学习3——半兰伯特
半兰伯特其实就是把暗的地方提亮了一些,在数值上就是获取到的光源强度* 0.5 + 0.5,也就是原来是0的会变成0.5,原来是1的还是1. 半兰伯特:漫反射颜色 = 光源颜色 x 材质的漫反射颜色 x ...
Unity Shader学习：水墨效果
Unity Shader学习:水墨效果偶然在网上看到9级铁甲蛹大神的水墨风格后处理觉得挺有意思,参照着实现一下,还是涉及到之前油画效果的算法,叫什么滤波暂时不清楚,应该用来处理手绘效果挺多的. 水墨 ...

cocos shader学习之手电筒光效

一.效果

2.原理

3.代码

cocos shader学习之手电筒光效相关推荐

最新文章

热门文章

cocos shader学习之 手电筒光效

一.效果

2.原理

3.代码

cocos shader学习之 手电筒光效相关推荐

最新文章

热门文章

cocos shader学习之手电筒光效

cocos shader学习之手电筒光效相关推荐