dabaooooq的博客

原创 爬楼梯（动态规划）

摘要：爬楼梯问题要求计算爬到第n阶台阶的方法数，每次可爬1或2阶。采用动态规划解法，定义dp[i]表示到第i阶的方法数。基本情况为dp[0]=1和dp[1]=1。递推关系为dp[i]=dp[i-1]+dp[i-2]，因为到达第i阶可从i-1阶爬1步或i-2阶爬2步。该方法时间复杂度O(n)，空间复杂度O(n)。代码实现初始化数组后，通过循环计算dp[n]并返回结果。

原创 有效的括号（栈）

摘要： 题目要求判断由括号组成的字符串是否有效，即括号需正确闭合且顺序匹配。解法采用栈结构：遍历字符串，左括号入栈；遇到右括号时检查栈顶是否匹配，匹配则弹出栈顶，否则无效。最终栈为空则有效。时间复杂度O(n)，空间复杂度O(n)。代码使用数组模拟栈，通过循环和条件判断实现验证逻辑。

原创 动态规划算法

动态规划是一种通过分解问题为重叠子问题并存储子问题解来提高效率的算法思想。其核心特征包括：最优子结构（整体最优解由局部最优解组成）、重叠子问题（子问题被反复计算）和无后效性（未来状态仅依赖当前状态）。本文通过爬楼梯和最大子数组和两个实例详细说明动态规划的实现步骤：定义状态、初始状态、状态转移方程及JS实现方式（递归+记忆化/迭代优化）。动态规划适用于具有重叠子问题和最优子结构特征的问题，如最值、计数和存在性问题。

原创 最大子数组和（动态规划）

Kadane算法通过动态规划思想高效求解最大子数组和问题。算法维护两个变量：当前子数组和sum和最大和ans。遍历数组时，若sum>0则继续累加当前元素（说明当前子数组有增益效果），否则重置sum为当前元素。每次迭代更新ans为最大值。该算法时间复杂度O(n)，空间复杂度O(1)，能处理含负数的数组。例如数组[-2,1,-3,4,-1,2,1,-5,4]的最大子数组和为6。核心思想是仅保留对后续有贡献的子数组，体现了贪心与动态规划的结合。

原创 ImageBitmap 将图像数据转换为GPU可用的纹理

摘要： ImageBitmap是一种高性能位图图像对象，支持异步解码和直接渲染到Canvas/WebGL，避免主线程阻塞。相比传统Image对象，它通过createImageBitmap()从Blob、ImageData等源创建，支持裁剪、缩放等选项，适用于WebGL纹理上传、WebWorker图像处理及高效Canvas绘制。需注意手动调用.close()释放内存，并考虑浏览器兼容性。其核心优势在于低延迟解码与GPU高效交互，是图形密集型应用的理想选择。

原创 不同电脑GPU的配置执行着色器代码的情况分析

本文介绍了查看电脑GPU配置的方法和不同GPU类型的性能特点。通过任务管理器可查看GPU信息，其中GPU0通常是核显，GPU1是独显。文章对比了高端独显、集成显卡和CPU软件渲染三种方式的性能差异：独显适合游戏和专业渲染，核显能满足日常办公需求，而CPU软件渲染效率极低且功能受限。最后指出，集成显卡可正常执行着色器但性能较差，完全无GPU时需通过软件模拟，但会严重影响运行效率。

原创 前端实时渲染性能优化 使用cocoRLE编码进行图像传输并着色绘制

摘要 针对实时绘制mask图像的性能优化问题，本文提出采用COCO RLE编码方案替代传统像素遍历方法。该方案通过二值掩码和行程编码(RLE)显著减少存储空间，解码时可直接赋值颜色而无需完整存储像素数组。文章详细介绍了从Base64编码的COCO RLE字符串到最终图像数据的完整解码流程，包括核心解码函数、RLE字符串解析、掩码数组转换等关键步骤。实验结果表明，该方法有效解决了实时渲染场景中因CPU满载导致的卡顿和延迟问题，大幅提升了渲染流畅性和用户体验。相比传统像素遍历方案，COCO RLE编码在内存占用

原创 Pixijs shader 传入多张图片到片段着色器的方法

