当前位置： 首页 > news >正文

用html写一个雨的特效

news 文章来源：https://blog.csdn.net/liulang68/article/details/137640899 2024/10/30 19:34:52

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>雨特效</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="wrap-texture"><div id="canvas"></div><div class="plane"><img data-sampler="dispImage" id="texture" src="https://source.unsplash.com/MFW8BGYKNIE" crossorigin="anonymous"/></div>
</div>
<!-- partial --><script src="https://www.curtainsjs.com/build/curtains.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
window.onload = () => {const shader = {vertex: `    #ifdef GL_ESprecision mediump float;#endif// lib设置的强制属性attribute vec3 aVertexPosition;attribute vec2 aTextureCoord;// lib设置的强制统一，包含模型视图和投影矩阵uniform mat4 uMVMatrix;uniform mat4 uPMatrix;uniform mat4 dispImageMatrix;// 将顶点和纹理坐标传递给着色器varying vec3 vVertexPosition;varying vec2 vTextureCoord;void main() {vec3 vertexPosition = aVertexPosition;gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);// 设置varyingsvTextureCoord = (dispImageMatrix * vec4(aTextureCoord, 0., 1.)).xy;vVertexPosition = vertexPosition;}`,fragment: `#ifdef GL_ESprecision mediump float;#endif#define PI2 6.28318530718#define PI 3.14159265359#define S(a,b,n) smoothstep(a,b,n)// 获得varyingsvarying vec3 vVertexPosition;varying vec2 vTextureCoord;// 用uniform声明uniform float uTime;uniform vec2 uReso;uniform vec2 uMouse;// 纹理采样器uniform sampler2D dispImage;uniform sampler2D blurImage;// 噪声float N12(vec2 p){p = fract(p * vec2(123.34, 345.45));p += dot(p, p + 34.345);return fract(p.x * p.y);}vec3 Layer(vec2 uv0, float t){vec2 asp = vec2(2., 1.);vec2 uv1 = uv0 * 3. * asp;uv1.y += t * .25;vec2 gv = fract(uv1) - .5;vec2 id = floor(uv1);float n = N12(id);t+= n * PI2;float w = uv0.y * 10.;float x = (n - .5) * .8;x += (.4 - abs(x)) * sin(3. * w) * pow(sin(w), 6.) * .45;float y = -sin(t + sin(t + sin(t) * .5)) * (.5 - .06);y -= (gv.x - x) * (gv.x - x); // sesgar;vec2 dropPos = (gv - vec2(x, y)) / asp; float drop = S(.03, .02, length(dropPos));vec2 trailPos = (gv - vec2(x, t * .25)) / asp; trailPos.y = (fract(trailPos.y * 8.) - .5) / 8.;float trail = S(.02, .015, length(trailPos));float fogTrail = S(-.05, .05, dropPos.y);fogTrail *= S(.5, y, gv.y);trail *= fogTrail;fogTrail *= S(.03, .015, abs(dropPos.x));vec2 off = drop * dropPos + trail * trailPos;return vec3(off, fogTrail);}void main() {      float dist = 5.;float blurSize = 5.;float t = mod(uTime * .03, 7200.);vec4 c = vec4(0);vec2 uv = vTextureCoord;    vec3 drops = Layer(uv, t);drops += Layer(uv * 1.25 + 7.54, t);drops += Layer(uv * 1.35 + 1.54, t);drops += Layer(uv * 1.57 - 7.54, t);float blur = blurSize * 7. * (1. - drops.z);vec4 col = vec4(0.);int numSamples = 32;float a = N12(uv) * PI2;blur *= .0005;uv += drops.xy * dist;for(int n = 0; n < 32; n++){vec2 off = vec2(sin(a), cos(a)) * blur;float d = fract(sin((float(n) + 1.) * 546.) * 5424.);d = sqrt(d);         off *= d;col += texture2D(dispImage, uv + off);a++;}col /= float(numSamples);gl_FragColor = col;}`};// canvasconst canvasContainer = document.getElementById("canvas");const mouse = {x: 0,y: 0};// 设置WebGL，并将canvas附加到containerconst webGLCurtain = new Curtains({container: "canvas"});// 获取平面元素const planeElement = document.getElementsByClassName("plane")[0];// 设置初始参数const params = {vertexShader: shader.vertex, // 顶点着色器fragmentShader: shader.fragment, // framgent着色器widthSegments: 40,heightSegments: 40, // 现在有40*40*6=9600个顶点uniforms: {time: {name: "uTime", // 传递给着色器统一名称type: "1f", value: 0},mousepos: {name: "uMouse",type: "2f",value: [mouse.x, mouse.y]},resolution: {name: "uReso",type: "2f",value: [innerWidth, innerHeight]}}};// 创建平面网格const plane = webGLCurtain.addPlane(planeElement, params);plane.onRender(() => {plane.uniforms.time.value++; // 更新统一值plane.uniforms.resolution.value = [innerWidth, innerHeight];});canvasContainer.addEventListener("mousemove", ({ clientX, clientY }) => {mouse.x = clientX;mouse.y = clientY;plane.uniforms.mousepos.value = [mouse.x, mouse.y];});};
body {position: relative;width: 100%;height: 100vh;margin: 0;overflow: hidden;
}#wrap-texture {position: relative;
}#canvas {/* canvas 的大小 */position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}.plane {/* 限制 plane 的大小 */width: 100%;height: 100vh;
}.plane img {/* 隐藏 img 对象 */display: none;
}

