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

WebGL进阶（十一）层次模型

news 来源：原创 2025/7/29 7:26:52

理论基础：

效果：

源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入gl-matrix.js库，用于 WebGL 中的矩阵运算 --><script src="gl-matrix.js"></script><script>// 顶点着色器程序let vertexstring = `attribute vec4 a_position; // 顶点位置属性uniform mat4 u_formMatrix; // 变换矩阵attribute vec4 a_Normal; // 顶点法线属性uniform vec3 u_PointLightPosition; // 点光源位置uniform vec3 u_DiffuseLight; // 散射光颜色uniform vec3 u_AmbientLight; // 环境光颜色varying vec4 v_Color; // 传递给片段着色器的颜色void main(void){gl_Position = u_formMatrix * a_position; // 应用变换矩阵vec3 normal = normalize(a_Normal.xyz); // 法线归一化vec3 lightDirection = normalize(u_PointLightPosition - vec3(gl_Position.xyz)); // 计算光源方向float nDotL = max(dot(lightDirection, normal), 0.0); // 计算法线和光源方向的点积vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL; // 计算散射光vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0); // 计算环境光v_Color = vec4(diffuse + ambient, 1); // 结合散射光和环境光}`;// 片段着色器程序let fragmentstring = `precision mediump float; // 精度声明varying vec4 v_Color; // 从顶点着色器接收的颜色void main(void){gl_FragColor =v_Color; // 设置片断颜色}`;// WebGL上下文和一些变量的声明var webgl;var angle = 45;var webglDiv;var indices;var g_joint1Angle = 0.0;var ANGLE_STEP = 3.0;var g_arm1Angle = -90.0;// 初始化函数，设置WebGL环境function init() {// 初始化WebGLinitWebgl();// 初始化着色器initShader();// 初始化数据initBuffer();// 初始化事件initEvent();// 清空画板clearn();// 创建光源initLight();// 绘制图形draw();}// 初始化WebGL上下文function initWebgl() {webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);}// 初始化着色器function initShader() {// 创建顶点着色器和片段着色器let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);// 设置着色器源码webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);// 编译着色器webgl.compileShader(vsshader);webgl.compileShader(fsshader);// 检查着色器编译状态if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}// 创建程序并附加着色器let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program;}// 清空画板并设置背景色和深度测试function clearn() {webgl.clearColor(0, 0, 0, 1);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);}// 初始化变换矩阵function initTransformation(angele, rotateArr, ModelMatrix = glMatrix.mat4.create()) {let ProjMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ProjMatrix);glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000); // 设置透视投影let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");glMatrix.mat4.rotate(ModelMatrix, ModelMatrix, degreesToRads(angele), rotateArr); // 旋转模型矩阵let ViewMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ViewMatrix);glMatrix.mat4.lookAt(ViewMatrix, [50, 50, 50], [0, 0, 0], [0, 1, 0]); // 设置视图矩阵let mvMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvMatrix);glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix); // 计算模型视图矩阵let mvpMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvpMatrix);glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix); // 计算模型视图投影矩阵webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix);return ModelMatrix;}// 初始化事件监听function initEvent() {document.onkeydown = keydown;}// 初始化光源function initLight() {let u_DiffuseLight = webgl.getUniformLocation(webgl.program, 'u_DiffuseLight');webgl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0); // 设置散射光颜色let u_LightDirection = webgl.getUniformLocation(webgl.program, 'u_PointLightPosition');webgl.uniform3fv(u_LightDirection, [3.0, 3.0, 4.0]); // 设置点光源位置let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');webgl.uniform3f(u_AmbientLight, 0.8, 0.8, 0.8); // 设置环境光颜色}// 初始化缓冲区function initBuffer() {// 顶点数据var vertices = new Float32Array([// 顶点坐标]);// 法线数据var normals = new Float32Array([// 法线坐标]);// 顶点索引indices = new Uint8Array([// 顶点索引]);// 创建顶点位置缓冲区let pointPosition = new Float32Array(vertices);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);// 创建法线缓冲区let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");let normalsBuffer = webgl.createBuffer();let normalsArr = new Float32Array(normals);webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aNormal);webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 0, 0);// 创建索引缓冲区let indexBuffer = webgl.createBuffer();let indices1 = new Uint8Array(indices);webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices1, webgl.STATIC_DRAW);}// 按键事件处理函数function keydown(ev) {switch (ev.keyCode) {// 按键事件，控制关节角度}clearn()draw();}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入gl-matrix.js库，用于 WebGL 中的矩阵运算 --><script src="gl-matrix.js"></script><script>// 顶点着色器程序let vertexstring = `attribute vec4 a_position; // 顶点位置属性uniform mat4 u_formMatrix; // 变换矩阵attribute vec4 a_Normal; // 顶点法线属性uniform vec3 u_PointLightPosition; // 点光源位置uniform vec3 u_DiffuseLight; // 散射光颜色uniform vec3 u_AmbientLight; // 环境光颜色varying vec4 v_Color; // 传递给片段着色器的颜色void main(void){gl_Position = u_formMatrix * a_position; // 应用变换矩阵vec3 normal = normalize(a_Normal.xyz); // 法线归一化vec3 lightDirection = normalize(u_PointLightPosition - vec3(gl_Position.xyz)); // 计算光源方向float nDotL = max(dot(lightDirection, normal), 0.0); // 计算法线和光源方向的点积vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL; // 计算散射光vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0); // 计算环境光v_Color = vec4(diffuse + ambient, 1); // 结合散射光和环境光}`;// 片段着色器程序let fragmentstring = `precision mediump float; // 精度声明varying vec4 v_Color; // 从顶点着色器接收的颜色void main(void){gl_FragColor = v_Color; // 设置片断颜色}`;// WebGL上下文和一些变量的声明var webgl;var angle = 45;var webglDiv;var indices;// 各个关节的角度变量var g_joint1Angle = 86.0;var ANGLE_STEP = 3.0;var g_arm1Angle = 160.0;var g_palm1Angle = 0.0;var g_finger1Angle = 0.0;var g_chest1Angle = 0;// 初始化函数，设置WebGL环境function init() {// 初始化WebGLinitWebgl();// 初始化着色器initShader();// 清空画板clearn();// 创建光源initLight();// 绘制头部drawHead()// 初始化数据initBuffer();// 初始化事件initEvent();// 绘制图形let drawMatrix = chestDraw();let drawMatrixCopy = drawMatrix.slice(0);drawLeft(drawMatrix);drawRight(drawMatrixCopy);}// 初始化WebGL上下文function initWebgl() {webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);}// 初始化着色器function initShader() {// 创建顶点着色器和片段着色器let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);// 设置着色器源码webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);// 编译着色器webgl.compileShader(vsshader);webgl.compileShader(fsshader);// 检查着色器编译状态if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}// 创建程序并附加着色器let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader);webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program;}// 清空画板并设置背景色和深度测试function clearn() {webgl.clearColor(0, 0, 0, 1);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);}// 初始化变换矩阵function initTransformation(angle, rotateArr, ModelMatrix = glMatrix.mat4.create()) {let ProjMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ProjMatrix);glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000); // 设置透视投影let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");glMatrix.mat4.rotate(ModelMatrix, ModelMatrix, degreesToRads(angle), rotateArr);let ViewMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ViewMatrix);glMatrix.mat4.lookAt(ViewMatrix, [0, 0, 100], [0, 0, 0], [0, 1, 0]); // 设置视图矩阵let mvMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvMatrix);glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix); // 计算模型视图矩阵let mvpMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvpMatrix);glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix); // 计算模型视图投影矩阵webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix);return ModelMatrix;}// 初始化事件监听function initEvent() {document.onkeydown = keydown;}// 初始化光源function initLight() {let u_DiffuseLight = webgl.getUniformLocation(webgl.program, 'u_DiffuseLight');webgl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0); // 设置散射光颜色let u_LightDirection = webgl.getUniformLocation(webgl.program, 'u_PointLightPosition');webgl.uniform3fv(u_LightDirection, [3.0, 3.0, 4.0]); // 设置点光源位置let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');webgl.uniform3f(u_AmbientLight, 0.8, 0.8, 0.8); // 设置环境光颜色}// 初始化缓冲区function initBuffer() {// 顶点数据var vertices = new Float32Array([// 顶点坐标]);// 法线数据var normals = new Float32Array([// 法线坐标]);// 顶点索引indices = new Uint8Array([// 顶点索引]);// 创建顶点位置缓冲区let pointPosition = new Float32Array(vertices);let aPosition = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPosition);webgl.vertexAttribPointer(aPosition, 3, webgl.FLOAT, false, 0, 0);// 创建法线缓冲区let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");let normalsBuffer = webgl.createBuffer();let normalsArr = new Float32Array(normals);webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aNormal);webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 0, 0);// 创建索引缓冲区let indexBuffer = webgl.createBuffer();let indices1 = new Uint8Array(indices);webgl.bindBuffer(web
void gl.drawElements(mode, count, type, offset);

 

