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

18.three官方示例+编辑器+AI快速学习webgl_buffergeometry_points_interleaved

本实例主要讲解内容

这个Three.js示例展示了如何使用BufferGeometryPoints对象创建高效的粒子系统。通过共享内存缓冲区和交错存储顶点数据,实现了50万个粒子的流畅渲染,并为每个粒子设置基于位置的颜色。

核心技术包括:

  • 使用ArrayBuffer高效存储粒子数据
  • 交错缓冲区(InterleavedBuffer)的应用
  • 顶点颜色的动态计算
  • 大规模粒子系统的性能优化
    在这里插入图片描述

完整代码注释

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - buffergeometry - particles</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"></head><body><div id="container"></div><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - particles</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';let container, stats;let camera, scene, renderer;let points;init();function init() {container = document.getElementById( 'container' );// 初始化相机camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );camera.position.z = 2750;// 初始化场景scene = new THREE.Scene();scene.background = new THREE.Color( 0x050505 ); // 设置背景颜色scene.fog = new THREE.Fog( 0x050505, 2000, 3500 ); // 添加雾效果// 粒子数量const particles = 500000;// 创建BufferGeometryconst geometry = new THREE.BufferGeometry();// 创建一个共享的ArrayBuffer存储所有粒子数据// 每个粒子占用16字节(3个浮点数位置 + 1个RGBA颜色)const arrayBuffer = new ArrayBuffer( particles * 16 );// 创建不同视图的TypedArray共享同一个ArrayBuffer// Float32Array用于位置数据(每4字节一个值)// Uint8Array用于颜色数据(每1字节一个值)const interleavedFloat32Buffer = new Float32Array( arrayBuffer );const interleavedUint8Buffer = new Uint8Array( arrayBuffer );// 临时颜色对象const color = new THREE.Color();// 粒子分布范围const n = 1000, n2 = n / 2;// 填充粒子数据for ( let i = 0; i < interleavedFloat32Buffer.length; i += 4 ) {// 位置数据(前12字节,3个Float32值)const x = Math.random() * n - n2;const y = Math.random() * n - n2;const z = Math.random() * n - n2;interleavedFloat32Buffer[ i + 0 ] = x;interleavedFloat32Buffer[ i + 1 ] = y;interleavedFloat32Buffer[ i + 2 ] = z;// 颜色数据(后4字节,4个Uint8值,RGBA)// 基于位置计算颜色const vx = ( x / n ) + 0.5;const vy = ( y / n ) + 0.5;const vz = ( z / n ) + 0.5;// 设置颜色并转换到sRGB空间color.setRGB( vx, vy, vz, THREE.SRGBColorSpace );// 计算颜色数据在Uint8Array中的偏移量// i+3是因为每个粒子的位置数据占3个Float32,颜色从第4个开始// 乘以4是因为每个Float32占4个Uint8const j = ( i + 3 ) * 4;// 存储颜色数据interleavedUint8Buffer[ j + 0 ] = color.r * 255;interleavedUint8Buffer[ j + 1 ] = color.g * 255;interleavedUint8Buffer[ j + 2 ] = color.b * 255;interleavedUint8Buffer[ j + 3 ] = 0; // 透明度,这里不需要}// 创建交错缓冲区// 一个用于位置数据(每4个Float32为一组)// 一个用于颜色数据(每16个Uint8为一组)const interleavedBuffer32 = new THREE.InterleavedBuffer( interleavedFloat32Buffer, 4 );const interleavedBuffer8 = new THREE.InterleavedBuffer( interleavedUint8Buffer, 16 );// 设置几何体属性// position属性:从偏移量0开始,每4个Float32取前3个作为位置// color属性:从偏移量12开始(即位置数据之后),每16个Uint8取前3个作为颜色geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );// 创建粒子材质const material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );// 创建粒子系统points = new THREE.Points( geometry, material );scene.add( points );// 初始化渲染器renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );container.appendChild( renderer.domElement );// 添加性能统计stats = new Stats();container.appendChild( stats.dom );// 窗口大小变化事件监听window.addEventListener( 'resize', onWindowResize );}// 窗口大小变化处理函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}// 动画循环function animate() {const time = Date.now() * 0.001;// 旋转粒子系统points.rotation.x = time * 0.25;points.rotation.y = time * 0.5;// 渲染场景renderer.render( scene, camera );// 更新性能统计stats.update();}</script></body>
</html>

