【Webgl_glslThreejs】搬运分享shader_飘落心形

来源网站

https://www.shadertoy.com/view/4sccWr

效果预览

在这里插入图片描述

代码演示

将shadertory上的代码转成了threejs可以直接用的代码,引入文件的material,并在创建mesh或已有物体上使用material即可,使用时请注意uv对齐。

import { DoubleSide, ShaderChunk, ShaderMaterial } from "three";
//source: https://www.shadertoy.com/view/4sccWr
// Into You - by Martijn Steinrucken aka BigWings - 2018
// Email:countfrolic@gmail.com Twitter:@The_ArtOfCode
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.// You can change the focal plane by moving the mouse up and down.// A video of the effect can be found here:
// https://www.youtube.com/watch?v=lrMiME82Cuk// Making of video part1:
// https://www.youtube.com/watch?v=dXyPOLf2MbU// Android Phone Wallpaper:
// https://play.google.com/store/apps/details?id=com.TheArtOfCode.FallingHearts// Music - Novo Amor - Anchor
// https://soundcloud.com/mrsuicidesheep/novo-amor-anchorconst vertex = `
${ShaderChunk.logdepthbuf_pars_vertex}
bool isPerspectiveMatrix(mat4) {return true;
}varying vec4 m_pos;
varying vec2 vUv;void main () {vUv = uv;// 从贴图中采样颜色值vec3 newPosition = normal*vec3(0,0,0)+position;gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);${ShaderChunk.logdepthbuf_vertex}
}`;// 片元着色器代码
const fragment = /*glsl*/`
${ShaderChunk.logdepthbuf_pars_fragment}
precision mediump float;
varying vec2 vUv;
uniform float uTime;
uniform float uSpeed;#define S(a, b, t) smoothstep(a, b, t)
#define sat(x) clamp(x, 0., 1.)
#define HEARTCOL vec3(1., .01, .01)
#define NUM_HEARTS 50.
#define LIGHT_DIR vec3(.577, -.577, -.577)// Polynomial smooth max from IQ
float smax( float a, float b, float k ) {float h = sat( .5 + .5*(b-a)/k );return mix( a, b, h ) + k*h*(1.-h);
}
// Quaternion rotation functions from Ollj
vec4 qmulq(vec4 q1, vec4 q2){return vec4(q1.xyz*q2.w+q2.xyz*q1.w+cross(q1.xyz,q2.xyz),(q1.w*q2.w)-dot(q1.xyz,q2.xyz));}
vec4 aa2q(vec3 axis, float angle){return vec4(normalize(axis)*sin(angle*0.5),cos(angle*0.5));}
vec4 qinv(vec4 q){return vec4(-q.xyz,q.w)/dot(q,q);}
vec3 qmulv(vec4 q, vec3 p){return qmulq(q,qmulq(vec4(p,.0),qinv(q))).xyz;}vec2 RaySphere(vec3 rd, vec3 p) {float l = dot(rd, p);float det = l*l - dot(p, p) + 1.;if (det < 0.) return vec2(-1);float sd = sqrt(det);return vec2(l - sd, l+sd);
}struct sphereInfo {vec3 p1, p2, n1, n2;vec2 uv1, uv2;
};sphereInfo GetSphereUvs(vec3 rd, vec2 i, vec2 rot, vec3 s) {sphereInfo res;rot *= 6.2831;vec4 q = aa2q(vec3(cos(rot.x),sin(rot.x),0), rot.y);vec3 o = qmulv(q, -s)+s;vec3 d = qmulv(q, rd);res.p1 = rd*i.x;vec3 p = o+d*i.x-s;res.uv1 = vec2(atan(p.x, p.z), p.y);res.n1 = res.p1-s;res.p2 = rd*i.y;p = o+d*i.y-s;res.uv2 = vec2(atan(p.x, p.z), p.y);res.n2 = s-res.p2;return res;
}float Heart(vec2 uv, float b) {uv.x*=.5;float shape = smax(sqrt(abs(uv.x)), b, .3*b)*.5;uv.y -= shape*(1.-b);return S(b, -b, length(uv)-.5);
}vec4 HeartBall(vec3 rd, vec3 p, vec2 rot, float t, float blur) {vec2 d = RaySphere(rd, p);vec4 col = vec4(0);if(d.x>0.) {sphereInfo info = GetSphereUvs(rd, d, rot, p);float sd = length(cross(p, rd));float edge =  S(1., mix(1., 0.1, blur), sd);float backMask = Heart(info.uv2, blur)*edge; float frontMask = Heart(info.uv1, blur)*edge; float frontLight = sat(dot(LIGHT_DIR, info.n1)*.8+.2);float backLight = sat(dot(LIGHT_DIR, info.n2)*.8+.2)*.9;col = mix(vec4(backLight*HEARTCOL, backMask), vec4(frontLight*HEARTCOL, frontMask), frontMask);}return col;
}void main() {vec2 uv = vUv;uv-=.5;vec2 m =vec2(.5);float t = uTime*.3*uSpeed;vec3 rd = normalize(vec3(uv, 1));// m.y = iMouse.z>0. ? 1.-m.y : .4;vec2 rot = t*vec2(.12, .18);vec4 col = vec4(0);for(float i=0.; i<1.; i+=(1./NUM_HEARTS)) {float x = (fract(cos(i*536.3)*7464.4)-.5)*15.;float y = (fract(-t*.2+i*7.64)-.5)*15.;float z = mix(14., 2., i);float blur = mix(.03, .35, S(.0, .4, abs(m.y-i)));rot += (fract(sin(i*vec2(536.3, 23.4))*vec2(764.4, 987.3))-.5);vec4 heart = HeartBall(rd, vec3(x, y, z), rot, t, blur);col = mix(col, heart, heart.a);}gl_FragColor = vec4(col);${ShaderChunk.logdepthbuf_fragment}
}`;const uniforms = {uTime: { value: 1.0 },
};
const CircleGridShaderMaterial = new ShaderMaterial({uniforms: {uTime: { value: 1.0 },uSpeed: { value: 1.0, max: 20, min: 0.1 }},vertexShader: vertex,fragmentShader: fragment,side: DoubleSide,transparent: true,
});const loop = () => {requestAnimationFrame(loop)CircleGridShaderMaterial.uniforms.uTime.value += .001
}
loop()
setInterval(() => {// CircleGridShaderMaterial.uniforms.uTime.value += .0001
}, 5000);
export default CircleGridShaderMaterial

页面展示

flowHeart

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习从入门到精通—Transformer

1.绪论介绍 1.1 传统的RNN网络 传统的RNN&#xff08;递归神经网络&#xff09;主要存在以下几个问题&#xff1a; 梯度消失和梯度爆炸&#xff1a;这是RNN最主要的问题。由于序列的长距离依赖&#xff0c;当错误通过层传播时&#xff0c;梯度可以变得非常小&#xff08;消失…

(MSFT.O)微软2024财年Q3营收619亿美元

在科技的浩渺宇宙中&#xff0c;一颗璀璨星辰再度闪耀其光芒——(MSFT.O)微软公司于2024财政年度第三季展现出惊人的财务表现&#xff0c;实现总营业收入达到令人咋舌的6190亿美元。这一辉煌成就不仅突显了微软作为全球技术领导者之一的地位&#xff0c;更引发了业界内外对这家…

第十五届蓝桥杯题解-数字接龙

题意&#xff1a;经过所有格子&#xff0c;并且不能进行交叉&#xff0c;走的下一个格子必须是当前格子值1%k&#xff0c;输出路径最小的那一条&#xff08;有8个方向&#xff0c;一会粘图&#xff09; 思路&#xff1a;按照8个方向设置偏移量进行dfs&#xff0c;第一个到达终…

C/C++ 入门(7)string类(STL)

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 请多多指教&#xff01; 目录 一、标准库中的string 1、了解 2、string类常用接口说明 1、常见的构造函数 2、容量操作 ​编辑 3、访问及遍历操作 4、修改操作 5、非成员函数 二、string类实现 …

LeetCode57. 插入区间

LeetCode57.插入区间 题目思路: 代码 /* 前置知识&#xff1a; vector<vector<int>> a,b; 二维vector数组是可以将二维中的一维vector数组给push_back的&#xff0c; 不是只有单个元素才可以&#xff0c;整个一维的vector数组也可以 b[0] {1,2,3},b[1] {4,5,6}…

【AIGC调研系列】大型语言模型如何减少幻觉生成

在解读大型语言模型&#xff08;LLMs&#xff09;中的长格式事实性问题时&#xff0c;我们首先需要认识到这些模型在生成内容时可能会产生与既定事实不一致的情况&#xff0c;这种情况通常被称为“幻觉”[2][3]。这种现象不仅可能导致信息的误传&#xff0c;还可能对社会造成误…

封装 H.264 视频为 FLV 格式然后推流

封装 H.264 视频为 FLV 格式并通过 RTMP 推流 flyfish 协议 RTMP (Real-Time Messaging Protocol) RTSP (Real Time Streaming Protocol) SRT (Secure Reliable Transport) WebRTC RTMP&#xff08;Real Time Messaging Protocol&#xff09;是一种用于实时音视频流传输的协…

indexDB 大图缓存

背景 最近在项目中遇到了一个问题&#xff1a;由于大屏背景图加载速度过慢&#xff0c;导致页面黑屏时间过长&#xff0c;影响了用户的体验。从下图可以看出加载耗时将近一分钟 IndexDB 主要的想法就是利用indexDB去做缓存&#xff0c;优化加载速度&#xff1b;在这之前&am…

C语言——内存函数的实现与模拟

1. memcpy 函数 与strcpy 函数类似 1.头文件 <string.h> 2.基本格式 • 函数memcpy从source的位置开始向后复制num个 字节 的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0…

C# WinForm —— 10 单选按钮与复选框的介绍与使用

单选按钮 RadioButton 一组单选按钮中&#xff0c;只能选择一个&#xff0c;互相排斥 常用属性、事件&#xff1a; 属性用途(Name)单选按钮的ID&#xff0c;在代码里引用的时候会用到,一般以 rb开头Text单选按钮旁边显示的 文本信息Checked单选按钮的勾选状态Appearance控制单…

SpringCloud系列(18)--将服务提供者Provider注册进Consul

前言&#xff1a;在上一章节中我们把服务消费者Consumer注册进了Zookeeper&#xff0c;并且成功通过服务消费者Consumer调用了服务提供者Provider&#xff0c;而本章节则是关于如何将服务提供者Provider注册进Consul里 准备环境&#xff1a; 先安装Consul&#xff0c;如果没有…

【OceanBase诊断调优】—— 4013 内存爆问题的排查

本文介绍 4013 内存爆问题的排查。 内存爆的类型 内存爆主要分为五类&#xff0c;可以通过关键词 OOPS 确定内存爆的类型。 内存爆的类型日志信息&#xff08;关键字为 [OOPS]&#xff09;SINGLE_ALLOC_SIZE_OVERFLOWsingle alloc size large than 4G is not allowed(alloc_…

vue项目使用百度地图

打开百度地图开放平台 百度地图开放平台 | 百度地图API SDK | 地图开发 在控制台新建应用 复制访问应用的ak 可修改地图样式 使用部分 <!-- 引入地图 --><div class"main-aside"><div id"b-map-container"></div></div> …

案例-部门管理-删除

黑马程序员JavaWeb开发教程 文章目录 一、查看页面原型二、查看接口文档三、开发1、Controller2、Service&#xff08;1&#xff09;service接口层&#xff08;3&#xff09;service实现层 3、Mapper4、Postman 一、查看页面原型 二、查看接口文档 三、开发 1、Controller 因…

SpringWebFlux RequestBody多出双引号问题——ProxyPin抓包揪出真凶

缘起 公司有个服务做埋点收集的&#xff0c;可以参考我之前的文章埋点日志最终解决方案&#xff0c;今天突然发现有些数据日志可以输出&#xff0c;但是没法入库。 多出的双引号 查看Flink日志发现了JSON解析失败&#xff0c;Flink是从Kafka拿数据&#xff0c;Kafka本身不处…

Magnet for Mac:高效窗口管理工具

Magnet for Mac是一款专为Mac用户设计的窗口管理工具&#xff0c;旨在帮助用户更高效地管理和布局多个应用程序窗口&#xff0c;提升工作效率。 Magnet for Mac v2.14.0中文免激活版下载 这款软件拥有直观易用的界面和丰富的功能&#xff0c;支持用户将屏幕分割成多个区域&…

【漏洞分析】浅析android手游lua脚本的加密与解密(一)

主要用到的工具和环境&#xff1a; 1 win7系统一枚 2 quick-cocos2d-x的开发环境&#xff08;弄一个开发环境方便学习&#xff0c;而且大部分lua手游都是用的cocos2d-x框架&#xff0c;还有一个好处&#xff0c;可以查看源码关键函数中的特征字符串&#xff0c;然后在IDA定位到…

Electron中使用Prisma(以SQLite为例)

1、安装 Prisma 打开终端&#xff0c;执行以下命令安装 Prisma CLI&#xff1a; npm install prisma -g 2、初始化 Prisma 项目 在工作目录中执行以下命令来初始化一个新的 Prisma 项目&#xff1a; prisma init 这将创建一个新的文件夹&#xff0c;包含了必要的文件和目…

vue echarts折线图 折线堆积图和折线面积图

vue echarts折线图 折线堆积图和折线面积图 1、折线堆积图和折线面积图的结合&#xff1b; 上代码 <template><section><divid"performaceLineChart"ref"performaceLineChartRef"style"width: 100%; height: 500px"></d…

文旅IP孵化打造抖音宣传推广运营策划方案

【干货资料持续更新&#xff0c;以防走丢】 文旅IP孵化打造抖音宣传推广运营策划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 文旅IP抖音运营方案 1. 项目背景与目标 - 背景&#xff1a…