使用shader实现一个图片旋转、某个点挖洞、偏移的功能

这篇具有很好参考价值的文章主要介绍了使用shader实现一个图片旋转、某个点挖洞、偏移的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

下面代码实现了Center作为旋转中心点和挖洞中心点,Offset是偏移文章来源地址https://www.toymoban.com/news/detail-408980.html

Shader "Custom/Spin" {
    Properties{
        _MainTex("Texture", 2D) = "white" {}
        _Speed("Speed", Range(0.1, 100)) = 1.0
        _Center("Center", Vector) = (0.5, 0.5, 0.0, 0.0)
        _Opacity("Opacity", Range(0, 1)) = 1.0
        _TransparentLength("TransparentLength", Range(0, 1)) = 0.2
        _Offset("Offset", Vector) = (0.5, 0.5, 0.0, 0.0)
    }
        SubShader{
            Tags {"Queue" = "Transparent" "RenderType" = "Opaque"}
            LOD 100

            Pass {
                Blend SrcAlpha OneMinusSrcAlpha // 启用混合模式
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #include "UnityCG.cginc"

                struct appdata {
                    float4 vertex : POSITION;
                    float2 uv : TEXCOORD0;
                };

                struct v2f {
                    float2 uv : TEXCOORD0;
                    float4 vertex : SV_POSITION;
                };

                sampler2D _MainTex;
                float2 _Center;
                float _Speed;
                float _Opacity;
                float _TransparentLength;
                float2 _Offset;

                v2f vert(appdata v) {
                    v2f o;
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    o.uv = v.uv;
                    return o;
                }

                fixed4 frag(v2f i) : SV_Target{
                    float2 center = _Center;
                    float2 uv = i.uv - center;
                    float angle = _Time.y * _Speed;
                    float s = sin(angle);
                    float c = cos(angle);
                    float2 offset = _Offset;
                    float2 rotatedUV = float2((uv.x + offset.x) * c - (uv.y + offset.y) * s, (uv.x + offset.x) * s + (uv.y + offset.y) * c);
                    float dist = length(uv);
                    if (dist < _TransparentLength) {
                        discard;
                    }
                    fixed4 col = tex2D(_MainTex, rotatedUV + center);
                    col.a *= _Opacity;
                    return col;
                }


                /*fixed4 frag(v2f i) : SV_Target{
                    float2 center = _Center;
                    float2 uv = i.uv - center;
                    float angle = _Time.y * _Speed;
                    float s = sin(angle);
                    float c = cos(angle);
                    float2 rotatedUV = float2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
                    float dist = length(uv);
                    if (dist < _TransparentLength) {
                        discard;
                    }
                    fixed4 col = tex2D(_MainTex, rotatedUV + center);
                    col.a *= _Opacity;
                    return col;
                }*/


                //fixed4 frag(v2f i) : SV_Target {
                //    float2 center = _Center;
                //    float2 uv = i.uv - center;
                //    float angle = _Time.y * _Speed;
                //    float s = sin(angle);
                //    float c = cos(angle);
                //    float2 rotatedUV = float2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
                //    fixed4 col = tex2D(_MainTex, rotatedUV + center); // 采样纹理
                //    col.a *= _Opacity; // 乘以不透明度
                //    return col;
                //}
                ENDCG
            }
        }
            FallBack "Diffuse"
}

到了这里,关于使用shader实现一个图片旋转、某个点挖洞、偏移的功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Cocos creator(2d) 使用 shader + uv 实现单张图片衔接滚动效果

    在游戏中,当我们需要让背景图片无缝衔接无限滚动时(打飞机这种背景一直滚动,或者肉鸽游戏地图一直在走等等),通常的做法是 在游戏中放两个背景node,在update中控制这两张背景图片的移动,并让其收尾衔接即可。(具体代码忽略) 可是在肉鸽类游戏中,玩家的走向是全方

    2024年02月13日
    浏览(95)
  • 微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能

    1.在 WXML 文件中添加一个 标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画。 2.在 WXSS 文件中添加样式,将图片设置为圆形并居中显示。 3.在 JS 文件中定义旋转动画对象和控制方法。 4.在 WXML 文件中添加按钮来触发开始和结束旋转动画。 在以上步骤

    2024年02月16日
    浏览(40)
  • 全网最全!!Qt实现图片旋转及图片旋转动画的几种方式

    第一种方案 使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: 第二种方案 使用 QPainter 这位“画家”,示例程序如下:  一、借助QPixmap实现旋转动画 第二种方案 使用 QPainter 这位“画家”,示例程序如下:

    2024年02月11日
    浏览(46)
  • C#实现图片对比-支持图片旋转

    虽然已经正式转JAVA了,但最近发现一个特别好的开源项目masuit,不仅提供很多简便的功能,还有图像的一些特殊操作功能。 之前我们比较图片应该都是使用的openCV,不过这个masuit,看上去也不错,而且代码使用简单,因此强烈推荐。 下面就实现一个简单图像对比。 首先添加

    2024年03月09日
    浏览(66)
  • Unity中Shader旋转矩阵(四维旋转矩阵)

    在上篇文章中,我们推算出了Shader物体旋转所使用的二维旋转矩阵。 Unity中Shader旋转矩阵(二维旋转矩阵) 在这篇文章中,我们来推算得到四维旋转矩阵。 围绕X轴旋转代表,物体顶点的X轴不变。 我们把P 2 增加一维且分量为1 M rotate * P 1 = P 2 M rotate = P 2 * P 1 -1 最后得到M ro

    2024年02月04日
    浏览(35)
  • Unity中Shader旋转矩阵(二维旋转矩阵)

    在Shader中,我们经常对顶点进行旋转变换。我们在这篇文章中了解一下旋转使用的旋转矩阵。 我们先在2D平面下,了解2D原理 我们需要求的就是坐标系旋转后,P点在旋转后坐标系中的位置。 因为,我们旋转物体时,我们是围绕着一个轴旋转。 旋转后,我们需要求的就是物体

    2024年02月04日
    浏览(37)
  • 【unity shader案例】如何实现一个玻璃效果

      原理:玻璃最大的特点当然就是半透明了,如何在游戏中实现这样的效果呢?我这里总体的思路就是先截取整个场景作为一张纹理,然后把玻璃区域的纹理贴到这个玻璃模型上。 下面看具体实现代码 实现效果如下    更进一步,还可以实现毛玻璃的效果,思路就是用一张

    2024年02月16日
    浏览(48)
  • css实现图片的3d旋转-照片墙

      1.html                 这里准备了1个section和7个div,7个div都要求定位在父元素section那里(都在中心点),每个div各一张图,上面效果图有1张在中间的,其余6张图要在周围 2.图片位置摆放- 旋转           6个图片在 周围 ,看起来就像个六边形,所以每个图都间隔

    2024年02月06日
    浏览(99)
  • 使用Python批量旋转,镜像图片

    当我们进行大量图像处理时,经常需要旋转或镜像图像。但一张张处理图片费神又费力,有什么好的办法可以帮助我们快速搞定这个问题呢?这时候我们可以写个简单的python程序来搞定它!~ 在Python中,我们可以使用Pillow库(Python Imaging Library)进行图像处理。Pillow库提供了很

    2024年02月01日
    浏览(57)
  • 【ArkTS】鸿蒙开发 在用户界面点击图片实现图片旋转和图片缩小动画

    为了实现图片点击旋转、缩放、位移等功能,我主要应用了多态样式:stateStyles()属性和动画animation()属性,具体用法可以参考官网给出的说明: stateStyles()属性: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-statestyles-0000001482592098-V2 animation()属性: https://devel

    2024年04月23日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包