交错缓冲区与粒子系统技术解析

交错缓冲区(InterleavedBuffer)原理

交错缓冲区是一种优化的顶点数据存储方式,它将不同类型的顶点属性(如位置、颜色、法线等)存储在同一个缓冲区中,而不是为每个属性单独创建缓冲区。这种方式有以下优势:

  1. 内存访问效率更高:GPU可以更高效地访问连续存储的数据
  2. 减少内存碎片:降低内存碎片化程度
  3. 优化缓存利用:提高缓存命中率

在本示例中,我们使用交错缓冲区存储粒子数据:

// 创建一个共享的ArrayBuffer,每个粒子占用16字节
const arrayBuffer = new ArrayBuffer( particles * 16 );// 创建不同类型的视图
const interleavedFloat32Buffer = new Float32Array( arrayBuffer );
const interleavedUint8Buffer = new Uint8Array( arrayBuffer );// 设置几何体属性
geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );
高效粒子系统实现

本示例展示了如何高效实现大规模粒子系统:

  1. 使用BufferGeometry:相比普通Geometry,BufferGeometry性能更高
  2. 共享内存缓冲区:使用单个ArrayBuffer存储所有粒子数据
  3. 交错存储数据:位置和颜色数据交错存储
  4. 使用Points对象:专门用于渲染大量点的对象

关键代码:

// 创建粒子材质
const material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );// 创建粒子系统
points = new THREE.Points( geometry, material );
scene.add( points );
顶点颜色计算

顶点颜色允许为每个粒子指定不同的颜色,通过基于位置计算颜色,我们可以创建出渐变效果:

// 基于位置计算颜色
const vx = ( x / n ) + 0.5;
const vy = ( y / n ) + 0.5;
const vz = ( z / n ) + 0.5;// 设置颜色并转换到sRGB空间
color.setRGB( vx, vy, vz, THREE.SRGBColorSpace );// 存储颜色数据
interleavedUint8Buffer[ j + 0 ] = color.r * 255;
interleavedUint8Buffer[ j + 1 ] = color.g * 255;
interleavedUint8Buffer[ j + 2 ] = color.b * 255;
性能优化与应用场景

对于大规模粒子系统的性能优化建议:

  1. 使用交错缓冲区:如本示例所示,提高内存访问效率
  2. 减少属性数量:只包含必要的顶点属性
  3. 批量更新数据:如果需要动态更新粒子,尽量批量更新
  4. 考虑视锥体剔除:对于超出视野的粒子不进行渲染
  5. 使用适当的粒子大小:过大的粒子会增加渲染负担

这种技术适合以下场景:

  • 粒子特效(雨、雪、火、烟等)
  • 数据可视化(点云、星空等)
  • 游戏中的大规模物体
  • 科学模拟(分子结构、星系等)

通过合理使用BufferGeometry和交错缓冲区,我们可以创建出性能高效的大规模粒子系统,同时保持良好的视觉效果。

交流学习: Three.js 场景编辑器 (Vue3 + TypeScript 实现)
https://threelab.cn/threejs-edit/
在这里插入图片描述

相关文章:

18.three官方示例+编辑器+AI快速学习webgl_buffergeometry_points_interleaved

