Three.js 闪电效果
闪电shader
const shader = new THREE.ShaderMaterial({uniforms: {iTime: this.iTime,color: { value: new THREE.Color("#D2F8FE") },},vertexShader: /* glsl */ `varying vec2 vUv;varying float normalizeY;void main() {// vUv = (uv * 2. - 2.) * vec2(0.3,2.);vUv = (uv * 2. - 1.) * vec2(1.,1.);normalizeY = uv.y;vec3 transformed = position ;gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);}`,fragmentShader: /* glsl */ `varying vec2 vUv;uniform float iTime;uniform vec3 color;varying float normalizeY;// ${fbm}${perlinFbm}void main() {vec3 finalColor = vec3( 0.0 );for( int i=1; i < 4; ++i ){float t = abs( 1.0 / ( ( vUv.x + fbm2( vUv + iTime / float( i ) ,5) ) * 75. ) );// float t = abs( 1.0 / ( ( vUv.x + fbm( vUv + iTime / float( i ) ) ) * 75. ) );finalColor += t * vec3( float( i ) * 0.1 + 0.1, 0.5, 2.0 );}finalColor = pow( finalColor, vec3( 1.4 ) );vec3 color = vec3( finalColor ) * color;float fade = smoothstep( 0.0, 0.2, ( 1.0 - normalizeY ) * 1. );float timeLine = fract( iTime - 0.1 ) * 2. ;float process = 1.0 - min( timeLine * 3. , 1.);float a = step( process , normalizeY ) * fade;// float a = step( process , normalizeY ) ;if( timeLine > 1.3){a = step( normalizeY , 1.0 - min( (timeLine / 2. - 0.65) * 4. , 1.) );}gl_FragColor = vec4( color, finalColor.r * a );// gl_FragColor = vec4(vec3(fade), 1.);// gl_FragColor = vec4(vec3(color), 1);// if(finalColor.r * a < 0.1){// discard;// }}`,transparent: true,});const perlinFbm = `float hash21(vec2 x) {return fract(cos(mod(dot(x, vec2(13.9898, 8.141)), 3.14)) * 43758.5453);}vec2 hash22(vec2 uv) {uv = vec2(dot(uv, vec2(127.1,311.7)),dot(uv, vec2(269.5,183.3)));return 2.0 * fract(sin(uv) * 43758.5453123) - 1.0;}float perlinNoise(vec2 uv){vec2 iuv = floor(uv);vec2 fuv = fract(uv);vec2 blur = smoothstep(.0, 1., fuv);vec2 bl = vec2(.0, .0);vec2 br = vec2(1., .0);vec2 tl = vec2(.0, 1.);vec2 tr = vec2(1., 1.);vec2 bln = hash22(iuv + bl);vec2 brn = hash22(iuv + br);vec2 tln = hash22(iuv + tl);vec2 trn = hash22(iuv + tr);float b = mix(dot(bln, fuv - bl), dot(brn, fuv - br), blur.x);float t = mix(dot(tln, fuv - tl), dot(trn, fuv - tr), blur.x);float c = mix(b, t, blur.y);return (c);}float fbm2(vec2 uv, int octaves){float value = .0;float ampitude = .5;float freq = 2. ;for(int i = 0; i < octaves; i++){ value += perlinNoise(uv) * ampitude;uv *= freq;ampitude *= .5;}return value;}
`;
相关文章：
Three.js 闪电效果
闪电shader const shader new THREE.ShaderMaterial({uniforms: {iTime: this.iTime,color: { value: new THREE.Color("#D2F8FE") },},vertexShader: /* glsl */ varying vec2 vUv;varying float normalizeY;void main() {// vUv (uv * 2. - 2.) * vec2(0.3,2.);…...
高效序列化工具（1）-----Protobuf
目录 1.Protobuf Protobuf 的特点 工作原理 Protobuf 与 JSON、XML 的对比 2.protobuf语法 1.数据类型 2.消息 3.枚举 4.嵌套消息 5.重复字段 6.默认值 7.其他类型 1.oneof类型 2.any类型 8.文件组织 3.protobuf命令 1.常见命令 选项： 1. --proto_…...
湛江市社保卡申领指南：手机获取电子照片回执单号
在湛江市，社保卡的申领流程已经实现了数字化，为市民带来了极大的便利。特别是通过手机获取数码照片回执单号，这一环节更是简化了申领过程。今天，我们将详细介绍如何不去照相馆，利用手机来获取数码照片回执单号…...
)
HTML5实现剪刀石头布小游戏(附源码)
文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板，程序开发，在线开发，在线沟通 作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…...
TypeScript之常见类型
常见类型（Everyday Types） 本章我们会讲解 JavaScript 中最常见的一些类型，以及对应的描述方式。注意本章内容并不详尽，后续的章节会讲解更多命名和使用类型的方式。 类型可以出现在很多地方，不仅仅是在类型注解 (type annotations)中。我们不仅要学习类型本身，也要学习…...
MacOS java多版本安装与管理-sdkman
安装sdkman curl -s "https://get.sdkman.io" | bashsource "$HOME/.sdkman/bin/sdkman-init.sh"sdk version正常出现sdkman版本号就安装成功了 # 安装java # 安装java8 sdk install java 8.0.412.fx-zulu建议和上述一样安装 fx-zulu 的jdk，…...
NLP论文速读（多伦多大学）|利用人类偏好校准来调整机器翻译的元指标
论文速读|MetaMetrics-MT: Tuning Meta-Metrics for Machine Translation via Human Preference Calibration 论文信息： 简介： 本文的背景是机器翻译（MT）任务的评估。在机器翻译领域，由于不同场景和语言对的需求差异&a…...
20241121 android中树结构列表（使用recyclerView实现）
1、adapter-item的布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"wrap_content&…...
达索系统亮相第三十一届中国汽车工程学会年会暨展览会
伴随着改革开放以及中国入世WTO，三十多年来，中国汽车产销已经成为世界最大的单一市场而独占鳌头。近十年来，另辟蹊径的中国汽车产业人在新能源汽车赛道上引领了一波又一波令全球惊艳的创新成就，成为最为靓丽的新出口三大件的头牌。…...
Python网络爬虫实践案例：爬取猫眼电影Top100
以下是一个Python网络爬虫的实践案例，该案例将演示如何使用Python爬取猫眼电影Top100的电影名称、主演和上映时间等信息，并将这些信息保存到TXT文件中。此案例使用了requests库来发送HTTP请求，使用re库进行正则表达式匹配，并包含详…...
ROSSERIAL与Arduino IDE交叉开发（UBUNTU环境，包含ESP32、arduino nano）
ROSSERIAL与Arduino IDE交叉开发 一、简介二、安装1、Ubuntu下的Arduino IDE安装 **针对ESP32报错问题原因溯源和修改**三、运行结点 一、简介 这个教程展示在ubuntu环境下如何利用Arduino IDE配合rosserial开发机器人部件。通过Arduino IDErosserial实现arduino/esp32开发板通…...
爬虫开发工具与环境搭建——使用Postman和浏览器开发者工具
第三节：使用Postman和浏览器开发者工具 在网络爬虫开发过程中，我们经常需要对HTTP请求进行测试、分析和调试。Postman和浏览器开发者工具（特别是Network面板和Console面板）是两种最常用的工具，能够帮助开发者有效地捕…...
ceph 18.2.4二次开发，docker镜像制作
编译环境要求 #需要ubuntu 22.04版本 参考https://docs.ceph.com/en/reef/start/os-recommendations/ #磁盘空间最好大于200GB #内存如果小于100GB 会有OOM的情况发生,需要重跑 目前遇到内存占用最高为92GB替换阿里云ubuntu 22.04源 将下面内容写入/etc/apt/sources.list 文件…...
游戏引擎学习第19天
介绍 这段内容描述了开发者在进行游戏开发时，对于音频同步和平台层的理解和调整的过程。以下是更详细的复述： 开发者表达了他希望今天继续进行的工作内容。他提到，昨天他讲解了一些关于音频的内容，今天他想稍微深入讲解一下他正…...
简单实现vue2响应式原理
vue2 在实现响应式时，是根据 object.defineProperty() 这个实现的，vue3 是通过 Proxy 对象实现，但是实现思路是差不多的，响应式其实就是让 函数和数据产生关联，在我们对数据进行修改的时候，可以执行相关的副…...
TypeScript 中扩展现有模块的用法
declare module 是 TypeScript 中用于扩展现有模块的特性。它允许开发者在已有模块的基础上，添加新的功能（比如扩展接口、添加类型声明等）。通过 declare module，可以将额外的声明合并到原模块中。以下是用法详解： 用…...