复盘：

相关文章：

WebGL进阶（十一）层次模型

理论基础&#xff1a; 效果&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…...

编程日记 2025/7/29 7:26:52

Django：从入门到精通

一、Django背景 Django是一个由Python编写的高级Web应用框架&#xff0c;以其简洁性、安全性和高效性而闻名。Django最初由Adrian Holovaty和Simon Willison于2003年开发&#xff0c;旨在简化Web应用的开发过程。作为一个开放源代码项目&#xff0c;Django迅速吸引了大量的开发…...

编程日记 2025/7/29 1:37:38

C++设计模式行为模式———中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…...

编程日记 2025/7/29 7:05:30

Perfetto学习大全

Perfetto 是一个功能强大的性能分析和追踪工具&#xff0c;主要用于捕获和分析复杂系统中的事件和性能数据&#xff0c;特别是在 Android 和 Linux 环境下。它的核心目标是帮助开发者深入了解系统和应用程序的运行状态&#xff0c;以便优化性能和诊断问题。 Perfetto的主要作用…...

编程日记 2025/7/29 7:11:10

管家婆财贸ERP BR040.销售单明细表变更

最低适用版本&#xff1a; C系列 23.8 插件简要功能说明&#xff1a; 销售明细表支持直接修改单据自由项1-16更多细节描述见下方详细文档 插件操作视频&#xff1a; 进销存类定制插件--销售单明细表变更 1. 应用中心增加菜单【销售单明细表变更】 a. 复制23.8版本销售单明细…...

