用Shader實現的一些效果

阿新 • • 發佈：2019-02-18

/////////////////////////////////////////////////////////橡皮效果////////////////////////////////////////////////////////////////////

堡壘之夜，裡面敲擊建築時有橡皮那種彈彈彈的效果

最終效果

思路

根據對應的座標和範圍內的頂點，根據法線進行偏移。
根據時間計算偏移持續時間和反彈次數。

原始碼

[AppleScript] 純文字檢視 複製程式碼

Shader "QQ/Elastic"

{

Properties

{

_MainTex("Texture", 2D) = "white" {}

_Position("xyz:position,w:range",vector) = (0,0,0,1)

_Normal("xyz:normal,w:intensity",vector) = (0,1,0,0)

_PointTime("point time",float) = 0

_Duration("duration",float) = 2

_Frequency("frequency"

,float) = 5

}

SubShader

{

Tags { "RenderType" = "Opaque" }

LOD 100

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

// make fog work

#pragma multi_compile_fog

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

UNITY_FOG_COORDS(1)

float4 vertex : SV_POSITION;

};

sampler2D _MainTex;

float4 _MainTex_ST;

float4 _Position;

float4 _Normal;

float _PointTime;

float _Duration;

float _Frequency;

v2f vert(appdata v)

{

v2f o;

float t = _Time.y - _PointTime;

if (t>0&&t<_Duration)

{

float r = 1 - saturate(length(v.vertex.xyz - _Position.xyz) / _Position.w);

float l = 1 - t / _Duration;

v.vertex.xyz += r * l * _Normal.xyz * _Normal.w * cos(t * _Frequency);

}

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

UNITY_TRANSFER_FOG(o, o.vertex);

return o;

}

fixed4 frag(v2f i) : SV_Target

{

fixed4 col = tex2D(_MainTex, i.uv);

UNITY_APPLY_FOG(i.fogCoord, col);

return col;

}

ENDCG

}

指令碼

[AppleScript] 純文字檢視 複製程式碼

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

interface IElastic

{

void OnElastic(RaycastHit hit);

}

[RequireComponent(typeof(MeshRenderer))]

public class ElasticObject : MonoBehaviour, IElastic

