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

使用 Three.js 实现流光特效

大家好!我是 [数擎AI],一位热爱探索新技术的前端开发者,在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步!
开发领域:前端开发 | AI 应用 | Web3D | 元宇宙
技术栈:JavaScript、React、ThreeJs、WebGL、Go
经验经验:6 年+ 前端开发经验,专注于图形渲染和 AI 技术
开源项目:AI简历、元宇宙、数字孪生

源码地址: https://github.com/dezhizhang/shadertoy
演示地址: https://shader.shuqin.cc/xx3fdh

在本文中,我们将深入探讨如何使用 Three.js 和 GLSL(OpenGL Shading Language)编写一个火焰效果的着色器。通过这个教程,你将学习如何创建动态的火焰效果,以及如何将它应用到 3D 渲染中。

着色器简介

着色器是图形渲染管线中的一个重要组成部分,负责处理图形渲染过程中每个像素的颜色计算。通常,着色器分为两个主要部分:

  • 顶点着色器(Vertex Shader):用于处理每个顶点的位置和属性。
  • 片段着色器(Fragment Shader):用于计算每个像素的颜色和纹理。

在这个示例中,我们将重点关注如何编写片段着色器来模拟火焰的视觉效果。

火焰着色器的结构

我们的火焰着色器由以下几个部分组成:

  1. Uniforms:这部分包含了着色器所需的外部变量,如时间、分辨率等。
  2. 顶点着色器:负责传递 UV 坐标给片段着色器。
  3. 片段着色器:执行火焰效果的核心计算,包括噪声生成、分形布朗运动(FBM)等。

以下是整个着色器的代码实现:

const flameShader = {uniforms: {time: { value: 0 },resolution: { value: new THREE.Vector2() }},vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `precision highp float;#define NUM_OCTAVES 5varying vec2 vUv;uniform float time;uniform vec2 resolution;// 生成随机数float rand(vec2 n) {return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);}// 生成噪声float noise(vec2 p) {vec2 ip = floor(p);vec2 u = fract(p);u = u * u * (3.0 - 2.0 * u);float res = mix(mix(rand(ip), rand(ip + vec2(1.0, 0.0)), u.x),mix(rand(ip + vec2(0.0, 1.0)), rand(ip + vec2(1.0, 1.0)), u.x),u.y);return res * res;}// 分形布朗运动float fbm(vec2 x) {float v = 0.0;float a = 0.5;vec2 shift = vec2(100);mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));for (int i = 0; i < NUM_OCTAVES; ++i) {v += a * noise(x);x = rot * x * 2.0 + shift;a *= 0.5;}return v;}void main() {vec2 shake = vec2(sin(time * 1.5) * 0.01, cos(time * 2.7) * 0.01);vec2 fragCoord = vUv * resolution;vec2 p = ((fragCoord + shake * resolution) - resolution * 0.5) / resolution.y;p *= mat2(8.0, -6.0, 6.0, 8.0);vec2 v;vec4 o = vec4(0.0);float f = 3.0 + fbm(p + vec2(time * 7.0, 0.0));for (float i = 0.0; i < 50.0; i++) {v = p + cos(i * i + (time + p.x * 0.1) * 0.03 + i * vec2(11.0, 9.0)) * 5.0+ vec2(sin(time * 4.0 + i) * 0.005, cos(time * 4.5 - i) * 0.005);float tailNoise = fbm(v + vec2(time, i)) * (1.0 - (i / 50.0));vec4 currentContribution = (cos(sin(i) * vec4(1.0, 2.0, 3.0, 1.0)) + 1.0)* exp(sin(i * i + time)) / length(max(v, vec2(v.x * f * 0.02, v.y)));float thinnessFactor = smoothstep(0.0, 1.0, i / 50.0);o += currentContribution * (1.0 + tailNoise * 2.0) * thinnessFactor;}o = tanh(pow(o / 1e2, vec4(1.5)));gl_FragColor = o;}`
};

着色器解析

1. 顶点着色器

