1 原理

凸镜贴图渐变凸镜贴图 中介绍了使用 OpenGL 实现凸镜贴图及其原理,通过顶点坐标映射到纹理坐标,并构造三角形网格,构建了真正的三维凸镜模型。本文通过 Shader 实现半球卷屏特效,通过屏幕坐标映射到纹理坐标,不需要构建凸镜模型,效率更高。

1)凸变换原理

​ 以下凸变换的原理图及公式推导,该图是截面图,vertex 是屏幕坐标,texture 是纹理坐标。

​ 注意:屏幕坐标原坐标原点在屏幕左上角,y 轴向下,x、y 轴的值域分别为 [0, ScreenWidth]、[0, ScreenHeight],纹理坐标原坐标原点在纹理图片左下角,x、y 轴的值域都是 [0, 1],这里已进行了一些预处理,将屏幕坐标和纹理坐标的坐标轴都变换到中心位置,x、y 轴的值域都变换到 [-1, 1]。

2)渐变原理

​ 当凸镜半角 (φ/2) 较小时(近似0°),凸镜半径较大 (近似无穷大),屏幕只需要贴到凸镜的很小一块区域,该区域近似一个平面;当凸镜半角 (φ/2) 较大时(等于90°),凸镜半径较大(等于 1/sin(φ/2)),屏幕贴满整个凸镜;当凸镜半角 (φ/2) 由 0° 渐变到 90° 时,就会看到屏幕逐渐卷曲的效果。

​ 本文代码资源见→Unity3D半球卷屏特效

2 代码实现

​ CurlEffect.cs

using UnityEngine;

[RequireComponent(typeof(Camera))]  // 屏幕后处理特效一般都需要绑定在像机上
public class CurlEffect : MonoBehaviour {
public float curlSpeed = 0.4f; // 卷屏速度
private Material smallConvexMaterial; // 小凸变换材质
private Material largeConvexMaterial; // 大凸变换材质
private bool enableSmallConvex = false; // 小凸变换开关
private bool enableLargeConcave = false; // 大凸变换开关
private float alpha; // 卷屏凸镜渐变半角 private void Awake() {
smallConvexMaterial = new Material(Shader.Find("Custom/Curl/SmallConvex"));
largeConvexMaterial = new Material(Shader.Find("Custom/Curl/LargeConvex"));
smallConvexMaterial.hideFlags = HideFlags.DontSave;
largeConvexMaterial.hideFlags = HideFlags.DontSave;
} private void Update() {
if (Input.GetMouseButton(0)) {
alpha = 0.01f;
curlSpeed = Mathf.Abs(curlSpeed);
enableSmallConvex = true;
enableLargeConcave = false;
}
} private void OnRenderImage (RenderTexture source, RenderTexture destination) {
if (enableSmallConvex) {
smallConvexMaterial.SetFloat("_alpha", alpha);
IncreaseAlpha();
Graphics.Blit (source, destination, smallConvexMaterial);
} else if (enableLargeConcave) {
largeConvexMaterial.SetFloat("_alpha", alpha);
IncreaseAlpha();
Graphics.Blit (source, destination, largeConvexMaterial);
} else {
Graphics.Blit (source, destination);
}
} private void IncreaseAlpha() { // alpha自增
alpha += Time.deltaTime * curlSpeed;
if (alpha > Mathf.PI / 2 && curlSpeed > 0) {
alpha = Mathf.PI / 2;
curlSpeed = -curlSpeed;
} else if (alpha < 0.01f && curlSpeed < 0) {
alpha = 0.01f;
curlSpeed = -curlSpeed;
enableSmallConvex = !enableSmallConvex; // 大凸镜和小凸镜交替执行
enableLargeConcave = ! enableLargeConcave;
}
}
}

​ SmallConvex.shader