编程日记 2025/7/29 7:07:19

2411rust,实现特征

原文 在Rust2024中,impl Trait在中位置的默认工作方式有了变化.是为了简化impl Trait,以更好地匹配人们一般的需求. 还添加了一个灵活的语法,让你需要时可完全控制. 从Rust2024开始,一直在更改,何时可在返回位置impl Trait的隐藏类型中使用泛型参数的规则: 1,即对返回位置i…...

编程日记 2025/7/29 7:08:54

SpringBoot3与JUnit5集成测试

你可以在 Spring Boot 3 中轻松设置和运行 JUnit 集成测试。合理使用 Spring 提供的注解和工具&#xff0c;可以确保测试的高效性和可靠性。以下是集成测试的步骤和示例&#xff1a; 1. 添加依赖 在 pom.xml 中添加 Spring Boot Starter Test 依赖&#xff0c;它包含 JUnit 5 …...

编程日记 2025/7/29 7:05:28

工程企业需要什么样的物资管理系统？为什么需要物资管理系统？

一、背景与意义 在工程项目的建设中&#xff0c;无论是高楼大厦的拔地而起&#xff0c;还是高速公路的绵延铺展&#xff0c;物资都是最基础的要素之一。从钢筋水泥到施工机械&#xff0c;任何一种物资的管理不善都可能导致项目延误、成本超支&#xff0c;甚至质量问题。然而&a…...

编程日记 2025/7/29 7:18:03

Vue + Websocket播放PCM（base64转ArrayBuffer、 字符串转ArrayBuffer）

文章目录 引言I 音视频处理相关概念和APIII 案例:基于开源库 pcm-player方式播放借助MediaSource和Audio对象播放音频流。基于原生api AudioContext 播放操作III 格式转换js字符串转ArrayBufferbase64 转 ArrayBufferIV 解决pcm-player分片播放问题引言 需求： 基于webscoket传…...

编程日记 2025/7/29 5:11:31

华为防火墙技术基本概念学习笔记