顶点着色器的任务非常简单,它将 UV 坐标传递给片段着色器,并根据模型视图矩阵和投影矩阵计算每个顶点的位置。

void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

2. 片段着色器

随机数生成与噪声:我们通过 rand 函数生成一个伪随机数,结合 noise 函数生成了基础的噪声,用于创建火焰的动态效果。

分形布朗运动(FBM):使用多个频率和振幅的噪声叠加,生成复杂的纹理和动态效果,这使得火焰的效果更加自然。

动态效果:通过 time 控制火焰的变化,使用不同的参数让火焰不断变化,模拟出自然的火焰流动。

3. 渲染火焰效果

通过循环并叠加每一层的噪声和贡献,我们可以模拟火焰的扩散和衰退。使用 exp 和 tanh 函数对输出进行平滑处理,使得最终的火焰效果看起来更加柔和自然。

如何使用该着色器

  • 创建一个材质: 使用 THREE.ShaderMaterial 创建一个自定义材质,将上述着色器代码传递给它。

  • 设置 time 和 resolution: time 是一个动态变化的值,用来驱动火焰的动画效果。resolution 则表示画布的尺寸,影响渲染的比例。

  • 应用到对象上: 创建一个平面或其他几何体,并将自定义的火焰材质应用到该几何体上。

const material = new THREE.ShaderMaterial({uniforms: flameShader.uniforms,vertexShader: flameShader.vertexShader,fragmentShader: flameShader.fragmentShader
});

完整代码

import * as THREE from 'three';// 使用示例
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const scene = new THREE.Scene();const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);const flameShader = {uniforms: {time: { value: 0 },resolution: { value: new THREE.Vector2() }},vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `precision highp float;#define NUM_OCTAVES 5varying vec2 vUv;uniform float time;uniform vec2 resolution;float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);}float noise(vec2 p) {vec2 ip = floor(p);vec2 u = fract(p);u = u*u*(3.0-2.0*u);float res = mix(mix(rand(ip), rand(ip+vec2(1.0,0.0)), u.x),mix(rand(ip+vec2(0.0,1.0)), rand(ip+vec2(1.0,1.0)), u.x), u.y);return res*res;}float fbm(vec2 x) {float v = 0.0;float a = 0.5;vec2 shift = vec2(100);mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));for (int i = 0; i < NUM_OCTAVES; ++i) {v += a * noise(x);x = rot * x * 2.0 + shift;a *= 0.5;}return v;}void main() {vec2 shake = vec2(sin(time * 1.5) * 0.01, cos(time * 2.7) * 0.01);vec2 fragCoord = vUv * resolution;vec2 p = ((fragCoord + shake * resolution) - resolution * 0.5) / resolution.y;p *= mat2(8.0, -6.0, 6.0, 8.0);vec2 v;vec4 o = vec4(0.0);float f = 3.0 + fbm(p + vec2(time * 7.0, 0.0));for(float i = 0.0; i < 50.0; i++) {v = p + cos(i*i + (time + p.x*0.1)*0.03 + i*vec2(11.0,9.0)) *5.0 + vec2(sin(time*4.0 + i)*0.005, cos(time*4.5 - i)*0.005);float tailNoise = fbm(v + vec2(time, i)) * (1.0 - (i/50.0));vec4 currentContribution = (cos(sin(i)*vec4(1.0,2.0,3.0,1.0)) +1.0) * exp(sin(i*i + time)) / length(max(v, vec2(v.x*f*0.02, v.y)));float thinnessFactor = smoothstep(0.0, 1.0, i/50.0);o += currentContribution * (1.0 + tailNoise*2.0) * thinnessFactor;}o = tanh(pow(o/1e2, vec4(1.5)));gl_FragColor = o;}`
};const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2),new THREE.ShaderMaterial({...flameShader,blending: THREE.AdditiveBlending,transparent: true})
);scene.add(mesh);function animate() {mesh.material.uniforms.time.value = performance.now() / 1000;mesh.material.uniforms.resolution.value.set(window.innerWidth, window.innerHeight);requestAnimationFrame(animate);renderer.render(scene, camera);
}animate();

总结