本实例主要讲解内容 这个Three.js示例展示了如何使用BufferGeometry和Points对象创建高效的粒子系统。通过共享内存缓冲区和交错存储顶点数据&#xff0c;实现了50万个粒子的流畅渲染&#xff0c;并为每个粒子设置基于位置的颜色。 核心技术包括&#xff1a; 使用ArrayBuffe…...

Oracle 19c 静默安装

文章目录 环境介绍安装包下载准备工作配置 yum 源安装依赖包创建用户和用户组创建必要目录关闭 SELinux配置内核参数配置资源限制配置环境变量 Oracle 19c 安装解压缩编辑相应文件执行静默安装配置监听静默创建数据库 数据库维护连接数据库 环境介绍 操作系统为 CentOS 7.9 O…...

vscode 默认环境路径

1.下面放在项目根目录上&#xff1a; .vscode/settings.json 2.settings.json内容&#xff1a; {"python.analysis.extraPaths": ["${workspaceFolder}"],"python.defaultInterpreterPath": "/shared_disk/users/lbg/envs/py310_see3d/b…...

电力系统静态安全因素与动态安全因素的区别及具体分类

电力系统的安全分析分为静态安全和动态安全两类。静态安全分析关注系统在稳态或小扰动下的安全裕度&#xff0c;动态安全分析则关注系统在大扰动或暂态过程中的稳定能力。 一、静态安全因素 频率静态安全 因素&#xff1a; 发电与负荷的静态平衡&#xff1a;需保证稳态下的发电…...

arduinoIDE核心库更新导致的ESP32开发板神秘接口更换和三方库冲突

ESP32开发遇到的问题的解决记录贴 arduinoIDE核心库更新导致的ESP32开发板神秘接口更换和三方库冲突情况描述其余解决方法&#xff08;网上查的&#xff0c;未验证&#xff09;&#xff1a; arduinoIDE核心库更新导致的ESP32开发板神秘接口更换和三方库冲突 情况描述 当我将a…...

MCU开启浮点计算FPU

FPU 测试 1. FPU 简介2. 协处理器控制寄存器&#xff08;CPACR&#xff09;3. 开启FPU4. 验证FPU&#xff08;Julia 分形实验&#xff09; 1. FPU 简介 FPU 即浮点运算单元&#xff08;Float Point Unit&#xff09;。浮点运算&#xff0c;对于定点 CPU&#xff08;没有 FPU 的…...

vue3+three 搭建平面上滚动旋转的几何体

嗨&#xff0c;我是小路。今天主要和大家分享的主题是“vue3three 搭建平面上滚动旋转的几何体”。 在现代前端开发中&#xff0c;结合 Vue 3 的响应式能力和 Three.js 的强大 3D 渲染能力&#xff0c;可以轻松构建出令人惊叹的交互式三维场景。本文将带你一步步实现一…...

《Python星球日记》 第59天:生成对抗网络(GAN)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、引言二、GAN的基本原理1. 天才的创意:生成器与判别器的博弈过程2. 训练流程与目标函数三、常见GAN变体1. DCGAN (深度卷积生成对抗网络)2.…...

用户态到内核态:Linux信号传递的九重门(二)

1. 保存信号 1.1. 信号其他相关常见概念 实际执⾏信号的处理动作称为信号递达(Delivery)。 信号从产⽣到递达之间的状态,称为信号未决(Pending)。 进程可以选择阻塞 (Block )某个信号。 被阻塞的信号产⽣时将保持在未决状态,直到进程解除对此信号的阻塞,才执⾏递达的动作。 1.…...

【深度学习-Day 9】机器学习核心概念入门:监督、无监督与强化学习全解析

Langchain系列文章目录 01-玩转LangChain&#xff1a;从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块&#xff1a;四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain&#xff1a;从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

android特许权限调试

新aosp中新应用无权限&#xff0c;但需要正常运行&#xff0c;来排查权限问题 ro.control_privapp_permissionslog这样做可确保设备保持工作状态&#xff0c;同时仍然提供违规行为列表。错误消息格式如下&#xff1a; PackageManager: Privileged permission {PERMISSION_NAM…...