{

private static int s_pos, s_nor, s_time;

static ElasticObject()

{

s_pos = Shader.PropertyToID("_Position");

s_nor = Shader.PropertyToID("_Normal");

s_time = Shader.PropertyToID("_PointTime");

}

private MeshRenderer mesh;

private void Start()

{

mesh = GetComponent<MeshRenderer>();

}

//呼叫該方法

public void OnElastic(RaycastHit hit)

{

//反彈的座標

Vector4 v = transform.InverseTransformPoint(hit.point);

//受影響頂點範圍的半徑

v.w = 0.6f;

mesh.material.SetVector(s_pos, v);

//法線方向，該值為頂點偏移方向，可自己根據需求傳。

v = transform.InverseTransformDirection(hit.normal.normalized);

//反彈力度

v.w = 0.2f;

mesh.material.SetVector(s_nor, v);

//重置時間

mesh.material.SetFloat(s_time, Time.time);

}

/////////////////////////////////////////////////////////Shader能量護盾////////////////////////////////////////////////////////////////////

利用場景的深度資訊——能量護盾

利用場景的深度資訊可以做一些很有趣的效果，比如能量護盾~

這個效果雖然不算複雜但是很多遊戲裡面有有應用，看起來也夠炫酷。而利用深度資訊還可以做很多其他的效果。以後有空慢慢更新吧…………

下面正題

這個效果分為三個部分：

半透效果

最簡單的一部分，但需要一些關於shader的常識性知識。

shader設定

逐句分析：

Cull Off 關閉背面剪裁。因為是要半透的自然可以看到背面，因此需要關閉背面剪裁

ZWrite Off 關閉Z快取寫入。因為護盾本身是不會“遮擋”到其他物體的，因此關閉。這裡的遮擋需要理解渲染管線的Z快取原理。

ZTest On 開啟Z快取測試。護盾需要被其他物體所“遮擋”。同上需要理解Z快取。

Blend SrcAlpha OneMinusSrcAlpha 混合方式 Alpha混合。意思是用Alpha的值來控制計算顏色和顏色快取中的值進行混合。（混合的方法有很多具體可查閱相關文件）

然後在ps裡瞎雞兒做個護盾樣子的圖取樣就行了~（其實可以弄個GrabPass然後加個噪音擾動弄出能量扭曲空間的效果）。這裡偷個懶就不搞了~

護盾貼圖

邊緣高亮

法線方向和視角的方向差異越大就說明越靠近邊緣，再加個引數用來調整。

ps：可以在頂點著色器裡獲得法線和視角方向以減少計算量，在片段著色器裡使用的時候記得歸一化。

獲取法線和視角方向

相交高亮

這就是關鍵了。

現在頂點著色器裡獲得對應的場景座標

隨後在片段著色器裡用場景座標對深度圖進行取樣

需要注意的是：這裡的_CameraDepthTexture需要在前面提前宣告。

我們用自身的座標和場景深度相減。得到的值小於一定範圍就認為是和場景相交的部分了。

最後使用高亮的係數對根據貼圖取樣的顏色和高亮的顏色進行插值得到了最終的顏色值。

下面是程式碼：

[AppleScript] 純文字檢視複製程式碼

Shader "Unlit/depth"

{

Properties

{

_MainTex ("Texture", 2D) = "black" {}

_Threshold("相交閾值", Range(0.0, 1)) = 1

_ViewThreshold("視角閾值", Range(0.0, 2)) = 1

_HighlightColor("高光顏色", Color) = (1,1,1,1)

}

SubShader

{

Tags {

"RenderType"="Transparent"

"Queue" = "Transparent"

}

LOD 100

Pass

{

Cull Off

ZWrite Off

ZTest On

Blend SrcAlpha OneMinusSrcAlpha

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

//定義深度圖

uniform sampler2D_float _CameraDepthTexture;

fixed _Threshold;

fixed _ViewThreshold;

fixed4 _HighlightColor;

struct appdata

{

float4 vertex : POSITION;

float3 normal : NORMAL;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

UNITY_FOG_COORDS(1)

float4 vertex : SV_POSITION;

float4 screenPos : TEXCOORD2;

float3 worldNormal : TEXCOORD3;

float3 worldViewDir : TEXCOORD4;

};

sampler2D _MainTex;

float4 _MainTex_ST;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

o.worldNormal = UnityObjectToWorldNormal(v.normal);

o.worldViewDir = UnityWorldSpaceViewDir(mul(unity_ObjectToWorld, v.vertex));

o.screenPos = ComputeScreenPos(o.vertex);

COMPUTE_EYEDEPTH(o.screenPos.z);

return o;

}

fixed4 frag (v2f i) : SV_Target

{

float4 final = tex2D(_MainTex, i.uv);

fixed3 worldNormal = normalize(i.worldNormal);

fixed3 worldViewDir = normalize(i.worldViewDir);

//法線方向和視角方向的點積

fixed edge = 1 - abs(dot(worldNormal, worldViewDir)) * _ViewThreshold;

//根據自身的場景座標取樣深度圖得到當前位置的場景深度

float sceneZ = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.screenPos)));

float selfZ = i.screenPos.z;

float intersect = 1- min ( (abs(sceneZ - selfZ)) / _Threshold, 1);

return lerp(final,_HighlightColor,max(edge,intersect));

}

ENDCG

}

http://www.manew.com/thread-115809-1-1.html

用Shader實現的一些效果

/////////////////////////////////////////////////////////橡皮效果//////////////////////////////////////////////////////////////////// 堡壘之夜，

一些用Css實現的效果