Shader "Custom/Curl/SmallConvex" // 小凸镜变换
{
Properties
{
_MainTex ("mainTex", 2D) = "white" {}
} SubShader
{
Pass
{
ZTest Always
Cull Off
ZWrite Off
Fog { Mode off } CGPROGRAM #pragma vertex vert_img // UnityCG.cginc中定义了vert_img方法, 对vertex和texcoord进行了处理, 输出v2f_img中的pos和uv
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" sampler2D _MainTex;
float _alpha; float2 beforeConvex(float2 pos)
{ // 小凸化前置变换, 将pos的窄边映射到(-1, 1)之间
pos /= _ScreenParams.xy; // 坐标映射到(0, 1)之间
pos = pos * 2 - 1; // 坐标映射到(-1, 1)之间
pos.y = -pos.y; // 屏幕坐标系原点在左上角, y轴向下, 所以要取反
pos.x *= (_ScreenParams.x / _ScreenParams.y); // 窄边映射到(-1, 1)之间, 宽边映射到(-ratio, ratio)之间(ratio为屏幕宽高比)
return pos;
} float2 convex(float2 pos)
{ // 凸化变换, 将屏幕坐标映射到纹理坐标, 窄边映射到(-1, 1)之间, 宽边大致映射到(-ratio, ratio)之间(ratio为屏幕宽高比)
float rho = length(pos);
float beta = rho * sin(_alpha);
if (beta > 1)
{
return float2(-10000, -1000000);
}
return pos * asin(beta) / _alpha / rho;
} float2 afterConvex(float2 uv)
{ // 小凸化后置变换, 将uv的窄边和宽边都映射到(0, 1)之间
uv.x = uv.x / (_ScreenParams.x / _ScreenParams.y) / 2 + 0.5; // 坐标由(-ratio, ratio)还原到(0, 1)
uv.y = uv.y / 2 + 0.5; // 坐标由(-1, 1)还原到(0, 1)
return uv;
} fixed4 frag(v2f_img i) : SV_Target // uv坐标的计算不能在顶点着色器中进行, 因为屏后处理的顶点只有屏幕的4个角顶点
{
float2 pos = beforeConvex(i.pos.xy);
float2 uv = convex(pos);
uv = afterConvex(uv);
if (uv.x < 0 || uv.y < 0 || uv.x > 1 || uv.y > 1)
{
return fixed4(0, 0, 0, 0);
}
return tex2D(_MainTex, uv);
} ENDCG
}
} Fallback off
}

​ LargeConvex.shader

Shader "Custom/Curl/LargeConvex" // 大凸镜变换
{
Properties
{
_MainTex ("mainTex", 2D) = "white" {}
} SubShader
{
Pass
{
ZTest Always
Cull Off
ZWrite Off
Fog { Mode off } CGPROGRAM #pragma vertex vert_img // UnityCG.cginc中定义了vert_img方法, 对vertex和texcoord进行了处理, 输出v2f_img中的pos和uv
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" sampler2D _MainTex;
float _alpha; float2 beforeConvex(float2 pos)
{ // 大凸化前置变换, 将pos的宽边映射到(-1, 1)之间
pos /= _ScreenParams.xy; // 坐标映射到(0, 1)之间
pos = pos * 2 - 1; // 坐标映射到(-1, 1)之间
pos.y = -pos.y; // 屏幕坐标系原点在左上角, y轴向下, 所以要取反
pos.y /= (_ScreenParams.x / _ScreenParams.y); // 宽边映射到(-1, 1)之间, 窄边映射到(-1/ratio, 1/ratio)之间(ratio为屏幕宽高比)
return pos;
} float2 convex(float2 pos)
{ // 凸化变换, 将屏幕坐标映射到纹理坐标, 宽边映射到(-1, 1)之间, 窄边大致映射到(-1/ratio, 1/ratio)之间(ratio为屏幕宽高比)
float rho = length(pos);
float beta = rho * sin(_alpha);
if (beta > 1)
{
return float2(-10000, -1000000);
}
return pos * asin(beta) / _alpha / rho;
} float2 afterConvex(float2 uv)
{ // 大凸化后置变换, 将uv的宽边和窄边都映射到(0, 1)之间
uv.x = uv.x / 2 + 0.5; // 坐标由(-1, 1)还原到(0, 1)
uv.y = uv.y * (_ScreenParams.x / _ScreenParams.y) / 2 + 0.5; // 坐标由(-ratio, ratio)还原到(0, 1)
return uv;
} fixed4 frag(v2f_img i) : SV_Target // uv坐标的计算不能在顶点着色器中进行, 因为屏后处理的顶点只有屏幕的4个角顶点
{
float2 pos = beforeConvex(i.pos.xy);
float2 uv = convex(pos);
uv = afterConvex(uv);
if (uv.x < 0 || uv.y < 0 || uv.x > 1 || uv.y > 1)
{
return fixed4(0, 0, 0, 0);
}
return tex2D(_MainTex, uv);
} ENDCG
}
} Fallback off
}

3 运行效果

4 推荐阅读

​ 声明:本文转自【Unity3D】半球卷屏特效