如何避免Java中的ConcurrentModificationException

引言 在Java开发中&#xff0c;操作集合&#xff08;如List、Set、Map&#xff09;时&#xff0c;许多开发者都遇到过ConcurrentModificationException。这个异常通常出现在遍历集合的同时尝试修改其结构&#xff08;如添加或删除元素&#xff09;。本文将深入探讨这一异常的根…...

5月12日复盘-RNN

5月12日复盘 二、RNN 模型 1.先导 1.1 为什么需要循环神经网络 RNN ​ 上图是一幅全连接神经网络图&#xff0c;我们可以看到输入层-隐藏层-输出层&#xff0c;他们每一层之间是相互独立地&#xff0c;(框框里面代表同一层)&#xff0c;每一次输入生成一个节点&#xff0c;同…...

linux小主机搭建自己的nas(二)docker卸载navidrome

测试的时候安装了一个音乐播放器在root下面&#xff0c;现在先给他删掉 停止并删除容器 docker ps -a | grep navidrome# 停止并删除容器&#xff08;替换 YOUR_CONTAINER_NAME 为实际名称&#xff09; docker stop YOUR_CONTAINER_NAME && docker rm YOUR_CONTAINER…...

.NET 在鸿蒙系统上的适配现状

目录 .NET 在鸿蒙系统上的适配现状 鸿蒙系统对虚拟机的限制与.NET的适配挑战 NativeAOT 在鸿蒙系统中的适配原理与实现方式 已知问题与解决方案&#xff1a;鸿蒙系统中的 syscall 限制 鸿蒙系统适配中的技术难点与解决方案 跨平台编译的挑战与应对策略 依赖库管理与兼容…...

01-centos离线升级至almalinux

官网链接官方代码调整&#xff1a; 1. vi repositories/system_upgrade/common/actors/targetuserspacecreator/libraries/userspacegen.py with mounting.BindMount(sourceuserspace_dir, targetos.path.join(context.base_dir, install_root_dir.lstrip(/))):_restore_persi…...

Python 处理图像并生成 JSONL 元数据文件 - 固定text版本

Python 处理图像并生成 JSONL 元数据文件 - 固定text版本 flyfish JSONL&#xff08;JSON Lines&#xff09;简介 JSONL&#xff08;JSON Lines&#xff0c;也称为 newline-delimited JSON&#xff09;是一种轻量级的数据序列化格式&#xff0c;由一系列独立的 JSON 对象组成…...

uniapp使用npm下载

uniapp的项目在使用HBuilder X创建时是不会有node_modules文件夹的&#xff0c;如下图所示&#xff1a; 但是uni-app不管基于哪个框架&#xff0c;它内部一定是有node.js的&#xff0c;否则没有办法去实现框架层面的一些东西&#xff0c;只是说它略微有点差异。具体差异表现在…...

前端面试每日三题 - Day 31

这是我为准备前端/全栈开发工程师面试整理的第30天每日三题练习&#xff1a; ✅ 题目1&#xff1a;WebAssembly前端深度实践指南 核心优势对比 维度JavaScriptWebAssembly解析速度需要解析编译预编译二进制执行性能动态类型较慢静态类型接近原生内存管理自动垃圾回收手动内存…...

通义千问席卷日本!开源界“卷王”阿里通义千问成为日本AI发展新基石

据日本经济新闻&#xff08;NIKKEI&#xff09;报道&#xff0c;通义千问已成为日本AI开发的新基础&#xff0c;其影响力正逐步扩大&#xff0c;深刻改变着日本AI产业的格局。 同时&#xff0c;日本经济新闻将通义千问Qwen2.5-Max列为全球AI模型综合评测第六名&#xff0c;不仅…...

01 安装CANoe

