[旧博客转移 - 2016年1月3日 16:40 ] 最近学习了一些Shader效果,打算把学到的知识总结一下,这篇讲一下这种轮廓发光的效果(如下图所示),也有一些地方管这个叫X光     1.原理 可以看到图上的蓝色人物,边缘颜色比较深,而中间的比较浅,这是利用法线跟视线向量的点乘值计算出颜色浓度来实现的   2.代码 Shader "lijia/Xray" { Properties { _RimColor(, , , ) _RimIntensity(, )) = } SubShad

支持辉光效果的Label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 FBGlowLabel // // FBGlowLabel.h // // Created by YouXianMing on 16/8/3. // Copyright © 2016年 YouXianMing. All rights reserved. // // https://github.com/lyokato/fbglowlabel /

使用CALayer制作View的辉光效果 实现以下的辉光效果: 思路是这样子的: 1. 创建好需要实现辉光效果的View 2. 对这个View进行截图 3. 将这个截图重新添加进View中 4. 对这个截图实现改变透明度的动画 ViewController.m // // ViewController.m // // Copyright (c) 2013 Nick Jensen. All rights reserved. // #import "ViewController.h" #i

本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现这个效果需要实现的功能: 实现一个扫光背景块,因为光是移动的,所以要加入渐变效果 (例如: 手电筒照射的一小块区域) 将扫光背景块控制到文本上 (即实现文本背景) 实现扫光动画 (扫光块从左往右循环移动) 思路理清了,接下来就是一步一步实现了 背景渐变 -webkit-linear-gradient

pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Create background image const background = PIXI.Sprite.from('/moban/bg_grass.jpg'); background.width = app.screen.width; backgr

如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以,我们得写一个shader来实现想要的效果,这里介绍一下实现的思路. 1.在自定义通道上,先获取场景原本的uv,然后原样输出: 2.在fs里,降低gl_FragColor的亮度(乘以小于1.0的数,这里取0.3),这样,画面立马暗了下来: 3.画一条直线 y = -x:在这条直线上的部分颜色亮度为1

简述 在传送门中,核心的玩法是在地上或者墙上打开2个可以联通的洞来实现传送的效果.以此扩展加入解谜要素构成游戏的核心. 这里尝试使用unity来实现传送门的核心功能,具体功能分析如下: 1.传送门的模型 2.传送门的贴图 3.传送门的传送功能 这里我们需要以下软件:3dmax 2014,unity3d 5.4.0,visual studio 2015 一.传送门的模型和uv        打开3dmax,确认系统单位和显示单位都为米,如果不为米,改成米         建立一个圆柱体,高度段数1

基本原理与实现 主要使用噪声和透明度测试,从噪声图中读取某个通道的值,然后使用该值进行透明度测试. 主要代码如下: fixed cutout = tex2D(_NoiseTex, i.uvNoiseTex).r; clip(cutout - _Threshold); 完整代码点这里 边缘颜色 如果纯粹这样镂空,则效果太朴素了,因此通常要在镂空边缘上弄点颜色来模拟火化.融化等效果. 1. 纯颜色 第一种实现很简单,首先定义_EdgeLength和_EdgeColor两个属性来决定边缘多长范围要显示