相关文章：

用html写一个雨的特效

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>雨特效</title><link rel"stylesheet" href"./style.css"> </head> <body> <div id"wrap-textu…...

编程日记 2024/4/15 20:21:48

前端 接口返回来的照片太大 加载慢如何解决

现象 解决 1. 添加图片懒加载 背景图懒加载 对背景图懒加载做的解释 和图片懒加载不同&#xff0c;背景图懒加载需要使用 v-lazy:background-image&#xff0c;值设置为背景图片的地址&#xff0c;需要注意的是必须声明容器高度。 <div v-for"img in imageList&quo…...

编程日记 2024/4/15 20:17:43

003 传参

文章目录 传参http 状态码传参方式&#xff08;1&#xff09;URL请求参数 key 与 方法中的形参名一致&#xff08;2&#xff09;URL请求参数 key与RequestParam("id") 中的别名一致&#xff08;3&#xff09; 形参是POJO类&#xff0c;URL 参数 key 与pojo类的 set方…...

编程日记 2024/4/15 20:12:37

QT写Windows按键输出（外挂）

一、前言 玩游戏的时候遇到些枯燥无味反反复复的按鼠标键盘的情况时&#xff0c;就想写个外挂自动释放。刚好在学qt所以试验了下QT能不能对外输出按键与鼠标。 二、思路 qt中的按键鼠标全是输入&#xff0c;没有直接对外输出键盘鼠标指令的类&#xff0c;但是我们换个思路&…...

编程日记 2024/4/15 20:11:36

Stable Diffusion之文生图模型训练

1、数据准备 提前准备好一组相关的照片。 在线的图片处理网站 BIRME - Bulk Image Resizing Made Easy 2.0 (Online & Free) 将图片转成统一大小&#xff0c;支持批量处理&#xff0c;效率高 2、生成提示词 进入stable diffusion webui页面 旧版直接使用 train/proproc…...

编程日记 2024/4/15 20:09:33

SpringBoot整合支付宝沙箱支付

环境说明&#xff1a;SpringBoot3.0.2 支付宝沙箱地址&#xff1a;沙箱地址 获取配置信息 因支付需要回调地址&#xff0c;回调地址必须是公网&#xff0c;如果有公网的话&#xff0c;那直接在下面配置文件填写自己的公网&#xff0c;没有的话&#xff0c;就需要我们借助第三…...

编程日记 2024/4/15 20:08:32

探索进程控制第一弹（进程终止、进程等待）

文章目录 进程创建初识fork函数fork函数返回值fork常规用法fork调用失败的原因 写时拷贝进程终止进程终止是在做什么&#xff1f;进程终止的情况代码跑完&#xff0c;结果正确/不正确代码异常终止 如何终止 进程等待概述进程等待方法wait方法waitpid 进程创建 初识fork函数 在…...

编程日记 2024/4/15 20:07:31

在mac环境下使用shell脚本实现tree命令