文章目录 0、Introduction1、Install CANoe1.1、Unlock Package1.2、Kick autorun1.3、Install CANoe1.4、Wait Download1.5、Restart application1.6、Vector CANoe Installation1.7、Installation Successfully1.8、Open CANoe 2、Install Drivers2.1、Unlock Package2.2、Ki…...

AutoDL租用服务器教程

在跑ai模型的时候&#xff0c;容易遇到算力不够的情况。此时便需要租用服务器。autodl是个较为便宜的服务器租用平台&#xff0c;h20仅需七点几元每小时。下面是简单的介绍。 打开网站AutoDL算力云 | 弹性、好用、省钱。租GPU就上AutoDL&#xff0c;并登录账号 登录后&#xff…...

【人工智能-agent】--Dify中MCP工具存数据到MySQL

本文记录的工作如下&#xff1a; 自定义MCP工具&#xff0c;爬取我的钢铁网数据爬取的数据插值处理自定义MCP工具&#xff0c;把爬取到的数据&#xff08;str&#xff09;存入本地excel表格中自定义MCP工具&#xff0c;把爬取到的数据&#xff08;str&#xff09;存入本地MySQ…...

ctfshow——web入门351~356

SSRF没有出网的部分 web入门351 $ch curl_init($url); 作用&#xff1a;初始化一个 cURL 会话&#xff0c;并设置目标 URL。解释&#xff1a; curl_init($url) 创建一个新的 cURL 资源&#xff0c;并将其与 $url 关联。这里的 $url 是用户提供的&#xff0c;因此目标地址完全…...

堆复习(C语言版)

目录 1.树的相关概念&#xff1a; 2.堆的实现 3.TopK问题 4.总结 1.树的相关概念&#xff1a; 1.结点的度&#xff1a;一个结点含有的子树&#xff08;孩子&#xff09;个数。 A的度为6 2.叶结点or终端结点&#xff1a;度为0的结点。 J、K、L、H、I 都是叶子结点 3.非终端结…...

解决LangChain4j报错HTTP/1.1 header parser received no bytes

问题描述 当使用langchain4j-open-ai调用自己部署的大模型服务时报错&#xff1a; public static void main(String[] args) {OpenAiChatModel model OpenAiChatModel.builder().apiKey("none").modelName("qwen2.5-instruct").baseUrl("http://19…...

深入解析MySQL联合查询(UNION):案例与实战技巧

在数据库操作中&#xff0c;查询是最常用的操作之一。MySQL提供了强大的查询功能&#xff0c;联合查询&#xff08;UNION&#xff09;是其中非常有用的一项操作。联合查询可以将多个查询结果合并成一个结果集&#xff0c;使得从不同来源的数据整合变得更加简单高效。本文将详细…...