两个月前,刚接触unity的时候费了半天劲儿做了个荧光效果(见:http://www.cnblogs.com/wantnon/p/4430749.html),今天终于抽空整理了一下,把过程写下来. 荧光效果截图:   一,接口: 整理完以后得到三个东西:AE_GroupBloom.cs,Camera_renderBloomRT.prefab,bloomEmitter.shader. 使用方法: 1,将AE_GroupBloom.cs添加到Main Camera上. 2,将Camera_rende

粒子效果1: 游戏中会有很炫酷的特效,比如爆炸,水花,火焰等;2: unity提供粒子编辑器,方便特效人员来开发很炫酷的特效;3.粒子效果一般有专门的粒子特效师来做,我们只需要拿来用就好了,很多参数没必要掌握. Particle System组件面板 1: 粒子系统主体;2: 喷射(Emission);3: 形态(shape);4: 生命周期内的速度偏移(velocity over lifetime);5: 生命周期内的限制速度(limit velocity over lifetime);6:

效果: 点击按钮后: 这些碎片具有物理碰撞效果,下面会有隐形的支柱垫着碎片,n秒后支柱消失,碎片落下 当然你也可以控制生成的碎片,让他们从下而上一块一块地落下 插件源码: https://github.com/mjholtzem/Unity-2D-Destruction 基本使用说明 导入Unity 2D Destruction包 将精灵拖入场景中 添加Explodable组件和PolygonCollider2D或BoxCollider2D 设置参数并单击Generate Fragments(重

最近遇到了一个需求,想要一种在刀剑上带有光晕的酷炫效果,甚至是还想要有闪烁呼吸效果,于是就写了一个简单的叫LightSwrod的Shader去实现,先上图看看效果吧. 简单展示 这是剑本身的样子 这是用了LightSword后的效果 (原谅我的审美吧~~~调了半天也就这难看的样子T_T) 这是Inspector里面Material的参数 参数的解释将在后面进行细致讲解 创建流程 来讲述一下创建光剑效果的流程吧 1.准备两张贴图: 一张是剑体本身的贴图,是真正要显示出来的剑体 一张是要展现光晕效果

本文参考了该文,其素材也取之于该处 效果 实现效果(根据音乐的高低会产生不同的波纹): 可以观看视频来获得更好的体验. 波纹的实现 先模拟出如下效果: 通过鼠标的点击,产生一个扩散的圆圈. 如上图所示,这个效果主要通过Displatment Shader实现,首先创建Shader,Matrial,在Scene视图尝试我们的想法. Shader可参考,Unity官网教程 这样我们就可以通过改变DispTexture这张贴图的圆环就能产生大小不同的隆起效果,再通过每帧刷新的方式继而可以参数波纹扩散的

我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic 2:设置Canvas 的Render Mode 为 Screen Space - Camera 然后找一张图片,导入Unity 中并修改它的读写权限,创建Raw Imager   这样启动之后就可以测试效果了. 附上代码:(代码中有解释) using AYUI.UIFrame; using DG.T

要实现震屏效果其实并不难,所谓的震屏在PC端可以简单地理解为相机(MainCamera)的抖动. 代码实现如下: using UnityEngine; using System.Collections; public class ScreenShake : MonoBehaviour { private float shakeTime = 0.0f; private float fps= 20.0f; private float frameTime =0.0f; private float sh

1.通过一些简单效果可以让我们更好的去理解shader,具体都在代码注释中: Shader "Unlit/MoveLightImage" { Properties { //主纹理 _MainTex ("Texture", 2D) = "white" {} //灯光纹理 _LightTex("Light Texture",2D)="white"{} //遮罩纹理 _MaskTex("Mask Tex

一.使用Cubemap,做一个假反射 shader代码如下: Shader "Custom/glassShader" { Properties { _MainColor("Main Color",Color)=(1,1,1,1) _MainTex ("Base (RGB)", 2D) = "white" {} _Cube("Cube",CUBE)=""{} } SubShader { T

效果如图: shader如下: Shader "Unlit/Walk light" { Properties { _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {} _LightTex ("Light", 2D) = "black" {} } SubShader { LOD Tags { "Queue" = "Transpar

效果 原理: 开启摄像机的深度模式,将深度保存到一张名为_CameraDepthTexture(Unity5.0之后才有)内置的纹理中. 如果深度在焦点范围内就用原图,否则就用模糊图. Shader: Shader "DepthOfFiled" { Properties { _MainTex ("Texture", 2D) = "white" {} _BlurSize ("Blur Size", Float) = 0.1 }

UGUI各种优化效果 本文所实现的UGUI效果需求如下: - 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持ObjectPool动态加载 - 支持无限不规则子物体动态加载 - 支持拖动并点击和拖拽 - 支持拖动并拖拽 - 支持ScrollRect拖动自动吸附功能(拖动是否超过一半自动进退) 前言 要实现以上效果,我从网上搜索得到部分解决方案链接,但不是完全满足想要的效果,就自己继续改造优化和添加想要的效果,本文最后会