1.防火墙概述 1.1防火墙与交换机、路由器对比 路由器与交换机的本质是转发&#xff0c;防火墙的本质是控制。 防火墙与路由器、交换机是有区别的。路由器用来连接不同的网络&#xff0c;通过路由协议保证互联互通&#xff0c;确保将报文转发到目的地;交换机则通常用来组建局域…...

编程日记 2025/7/29 7:06:20

Mesh路由组网

Mesh无线网格网络&#xff0c;多跳&#xff08;multi-hop&#xff09;网络&#xff0c;为解决全屋覆盖信号&#xff0c;一般用于家庭网络和小型企业 原理 网关路由器&#xff08;主路由&#xff0c;连接光猫&#xff09;&#xff0c;Mesh路由器&#xff08;子路由&#xff0c;…...

编程日记 2025/7/29 7:10:17

【数据结构】七种常用排序总结

一、七种排序及其讲解 以下为七种排序的讲解&#xff1a; 【数据结构】插入排序——直接插入排序 和 希尔排序 【数据结构】选择排序——选择排序 和 堆排序 【数据结构】交换排序——冒泡排序 和 快速排序 【数据结构】归并排序 —— 递归及非递归解决归并排序 二、排序的…...

编程日记 2025/7/29 7:08:00

【在Linux世界中追寻伟大的One Piece】多线程(一)

目录 1 -> Linux线程概念 1.1 -> 什么是线程 1.2 -> 线程的优点 1.3 -> 线程的缺点 1.4 -> 线程异常 1.5 -> 线程用途 2 -> Linux线程 VS 进程 2.1 -> 线程和进程 2.2 -> 进程的多个线程共享 3 -> Linux线程控制 3.1 -> POSIX线程…...

编程日记 2025/7/29 7:23:28

《Python编程实训快速上手》第十天--处理CSV文件和JSON数据

CSV&#xff1a;简化的电子表格&#xff0c;被保存为纯文本文件 JSON&#xff1a;是一种数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成&#xff0c;以JavaScript源代码的形式将信息保存在纯文本文件中 一、csv模块 CSV文件中的每行代表电…...

编程日记 2025/7/29 7:11:52

基于springboot停车场管理系统源码和论文

如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统停车场管理系统信息管理难度大&#xff0c;容错率低&#xff0c;…...

编程日记 2025/7/28 18:35:52

Linux的桌面

Linux的桌面是可以卸载的 的确&#xff0c;Linux并不像Windows&#xff0c;Linux本身是一个基于命令行的操作系统&#xff0c;在内核眼中&#xff0c;桌面只不过是个普通的应用程序&#xff0c;所以&#xff0c;在Linux的桌面中可以完成的事情&#xff0c;命令行中也基本可以完…...

编程日记 2025/7/29 7:17:24

Spring Boot 3.0废弃了JavaEE，改用了Jakarta EE

Spring Boot 3.0废弃了JavaEE&#xff0c;改用了Jakarta EE 历史背景 javax变成Jakarta的主要原因是因为Java EE项目从Oracle转移到了Eclipse Foundation&#xff0c;并改名为Jakarta EE。 JavaEE是从Java 1.2版本开始推出的Java企业级开发平台&#xff0c;最初的名称是J2EE(J…...

编程日记 2025/7/22 19:56:03

java-排序算法汇总

排序算法&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09; 选择排序&#xff08;Selection Sort&#xff09; 插入排序&#xff08;Insertion Sort&#xff09; 快速排序&#xff08;Quick Sort&#xff09; 归并排序&#xff08;Merge Sort&#xff09; 堆排序&…...

编程日记 2025/7/29 7:21:08

C0030.Clion中运行提示Process finished with exit code -1073741515 (0xC0000135)解决办法

1.错误提示 2.解决办法 添加环境变量完成之后&#xff0c;重启Clion软件&#xff0c;然后就可以正常调用由mingw编译的opencv库了。...

编程日记 2025/7/29 7:12:40

如何理解JS的 异步

JS是一门单线程的语言&#xff0c;这是因为它运行在浏览器的渲染主线程中&#xff0c;而渲染主线程只有一个。 而渲染主线程承担着诸多的工作&#xff0c;渲染页面、执行JS都在其中运行。 如果使用同步的方式&#xff0c;就极有可能导致主线程产生阻塞&#xff0c;从而导致消…...