[计算机科学#14]:数据结构

【核知坊】&#xff1a;释放青春想象&#xff0c;码动全新视野。 我们希望使用精简的信息传达知识的骨架&#xff0c;启发创造者开启创造之路&#xff01;&#xff01;&#xff01; 内容摘要&#xff1a;数据结构是计算机科学中的核心概念&#xff0c;用于…...

【计算机网络】HTTP 协议

HTTP是什么&#xff1f; HTTP 全称是“超文本传输协议”&#xff0c;是互联网上应用最广泛的应用层协议&#xff0c;用于客户端和服务器之间的通信。 HTTP 的实现在 HTTP 3.0之前都是基于传输层的 TCP 实现的&#xff0c; HTTP 3.0 改为了基于 UDP 实现&#xff0c;但是现在市…...

原生的 XMLHttpRequest 和基于 jQuery 的 $.ajax 方法的异同之处以及使用场景

近期参与一个项目的开发&#xff0c;发现项目中的ajax请求有两种不同的写法&#xff0c;查询了下两种写法的异同之处以及使用场景。 下面将从以下两段简单代码进行异同之处的分析及使用场景的介绍&#xff1a; // 写法一&#xff1a; var xhr new XMLHttpRequest(); xhr.open…...

横向移动(上)

横向移动&#xff08;上&#xff09; 横向移动指的是攻击者在内网中获得初始访问权限之后&#xff0c;通过相关技术扩大敏感数据和高价值资产权限的行为 常见的横向移动的方式 1.通过web漏洞 2.通过远程桌面 3.通过账号密码 4.通过不安全的配置 5.通过系统漏洞 利用远控…...

关于 js:7. 模块化、构建与工具链

一、模块系统&#xff1a;CommonJS、ESM、UMD 模块系统的目标&#xff1a; 将代码拆分为独立的逻辑单元&#xff08;模块&#xff09;&#xff0c;实现封装、复用、依赖管理。 在 Web 前端/Node 中&#xff0c;因为 JavaScript 起初没有模块机制&#xff0c;因此出现了多个模…...

一次IPA被破解后的教训(附Ipa Guard等混淆工具实测)

一行代码的疏忽&#xff0c;一个默认的类名&#xff0c;一个未混淆的资源路径&#xff0c;都可能成为攻击者入侵的入口。 背景&#xff1a;一次“不值一提”的上线&#xff0c;成了代价惨重的经验 故事的起点很简单&#xff1a;我们给销售部门做了一款小型内部演示 App&#x…...

麒麟系统安装.net core环境变量

本文主要记录在麒麟系统上安装.net core的运行环境&#xff0c;这里使用的是麒麟V10桌面版&#xff0c;后续测试服务器到了之后再使用服务器版进行安装测试。 环境安装 下载 这里由于是桌面版&#xff0c;我直接使用浏览器下的包&#xff0c;下完之后在终端中安装。 安装 1…...

如何使用 React Hooks 替代类组件的生命周期方法?

文章目录 1. 引言2. useEffect 概述3. 模拟类组件的生命周期方法3.1 模拟 componentDidMount3.2 模拟 componentDidUpdate3.3 模拟 componentWillUnmount 4. 多个 useEffect 的使用5. 注意事项6. 总结 1. 引言 在 React 16.8 版本之前&#xff0c;开发者主要通过类组件&#x…...

windows 在安装 Ubuntu-20.04 显示操作超时解决办法

1. 问题概述与原因分析 在我们用下面命令安装 Ubuntu-20.04 时系统显示操作超时&#xff1a; wsl --install -d Ubuntu-20.04大概率是没打开 Windows 虚拟机监控程序平台&#xff0c;可以在控制面板–>程序和功能里面打开 2. 解决办法与步骤 解决方式如下&#xff1a; 我…...

Spring Boot中Redis序列化配置详解

精心整理了最新的面试资料和简历模板&#xff0c;有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 引言 在使用Spring Boot集成Redis时&#xff0c;序列化方式的选择直接影响数据存储的效率和系统兼容性。默认的JDK序列化存在可读性差、存储空间大等问题&am…...

OpenCV进阶操作:光流估计

文章目录 前言一、光流估计1、光流估计是什么&#xff1f;2、光流估计的前提&#xff1f;1&#xff09;亮度恒定2&#xff09;小运动3&#xff09;空间一致 3、OpenCV中的经典光流算法1&#xff09;Lucas-Kanade方法&#xff08;稀疏光流&#xff09;2&#xff09; Farneback方…...

2025年渗透测试面试题总结-渗透测试红队面试八(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 渗透测试红队面试八 二百一十一、常见中间件解析漏洞利用方式 二百一十二、MySQL用户密码存储与加密 …...

前端面试高频50个问题,解答

以下是前端面试中常见的50个高频问题及其简要解答&#xff1a; HTML HTML5 有哪些新特性&#xff1f; 语义化标签&#xff08;如 <header>、<footer>&#xff09;、多媒体支持&#xff08;如 <audio>、<video>&#xff09;、本地存储&#xff08;如 l…...

Elasticsearch架构原理

1、Elasticsearch的节点类型 1.1 Master节点 在Elasticsearch启动时&#xff0c;会选举出来一个Master节点。当某个节点启动后&#xff0c;然后 使用Zen Discovery机制找到集群中的其他节点&#xff0c;并建立连接。 discovery.seed_hosts: ["192.168.21.130", &qu…...

前端面试宝典---webpack面试题

webpack 的 tree shaking 的原理 Webpack 的 Tree Shaking 过程主要包含以下步骤&#xff1a; 模块依赖分析&#xff1a;Webpack 首先构建一个完整的模块依赖图&#xff0c;确定每个模块之间的依赖关系。导出值分析&#xff1a;通过分析模块之间的 import 和 export&#xff…...

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践 一、Tailwind CSS 配置 1. 安装依赖 npm install tailwindcssnpm:tailwindcss/postcss7-compat tailwindcss/postcss7-compat postcss^7 autoprefixer^92. 创建配置文件 npx tailwindcss init3. 创建样式文件 在…...

hiveserver2与beeline进行远程连接hive配置及遇到的问题

1、hiveserver2 参与用户模拟功能&#xff0c;因为开启后才能保证各用户之间的权限隔离。 1.1、配置 $HADOOP_HOME/etc/hadoop/core-site.xml <!--配置所有节点的root用户都可作为代理用户--> <property><name>hadoop.proxyuser.root.hosts</name>&…...

单词短语0512

当然可以&#xff0c;下面是“opportunity”在考研英语中的常用意思和高频短语&#xff0c;采用大字体展示&#xff0c;便于记忆&#xff1a; ✅ opportunity 的考研常用意思&#xff1a; &#x1f449; 机会&#xff0c;良机 表示有利的时机或条件&#xff0c;尤指成功的可能…...

c++刷题便捷函数(类似于stoi的小函数)

标题 stoi(字符串转整形)map和set都有count成员函数&#xff0c;返回值是该key的个数&#xff0c;可以用来查是否存在该元素。bool is_sorted(nums.begin(), nums.end() 检验是否有序INT_MAX,INT_MIN分别是整形最大和最小初始化二维矩阵 vector<vector\<int>> mart…...

想实现一个基于MCP的pptx生成系统架构图【初版实现】

技术栈:Python + MCP协议 + python-pptx + FastMCP 核心创新点:通过MCP协议实现PPTX元素的动态化生成与标准化模板管理 当前还是个半成品,后续持续更新。 主要先介绍一下思路。 一、MCP协议与系统设计原理 1.1 为什么选择MCP? 标准化工具调用:通过MCP将PPTX元素生成逻辑封…...

jwt学习

基于token的鉴权机制也是无状态的(类似于http协议)&#xff0c;不需要保在服务端保留用户的认证或会话信息。 构成 jwt由三部分构成&#xff1a;头部、payload、签名&#xff0c;中间用.隔开 头部(header) 包含两部分信息&#xff1a;声明类型、声明加密的算法 例如&#xff1a…...

pth的模型格式怎么变成SafeTensors了?

文章目录 背景传统模型格式的安全隐患效率与资源瓶颈跨框架兼容性限制Hugging Face 的解决方案&#xff1a;SafeTensors行业与社区的推动SafeTensors 的意义总结 背景 最近要找一些适合embedding的模型&#xff0c;在huggingface模型库上看到一些排名比较靠前的&#xff0c;准…...

如何判断IP是否被平台标记

一、基础检测&#xff1a;连通性与黑名单筛查 网络连通性测试 Ping与Traceroute&#xff1a;通过命令测试延迟和路由路径&#xff0c;若延迟>50ms或存在异常节点&#xff08;如某跳延迟>200ms&#xff09;&#xff0c;可能影响可用性。示例命令&#xff1a; bash ping 8.…...