精华内容
下载资源
问答
  • 前言如题所示,本篇内容主要聊一聊外发光和内发光。下面我们用简单的内发光和外发光来做个小太阳。首先我们来分析下实现原理。实现原理外发光常用做法跟描边非常近似,在顶点着色器中将模型顶点坐标延法线方向延申...

    a135034349d3ba2d968dfa68d4036446.png

    前言

    如题所示,本篇内容主要聊一聊外发光和内发光。

    下面我们用简单的内发光和外发光来做个小太阳。

    首先我们来分析下实现原理。

    实现原理

    • 外发光
    1. 常用做法跟描边非常近似,在顶点着色器中将模型顶点坐标延法线方向延申
    2. 视角与法线点乘,产生中间向四周逐渐衰减到0的值,赋给透明通道,形成光晕效果
    • 内发光
    1. 跟外发光很类似,计算世界空间的观察方向,将观察方向和法线向量传到片元着色器
    2. 视角与法线点乘,产生中间向四周逐渐衰减到0的值,后1-点乘结果来叠加发光颜色,形成边缘光晕

    具体实现

    • 外发光核心代码

    4f4fe182c87cf17dfe7fb79b7e0ba867.png
    外发光
    • 内发光核心代码

    b705feed76d845f7788a4e9ad4827a97.png
    • 具体表现如下

    3b10884d861d7836fcf3563b36ad63a7.png
    效果图

    注意事项

    1. 外发光在叠加的时候记得关闭 深度写入 不然会出现下图的情况

    81a7b1dba52e2a4fad02f72672f8b567.png

    2.外发光在应用到存在硬边的情况下会出现如下情况

    a39d5a9affddd615fbd78b57073ec5b9.png
    小人外发光出问题了

    这种问题有点像之前描边出现的问题。

    ArayA:聊一聊描边效果zhuanlan.zhihu.com
    a74775eaa801f5735c4d1f785fec4667.png

    可以考虑用模型坐标外拓,或者参考一下描边插件的做法来实现,插件的做法一般都是结合后处理来实现的,具体我们后面再写一篇高级发光来解析下他们的实现原理。

    最后附带下我常用的发光插件:

    Highlighting System

    https://assetstore.unity.com/packages/tools/particles-effects/highlighting-system-41508assetstore.unity.com

    MK Glow

    https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/mk-glow-90204assetstore.unity.com

    Highlight Plus

    https://assetstore.unity.com/packages/tools/particles-effects/highlight-plus-134149assetstore.unity.com
    展开全文
  • 本文介绍了红外发光二极管
  • 本文介绍了红外发光二极管基本特性
  • 几种二极管的检测方法(发光,红外发光,红外光敏,其他光敏二极管) (一)发光二极管的检测 1.正、负极的判别将发光二极管放在一个光源下,观察两个金属片的大小,通常金属片大的一端为负极, 金属片小的一端为...
  • 普通发光二极管与红外发光二极管的区别方法用万用表的Rx1O0挡,测量待区分的普通发光二极管和红外发光二极管的正、反向电阻,其中正、反向电阻均接近无穷大的就为普通发光二极管,其正向电阻为30kΩ左右,反向电阻为...
  • 今天正好又里程碑式地(伪)实现了一个不错的外发光效果。虽然这不一定是该效果实现的最佳形式,但应该可以补充目前网上较少的2D外发光制作方法。今后我也会抽空将实现的各种效果作为学习记录分享出来。外发光的制作...

    前言

    我接触Unity游戏制作已有半年多,但还没有机会和时间对学习的内容进行总结和分享。今天正好又里程碑式地(伪)实现了一个不错的外发光效果。虽然这不一定是该效果实现的最佳形式,但应该可以补充目前网上较少的2D外发光制作方法。今后我也会抽空将实现的各种效果作为学习记录分享出来。

    外发光的制作

    何为外发光?其实外发光效果在各类UI中使用颇多且频繁,通常表现为在对象的外轮廓之外拓展一圈辉光一般的效果,并且随着轮廓往外,alpha也会逐渐降低。

    如图是一个简单的圆形外发光,可以看到黑色的圆外面这圈红色的区域就是外发光效果,并且alpha值逐渐减小。

    稍微熟悉一些图形学概念的同学立刻就能想到,外发光效果其实就是膨胀算法+模糊算法。即对图片先扩张其外轮廓,然后对外轮廓图计算一次模糊。事实上这种操作也很简单,因为膨胀和模糊我们都可以使用算子对图像进行卷积操作。

    膨胀算子

    就是一个简单的3x3膨胀算子,它的效果可以使图像往上下左右各拓展一个像素点单位,从而实现描边的效果。

    高斯模糊算子

    是一个简单的3x3高斯模糊算子,它的效果可以对图像计算一次高斯模糊,从而得到模糊的图像。

    关于高斯模糊和膨胀的文章有很多,这里不再赘述。可以注意到由于我们既要做一次膨胀操作,又要做一次高斯模糊操作,我们可以简化为只做一次模糊操作就能得到希望的外发光效果。

    于是一张图片的外发光制作方法就这样出来了:先复制原图的纹理得到一个新的图片,我们对这张新图片制作高斯模糊效果

    制作高斯模糊效果和膨胀操作可以同时进行,由于膨胀算子的权重都为1/0,事实上可以直接计算模糊效果。

    再偷懒一些,事实上连高斯模糊都可以不用。为什么呢? 因为越靠近边缘外部的点会被计算的次数就越少,其alpha值自然就变低了,从而会形成从内到外alpha逐渐降低的渐变效果。

    了解了这些逻辑以后UI的外发光也就可以轻松地制作出来了。部分关键代码如下

    fixed4 frag (v2f i) : SV_Target

    {

    float a = 0;

    _GlowStrength /= 50.0;

    for (int x=-5; x<=5; x++)

    for (int y=-5; y<=5; y++){

    fixed4 color = tex2D(_MainTex, i.uv + fixed2(x * _GlowSize * _MainTex_TexelSize.x, y * _GlowSize * _MainTex_TexelSize.y));

    if (color.r == 0 && color.g == 0 && color.b == 0)

    continue;

    else

    a += color.a * _GlowStrength;

    }

    a = min(a, 1);

    return fixed4(_GlowColor.rgb, a * _GlowColor.a);

    }

    using System.Collections;

    using System.Collections.Generic;

    using UnityEngine;

    using UnityEngine.UI;

    using Unity.Collections;

    [RequireComponent(typeof(Image))]

    public class GlowEffect : MonoBehaviour {

    private Texture2D baseImg, glowImg;

    public GameObject glowObject = null;

    private float glowRange = 5.0f;

    public float glowSize = 1.5f;

    public float glowStrength = 0.5f;

    public Color glowColor = Color.white;

    private Material material;

    // USE RENDER TEXTURE TO GET UNPACKED TEXTURE

    Texture2D GetTextureFromSprite(Sprite sourceSprite)

    {

    Texture2D source = sourceSprite.texture;

    RenderTexture renderTex = RenderTexture.GetTemporary(

    source.width,

    source.height,

    0,

    RenderTextureFormat.Default,

    RenderTextureReadWrite.Linear);

    Graphics.Blit(source, renderTex);

    RenderTexture previous = RenderTexture.active;

    RenderTexture.active = renderTex;

    Texture2D readableText = new Texture2D((int)sourceSprite.rect.width, (int)sourceSprite.rect.height, TextureFormat.ARGB32, false);

    Rect spRect = sourceSprite.rect;

    readableText.ReadPixels(new Rect(spRect.xMin, source.height - spRect.yMax, spRect.width, spRect.height), 0, 0);

    Debug.Log(sourceSprite.rect.yMin);

    readableText.Apply();

    RenderTexture.active = previous;

    RenderTexture.ReleaseTemporary(renderTex);

    return readableText;

    }

    // Use this for initialization

    void Start () {

    GenerateGlowObject();

    }

    public void GenerateGlowObject(){

    if (glowObject != null) {

    return;

    }

    baseImg = GetTextureFromSprite(GetComponent().sprite);

    glowImg = new Texture2D(baseImg.width + (int)(glowRange * 10), baseImg.height + (int)(glowRange * 10), TextureFormat.RGBA32, false);

    Vector2Int glowImgCen = new Vector2Int((int)(baseImg.width + (int)(glowRange * 10)) / 2, (int)(baseImg.height + (int)(glowRange * 10)) / 2);

    Vector2Int baseImgCen = new Vector2Int(baseImg.width / 2, baseImg.height / 2);

    Graphics.CopyTexture(baseImg, 0, 0, 0, 0, baseImg.width, baseImg.height, glowImg, 0, 0, glowImgCen.x - baseImgCen.x, glowImgCen.y - baseImgCen.y);

    for (int i=0; i

    for (int j=0; j

    int x = i + baseImgCen.x - glowImgCen.x;

    int y = j + baseImgCen.y - glowImgCen.y;

    if (x < 0 || x >= baseImg.width || y < 0 || y >= baseImg.height || glowImg.GetPixel(i, j).a == 0)

    glowImg.SetPixel(i, j, Color.black);

    }

    glowImg.Apply();

    glowObject = new GameObject(this.name + "_GlowEffect", typeof(RectTransform), typeof(Image));

    glowObject.transform.SetParent(this.transform.parent);

    glowObject.transform.SetAsFirstSibling();

    glowObject.GetComponent().localScale = Vector2.one;

    glowObject.GetComponent().anchoredPosition = GetComponent().anchoredPosition;

    glowObject.GetComponent().sizeDelta =

    new Vector2((int)(glowImg.width * 1.0f / baseImg.width * GetComponent().sizeDelta.x),

    (int)(glowImg.height * 1.0f / baseImg.height * GetComponent().sizeDelta.y));

    glowObject.GetComponent().sprite = Sprite.Create(glowImg, new Rect(0, 0, glowImg.width, glowImg.height), new Vector2(0.5f, 0.5f));

    glowObject.GetComponent().material = new Material(Shader.Find("Custom/SpriteGlow"));

    material = glowObject.GetComponent().material;

    }

    ///

    /// Called when the script is loaded or a value is changed in the

    /// inspector (Called in the editor only).

    ///

    private void UpdateEffect(){

    if (glowObject != null) {

    material.SetFloat("_GlowSize", glowSize);

    material.SetFloat("_GlowStrength", glowStrength);

    material.SetColor("_GlowColor", glowColor);

    }

    }

    void OnValidate()

    {

    UpdateEffect();

    }

    }

    事实上在获取图像纹理的时候还踩了一些坑(如原图采用的是DXT5压缩格式,以及使用图集进行打包)。之后有机会再补充一下内容吧。

    展开全文
  • 红外发光二极管是一种把电能百接转换成红外光能的发光器件(红外光是一种不可见光),而且能把红外光辐射到空中。因此也称红外发射二极管。它的主要用途是与其他电路配合,共同构成红外线遥控系统中的发射电路。如彩色...
  • 红外发光二极管和普通发光二极管在外形上一样,很难区别哪只是红外发光二极管,哪只是普通发光二极管。但两者在起始电压上有明显区别:普通发光二极管的起始电压为1.6-2V;而红外发光二极管的起始电压则为1-1.3V;因此...
  • UnityHighLightGlowSystem v5,强大的外发光,自发光插件,支持2017 2.x系列,手机亲测性能良好
  • 光子晶体增强中红外发光研究
  • Unity外发光插件MK

    2018-06-05 15:15:38
    Unity 强大的Glow插件,可用于实现外发光等高亮特效。
  • 用于检测红外发光二极管的辐射强度的测试方案,适合正在开发红外遥控设备的同学
  • 人气2511 我要提问 我来说两句 核心提示本文中我们将了解Photoshop图层样式中的外发光选项教程讲解了外发光的各个选项的设置和效果对PS初学者了解PS的图层样式有一定帮助 在本文中我们将了解Photoshop图层样式中的...
  • Shader实现内发光和外发光

    千次阅读 2019-07-27 14:25:00
    下面使用Shader实现物体的边缘内发光和外发光效果。 一、边缘内发光 原理:用视角方向和法线方向点乘,模型越边缘的地方,它的法线和视角方向越接近90度。用1减去上面点乘的结果得到的就是越边缘的地方越亮。 ...

    物体边缘发光效果是游戏里面非常常用的一种效果,同样是为了凸显游戏中的某个物体。下面使用Shader实现物体的边缘内发光和外发光效果。

    一、边缘内发光

    原理:用视角方向和法线方向点乘,模型越边缘的地方,它的法线和视角方向越接近90度。用1减去上面点乘的结果得到的就是越边缘的地方越亮。

    Shader "Custom/Outline1" {
    	Properties
    	{
    		_MainTex("main tex",2D) = "black"{}
    		_RimColor("rim color",Color) = (1,1,1,1)//边缘颜色
    		_RimPower("rim power",range(1,10)) = 2//边缘强度
    	}
    
    		SubShader
    	{
    		Pass
    	{
    		CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag
    #include"UnityCG.cginc"
    
    	struct v2f
    	{
    		float4 vertex:POSITION;
    		float4 uv:TEXCOORD0;
    		float4 NdotV:COLOR;
    	};
    
    	sampler2D _MainTex;
    	float4 _RimColor;
    	float _RimPower;
    
    	v2f vert(appdata_base v)
    	{
    		v2f o;
    		o.vertex = UnityObjectToClipPos(v.vertex);
    		o.uv = v.texcoord;
    		float3 V = WorldSpaceViewDir(v.vertex);
    		V = mul(unity_WorldToObject,V);//视方向从世界到模型坐标系的转换
    		o.NdotV.x = saturate(dot(v.normal,normalize(V)));//必须在同一坐标系才能正确做点乘运算
    		return o;
    	}
    
    	half4 frag(v2f IN) :COLOR
    	{
    		half4 c = tex2D(_MainTex,IN.uv);
    		//用视方向和法线方向做点乘,越边缘的地方,法线和视方向越接近90度,点乘越接近0.
    		//用(1- 上面点乘的结果)*颜色,来反映边缘颜色情况
    		c.rgb += pow((1 - IN.NdotV.x) ,_RimPower)* _RimColor.rgb;
    		return c;
    	}
    		ENDCG
    	}
    	}
    		FallBack "Diffuse"
    }
    

    二、边缘外发光

    原理:让物体的顶点位置沿着法线方向延伸,然后使用法线点乘物体法线的方向形成一个中间向四周扩散逐渐衰减的效果。

    Shader "Custom/OutLine2" {
    
    	Properties
    	{
    		_MainTex("Texture(RGB)",2D) = "grey"{}	//主纹理
    		_Color("Color",Color) = (0,0,0,1)		//主纹理颜色
    		_AtmoColor("Atmosphere Color",Color) = (0,0,0,0)	//光晕颜色
    		_Size("Size",Range(0,1)) = 0.1		//光晕范围
    		_OutLightPow("Falloff",Range(1,10)) = 5		//光晕系数
    		_OutLightStrength("Transparency",Range(5,20)) = 15	//光晕强度
    	}
    
    		SubShader{
    			Pass{
    				Name "PlaneBase"
    				Tags{"LightMode" = "Always"}
    				Cull Back		//剔除背面
    				CGPROGRAM
    	#pragma vertex vert
    	#pragma fragment frag
    	#include "UnityCG.cginc"
    
    		uniform sampler2D _MainTex;
    		uniform float4 _MainTex_ST;
    		uniform float4 _Color;
    		uniform float4 _AtmoColor;
    		uniform float _Size;
    		uniform float _OutLightPow;
    		uniform float _OutLightStrength;
    
    		struct vertexOutput {
    			float4 pos : SV_POSITION;
    			float3 normal : TEXCOORD0;
    			float3 worldvertpos : TEXCOORD1;
    			float2 texcoord : TEXCOORD2;
    		};
    
    		//顶点着色器
    		vertexOutput vert(appdata_base v)
    		{
    			vertexOutput o;
    			//顶点位置
    			o.pos = UnityObjectToClipPos(v.vertex);
    			//法线
    			o.normal = v.normal;
    			//世界坐标顶点位置
    			o.worldvertpos = mul(unity_ObjectToWorld, v.vertex).xyz;
    			o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
    			return o;
    		}
    
    		float4 frag(vertexOutput i) : COLOR
    		{
    			float4 color = tex2D(_MainTex,i.texcoord);
    			return color * _Color;
    		}
    			ENDCG
    		}
    
    		Pass{
    			Name "AtmosphereBase"
    			Tags{"LightMode" = "Always"}
    			Cull Front
    			Blend SrcAlpha One
    
    			CGPROGRAM
    	#pragma vertex vert
    	#pragma fragment frag
    	#include "UnityCG.cginc"
    
    		uniform float4 _Color;
    		uniform float4 _AtmoColor;
    		uniform float _Size;
    		uniform float _OutLightPow;
    		uniform float _OutLightStrength;
    
    		struct vertexOutput
    		{
    			float4 pos : SV_POSITION;
    			float3 normal : TEXCOORD0;
    			float3 worldvertpos : TEXCOORD1;
    		};
    
    		vertexOutput vert(appdata_base v) {
    			vertexOutput o;
    			//顶点位置以法线方向向外延伸
    			v.vertex.xyz += v.normal * _Size;
    			o.pos = UnityObjectToClipPos(v.vertex);
    			o.normal = v.normal;
    			o.worldvertpos = mul(unity_ObjectToWorld, v.vertex);
    			return o;
    		}
    
    		float4 frag(vertexOutput i) : COLOR
    		{
    			i.normal = normalize(i.normal);
    			//视角法线
    			float3 viewdir = normalize(i.worldvertpos.xyz - _WorldSpaceCameraPos.xyz);
    			float4 color = _AtmoColor;
    			//视角法线与模型法线点积形成中间为1向四周逐渐衰减为0的点积值,赋值透明通道,形成光晕效果
    			color.a = pow(saturate(dot(viewdir, i.normal)),_OutLightPow);
    			color.a *= _OutLightStrength * dot(viewdir, i.normal);
    			return color;
    		}
    		ENDCG
    	}
    
    		}
    			FallBack "Diffuse"
    }
    

    效果图:

     

    展开全文
  • unity3d 模型外发光,闪动,颜色切换
  • 超牛逼~外发光shader

    2018-10-09 23:14:29
    UnityShader 外发光,自定义3d模型发效果,譬如模型被攻击时变色等
  • 外发光边框的三级下拉菜单
  • 外发光的Flash按钮素材,边缘发光的按钮,鼠标悬停于按钮时发光,很炫丽的视觉效果。
  • 轮廓外发光highlighting system v2.0
  • 测试红外发光二极管的好坏,可以按照测试普通硅二极管正反向电阻的方法测试。  把万用表拨在R×100或R×1K挡,黑表笔接红外发光二极管正极,红表笔接负极,测得正向电阻应在20≈40K;黑表笔接红外发光二极管负极...
  • 主要介绍了css3 box-shadow阴影(外阴影与外发光),通过五个测试通过图片展示了阴影的不同位置不同效果,需要的朋友可以参考下
  • 在铋掺杂的各种玻璃体系中能够产生覆盖1.2~1.6μm区间的超宽近红外发光;并对此类发光材料的发光机理进行了初步探讨,指出铬铋共掺的锌铝硅玻璃中的宽带近红外发光源于铋而不是Cr4+离子。
  • ps外发光基础教学

    2019-05-10 16:30:21
    二:右击选框工具,选择要创建的外发光图形 三:在新建图层中创建图形,右击图层,将图层转化为智能图层 四:右击新建图形 五:选择描边,选择想要外发光颜色 六:双击图层,点击外发光,通过调节不透明度、杂色、...

    一:新建一个图层
    二:右击选框工具,选择要创建的外发光图形
    三:在新建图层中创建图形,右击图层,将图层转化为智能图层
    四:右击新建图形
    五:选择描边,选择想要外发光颜色
    六:双击图层,点击外发光,通过调节不透明度、杂色、拓展、大小等,创造出自己想要的外发光图形

    展开全文
  • unity模型外发光,鼠标滑过外发光显示,点击后外发光保持。
  • OLED外发光效率增强模型研究.pdfpdf,OLED外发光效率增强模型研究.pdf
  • 铋掺杂玻璃的红外发光机理和宽带光放大
  • 外发光的输入文本框 表单,外发光的输入文本框 表单
  •  (2)红外发光二极管正、负极的确定 红外发光二极管正、负极的确定方法除前面说的通过引线长短区分,还可以用万用表进行判断,其方法是:将万用表置于Rx1k挡,测其正反向电阻,其中阻值较小的一次为正向电阻,约为...
  • Highlighting System 轮廓外发光高亮特效 新版,一共三款,1.0,4.0,2017版适合各个版本

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,931
精华内容 772
关键字:

外发光