文章目录 使用ls实现tree使用find实现tree 使用ls实现tree 实现思路 使用ls -F 打印文件类型&#xff0c;如果是目录后面跟/&#xff0c;如果是可执行文件后面跟*&#xff1b;使用grep -v /$ 筛选文件排除目录&#xff0c;-v为反向筛选&#xff1b;使用grep /$ 仅筛选目录&am…...

编程日记 2024/4/15 20:04:28

递归时间复杂度分析方法：Master 定理

编写算法时&#xff0c;可能因为对自己代码的复杂度的不清晰而导致错失良机&#xff0c;对于普通的递推或者说循环的代码&#xff0c;仅用简单的调和级数或者等差数列和等比数列即可分析&#xff0c;但是对于递归的代码&#xff0c;简单的递归树法并不方便&#xff0c;理解并记…...

编程日记 2024/4/15 20:03:27

实例名不规范导致mds创建失败

概述 在部署ceph集群时&#xff0c;规划主机名、关闭防火墙、配置免密、关闭selinux&#xff0c;配置hosts文件这几步同样重要&#xff0c;都是初期部署一次麻烦&#xff0c;方便后续运维的动作。遇到过很多前期稀里糊涂部署&#xff0c;后续运维和配置时候各种坑。 近期遇到…...

编程日记 2024/4/15 20:02:25

OpenGL中的纹理过滤GL_NEAREST和GL_LINEAR

一、GL_NEAREST&#xff08;最近邻插值&#xff09; 1.1 原理 当需要从纹理中采样颜色时&#xff0c;GL_NEAREST模式会选择离采样点最近的纹理像素&#xff08;通常是最接近采样点的纹理元素的中心&#xff09;&#xff0c;并直接使用该像素的颜色值作为输出。这种模式不进行任…...

编程日记 2024/4/15 19:57:21

vue 性能优化

data 层级不要太深 data 层级太深会增加响应式监听的计算&#xff0c;导致页面初次渲染时卡顿。 合理使用 v-show 和 v-if 频繁切换时&#xff0c;使用 v-show无需频繁切换时&#xff0c;使用 v-if 合理使用 computed computed 有缓存&#xff0c;data 不变时不会重新计算&…...

编程日记 2024/4/15 19:56:20

互联网大厂ssp面经（操作系统：part1）

1. 什么是进程和线程&#xff1f;它们之间有什么区别&#xff1f; a. 进程是操作系统中运行的一个程序实例。它拥有独立的地址空间和资源&#xff0c;可以独立执行。 b. 线程是进程内的一个执行单元&#xff0c;一个进程可以包含多个线程。 c. 线程共享进程的资源&#xff0c;…...

编程日记 2024/4/15 19:50:13

Android Activity 启动涉及几个进程

Zygote进程: Zygote进程在Android系统启动时被初始创建&#xff0c;并且初始化了虚拟机&#xff08;Dalvik或ART&#xff09;&#xff0c;预加载了Android系统的核心类库。所有的Android应用进程都是通过fork()从Zygote进程派生出来的&#xff0c;这允许应用快速启动&#xff0…...

编程日记 2024/4/15 19:42:05

说说你对链表的理解？常见的操作有哪些？

一、是什么 链表&#xff08;Linked List&#xff09;是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的&#xff0c;由一系列结点&#xff08;链表中每一个元素称为结点&#xff09;组成 每个结点包括两个部分&…...

编程日记 2024/4/15 19:41:03

每天五分钟深度学习：逻辑回归算法的损失函数和代价函数是什么？

本文重点 前面已经学习了逻辑回归的假设函数，训练出模型的关键就是学习出参数w和b，要想学习出这两个参数，此时需要最小化逻辑回归的代价函数才可以训练出w和b。那么本节课我们将学习逻辑回归算法的代价函数是什么？ 为什么不能平方差损失函数 线性回归的代价函数我们使用…...

编程日记 2024/4/15 19:40:02

llama-factory SFT系列教程 (二)，大模型在自定义数据集 lora 训练与部署

文章目录 简介支持的模型列表2. 添加自定义数据集3. lora 微调4. 大模型 lora 权重&#xff0c;部署问题 参考资料 简介 文章列表&#xff1a; llama-factory SFT系列教程 (一)&#xff0c;大模型 API 部署与使用llama-factory SFT系列教程 (二)&#xff0c;大模型在自定义数…...