【Unity3D】半球卷屏特效的更多相关文章

  1. unity3d 游戏插件 溶解特效插件 - Dissolve Shader

    unity3d 游戏插件 溶解特效插件 - Dissolve Shader   链接: https://pan.baidu.com/s/1hr7w39U 密码: 3ed2

  2. 【SecureCRT配置】修改默认卷屏行数当做一个操作,屏幕输出有上百行,当需要将屏幕回翻时,这个设置会有很大帮助,默认为500行,可以改为10000行,不用担心找不到了。 选项 => 全局选项 => Default Session => Edit Default Settings => Terminal => Emulation => Scrollback 修改为32000。

    SecureCRT配置屏幕内容输出到log文件 SecureCRT看不到前几分钟操作的内容,或者想把通过vi命令查看的日志输出到log文件(在懒得下载日志文件的情况下),所以接下来就这样操作: 文件保 ...

  3. Unity3D去掉全屏时的屏幕黑边

    给全屏后不在乎拉伸变形仍想让画面占满屏幕的朋友,网上搜了一上午,实在是没有相关的资料,只能自己琢磨了. 使用Canvas Scaler在全屏后Unity虽然会为我们自动拉伸UI,但拉伸后仍然保持我们在 ...

  4. unity3d笔记:控制特效的播放速度

           一般在游戏中,主角或者怪物会受到减速效果,或者攻击速度减慢等类似的状态.本身动作减速的同时,衔接在角色上的特效也需要改变相应的播放速度.一般特效有三个游戏组件:   关键点就是改变Ani ...

  5. Unity3D在Windows的全屏和跨屏(双屏)方案

    方案1 unity中2个摄像机场景显示在两个显示器屏幕上(一个窗口跨屏) 1.设置场景中的两个摄像机 摄像机1 摄像机2 2.设置发布的平台及分辨率 3.全屏运行游戏,没有标题栏还可以通过-popup ...

  6. Jquery实现手机上下滑屏滑动的特效代码

    要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...

  7. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  8. 用Qt(C++)实现如苹果般的亮屏效果

    用Qt(C++)实现如苹果般的亮屏效果 苹果的亮屏效果可能有很多人没注意到,和其他大部分手机或电脑不同的是,苹果的亮屏特效不是简单的亮度变化,而是一个渐亮的过程.详细来说就是,图片中较亮的部分先显示出 ...

  9. GNU Emacs命令速查表

    GNU Emacs命令速查表 第一章  Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...

  10. Unity中的ShaderToys——将大神们写的shader搬到unity中来吧

    http://lib.csdn.net/article/unity3d/38699 这篇文章翻译自国外的一篇文章(这里是原文链接),正在使用unity的你是否在shader toy上发现很多牛逼哄哄的 ...

随机推荐

  1. 【Tomcat 组成与工作原理】

    Tomcat组成与工作原理 Tomcat 是什么 开源的 Java Web 应用服务器,实现了 Java EE(Java Platform Enterprise Edition)的部 分技术规范,比如 ...

  2. blender 3D 汽车模型下载

    前言 因为之前需要模拟摄像头拍摄汽车车牌,从各种途径下载了一些blender 3D 汽车模型,现将模型分享出来,如有需要,直接去最后面下载地址下载即可 目前已经车型40多款 车型图 70年代Porsc ...

  3. 【面试题精讲】JavaOptional用法

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 文章更新计划 系列文章地址 Java 8 引入了 Option ...

  4. [转帖]一文理清 TiDB 与 MySQL 中的常用字符集及排序规则

    https://tidb.net/blog/0c5b6025   1.1. 字符集与编码规则 字符集(character set)即为众多字符的集合.字符集为每个字符分配一个唯一的 ID,称为 &qu ...

  5. 人大金仓学习之四-kmonitor

    人大金仓学习之四-kmonitor 背景 kmonitor 其实时一个很好的工具和思路 开元的软件封装一下, 减轻技术复杂度,提高部署效率 并且能够更加快速的定位解决问题. 能够极大的提升客户体验. ...

  6. nginx 最简单的在同一个配置文件里面将http 监听的端口转发到其他端口的方法

    今天发现一个问题, 我这边修改了nginx 的listen的端口之后 应用出现了问题 无法使用. 想到之前曾经试验过 tcp 的 proxy 所以就想到直接再配置文件的默认添加一句话 启动TCP的 端 ...

  7. OpenPower服务使用node-exporter prometheus以及grafana进行性能监控的流程

    OpenPower服务器性能监控操作流程 1. 前言 最近看了很多prometheus以及influxdb进行性能监控的帖子,简单学习了下influxdb是一个单纯的时序数据库,prometheus是 ...

  8. AI-WEB-1.0靶机

    AI-WEB-1.0靶机 情报收集 扫描靶机,打开网站提示 Not even Google search my contents! dirb http://192.168.218.139 扫描网站 进 ...

  9. 原生js拖拽元素(onmouseup不能够触发的原因)

    我们经常会遇见拖拽某一个元素的场景,拖拽也是很常用的: 这次拖拽遇见一个问题,有时在拖拽的时候吗,鼠标松开,元素仍然可以拖拽: 经过查阅资料,发现: 会触发H5原生的拖拽事件.并且不会监听到onmou ...

  10. 【JS 逆向百例】W店UA,OB反混淆,抓包替换CORS跨域错误分析

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...