编程日记 2025/7/29 7:07:20

vsgithub

VS&GitHub项目联动&#xff08;上传和克隆&#xff09;&#xff0c;创建你的第一个仓库&#xff0c;小白配置_vs上传代码到github-CSDN博客...

编程日记 2025/7/2 17:16:59

Android蓝牙架构，源文件目录/编译方式学习

Android 版本 发布时间 代号&#xff08;Codename&#xff09; Android 1.0 2008年9月23日 无 Android 1.1 2009年2月9日 Petit Four Android 1.5 2009年4月27日 Cupcake Android 1.6 2009年9月15日 Donut Android 2.0 2009年10月26日 Eclair Android 2.1 2…...

编程日记 2025/7/25 17:52:48

10 - Clickhouse集群部署以及副本和分片

目 一、副本 1、简介 2、副本写入流程 3、副本配置步骤 3.1、启动zookeeper集群 3.2、在 hallo100 的/etc/clickhouse-server/config.d 目录下创建一个名为metrika.xml 的配置文件,内容如下&#xff1a; 3.3、在 hallo100 的/etc/clickhouse-server/config.xml 中增加如…...

编程日记 2025/7/16 4:21:54

FreeRTOS的软件定时器与事件标志组

目录 1.FreeRTOS软件定时器 1.1 什么是FreeRTOS软件定时器&#xff1f; 1.2 学习软件定时器的意义 1.3 软件定时器的简介 1.3.1 软件定时器概述 1.3.2 编写回调函数的注意事项 1.4 定时器服务/Daemon 任务 1.4.1 定时器服务任务与队列 1.4.2 定时器相关配置 configUSE_T…...

编程日记 2025/7/27 0:47:27

生产制造领域的多元化模式探索

在当今全球化和信息化的时代背景下&#xff0c;生产制造领域正经历着前所未有的变革。随着消费者需求的多样化、市场竞争的加剧以及技术的不断进步&#xff0c;传统的生产制造模式已经难以满足现代企业的需求。因此&#xff0c;多种生产制造模式应运而生&#xff0c;以适应不同…...

编程日记 2025/7/23 21:32:08

大数据技术之SparkCore

RDD概述 什么是RDD RDD&#xff08;Resilient Distributed Dataset&#xff09;叫做弹性分布式数据集&#xff0c;是Spark中最基本的数据抽象。代码中是一个抽象类&#xff0c;它代表一个弹性的、不可变、可分区、里面的元素可并行计算的集合。 RDD五大特性 RDD编程 RDD的创…...

编程日记 2025/7/28 23:00:36

element-plus的组件数据配置化封装 - table

目录 一、封装的table、table-column组件以及相关ts类型的定义 1、ATable组件的封装 - index.ts 2、ATableColumn组件的封装 - ATableColumn.ts 3、ATable、ATableColumn类型 - interface.ts 二、ATable、ATableColumn组件的使用 三、相关属性、方法的使用以及相关说明 1. C…...

编程日记 2025/7/27 17:38:13

蓝桥杯每日真题 - 第15天

题目&#xff1a;&#xff08;钟表&#xff09; 题目描述&#xff08;13届 C&C B组B题&#xff09; 解题思路&#xff1a; 理解钟表指针的运动&#xff1a; 秒针每分钟转一圈&#xff0c;即每秒转6度。 分针每小时转一圈&#xff0c;即每分钟转6度。 时针每12小时转一圈…...

编程日记 2025/7/17 8:51:55

c#:winform调用bartender实现打印（学习整理笔记）

效果 学习路径 C# winform调用Bartender进行自定义打印、批量打印、检索文件夹中的模板_哔哩哔哩_bilibili 一、初始环境搭建见&#xff1a; c#:winform引入bartender-CSDN博客https://blog.csdn.net/weixin_46001736/article/details/143989473?sharetypeblogdetail&s…...

编程日记 2025/7/28 21:43:29

周期法频率计的设计