通过本文的介绍,你可以了解如何使用 Three.js 和 GLSL 创建一个动态的火焰效果。这个效果是基于噪声和分形布朗运动的,模拟了自然界火焰的动态变化。你可以根据自己的需要调整参数,进一步优化火焰效果。

如果你也对shader和AI感兴趣,欢迎关注我们公众号数擎Ai

相关文章:

使用 Three.js 实现流光特效

大家好&#xff01;我是 [数擎AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | AI…...

Error [ERR_REQUIRE_ESM]: require() of ES Module

报错信息&#xff1a; 【报错】Message.js 导入方式不对&#xff0c;用的是 ES Moudle 的语法&#xff0c;提示使用 import 引入文件 项目开发没有用到 js-message 依赖&#xff0c;是 node-ipc 依赖中用到的 js-message 依赖&#xff0c; node-ipc 中限制 js-message 版本&a…...

沉浸式翻译插件深度评测:打破语言壁垒的黑科技利器

在信息爆炸的时代,语言障碍成为了许多人获取信息的一大难题。尤其是在浏览外文网站、观看外语视频或阅读外文文档时,语言不通往往会让人倍感困扰。然而,一款名为沉浸式翻译的黑科技插件,却以其强大的翻译能力和便捷的使用体验,成为了众多用户打破语言壁垒的首选工具。本文…...

Java 中 HTTP 协议版本使用情况剖析

Java 中 HTTP 协议版本使用情况剖析 一、HTTP/1.1 与 HTTP/2 概述 (一)HTTP/1.1 HTTP/1.1 是广泛应用且成熟的 HTTP 协议版本,它在互联网发展历程中扮演了重要角色。其特点主要包括: 连接方式:默认采用短连接,即每次请求都要建立新的 TCP 连接,请求完成后断开。不过也…...

蓝桥杯学习大纲

&#xff08;致酷德与热爱算法、编程的小伙伴们&#xff09; 在查阅了相当多的资料后&#xff0c;发现没有那篇博客、文章很符合我们备战蓝桥杯的学习路径。所以&#xff0c;干脆自己整理一篇&#xff0c;欢迎大家补充&#xff01; 一、题型分布&#xff1a; 题型分布为填空…...

VSCode ssh远程连接内网服务器(不能上网的内网环境的Linux服务器)的终极解决方案

VSCode ssh远程连接内网服务器&#xff08;不能上网的内网环境的Linux服务器&#xff09; 离线下载vscode-server并安装: 如果远程端不能联网可以下载包离线安装,下载 vscode-server 的 url 需要和 vscode 客户端版本的 commit-id 对应.通过 vscode 面板的帮助->关于可以获…...

【多模态处理篇五】【DeepSeek文档解析:PDF/Word智能处理引擎】

你知道吗?全球每天产生的PDF文档超过10亿份,但90%的上班族还在用复制粘贴的笨办法处理文档!DeepSeek文档解析引擎就像给你的电脑装上了"文档翻译官",能把PDF/Word里的文字、表格、公式甚至排版样式都变成AI能理解的"语言"。举个真实场景:法务小姐姐用…...

STM32-心知天气项目

一、项目需求 使用 ESP8266 通过 HTTP 获取天气数据&#xff08;心知天气&#xff09;&#xff0c;并显示在 OLED 屏幕上。 按键 1 &#xff1a;循环切换今天 / 明天 / 后天天气数据&#xff1b; 按键 2 &#xff1a;更新天气。 二、项目框图 三、cjson作用 https://gi…...

cs106x-lecture14(Autumn 2017)-SPL实现

