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

【Three.js基础学习】35.Particles Cursor Animation Shader

news 来源：原创 2025/9/5 21:42:25

前言

关于着色器应用和画布，实现黑白色照片动态效果

一、代码

script.js


import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import particlesVertexShader from './shaders/particles/vertex.glsl'
import particlesFragmentShader from './shaders/particles/fragment.glsl'
import { DoubleSide } from 'three'/* 回顾:颗粒变成圆盘它们的尺寸取决于图片的亮度修改粒子的颜色以匹配图片实现动画，让粒子短暂的升高，随后恢复用画布画，让画布移动粒子二维画布（2D canvas）我们打算创建一个填充黑色的2D画布在光标所在的每个框架上绘制一个白色光晕在每个框架上稍微淡化整个画布将画布用作粒子的位移纹理
*//*** Base*/
// Canvas
const canvas = document.querySelector('canvas.webgl')// Scene
const scene = new THREE.Scene()// Loaders
const textureLoader = new THREE.TextureLoader()/*** Sizes*/
const sizes = {width: window.innerWidth,height: window.innerHeight,pixelRatio: Math.min(window.devicePixelRatio, 2)
}window.addEventListener('resize', () =>
{// Update sizessizes.width = window.innerWidthsizes.height = window.innerHeightsizes.pixelRatio = Math.min(window.devicePixelRatio, 2)// MaterialsparticlesMaterial.uniforms.uResolution.value.set(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)// Update cameracamera.aspect = sizes.width / sizes.heightcamera.updateProjectionMatrix()// Update rendererrenderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(sizes.pixelRatio)
})/*** Camera*/
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0, 0, 18)
scene.add(camera)// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas,antialias: true
})
renderer.setClearColor('#181818')
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(sizes.pixelRatio)/* Displacement 位移
*/
const displacement = {}// 2D canvas
displacement.canvas = document.createElement('canvas');
displacement.canvas.width = 128;
displacement.canvas.height = 128;
displacement.canvas.style.position = 'fixed'
displacement.canvas.style.width = '256px'
displacement.canvas.style.height = '256px'
displacement.canvas.style.top = 0
displacement.canvas.style.left = 0
displacement.canvas.style.zIndex = 10document.body.append(displacement.canvas)// Context
displacement.context = displacement.canvas.getContext('2d') // 上下文
// displacement.context.fillStyle = 'red' // 这里注意 要在添加坐标的上面写才能改变颜色
displacement.context.fillRect(0,0,displacement.canvas.width,displacement.canvas.height) // 添加// Glow image
displacement.glowImage = new Image()
displacement.glowImage.src = './glow.png'// Interactive plane
displacement.interativePlane = new THREE.Mesh(new THREE.PlaneGeometry(10,10),new THREE.MeshBasicMaterial({color:'red',side:DoubleSide})
)
displacement.interativePlane.visible = false
scene.add(displacement.interativePlane)// Raycaster
displacement.raycaster = new THREE.Raycaster() // 射线投射器// Coordinates 坐标
displacement.screenCursor = new THREE.Vector2(9999,9999) // 屏幕光标坐标
displacement.canvasCursor = new THREE.Vector2(9999,9999) // 画布光标坐标，这样就可以更新画布在tick
displacement.canvasCursorPrevious = new THREE.Vector2(9999,9999) // 这个值 能像画布一样 用来实现鼠标停止 则最后一组淡出window.addEventListener('pointermove',(event)=>{ // 监听鼠标移动displacement.screenCursor.x = (event.clientX / sizes.width) * 2 - 1;  //(-1到1)displacement.screenCursor.y = - (event.clientY / sizes.height) * 2 + 1;// console.log(displacement.screenCursor.x, displacement.screenCursor.y ,'zhi')})/* texture 画布纹理类
*/
displacement.texture = new THREE.CanvasTexture(displacement.canvas)/*** Particles*/
const particlesGeometry = new THREE.PlaneGeometry(10, 10, 128, 128)
particlesGeometry.setIndex(null)
particlesGeometry.deleteAttribute('normal')const intensitiesArray = new Float32Array(particlesGeometry.attributes.position.count)  // 根据粒子强度
const anglesArray = new Float32Array(particlesGeometry.attributes.position.count)  // 根据粒子角度for(let i = 0; i < particlesGeometry.attributes.position.count; i++){intensitiesArray[i] = Math.random() // 增加随机性anglesArray[i] = Math.random() * Math.PI * 2 // 增加随机性
}particlesGeometry.setAttribute('aIntensity', new THREE.BufferAttribute(intensitiesArray,1))
particlesGeometry.setAttribute('aAngle', new THREE.BufferAttribute(anglesArray,1))const particlesMaterial = new THREE.ShaderMaterial({vertexShader: particlesVertexShader,fragmentShader: particlesFragmentShader,uniforms:{uResolution: new THREE.Uniform(new THREE.Vector2(sizes.width * sizes.pixelRatio, sizes.height * sizes.pixelRatio)),uPicureTexture:new THREE.Uniform(textureLoader.load('./picture-2.png')), // 引入图片uDisplacementTexture: new THREE.Uniform(displacement.texture)},// blending:THREE.AdditiveBlending
})
const particles = new THREE.Points(particlesGeometry, particlesMaterial) /// Points 粒子朝向自己
scene.add(particles)/*** Animate*/
const tick = () =>
{// Update controlscontrols.update()/* Raycaster*/displacement.raycaster.setFromCamera(displacement.screenCursor,camera) // 设置光线发射器 从鼠标发出const intersecets = displacement.raycaster.intersectObject(displacement.interativePlane)if(intersecets.length){// console.log(intersecets[0])const uv = intersecets[0].uvdisplacement.canvasCursor.x = uv.x * displacement.canvas.widthdisplacement.canvasCursor.y = (1 - uv.y) * displacement.canvas.height // 从0-1，但是画布画起来是反的 因此1-0}/* Displacement*/displacement.context.globalCompositeOperation = 'source-atop' // 在这一帧 恢复默认值displacement.context.globalAlpha = 0.02 // 设置alpha displacement.context.fillRect(0,0,displacement.canvas.width,displacement.canvas.height)// Spedd alphaconst cursorDistance = displacement.canvasCursorPrevious.distanceTo(displacement.canvasCursor) // 计算到上一个画布坐标的距离displacement.canvasCursorPrevious.copy(displacement.canvasCursor)const alpha = Math.min(cursorDistance * 0.1,1); // 确保不会超过1//    两个问题 1. 光辉的大小 glowSize 2. 光辉边缘  displacement.canvasCursor.x - glowSize * 0.5// Draw glowconst glowSize = displacement.canvas.width * 0.25displacement.context.globalCompositeOperation = 'lighten' // 全球复合操作  让其变轻displacement.context.globalAlpha = alpha // 在下一帧还原displacement.context.drawImage(displacement.glowImage,displacement.canvasCursor.x - glowSize * 0.5,displacement.canvasCursor.y - glowSize * 0.5,32,32)// texturedisplacement.texture.needsUpdate = true// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}tick()

style.css

*
{margin: 0;padding: 0;
}html,
body
{overflow: hidden;
}.webgl
{position: fixed;top: 0;left: 0;outline: none;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Particles cursor animation</title><link rel="stylesheet" href="./style.css">
</head>
<body><canvas class="webgl"></canvas><script type="module" src="./script.js"></script>
</body>
</html>

fragment.glsl

varying vec3 vColor;void main()
{vec2 uv = gl_PointCoord;float distanceToCenter = distance(uv,vec2(0.5));if(distanceToCenter > 0.5)discard;  // 表示丢弃物  大于0.5丢弃 不要  gl_FragColor = vec4(vColor, 1.0);#include <tonemapping_fragment>#include <colorspace_fragment>
}

vertex.glsl

uniform vec2 uResolution;
uniform sampler2D uPicureTexture;
uniform sampler2D uDisplacementTexture;attribute float aIntensity;
attribute float aAngle;varying vec3 vColor;void main()
{// Displacementvec3 newPosition = position;float displacementIntensity = texture(uDisplacementTexture, uv).r; // 位移强度displacementIntensity = smoothstep(0.1,0.3,displacementIntensity);vec3 displacement = vec3(cos(aAngle) * 0.2,sin(aAngle) * 0.2,1.0);displacement = normalize(displacement);displacement *= displacementIntensity;displacement *= 3.0;displacement *= aIntensity;newPosition += displacement;// Final positionvec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);vec4 viewPosition = viewMatrix * modelPosition;vec4 projectedPosition = projectionMatrix * viewPosition;gl_Position = projectedPosition;// Picturefloat pictureIntensity = texture(uPicureTexture, uv).r ;// Point sizegl_PointSize = 0.15 * pictureIntensity * uResolution.y; // 乘 强度gl_PointSize *= (1.0 / - viewPosition.z);// VaryingsvColor = vec3(pow(pictureIntensity, 2.0));
}

二、效果

canvas 结合着色器实现黑白照片动态效果

【Three.js基础学习】35.Particles Cursor Animation Shader

前言关于着色器应用和画布，实现黑白色照片动态效果一、代码 script.js import * as THREE from three import { OrbitControls } from three/addons/controls/OrbitControls.js import particlesVertexShader from ./shaders/particles/vertex.glsl import p…...

编程日记 2025/9/5 21:42:25

安卓性能调优之-掉帧测试

掉帧指的是某一帧没有在规定时间内完成渲染，导致 UI 画面不流畅，产生视觉上的卡顿、跳帧现象。 Android目标帧率： 一般情况下，Android设备的屏幕刷新率是60Hz，即每秒需要渲染60帧（Frame Per Second, FPS&a…...

编程日记 2025/8/17 18:59:26

六、分布式嵌入

六、分布式嵌入文章目录六、分布式嵌入前言一、先要配置torch.distributed环境二、Distributed Embeddings2.1 EmbeddingBagCollectionSharder2.2 ShardedEmbeddingBagCollection 三、Planner总结前言我们已经使用了TorchRec的主模块：EmbeddedBagCollection。我…...

编程日记 2025/8/17 18:56:04

13-scala模式匹配

模式匹配是检查某个值（value）是否匹配某一个模式的机制，一个成功的匹配同时会将匹配值解构为其组成部分。它是Java中的switch语句的升级版，同样可以用于替代一系列的 if/else 语句。语法一个模式匹配语句包括一个待匹配的值&a…...

编程日记 2025/8/17 19:03:58

Multisim使用说明详尽版--(2025最新版)

一、Multisim14前言 1.1、主流电路仿真软件 1. Multisim：NI开发的SPICE标准仿真工具，支持模拟/数字电路混合仿真，内置丰富的元件库和虚拟仪器（示波器、频谱仪等），适合教学和竞赛设计。官网：艾…...

编程日记 2025/8/30 16:53:41

试一下阿里云新出的mcp服务

前言 MCP这段时间的发展可谓是如火如荼，各种教程也是层出不穷，基本的教程都是如何集成各类型的mcp(比如高德地图)到开发工具(比如cursor)，效果很好，但是有个问题就是，配置教程较为繁琐。阿里云悄然上线的mcp 今天早上…...

编程日记 2025/9/5 22:15:43

正弦波有效值和平均值（学习笔记）

一个周期的正弦波在坐标轴上围的面积有多大？ 一般正弦波以 y Asin(wx)表示，其中A为振幅，W为角速度。周期T 2π/w; 确定积分区间是x 0，到x 2π。计算绝对值积分： 变量代还：wx θ，dx dθ…...

编程日记 2025/9/5 22:13:40

科研软件分享

这个帖子不定期更新，分享博主自己使用的很好用的科研软件 1 connectedpaper Connected Papers | Find and explore academic papers 2 Semantic Scholar...

编程日记 2025/8/17 20:26:36

Python（12）深入解析Python参数传递：从底层机制到高级应用实践

目录一、参数传递的编程哲学1.1 参数传递的本质1.2 参数传递类型矩阵二、参数传递核心规则2.1 位置参数与关键字参数2.2 可变参数处理三、参数传递高级特性3.1 类型约束与提示3.2 参数内存优化四、参数传递工程实践4.1 防御性参数校验4.2 参数依赖注入五、参数传递性能优化…...

编程日记 2025/9/5 22:15:42

MVCC是什么？MVCC的作用是什么？MVCC实现方式有哪些？

MVCC（多版本并发控制）详解一、MVCC是什么？ MVCC（Multi-Version Concurrency Control，多版本并发控制）是数据库管理系统中的一种并发控制机制，它通过维护数据的多个版本来实现非阻塞读和高并发…...

编程日记 2025/9/3 16:56:55

007.Gitlab CICD缓存与附件

文章目录缓存与产物缓存与产物概述同分支不同job数据共享默认数据共享不同 Job 数据共享不同分支相同job数据共享跨分支同job数据共享不同分支不同job数据共享跨分支跨job数据共享将文件/夹保存为附件产物介绍创建产物跨job共享产物缓存与产物缓存与产物概述缓存是一…...

编程日记 2025/8/17 18:56:15

A006-基于Selenium和JMeter的吉屋web端的自动化测试设计与实现

产出：自动测试脚本测试用例开题报告自动化测试报告论文jmeter性能测试 --------------------**论文主要内容***----- 第1章吉屋web端需求分析 1.1 吉屋web端功能需求分析由于社会对知识获取的需求不断增长，海量繁多的房屋信息已难以依靠传统人工高效…...

编程日记 2025/8/27 0:09:53

图像预处理-边缘填充，透视变换和色彩空间基础

一.边缘填充一般来图片操作之后会有空区域，就是对空出来的区域进行了像素值的填充，(0，0，0)也就是黑色像素值的填充。 # 默认黑色填充 import cv2 as cvimg cv.imread(../images/lena.png) # 先让原图旋转45度 M cv.getRotatio…...

编程日记 2025/8/27 11:36:06

数字化赋能，众趣科技助力智慧园区深化管理运营能力

数字化、网络化和智能化，被公认为是未来社会发展的大趋势。随着全球物联网、云计算等新一代信息技术不断成熟，传统的招商管理运营模式难以满足园区当下所需，以“园区互联网”为理念的“智慧园区”应运而生，同时融入社交、移动、物…...

编程日记 2025/8/30 20:31:38

《AI大模型应知应会100篇》第16篇：AI安全与对齐：大模型的灵魂工程

第16篇：AI安全与对齐：大模型的灵魂工程摘要在人工智能技术飞速发展的今天，大型语言模型（LLM）已经成为推动社会进步的重要工具。然而，随着这些模型能力的增强，如何确保它们的行为符合人类的期…...

编程日记 2025/8/30 22:59:40

MCP的另一面

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/8/17 18:56:05

Golang｜锁相关

文章目录并发安全性与原子操作读写锁分布式锁并发安全性与原子操作普通数据类型在并发读写中是会出现问题的，有时候操作会被吞，导致脏写，比如上面n加了两次应该为2，但是由于并发，n最后还是只加了一次读写锁 sync.…...

编程日记 2025/9/1 20:15:49

大模型面经 | 介绍一下大模型微调方法Prefix Tuning、Prompt Tuning、P-Tuning和P-Tuning v2

大家好，我是皮先生！！今天给大家分享一些关于大模型面试常见的面试题，希望对大家的面试有所帮助。往期回顾：大模型面经 | 春招、秋招算法面试常考八股文附答案（RAG专题一）大模型面经 | 春招、秋招算法面试常考八股文附答案（RAG专题二）大模型面经 | 春招、秋招算法…...

编程日记 2025/8/17 18:59:43

JMeter的高并发和高频率和分布式

性能测试模拟各种正常的、峰值的测试环境，检测程序的各项性能指标是否能够达标高并发 JMeter中内置了定时器，可以实现时间模式相关的性能测试需求1:同一时刻100个同学去访问学生管理系统的查询所有学院信息功能，统计高并发情况下平均响…...

编程日记 2025/8/25 21:21:00

设计模式-模板模式

设计模式-模板模式，不用重复写大的逻辑，父类定义好不变的模板方法，子类使用，当框架是父类的框架时可以继承...

编程日记 2025/8/17 19:05:38

手机端可部署的开源大模型；通义千问2.5训练和推理需要的内存和外存

手机端可部署的开源大模型目录手机端可部署的开源大模型Qwen2.5 0.5B 7b 推理采用手机内存需要多少Qwen2.5 0.5B不同量化精度下的内存需求Qwen2.5 7B不同量化精度下的内存需求通义千问2.5训练和推理需要的内存和外存推理阶段1. Qwen2.5 - 7B2. Qwen2.5 - 14B3. Qwen2.5 - 72B…...

编程日记 2025/9/5 5:57:02

记录学习的第二十五天

今天终于又开始更新了。实在是星期六的蓝桥杯给了我一个大大的打击，今天终于好不容易缓过来了，可以好好学算法了。还是老规划，力扣的每日一题。不过今天的每日一题我之前做过了，就又提交了一次来签到。之后三道哈希表题目。我一…...

编程日记 2025/8/22 16:22:10

leetcode03 -- 武汉旅游查询系统

武汉旅游查询系统 1 界面展示 1.首页地图界面 2.查找功能在查找框内输入查找的景点名称查找到的景点在地图上进行定位，右侧展示景点的详细信息。 3.添加景点功能在地图上点击某个位置，系统弹出一个输入框供用户填写景点的名称和描述。在弹出的输入框中输入景点名…...

编程日记 2025/9/2 13:41:50

R 语言科研绘图第 39 期 --- 饼状图-旭日

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2025/8/29 1:22:43

R语言操作练习2

加载tidyr包，探索table1,table2,table3,table4a, table4b维度和结构将table4a进行宽转长操作，列名为country,year,population 基于题2，以country为横坐标，population为纵坐标，fillyear，采用dodge形式作柱…...

编程日记 2025/8/17 21:09:26

【秣厉科技】LabVIEW工具包——OpenCV 教程（19）：拾遗 - imgproc 基础操作（上）

文章目录前言imgproc 基础操作（上）1. 颜色空间2. 直方图3. 二值化4. 腐蚀、膨胀、开闭运算5. 梯度与轮廓6. 简易绘图7. 重映射总结前言需要下载安装OpenCV工具包的朋友，请前往此处 ；系统要求：Windows系统&#x…...

编程日记 2025/9/3 2:31:09

python中，sort(reverse=True)与列表.reverse的区别

python中，sort(reverseTrue)与列表.reverse的区别在 Python 中，sort(reverseTrue) 和列表.reverse() 是两种不同的操作，主要区别如下： 1. sort(reverseTrue) 作用： 对列表进行降序排序（即从大到小排列…...

编程日记 2025/8/17 19:59:53

Java【多线程】（8）CAS与JUC组件

目录 1.前言 2.正文 2.1CAS概念 2.2CAS两种用途 2.2.1实现原子类 2.2.2实现自旋锁 2.3缺陷：ABA问题 2.4JUC组件 2.4.1Callable接口 2.4.2ReentrantLock（与synchronized对比） 2.4.3Semaphore信号量 2.4.4CountDownLatch 3.小结 1…...

编程日记 2025/8/17 19:46:36

MATLAB仿真多相滤波抽取与插值的频谱变化(可视化混叠和镜像)

MATLAB画图仿真多相滤波抽取与插值的频谱变化可视化多速率信号处理抽取与插值的频谱变化实信号/复信号可视化混叠和镜像目录前言一、抽取的基本原理二、MATLAB仿真抽取运算三、内插的基本原理四、MATLAB仿真内插运算总结前言在多速率系统中增加信号采样率的运…...

编程日记 2025/8/26 23:14:41

Docker 与 Podman常用知识汇总

一、常用命令的对比汇总 1、基础说明 Docker：传统的容器引擎，使用 dockerd 守护进程。 Podman：无守护进程、无root容器引擎，兼容 Docker CLI。 Podman 命令几乎完全兼容 Docker 命令，只需将 docker 替换为 podman。…...

编程日记 2025/8/17 21:28:59

Spark-SQL简介

Spark-SQL: Spark SQL 是 Spark 用于结构化数据(structured data)处理的 Spark 模块。 Hive and SparkSQL: Drill,Impala.Shark Shark 是伯克利实验室 Spark 生态环境的组件之一. Shark 的出现，使得 SQL-on-Hadoop 的性能比 Hive 有了 10-100 倍的提高。 Spark-S…...

编程日记 2025/8/17 21:13:04

第十八讲 | 支持向量机（SVM）：在地类识别与遥感影像分类中的应用

在遥感影像分类与地类识别中，我们经常面临高维特征、多样地表类型以及样本噪声等挑战。**支持向量机（Support Vector Machine，SVM）**作为一种强大的监督分类方法，因其在小样本、高维特征下依然保持良好泛化能力，被广泛用于遥感影像分析、地类判别及环境监测等领域。 📌…...

编程日记 2025/8/17 19:52:21

5.6 GitHub PR分析爆款方案：分层提示工程+LangChain实战，准确率飙升22%

GitHub Sentinel 分析报告核心模块：Pull Request 提示工程设计与实现关键词：Pull Request 分析、大模型提示工程、分层结构设计、动态参数注入、LangChain 集成 1. PR 分析需求与技术挑战在 GitHub 开源项目管理中，Pull Request 分析需满足三个核心需求： #mermaid-svg-…...

编程日记 2025/9/3 9:23:30

centos yum install environment-modules

在 CentOS 系统中，environment-modules 是一个非常有用的包，它允许用户管理和动态地加载环境变量，这对于使用特定模块（例如软件库或编译器工具链的路径）非常方便。如果你想通过 yum 安装 environment-modules&#xff…...

编程日记 2025/8/27 0:21:40

Spring Boot + ShardingSphere 分库分表实战：电商订单场景案例

摘要：本文通过电商系统中订单表分库分表的实际案例，结合Spring Boot和ShardingSphere框架，详细讲解如何实现水平分库分表，解决海量数据存储与查询性能问题。一、场景分析在电商系统中，订单表随着业务增长可能面临以…...

编程日记 2025/9/4 6:34:31

C++ 指针从入门到精通实战：全面掌握指针的概念与应用

C 指针从入门到精通实战：全面掌握指针的概念与应用指针（Pointer）是C中一个极其重要且强大的概念，它赋予了程序员直接操作内存的能力，从而实现高效的代码和复杂的数据结构。然而，指针的使用也伴随着诸多挑…...

编程日记 2025/8/29 11:00:25

C++ 智能指针底层逻辑揭秘：优化内存管理的核心技术解读

目录 0.为什么需要智能指针？ 1.智能指针的使用及原理 RAII： 智能指针的原理： 2.智能指针有哪些？ std::auto_ptr std::unique_ptr std::shared_ptr std::weak_ptr 0.为什么需要智能指针？ 想要回答这个问题&…...

编程日记 2025/9/2 23:55:30

Android基础入门、Android常见界面布局基础练习

第1章 Android基础入门、第2章Android常见界面布局一. 填空题 1. (填空题)如果希望在XML布局文件中调用颜色资源，可以使用_____调用。正确答案： (1) color 2. (填空题)Android程序入口的Activity是在_____文件中注册的。正确答案： (1…...

编程日记 2025/8/17 18:56:58

Spring Cloud主要组件介绍

一、Spring Cloud 1、Spring Cloud技术概览分为：服务治理，链路追踪，消息组件，配置中心，安全控制，分布式任务管理、调度，Cluster工具，Spring Cloud CLI，测试 2、注册中心：常用注册中心（Euerka[AP]、Zookeeper[CP]） 1）Euerka Client（服务提供者）=》注册=》Eue…...

编程日记 2025/8/27 23:20:49

【7】深入学习Buffer缓冲区-Nodejs开发入门

深入学习Buffer缓冲区前言ASCII码GBK/GB2312UnicodeJavascript转换 BufferBuffer的作用Buffer的创建Buffer.allocBuffer.allocUnsafe(size)Buffer.allocUnsafeSlow(size)Buffer.from(array)Buffer.from(arrayBuffer[, byteOffset[, length]])Buffer.from(buffer)Buffer.from(s…...

编程日记 2025/9/3 2:39:02

酶动力学参数预测，瓶颈识别……中科院深圳先进技术研究院罗小舟分享AI在酶领域的创新应用

蛋白质，作为生命的基石，在生命活动中发挥着关键作用，其结构和功能的研究，对创新药物研发、合成生物学、酶制剂生产等领域，有着极其重要的意义。但传统蛋白质设计面临诸多难题，蛋白质结构复杂，序…...

编程日记 2025/8/29 21:05:17

Dockerfile

Dockerfile Dockerfile 是一个文本文件，其内包含了一条条指令，每一条指令构建镜像的一层，因此每一条指令的内容，就是描述该层应当如何构建。定制镜像，可以将镜像制作的每一层的修改、安装、构建、操作的命令&#xf…...

编程日记 2025/8/17 18:56:26

Redis高频面试题（含答案）

当然可以，Redis 是面试中非常常见的高频考点，尤其在后台开发、分布式系统、缓存设计等方向，面试官常常通过 Redis 来考察你的高并发处理能力、系统设计能力和对缓存一致性理解。以下是一些典型 Redis 的面试场景题目类型和你可以如何回答的…...

编程日记 2025/8/17 18:56:16

#3 物联网的标准

商业化的技术都有标准， 标准的本质就是可以重复多次实现的方法。而这些方法都是设定物联网的那些人布局的，当然在保证按方法操作的结果是属于物联网这个基本的操作里面，藏着的是对某些利益团队的维护，这里大家知道就可以了。除 …...

编程日记 2025/8/22 2:45:16

Moviepy 视频编辑的Python库,可调整视频分辨率、格式

MoviePy简介 MoviePy 是一个用于视频编辑的Python库，支持视频剪辑、和合成、转码等多种操作，主要有点： 基于 FFmpeg：能够处理几乎所有常见的视频格式。修改视频分辨率方法一:指定新的宽度和高度 from moviepy.editor import V…...

编程日记 2025/8/17 19:45:50

【LeetCode 热题 100】哈希系列

📁1. 两数之和本题就是将通过两层遍历优化而成的，为什么需要两层遍历，因为遍历 i 位置时，不知道i-1之前的元素是多少，如果我们知道了，就可以通过两数相加和target比较即可。因为本题要求返回下标&#xf…...

编程日记 2025/9/2 16:37:27

蓝光三维扫描：汽车冲压模具与钣金件全尺寸检测的精准解决方案

随着汽车市场竞争日趋激烈，新车型开发周期缩短，安全性能要求提高，车身结构愈加复杂。白车身由多达上百个具有复杂空间型面的钣金件，通过一系列工装装配、焊接而成。钣金件尺寸精度是白车身装配精度的基础。采用新拓三维XTOM蓝光…...

编程日记 2025/8/17 19:00:04

鲲鹏+昇腾部署集群管理软件GPUStack，两台服务器搭建双节点集群【实战详细踩坑篇】

前期说明配置：2台鲲鹏32C2 2Atlas300I duo，之前看网上文档，目前GPUstack只支持910B芯片，想尝试一下能不能310P也部署试试，毕竟华为的集群软件要收费。系统：openEuler22.03-LTS 驱动：24.1.rc…...

编程日记 2025/8/23 20:31:05

面试篇 - GPT-1（Generative Pre-Training 1）

GPT-1（Generative Pre-Training 1） ⭐模型结构 Transformer only-decoder：GPT-1模型使用了一个12层的Transformer解码器。具体细节与标准的Transformer相同，但位置编码是可训练的。注意力机制： 原始Transformer的解…...

编程日记 2025/8/17 18:59:47

探索机器人创新技术基座，傅利叶开源人形机器人 Fourier N1

一．傅利叶为什么要开源？ 2025年3月17日，傅利叶正式开源全尺寸人形机器人数据集Fourier ActionNet。 2025年4月11日，傅利叶正式发布首款开源人形机器人 Fourier N1。傅利叶为什么要做这些开源工作呢？4月11日&#x…...

编程日记 2025/8/17 20:23:24

一、代码

二、效果

相关文章：