shadertoy 游戏《来自星尘》摇杆复刻

正确的做法应该是上 noise 而不是叠加 sin 波,不过如果不想麻烦的话叠波还是一个不错的选择:整体效果如下,已经非常形似

直接上链接:Shader - Shadertoy BETA

float radiusScale = 0.9;
float variation(vec2 v1, vec2 v2, float strength, float speed)
{
    float v = dot(normalize(v1), normalize(v2));
	return sin(v * strength - iTime * speed) / 50.0
        + sin(v * strength * 3.0 - iTime * speed) / 450.0;
}

float paintCircle(vec2 uv, vec2 center, vec2 center2, float rad, float width, float strong, float speed)
{
    width *= radiusScale;
    rad *= radiusScale;
    
    vec2 diff = center - uv;
    float len = max(step(center2.y, uv.y) * length(center2 - uv) + step(uv.y, center.y) * length(center - uv), 
        abs(uv.x - center.x));

    float normal = max(-normalize(diff).y, 0.0) * max(-normalize(diff).y, 0.0);
    len += variation(diff, vec2(0.0, 1.0), strong, speed) * normal;
    len -= variation(diff, vec2(1.0, 0.0), strong, speed) * normal;

    rad -= 0.15 * max((uv.y - 0.55), 0.0);
    return step(abs(len - rad), width);
}


void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
	vec2 uv = fragCoord.xy / iResolution.xy;
    uv.y += 0.1;
    uv.x *= 1.5;
    uv.x -= 0.25;

    float color;
    float radius = 0.24 * radiusScale;
    float think1 = radius / 13.0;
    float think2 = think1 / 3.0;
    vec2 center = vec2(0.5, 0.5);

    color = max(color, paintCircle(uv, center, vec2(0.5, 0.7), radius, think1, 5.0, 7.2));
    color += paintCircle(uv, center, vec2(0.5, 0.72), radius + think1 / 2.0, think2, 6.5, 7.8);
    color = max(color, paintCircle(uv, center, vec2(0.5, 0.74), radius + think1 * 2.0, think2, 6.5, 8.4));
    color = max(color, paintCircle(uv, center, vec2(0.5, 0.76), radius + think1 * 2.0 + think2 * 4.0, think2, 7.0, 9.0));
    color = max(color, paintCircle(uv, center, vec2(0.5, 0.78), radius + think1 * 2.0 + think2 * 8.0, think2, 8.0, 10.2));

	fragColor = vec4(color * vec3(1.5 - uv.y, 1.0, 1.0), 1.0);
}

整体没啥难度,就不上教学了吧,链接里左边效果右边就是代码了,可以自行参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/437561.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

据说这是最细滴,Python接口自动化测试数据驱动DDT使用实战,有这一篇就完全足够了

前言 环境准备 首先,需要安装ddt模块 pip install ddt调用时标准格式 在类下面如下写上:ddt.ddt 在调用的方法下面需要写上:ddt.data(需要传入的多组数据) DDT简单介绍 名称: Data-Driven Tests,数据驱动测试。 作用…

深入理解Servlet

目录: ServletWeb开发历史Servlet简介Servlet技术特点Servlet在应用程序中的位置Tomcat运行过程Servlet继承结构Servlet生命周期Servlet处理请求的原理Servlet的作用HttpServletRequest对象HttpServletResponse对象ServletContext对象ServletConfig对象Cookie对象与…

Keepalived实验