pixijs shader 传入多张图片到片段着色器的方法。

原创 前端本地存储数据库IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。意思就是IndexedDB主要用来客户端存储大量数据而生的，我们都知道cookie、localstorage等存储方式都有存储大小限制。

原创 模型优化——在MacOS 上使用 Python 脚本批量大幅度精简 GLB 模型（通过 Blender 处理）

本文介绍了一种使用Blender和Python脚本批量优化GLB模型文件的方法。通过配置Blender环境变量并运行Python脚本，可以实现自动批量处理：将纹理转换为JPEG格式（质量设为30）、启用文件压缩功能，从而显著缩小模型体积（可减少50%-90%）。脚本支持递归处理子目录中的GLB文件，并生成处理报告，包括成功/失败数量及平均体积缩减比例。该方法无需人工干预即可完成模型优化，特别适合需要批量处理大量3D模型的场景。

原创 Python脚本批量将usdz文件转为glb文件

摘要：本文介绍了一个基于Python和Blender的USDZ转GLB批量转换脚本。该脚本提供两种转换模式：单个文件转换(convert_usdz_to_glb)通过清空Blender场景后导入USDZ再导出GLB；批量处理(batch_convert)递归扫描目录并保持原始目录结构。脚本包含成功/失败统计功能，支持不应用变换的原始数据导出。使用时需配置输入/输出路径，自动处理子目录结构并生成转换报告。该工具适合需要保持3D模型原始属性的格式转换需求。

原创 Three.js 直线拐角自动圆角化（圆弧转弯）

本文介绍了使用三点法绘制圆弧的计算过程。首先通过p1-p2和p3-p2两个向量确定角平分线方向，计算圆心坐标需要确定夹角和半径。关键步骤包括：计算两向量夹角、圆心到交点距离L=R/sin(θ/2)、确定圆心位置。还涉及垂足计算、与x轴夹角修正，以及通过向量叉乘判断绘制方向（顺时针/逆时针）。最后指出多圆弧应用中需注意特殊情况处理，如直线情况（夹角0°或180°）无需绘制圆弧。整个过程基于向量运算和几何原理，适用于WebGL等图形系统。

原创 Threejs 透明模型渲染嵌套以及深度测试解决共存问题

透明模型嵌套渲染问题可通过调整深度测试或渲染顺序解决。当两个透明模型嵌套时，距离相机更近的内部模型可能因深度测试被舍弃。解决方案包括：禁用外部模型写入深度缓冲区、内部模型禁用深度测试，或通过three.js的renderOrder强制改变渲染顺序。透明模型默认从后向前渲染，而renderOrder可在组内自定义绘制顺序，确保正确显示嵌套的透明结构。实验表明，调整渲染顺序或深度测试能有效恢复内部模型的可见性。

原创 3d世界坐标系转屏幕坐标系

文章摘要：介绍了坐标转换的三个关键步骤：从世界坐标到NDC标准设备坐标，再到屏幕坐标。重点讲解了.project方法如何将世界空间向量投影到相机的标准化设备坐标(NDC)空间，并提出了手动实现HTML元素定位到模型位置的方法，以达到模型标签效果，其原理与css2Render类似。（98字）

原创 Threejs 物体碰撞检测

本文介绍了使用光线投射(Raycaster)检测3D物体碰撞的方法。核心思路是从物体A中心向其所有顶点发射射线，通过比较射线与物体B的交点距离和顶点到中心的距离来判断是否相交。具体实现步骤包括：获取物体中心坐标和顶点位置，计算射线方向向量并进行归一化处理，检测射线与目标物体的交点，最后通过比较交点距离与顶点距离确定碰撞状态。代码示例展示了如何遍历物体顶点、计算世界坐标、执行光线投射并返回碰撞检测结果。该方法适用于精确的3D物体碰撞检测场景。

原创 微信小程序中使用 多线程 Worker

Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。Worker 与主线程之间的数据传输，双方使用来发送数据，来接收数据，传输的数据并不是直接共享，而是被复制的。

原创 WebGLRenderTarget(离屏渲染)