编程日记 2024/4/15 19:37:59

C语言游戏实战（11）：贪吃蛇大作战（多人对战）

成果展示&#xff1a; 贪吃蛇&#xff08;多人对战&#xff09; 前言&#xff1a; 这款贪吃蛇大作战是一款多人游戏&#xff0c;玩家需要控制一条蛇在地图上移动&#xff0c;吞噬其他蛇或者食物来增大自己的蛇身长度和宽度。本游戏使用C语言和easyx图形库编写&#xff0c;旨在…...

编程日记 2024/4/15 19:34:56

腾讯测试岗位的面试经历与经验分享【一面、二面与三面】

腾讯两个月的实习一转眼就结束了,回想起当时面试的经过,感觉自己是跌跌撞撞就这么过了,多少有点侥幸.马上腾讯又要来校招了,对于有意愿想投腾讯测试岗位的同学们,写了一些那时候面试的经历和自己的想法,算不上经验&#xff0c;仅供参考吧! 一面 — —技术基础&#xff0c;全面…...

编程日记 2024/4/15 19:30:50

手机移动端网卡信息获取原理分析

有些场景我们需要获取当前手机上的网卡信息&#xff08;如双卡双待、Wifi等&#xff09;。本文准备研究一下这块的原理&#xff0c;以便更好的掌握相关技术原理。 1、底层系统接口 getifaddrs 使用 getifaddrs 接口可以达到我们的目的&#xff0c;该接口会返回本地所有网卡的信…...

编程日记 2024/4/15 19:29:49

无人新零售引领的创新浪潮

无人新零售引领的创新浪潮 在数字化时代加速演进的背景下&#xff0c;无人新零售作为商业领域的一股新兴力量&#xff0c;正以其独特的高效性和便捷性重塑着传统的购物模式&#xff0c;开辟了一条充满创新潜力的发展道路。 依托人脸识别、物联网等尖端技术&#xff0c;无人新…...

编程日记 2024/4/15 19:26:46

SD-WAN提升企业网络体验

在现代企业中&#xff0c;网络体验已成为提升工作效率与业务质量的关键因素。SD-WAN技术的出现&#xff0c;以其独特的优势&#xff0c;为企业提供了优化网络连接、加速数据传输、提升服务质量和应用访问体验&#xff0c;以及增强网络稳定性的解决方案。接下来&#xff0c;我们…...

编程日记 2024/4/15 19:25:45

Docker搭建Let‘s Encrypt

Let’s Encrypt是一个免费、开放和自动化的证书颁发机构&#xff08;CA&#xff09;&#xff0c;它提供了一种简单、无需重复的机制来获取和更新SSL/TLS证书。Let’s Encrypt Docker镜像允许用户在容器化环境中轻松部署和使用Let’s Encrypt的服务。 主要功能包括&#xff1a;…...

编程日记 2024/4/15 19:24:43

单链表讲解

一.链表的概念以及结构 链表是一种物理结构上不连续&#xff0c;逻辑结构上连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 链表的结构与火车是类似的&#xff0c;一节一节的&#xff0c;数据就像乘客一样在车厢中一样。 与顺序表不同的…...

编程日记 2024/4/15 19:22:41

DFS算法系列 回溯

DFS算法系列-回溯 文章目录 DFS算法系列-回溯1. 算法介绍2. 算法应用2.1 全排列2.2 组合2.3 子集 3. 总结 1. 算法介绍 回溯算法是一种经典的递归算法&#xff0c;通常被用来解决排列问题、组合问题和搜索问题 基本思想 从一个初始状态开始&#xff0c;按一定的规则向前搜索&…...

编程日记 2024/4/15 19:21:40

Linux C应用编程：MQTT物联网

1 MQTT通信协议 MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传 输&#xff09;是一种基于客户端-服务端架构的消息传输协议&#xff0c;如今&#xff0c;MQTT 成为了最受欢迎的物联网协议&#xff0c;已广泛应用于车联网、智能家居、即时聊…...

编程日记 2024/4/15 19:18:37

企业常用Linux文件命令相关知识+小案例