一、 LVSKeepalived 实验:7-1为主; 7-2为备; 7-3和7-4为后端服务器 1.关闭防火墙和selinux [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 02.配置主设备7-1 1.安装ipvsadm和keepalived [rootlocalhost ~]#…

阿珊解说Vue中`$route`和`$router`的区别

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

可视化图表:柱坐标系与对应图表详解

一、柱坐标系及其构成 柱状坐标系是一种常见的可视化图表坐标系,用于显示柱状图(也称为条形图)的数据。它由两个相互垂直的轴组成,一个是水平轴(X轴),另一个是垂直轴(Y轴&#xff0…

评测本地部署的语音识别模型

1 引言 最近,朋友给我发来了一段音频,想转录成文字,并使用大型润色文本。音频中的普通话带有一定的口音,并且讲解内容较为专业,所以一般的语音识别工具很难达到较高的识别率。 于是试用了两个大模型。Whisper 是目前…

AIOps常见问题

AIOps的自动化通常指什么? AIOps 平台的自动化一般包括以下几个方面: 数据收集和整合:AIOps 平台可以从多个 IT 基础架构组件、应用需求与性能监视工具以及服务工单系统等数据源中收集并整合运维数据,形成一个全面的数据平台。数…

Access AR Foundation 5.1 in Unity 2022

如果已经下载安装了ARF但版本是5.0.7 可以通过下面的方式修改 修改后面的数字会自动更新 更新完成后查看版本 官方文档 Access AR Foundation 5.1 in Unity 2021 | AR Foundation | 5.1.2

YOLOv9中train.py与train_dual.py的异同!

专栏介绍:YOLOv9改进系列 | 包含深度学习最新创新,主力高效涨点!!! 首先,train.py(左)与train_dual.py(右)中的损失函数是不一样的,这也解释了为什么使用train.py除了填入…

Visual Studio 2022之Release版本程序发送到其它计算机运行

目录 1、缺少dll​ 2、应用程序无法正常启动 3、This application failed to start because no Qt platform plugin could be initialized. 代码在Debug模式下正常运行,然后切换到Release模式下,也正常运行,把第三方平台的dll拷贝到exe所在…

Chrome浏览器好用的几个扩展程序

Chrome好用的扩展程序 背景目的介绍JsonHandle例子未完待续。。。。。。 背景 偶然在往上看到Chrome有很多好用的扩展程序,比较好用,因此记录下比较实用的扩展程序。 目的 记录Chrome浏览器好用的插件。 介绍 JsonHandle下载以及无法扩展插件的解决…

Vue3_2024_6天【回顾上篇watch常见的前三种场景】另两种待补

第一种情况:监视【ref】定义(基本数据类型) 1.引入watch2.格式:watch(基本数据类型数据,监视变化的回调函数) 注意点: 2.1.watch里面第一个参数,是数据~~【监视的基本类…

基于深度学习的三维重建MVSNet系列

2019年4月15日下午6时50分左右,一场大火席卷了法国巴黎圣母院,持续长达14小时。幸而巴黎圣母院有着高分辨率的3D模型,研究人员可以了解圣母院本身的建造结构,以便修复工程的开展。 多视图立体几何(Multi-View Stereo&a…

unity-urp:视野雾

问题背景 恐怖游戏在黑夜或者某些场景下,需要用雾或者黑暗遮盖视野,搭建游戏氛围 效果 场景中,雾会遮挡场景和怪物,但是在玩家视野内雾会消散,距离玩家越近雾越薄。 当前是第三人称视角,但是可以轻松的…

Linux:kubernetes(k8s)探针LivenessProbe的使用(9)

他做的事情就是当我检测的一个东西他不在规定的时间内存在的话,我就让他重启,这个检测的目标可以是文件或者端口等 我这个是在上一章的基础之上继续操作,我会保留startupProbe探针让后看一下他俩的执行优先的一个效果 Linux:kuber…

【QT】QDialog/ QMessageBox/提示对话框/颜色(文字)------对话框

QDialog—对话框 什么是对话框,如下样式 非模态对话框,即打开以后,我还可以对其他框进行操作。 模态对话框,打开以后,其他框都不能再操作了 模态对话框是阻塞对话框 QDialog dig(this);//显示模态对话框dig.exec();…

ROS2中nav_msgs/msg/Path 数据含义及使用

目录 ROS2中nav_msgs/msg/Path数据含义及使用ROS官方消息说明使用ros2中Path生成路径并显示案例使用ROS2命令创建功能包修改创建功能包中的CMakeLists.txt如下创建发布话题的main函数编译与运行rviz可视化发布的路径 ROS2中nav_msgs/msg/Path数据含义及使用 ROS2官方关于nav_m…

vue面试--9, 1 ObjectProperty与vue3Proxy区别。2 MVVM的理解 3 双向绑定原理?

1 ObjectProperty与vue3Proxy区别 2 MVVM的理解 3 双向绑定原理?

Spring源码:手写AOP

文章目录 一、概念1、AOP是什么?2、相关概念1)目标对象Target2)通知Advice3)连接点Joinpoint4)切点Pointcut5)切面Aspect6)织入Weaving 二、分析三、实现1、实现Advice1)前置通知2&a…

Jmeter高效组织接口自动化用例

1、善用“逻辑控制器”中的“简单控制器”。可以把简单控制器像文件夹一样使用,通过它来对用例进行分类归档,方便后续用例的调试和执行。 2、同编写测试用例一样,这里的接口测试用例应该进行唯一性编号,这样在运行整个用例计划出现…