目录 周期法频率计 分析&#xff1a; 设计过程&#xff1a; 周期法频率计 对于低频信号&#xff0c;应用周期法进行测频。周期法测频的基本原理是&#xff1a;应用标准频率信号统计被测信号两个相邻脉冲之间的脉冲数&#xff0c;然后通过脉冲数计算出被测信号的周期&#xff…...

编程日记 2025/7/28 23:29:46

【2024亚太杯亚太赛APMCM C题】数学建模竞赛｜宠物行业及相关产业的发展分析与策略｜建模过程+完整代码论文全解全析

第一个问题是&#xff1a;请基于附件 1 中的数据以及你的团队收集的额外数据&#xff0c;分析过去五年中国宠物行业按宠物类型的发展情况。并分析中国宠物行业发展的因素&#xff0c;预测未来三年中国宠物行业的发展。 第一个问题&#xff1a;分析中国宠物行业按宠物类型的发展…...

编程日记 2025/7/26 9:16:08

uniapp的renderjs使用

‌uniapp中的RenderJS主要服务于APP和H5平台&#xff0c;其作用包括降低逻辑层和视图层的通讯损耗&#xff0c;提供高性能视图交互能力&#xff0c;以及在视图层操作DOM和运行Web的JS库‌。 RenderJS是uni-app中一个特性&#xff0c;它允许开发者在页面中使用JavaScript直接渲…...

编程日记 2025/7/25 4:48:06

CPU命名那些事

一、Intel CPU命名 1. 命名结构 Intel CPU 的命名通常包含以下几个部分&#xff1a; 品牌 产品线 系列 代数 具体型号 后缀 例如&#xff1a;Intel Core i7-13700K 2. 各部分含义 品牌 Intel&#xff1a;表示厂商&#xff08;几乎所有命名中都有&#xff09;。不同品…...

编程日记 2025/7/26 4:23:52

【LLM】一文学会SPPO

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…...

编程日记 2025/7/28 17:17:20

鸿蒙多线程开发——线程间数据通信对象03(sendable)

1、简 介 在传统JS引擎上&#xff0c;对象的并发通信开销的优化方式只有一种&#xff0c;就是把实现下沉到Native侧&#xff0c;通过Transferable对象的转移或共享方式降低并发通信开销。而开发者仍然还有大量对象并发通信的诉求&#xff0c;这个问题在业界的JS引擎实现上并没…...

编程日记 2025/7/26 17:36:00

web前端开发--动画效果