远程连接工具无法连接VMWARE&#xff1a; 如果发现连接工具有时连不上&#xff0c;ip存在&#xff0c;这时候我们查看网络编辑器&#xff0c;更多配置&#xff0c;看vnet8是不是10段&#xff0c;nat设置是否是正确的&#xff1f; 软件重启一下虚机还原一下网络编辑器 查看文件…...

编程日记 2024/4/15 19:16:35

Istio介绍

1.什么是Istio Istio是一个开源的服务网格&#xff08;Service Mesh&#xff09;框架&#xff0c;它提供了一种简单的方式来为部署在Kubernetes等容器编排平台上的微服务应用添加网络功能。Istio的核心功能包括&#xff1a; 服务治理&#xff1a;Istio能够帮助管理服务之间的…...

编程日记 2024/4/15 19:15:34

代码随想录算法训练营第四十七天|leetcode115、392题

一、leetcode第392题 本题要求判断s是否为t的子序列&#xff0c;因此设置dp数组&#xff0c;dp[i][j]的含义是下标为i-1的子串与下标为j-1的子串相同字符的个数&#xff0c;可得递推公式是通过s[i-1]和t[j-1]是否相等区分。 具体代码如下&#xff1a; class Solution { publ…...

编程日记 2024/4/15 19:14:33

将Ubuntu18.04默认的python3.6升级到python3.8

1、查看现有的 python3 版本 python3 --version 2、安装 python3.8 sudo apt install python3.8 3、将 python3.6 和 3.8 添加到 update-alternatives sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 1 sudo update-alternatives --insta…...

编程日记 2024/4/15 19:13:32

工信部网站备案查询系统/学网络运营需要多少钱

time简介 time命令 用于 打印出一条命令或一个程序的执行时间 time 命令以秒为单位将一条命令执行期间所用的时间、系统时间和 time 命令的执行时间打印在标准错误中。 用法&#xff1a;time [ -p ] Command [ Argument ... ] 举例&#xff1a;想知道 列举home文件夹这一命令 花…...

编程日记 2024/10/30 19:22:27

忻州做网站公司/什么关键词可以搜到那种

今天接到一个任务&#xff0c;根据jar包清单&#xff0c;去maven仓库中下载jar包和pom文件&#xff0c;并且按照仓库里的目录结构保存。 本来用python可以很好的解决这项任务&#xff0c;不过我还没有用过java下载文件&#xff0c;想着学习一下。 整体流程 读jar包清单文件&a…...

编程日记 2024/10/30 19:07:15

单页网站制作/广告推广精准引流

简述Python的五大数据类型的作用、定义方式、使用方法&#xff1a; 数字类型 整型&#xff08;int&#xff09; 作用&#xff1a;表示人的年龄、各种号码、级别 定义方式&#xff1a;int定义&#xff0c;例如&#xff1a;ageint(18) 使用方法&#xff1a;加减乘除、逻辑判断&am…...

编程日记 2024/10/30 18:18:54

WordPress站内搜索代码/视频剪辑培训班一般学费多少

文章目录1、什么是命名空间2、一般有三种命名空间3、命名空间查找顺序4、命名空间的生命周期5、如何获取当前的命名空间总结1、什么是命名空间 命名空间指的是变量存储的位置&#xff0c;每一个变量都需要存储到指定的命名空间当中。 全局命名空间用来保存全局变量&#xff0…...

编程日记 2024/10/30 16:34:04

国外平面设计/优化网站做什么的

BCD码一般在时钟芯片中会采用&#xff0c;比如2019-03-29 15:42:54会表示为 0x20 0x19 0x03 0x29 0x15 0x42 0x54&#xff0c;具体十进制跟BCD码的关系可以百度&#xff1b;BCD转为十进制 int BCDToInt(unsigned char value) {int temp 0;temp (value>>4)*10;temp va…...

编程日记 2024/10/30 15:02:08

网站建设的空间是什么意思/广告商对接平台

Elasticsearch 是一个非常强大的搜索引擎。它目前被广泛地使用于各个IT公司。Elasticsearch 是由 Elastic 公司创建并开源维护的。它的开源代码位于 https://github.com/elastic/elasticsearch。同时&#xff0c;Elastic 公司也拥有 Logstash 及 Kibana 开源项目。这个三个开源…...

编程日记 2024/10/30 14:51:01