从原生WebGL的角度阐述，就是渲染结果的RGBA像素值存储到了GPU一个自定义的帧缓冲区中，屏幕默认不会直接读取该缓冲区中的像素数据，通过WebGL的特定API可以获取，更多的信息可以百度WebGL或OpenGL离屏渲染

原创 xr-frame 优化ar相机中加载模型效果

/组件生命周期：在视图层布局完成后执行ready() {//在小程序中同步获取系统信息//获取屏幕的宽度（单位为物理像素）//获取屏幕的高度（单位为物理像素）//设备像素比，即物理像素与逻辑像素之间的比率width,height,renderWidth: width * dpi * this.data.dpiScale,//与dpi，this.data.dpiScale相乘将逻辑像素转换为物理像素，同时考虑了 dpiScale影响因子});},

原创 计算机网络 TCP/IP参考模型

目录TCP IP模型预览OSI和TCP的相同点OSI和TCP的不同点层参考模型层参考模型的数据封装与解封装

原创 计算机网络 OSI参考模型

目录OSS七层 OSI通信过程1OSI通信过程2应用层 表示层会话层 传输层网络层数据链路层物理层

原创 计算机网络 分层、协议、接口、服务

原创 记录一下小程序支付业务提交代码审核时遇到的一些问题

2 如果ui无祝福含义，单纯虚拟支付：虚拟支付是除小游戏类目的安卓内购功能，开发者在iOS系统上提供的虚拟商品，不能展现任何有购买、支付的功能、页面、按钮，即使实际上它们都不可使用；也不得引导至外部网站或APP来实现支付功能。由于公司业务需要做ar类的祈福类型虚拟支付，付钱后可以在小程序端体验ar类的祈福效果，但在实际的业务场景中遇到了种种卡脖子的现象，特此记录！1 不支持祝福支付，目前没有开放对应类目，不支持发布。

原创 微信小程序禁止页面上下滑动的三个方式

在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json中添加disableScroll，会导致所有页面无法上下滑动，这就是个大bug了，解决也很简单，你想在那个页面禁止页面滑动，就在哪个页面的json下，添加disableScroll就可以了，单独设置就行！但是有些时候使用disableScroll并不合适，比如一个长页面，我需要弹窗出来的时候，才禁止上下滑动，弹窗隐藏的时候，又可以上下滑动！此方法呢，比较麻烦，写的代码比较多！

原创 xr-frame 用cube代替线段实现两点间的连线

/ line});// 加到场上});

原创 【线性代数的理解】 为什么说线性代数研究的是空间变换？旋转矩阵坐标转换矩阵

下面看矩阵乘法为何是不可交换的？注：1.1和2的过程，假如结果一样，就认同矩阵乘法可交换，假如结果不一样，就认为矩阵乘法不可以交换，即不满足交换律。2.矩阵的乘法虽然没有交换律，但是有结合律，简而言之，就是满足就近原则。注：1.2.对于一个几何图形而言，先旋转后拉伸和先拉伸后旋转效果一般是不会一样的。空间变换的两种特殊情况：情况1：空间变换的矩阵中有负值：情况2：空间变换的行列式等于0.

原创 xr-frame 3D Marker识别，扬州古牌坊 3D识别技术稳定调研

为提高Marker质量，保证算法识别效果，可参考Marker规范文档。目前仅允许通过 小程序示例 的。

原创 小程序Three Dof识别 实现景区AR体验

代码工程 https://gitcode.com/dabaooooq/threedof

原创 Threejs 解析几何体提取顶点数据流程

解析几何体对象，提取顶点数据，然后调用WebGL API创建顶点缓冲区，并把创提取的顶点数据传入创建的顶点缓冲区。解释Three.js渲染器是如何解析场景和渲染器对象的，也就是Threejs如何解析几何体并创建相应的顶点缓冲区。Three.js渲染器解析几何体对象，会从几何体对象提取顶点数据传入WebGL顶点缓冲区的时候，如果解析的是对象，直接访问属性提取顶点数据就可以，比如获得顶点位置数据，通过获得顶点数据。如果Three.js渲染器解析的几何体是Geometry对象，会先把Geometry对象转化为。

原创 Three.js 材质对象Material对应的着色器Shader代码