1、3D旋转 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>3D旋转</title><style type"text/css">div{/*设置大盒子样式*/width: 100px;height: 100px;/*background-color: rgba(255,0,0,0.5);*/ba…...

编程日记 2025/7/26 14:05:34

【数据分享】中国价格统计年鉴（2013-2024） PDF

数据介绍 犹如一座珍贵的宝库&#xff0c;全面而系统地记录了中国在这一时期的价格变动情况。它涵盖了丰富的内容&#xff0c;包括宏观经济指标、商品价格、居民消费价格以及城市物价监测等多个方面。 在宏观经济指标方面&#xff0c;年鉴中收录了 GDP、CPI、PPI 等重要数据&…...

编程日记 2025/7/22 20:33:09

鸿蒙NEXT开发案例：字数统计

【引言】 本文将通过一个具体的案例——“字数统计”组件&#xff0c;来探讨如何在鸿蒙NEXT框架下实现这一功能。此组件不仅能够统计用户输入文本中的汉字、中文标点、数字、以及英文字符的数量&#xff0c;还具有良好的用户界面设计&#xff0c;使用户能够直观地了解输入文本…...

编程日记 2025/7/25 3:47:42

TritonServer中加载模型，并在Gunicorn上启动Web服务调用模型

TritonServer中加载模型，并在Gunicorn上启动Web服务调用模型 一、TritonServer中加载模型1.1 搭建本地仓库1.2 配置文件1.3 服务端代码1.4 启动TritonServer二、Gunicorn上启动Web服务2.1 安装和配置Gunicorn2.2 启动Gunicorn三、调用模型四、性能优化与监控五、总结在深度学习…...

编程日记 2025/7/28 23:27:41

[UE5学习] 一、使用源代码安装UE5.4

一、简介 本文介绍了如何使用源代码安装编译UE5.4&#xff0c;并且新建简单的项目&#xff0c;打包成安卓平台下的apk安装包。 二、使用源代码安装UE5.4 注意事项&#xff1a; 请保证可以全程流畅地科学上网。请保证C盘具有充足的空间。请保证接下来安装下载的visual studi…...

编程日记 2025/7/23 22:09:15

2023AE软件、Adobe After Effects安装步骤分享教程

2023AE软件是一款由Adobe公司开发的视频编辑软件&#xff0c;也被称为Adobe After Effects。它在广告、电影、电视和网络视频等领域广泛应用&#xff0c;用于制作动态图形、特效、合成和其他视觉效果。该软件支持多种视频和音频文件格式&#xff0c;具有丰富的插件和预设&#…...

编程日记 2025/7/23 22:32:29

Xilinx 7 系列 FPGA的各引脚外围电路接法

Xilinx 7系列FPGA的外围电路接法涉及到多个方面&#xff0c;包括电源引脚、时钟输入引脚、FPGA配置引脚、JTAG调试引脚&#xff0c;以及其他辅助引脚。 本文参考资料&#xff1a; ds180 - 7 Series FPGAs Data Sheet - Overview ds181 - Artix 7 FPGAs Data Sheet - DC and AC…...

编程日记 2025/7/27 1:32:00

【LeetCode热题100】队列+宽搜

这篇博客是关于队列宽搜的几道题&#xff0c;主要包括N叉树的层序遍历、二叉树的锯齿形层序遍历、二叉树最大宽度、在每个数行中找最大值。 class Solution { public:vector<vector<int>> levelOrder(Node* root) {vector<vector<int>> ret;if(!root) …...

编程日记 2025/7/26 15:24:53

＜Sqlite＞＜websocket＞使用Sqlite与websocket，实现网页端对数据库的【读写增删】操作

前言 本文是在websocket进行通讯的基础，添加数据库进行数据的存储，数据库软件使用的是sqlite。 环境配置 系统：windows 平台：visual studio code 语言：javascript、html 库：nodejs、sqlite 概述 此前，我们实现在利用websocket和socket，将网页端与下位控制器如PLC进行…...

编程日记 2025/7/28 21:19:08

summernote富文本批量上传音频,视频等附件

普通项目,HTML的summernote富文本批量上传音频,视频等附件(其他附件同理) JS和CSS的引入 <head><th:block th:include"include :: summernote-css" /> </head> <body><th:block th:include"include :: summernote-js" /> …...

编程日记 2025/7/25 1:20:37

第六十五周周报 UP2ME

文章目录 week 65 UP2ME摘要Abstract1. 题目2. Abstract3. 文献解读3.1 Introduction3.2 创新点 4. 网络结构4.1 单变量预训练4.1.1 样例生成4.1.2 掩码自动编码器预训练4.1.3 即时反应模式 4.2 多元微调4.2.1 稀疏依赖图构造4.2.2 时域频道层 5. 实验结果6. 结论7. 部分关键代…...

编程日记 2025/7/28 15:04:53

Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容）

Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容） 目录 Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容） 一、简单介绍 二、实现原理 三、注意事项 四、案例简单步…...

编程日记 2025/7/3 2:55:12

【STM32】MPU6050简介

文章目录 MPU6050简介MPU6050关键块带有16位ADC和信号调理的三轴MEMS陀螺仪具有16位ADC和信号调理的三轴MEMS加速度计I2C串行通信接口 MPU6050对应的数据手册&#xff1a;MPU6050 陀螺仪加速度计 链接: https://pan.baidu.com/s/13nwEhGvsfxx0euR2hMHsyw?pwdv2i6 提取码: v2i6…...

编程日记 2025/7/24 17:13:20

学习日记_20241123_聚类方法（MeanShift）

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…...

编程日记 2025/7/28 2:16:20

Qt常用控件 按钮

文章目录 1. QAbstractButton 简介2. QPushButton2.1 例子1&#xff0c;设置按钮的图标2.2 例子2&#xff0c;设置按钮快捷键 3. QRadioButton3.1 介绍3.2 例子1&#xff0c;选择性别3.3 例子2&#xff0c;试试其他的信号3.3 例子3&#xff0c;分组 4. QCheckBox4.1 介绍4.2 例…...

编程日记 2025/7/27 23:32:47