打卡cs106x(Autumn 2017)-lecture14 (以下皆使用SPL实现&#xff0c;非STL库&#xff0c;后续课程结束会使用STL实现) 1、min Write a function named min that accepts a pointer to a ListNode representing the front of a linked list. Your function should return the …...

基于STM32的智能家居语音系统(单片机毕设)

前言 源代码下载链接&#xff1a; https://download.csdn.net/download/m0_74712453/90071680 需要实物的可以私信博主或者在文章最下方添加好友。 目录 一、项目介绍和演示视频 二、硬件实现 1. 材料材料 2. 原理图和PCB 三、软件实现 1. 代码解析 1.1 main函数 1.2…...

ASP.NET Core 简单文件上传

使用异步 JavaScript 和 XML&#xff08;AJAX&#xff09;进行简单的文件上传&#xff1b;用 C# 编写的服务器端代码。 使用AJAX和ASP.NET Core MVC上传文件再简单不过了。这不依赖于jQuery。此代码允许上传多个文件&#xff0c;并与 .NET Core 3.1、.NET 6和.NET 8兼容。 如果…...

2502C++,C++继承的多态性

构 A{单 向量<串>记;元<类 T>静 空 ff(串&a){清理(记);名向量(a,记);串 b{"---ff---"};打印(b);T::g();} };构 B:公 A{元<类 T>静 空 f(){串 a{"错误.txt"};ff<T>(a);} };构 C:公 A{元<类 T>静 空 f(){串 a{"a12.c…...

【机器学习】13.十大算法之一K均值算法(K-means)聚类详细讲解

【机器学习】13.十大算法之一K均值算法&#xff08;K-means&#xff09;聚类详细讲解 一摘要二个人简介三K-均值聚类&#xff08;K-means&#xff09;3.1-K均值算法的基本原理3.1.1- 聚类分析的目标3.1.2- K - means算法算法原理 四K-means聚类算法的收敛性五证明K均值算法的收…...

Spring扩展点之Mybatis整合模拟

Spring扩展点之Mybatis整合 单独使用MyBaitis模拟整合MyBatis到Spring 单独使用MyBaitis 通过配置文件生成sqlSessionFactory&#xff0c;用sqlSessionFactory开启session。通过session获取到mapper执行对应的sql。 InputStream inputStream Resources.getResourceAsStream(…...

.NET MVC实现电影票管理

.NET MVC&#xff08;Model-View-Controller&#xff09;是微软推出的基于 Model-View-Controller 设计模式的 Web 应用框架&#xff0c;属于 ASP.NET Core 的重要组成部分。其核心目标是通过清晰的分层架构实现 高内聚、低耦合 的开发模式&#xff0c;适用于构建可扩展的企业级…...

自媒体账号管理工具:创作罐头使用指南

创作罐头使用指南 1. 关于创作罐头 创作罐头是免费的一站式自媒体运营工具&#xff0c;支持各大自媒体平台多账号管理、全网爆文库、原创检测、视频一键分发、团队管理、各平台数据分析等功能。 2. 安装与注册 2.1. 如何安装创作罐头 从我们的官网下载并安装软件 www.czgts.…...

基于数据可视化+SpringBoot+安卓端的数字化OA公司管理平台设计和实现

博主介绍&#xff1a;硕士研究生&#xff0c;专注于信息化技术领域开发与管理&#xff0c;会使用java、标准c/c等开发语言&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架…...

VSCode离线安装插件

最近在其他电脑设备上部署vscode环境出现问题&#xff0c;在vscode里直接安装插件失败&#xff0c;软件提示如下&#xff1a;&#xff08;此前已经用此方法安装过中文插件&#xff09; 这里我们选择手动下载&#xff0c;会自动在浏览器中跳转到该插件的下载链接并自动下载插件&…...

基于Hadoop的汽车大数据分析系统设计与实现【爬虫、数据预处理、MapReduce、echarts、Flask】

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍爬虫数据概览HIve表设计Cars Database Tables 1. cars_data2. annual_sales_volume3. brand_sales_volume4. city_sales_volume5. sales_volume_by_year_and_brand6. sales_distri…...

SHELL32!Shell_MergeMenus函数分析

SHELL32!Shell_MergeMenus函数分析 UINT Shell_MergeMenus( [in] HMENU hmDst, [in] HMENU hmSrc, UINT uInsert, UINT uIDAdjust, UINT uIDAdjustMax, ULONG uFlags ); 参数 [in] hmDst 类型&#xff1a; HMENU 要向其添加 hmSrc…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...