着色器代码文件目录是，shaders目录下有两个着色器代码的文件ShaderChunk和ShaderLib。ShaderChunk目录下的着色器代码文件.glsl都是具有特定功能的模块，ShaderLib目录下的着色器文件会通过#include <ShaderChunk中着色器文件名>调用ShaderChunk目录下特定功能的着色器代码块构建出来具有具有特定功能的顶点着色器文件和片元着色器文件。

原创 WebGL 渲染器 WebGLRenderer

帧缓冲区包含颜色缓冲区、深度缓冲区、模板缓冲区，颜色缓冲区存储片元的颜色数据，也就是像素数据，深度缓冲存储片元的深度数据，用于WebGL渲染流程中的深度测试环节，被遮挡的片元会被剔除，不会显示在canvas画布上。属性，可以把Three.js的canvas画布插入到html任何一个元素中，可以在整个body页面上全局显示，也可以插入一个div元素中局部显示，注意canvas画布尺寸设置。Three.js渲染器默认情况下，本次执行render方法之前，会把上次执行render方法后帧缓冲区中的数据清除。

原创 Three.js包围盒

包围盒是一种计算一系列顶点最优包围空间的算法，比如一个不规则几何体的所有顶点坐标都被包围在一个最小的长方体盒子中，需要一个算法来求解这个最小的长方体包围盒。Three.js封装与包围盒算法相关的三个API，分别是三维包围盒Box3、包围球Sphere、包围矩形Box2。

原创 微信小程序禁止页面上下滑动的三个方式

在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json中添加disableScroll，会导致所有页面无法上下滑动，这就是个大bug了，解决也很简单，你想在那个页面禁止页面滑动，就在哪个页面的json下，添加disableScroll就可以了，单独设置就行！代码如下：//弹窗遮罩层。但是有些时候使用disableScroll并不合适，比如一个长页面，我需要弹窗出来的时候，才禁止上下滑动，弹窗隐藏的时候，又可以上下滑动！

原创 计算机网络 性能指标相关

目录吞吐量时延 时延带宽积往返时延RTT利用率

原创 计算机图形学 通过叉乘判断一个点是否在三角形内

判断一个点是否位于三角形内可以使用多种方法，其中一种较为直观且常用的方法是利用向量的叉乘。叉乘的方法基于向量的方向来判断，如果一个点在三角形内部，那么从该点到三角形每个顶点的向量与三角形边的向量的叉乘方向应该是相同的（亦即，这些叉乘向量的方向保持一致性，要么全部向内，要么全部向外）。

原创 Three.js 中实现自定义光圈 Shader 效果

Three.js 是一个功能强大的 WebGL 库，它让开发者能够轻松地创建复杂的 3D 场景、动画和交互效果。然而，有时候内置的材质和效果无法满足项目的特定需求。在这种情况下，我们可以通过使用自定义着色器来实现独特的视觉效果。Three.js 与自定义着色器的基础知识在 Three.js 中，自定义着色器是通过实现的。允许你完全控制顶点着色器和片段着色器的行为。顶点着色器（Vertex Shader）：负责处理每个顶点的位置。片段着色器（Fragment Shader）：负责为每个像素计算颜色。

原创 Three.js 后期处理（Post-Processing）详解

在使用 Three.js 创建 3D 场景时，后期处理（Post-Processing）是一个不可忽视的环节。它通过对渲染结果进行额外的处理，可以极大地提升场景的视觉效果，使画面更具吸引力和表现力。后期处理。

原创 高等数学：映射与函数

目录映射函数定义函数特性

原创 xr-frame 模型摆放与手势控制，支持缩放旋转

【代码】xr-frame模型摆放与手势控制，支持缩放旋转。

原创 Threejs 自定义片元着色器 做UV动画

【代码】Threejs 自定义片元着色器 做UV动画。

原创 xr-frame 通过shader去除视频背景色，加载透明视频

实现了一个用于注册自定义效果（Effect）的 代码，用于 xr-frame框架中。这个效果的核心功能是去除场景中的黑色部分，或者说是对视频纹理进行处理实现思路获取 XR 框架系统// 自定义效果的实现});使用方法注册了一个名为的自定义效果。这个效果会在指定的场景中生效。