dabaooooq的博客

原创 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 框架系统// 自定义效果的实现});使用方法注册了一个名为的自定义效果。这个效果会在指定的场景中生效。

原创 XR-frame实现文字渲染

【代码】XR-frame实现文字渲染。

原创 Threejs中使用A*算法寻路导航

【代码】Threejs中使用A*算法寻路导航。

原创 XR-Frame 实现 始终朝向屏幕（相机）的面片与模型

wxml，xr-frame中plane平面默认是趴在场景中的，需要先绕x轴渲染90度。在场景的ready事件中获取相机，模型，并注册tick请求动画帧事件。请求动画帧中，计算旋转四元数，更新模型朝向。

原创 XR-Frame 计算相机与场景物体的距离

另想要每帧实时去计算这个距离，可以在另想要每帧实时去计算这个距离，可以在scene的tick事件中操作。scene的tick事件中操作。

原创 Games101 透视投影矩阵推导

透视投影，从一个点往外延伸出来一个四棱锥，这个点就是相机，定义 远平面f 和 近平面n，透视投影视椎体的区别就在于它的远平面要比近平面更大，那么如何计算这个不规则的视体矩阵呢？将透视相机的Frustum挤压为正交相机的Cuboid；再用正交投影矩阵相乘与上方变换矩阵相乘，即可得到最终的透视投影矩阵

原创 Games101 正交投影矩阵推导

正交投影不管是远处还是近处，都是直接挤在屏幕上就好，它没有近大远小的效果。首先，把相机放在原点上，往-z方向看，上方向是y；这样摆放相机的好处是，把z坐标扔掉，得到的结果自然而然就是平面的上的一张图。将z扔掉后，所有的像素都在xy平面上了，不管xy的覆盖范围有多大，都给他移到 -1~1 * -1~1 的区间，此时就是正交投影的成像结果

原创 Three.js 性能监测工具 Stats.js

通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。stats.js下载链接：https://github.com/mrdoob/stats.js。

原创 WebGL画粗线

WebGL绘制模式有点、线、面三种；通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系；面就强大了，通过面，我们可以绘制我们想绘制的所有的三维对象。然而，WebGL在绘制线条的时候，存在一个缺陷，那就是在一些机器的一些浏览器上面（大多数情况下）线宽只能设置为1，而不能设置成其他的值。，可以测试自己的电脑是否可以绘制粗线可以看出，我的Chrome有这个 问题基本思路既然画线实现不了加粗，那就使用面来模拟粗线。

原创 Threejs（WebGL）绘制线段优化：Shader修改gl.LINES模式为gl.LINE_STRIP

场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......但是，这种方法会有一定代价。

原创 Threejs性能优化方向（底层）

一、使用交叉顶点数据：用一个数组交叉地保存顶点数据，而不是用独立的顶点数组保存不同的属性，会得到更好的性能，因为顶点数组具有更好的局部内存。例如，把顶点位置读入到变换前顶点缓存时，很可能会把该顶点的法线信息也读入到变换前的顶点缓存中，在需要时供顶点着色器使用。如下

原创 WebGL性能优化：退化三角形

第二个三角形带由(V5,V6,V7,)、(V7,V6,V8)这两个三角形组成,它们与元素数组缓存中最后位置的元素索引(5,6,7,8)相对应。首先是第-个三角形带的3个三角形，对应的索引分别为(0,1,2)、(2,1,3)和(2,3,4)。这种不连续性或两个三角形带间存在跳转的解决方法是插入额外的索引（如果使用gl.drawArrays()函数，则插入额外的顶点），这样就得到退化三角形，退化三角形是指三角形至少有两个索引（或顶点）是相同的，因此，存在面积为0的三角形，这样的三角形很容易被GPU检测并删除。