今天 light borde sharp div ans top arp css 今天寫一個筆試題，其中有一個是用css實現直角梯形的效果，我給出的答案是： <style> .wrap{ width: 100px

cocos2dx中用shader實現折射效果

eight endif cocos 計算模型 for fragment ade ima 2dx 目的：給定任意法線貼圖，實現折射效果主要技術：RenderTarget，glsl 提取出一個可供使用的Sprite派生類計算模型如下：黑色部分為玻璃切線，紅色部分為場景。

tomcat，很多時候，可以在服務server.xml中可以實現一些效果

apache pre server link base cat 實現 photo access 一、--日誌 <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"

shader實現積雪效果

spa dep orm ans rec pro 頭上 amber opaque Shader "Custom/Shader1" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {}

用定位實現機器人效果

gre span arr eight adding header fff posit class <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

【Unity】用Shader實現圖片的區域遮罩，支援半透明，實現地圖動態上色功能

一個專案，做世界地圖時，希望未開啟的地塊是線稿，新地塊開啟時，做一個上色處理。想到的方案就是：上了色的彩圖蓋線上稿上，然後用mask 控制彩圖的區域性顯隱。網上找了一個，可以半透明遮罩的shader：https://www.jianshu.com/p/1d9d439c28fa 要控制不同區塊

用bootstrap實現手風琴效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

用js實現打字機效果

1.難得有點時間，回憶下古詩文，順便練習下js，實現下打字機效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打字機</t

Unity無需Shader實現鏡子效果

Unity鏡子效果製作教程本文提供全流程，中文翻譯。 Chinar 堅持將簡單的生活方式，帶給世人！（擁有更好的閱讀體驗 —— 高解析度使用者請根據需求調整網頁縮放比例）

用Shader實現標準光照模型

DXSDK裡光照模型的講解依然停留在DX9的固定管線時代; DX10及DX11的文件裡只是API文件,居然一點基於Shader的光照模型講解文章都未見,失望. 無奈, 開啟NV官網,找到這樣一篇文章, 基於Cg語言的Shader標準光照模型講解, Bingo! 瞭解標準光照基礎知識後,就不會面對MAX

用js實現開花效果

<html> <head> <title>JavaScript實現很漂亮的開花特效 - www.unimagical.com</title> </head> <body> <script l

如何在網頁上用H5實現動畫效果？

在web開發中，GIF動畫效果是隨處可見，比如常見的loading載入、人物奔跑的gif圖片等等，那麼這些都是怎麼實現的呢？其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經過一段時間的間隔做出位移而來的；譬如，我們在PS裡面製作GIF動畫，首先要把每一幀所需

WebGL+shader實現素描效果渲染

實現一個這樣的渲染效果，主要的步驟包括：準備模型和場景通過 WebGL (Three.js) 匯入場景實現 Shader 以表現接近素描的效果在最重要的第 3 步中，我們要實現的主要有兩個效果：模型邊緣的描邊 (不同於單純的線框)模型表面類似於素描的線條效果為了實現

用jquery實現放大鏡效果

----css程式碼--- *{margin:0;padding:0;} .showimg{position:relative;width:450px;height:420px;border:1px solid #f5f5f5;} .show{width:450px;height:420px; } .prod

巧用Drawable 實現Android UI 元素間距效果

purple 固定展示 .com otto 技巧 log contain dev 源文地址：巧用Drawable 實現Android UI 元素間距效果在大部分的移動UI或者Web UI都是基於網格概念而設計的。這種網格一般都是有一些對其的方塊組成，然後

使用原生AJAX 發送異步請求實現常用的用戶登錄效果

tor dia post request reat def cat inner -c HTML部分 <!doctype html> <html> <head> <meta charset="UTF-8"> &l

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

用java實現的strstr函數的一些問題

符號 clas bsp 問題： pub spa 操作記錄位置用java實現過程如下： 1 public static int strstr(char[] cArray1,char[] cArray2){ 2 if(cArray1!=null &&

用偽元素寫移動端1px邊框時想實現邊角效果

ack img ive cal left image event 發現邊框做移動端頁面時，又想用偽元素做真實1像素邊框，又想有邊角時，會發現只加一個border-radius時出來的效果邊款並沒有變成圓角，解決辦法是加兩個border-radius <div c

用Shader實現的一些效果

相關推薦