浏览器渲染性能优化
在高性能前端开发（尤其是涉及 WebGL、大量 DOM 标注的场景）中，理解浏览器的渲染流水线（Rendering Pipeline）是性能优化的基石。本文将结合实战案例，深入探讨如何利用渲染逻辑和 Chrome DevTools 解决页面卡顿问题。
#3D
共 49 篇文章。
MediaPipe学习笔记
在现代 Web 开发中，交互方式早已不局限于鼠标和键盘。随着计算机视觉技术的进步，特别是 Google MediaPipe 的出现，我们可以在浏览器中以极低的延迟实现人脸追踪、手势识别等高级功能。
2025年SeeConf参会记录
5 年前，偏右在做 Ant Design，现在他在探索 AI 工程和前端的职责边界。他将在 SEE Conf 2025 分享《AI for Frontend》。
ECharts配置的范式演进-从对象规约到意图驱动的系统性方法论
这篇不是抱怨 ECharts 配置项太多。真正的问题是，series、axis、grid、visualMap 这些东西的依赖都藏在一个 JSON 里，复杂图表一多，就像在维护一份隐式场景图。
如何突破前端发展的困境
前端不会突然消失，但只会堆页面、追框架的人会越来越被动。更现实的出路，是把业务问题往架构、组件、工具和可衡量价值上推。
技术拆解-PacificVis2025的状态管理与事件机制
本文档分析了 Pacific Vis 2025 可视化项目中使用的状态管理和事件系统模式，并将其与传统的 Flux/Redux 架构模式进行比较。
技术拆解-Recharts
这篇最有价值的地方，是用源码证据把 Recharts 的架构讲清楚：它更像一个 Redux 驱动的可组合声明式图表库，而不是一个可以随手套上“微内核”名词的系统。
weekly-summary-20251019
假设你要重构一个大型项目的代码： 1. 1. 第一步：让 Sonnet 4.5 分析整个项目架构，找出问题点，制定重构方案 2. 2. 第二步：让多个 Haiku 4.5 实例并行处理各个模块的具体重构 3. 3. 第三步：再让 Sonnet 4.5 做代码审查 这样一来，复杂的部分由最强的模型把关
可视化业务开发框架解析
一般是把2、3、4提出来做个链接，其目的是为了解决查询、管理问题，提高可维护性，可以理解为是一个微型数据库，算是个cache。
可视化项目架构分析
常规的前端开发，大家借助 Vue/React 等框架，可以极大的提升开发效率和质量，这些框架本身就融入了前端的架构设计在里面，也就是定义了一套程序设计的原则和约束，因此才能保证非功能需求的质量。
前端裁剪-Clip
本文汇总 Web 前端可用的裁剪技术、实现原理、特点对比、典型应用场景与代码示例，便于在实际需求中快速选型与落地。
数据可视化组件库的架构模式
这篇把问题从“图表怎么画”往前推了一层。做组件库时，真正先决定的是用户是谁、API 长什么样、渲染层怎么抽、扩展机制要不要开放。
InversifyJS重构3D项目
Pacific Vis 2025 是一个基于 Three.js 的复杂数据可视化项目，用于展示全球女性投资者相关的社会经济数据。随着项目复杂度的增长，我们面临着严重的架构问题：循环依赖、手动依赖管理、模块间耦合度过高等。本文将分享我们引入 InversifyJS 进行重构的真实经验，包括具体的代码对
从J2EE思考可视化的基建该如何建设
在当今数据驱动的时代，可视化系统已成为企业决策和用户体验的核心组成部分。然而，构建一个健壮、可扩展的可视化平台并非易事。本文将借鉴J2EE（Java 2 Platform, Enterprise Edition）的架构思想，探讨如何构建现代化的可视化基础设施。
如何设计一个前端组件库
这篇不是在说“封装几个组件”。我真正想拆的是：一个可视化组件库怎么跨框架使用，怎么同时支持 CDN 和 npm，怎么按需加载，组件销毁时怎么把事件、动画和资源清理干净。
Unreal-不同版本的特性
FFCreator学习笔记
一些registry.m.jd.com的包报502，但是没管也能继续跑。 ## 依赖 Node版本：v18 ## 技术拆解
weekly-summary-20241208
https://www.zhihu.com/question/5861691391
可视化开发和前端开发的区别
更注重抽象(Core)与扩展性(让业务方可以基于我们提供的 Core 机制，快速扩展自己的个性化需求)
AI浪潮下开发模式的变革
AI 浪潮正在改变软件开发模式，为开发者带来新的机遇和挑战。本文通过实际工作案例讲述了 AI 对个人开发工作的影响，以及 AI 时代下产品开发模式的变革，并分析了大模型时代程序员与 AI 工具的定位，希望能帮助开发人员提前布局，抓住新一轮发展机遇。
技术拆解-3D生长树
此代码实现了一个 3D 生长树效果，使用 Three.js（7.1 版本）进行 3D 渲染。主要思路分为以下几个部分：
前端的架构设计
https://www.zhihu.com/question/26646855/answer/68503768
3D项目开发流程
以这次的3D关系图为例，我发现做的时候比较迷茫，缺乏一个流程指引。
Three.js-3D关系可视化
这次的文本就是用的CSS2DObject绘制的，事件绑定需要这样处理：
Three.js-汽车产业链
比如我之前做的质检扫光小飞机、React的汽车Demo里面的发光圆环等，都是起到的这个效果。
可视化组件的状态管理
这里的交互指的并不一定是常规的鼠标交互行为，其代表的是我们将一种事物变更为另一种状态的行为，例如一个列表中文本的搜索、筛选高亮，交互则指的是搜索和筛选的这两种用户行为。
Vue3学习笔记
写代码也更倾向于函数式编程，减少了状态的随意传递，后续维护性会更好一些。
关于可视化技术选型的思考
最近给海外组做图解财报的3D组件，陆陆续续耗费了我不少时间，但是最终回头来看，这个需求实际上可能只需要1天就能搞出来。究其原因，在于我的技术方案选型上，误入歧途了。
GLSL学习笔记
WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL只需要给它提供这两个东西。 你需要提供两个着色器来做这两件事：
Three.js-性能优化
最近做了一个集群目标策略的3D可视化项目，前面花了2周时间出了个Demo来进行演示，性能极差，在我的i7-12700H+RTX2050的笔记本上，也会出现卡顿。后面这个还要迁移到移动端，性能问题就更严重了，因此借助解决这个需求的性能问题，把Three.js的性能优化方面的内容整理下，方便今后参考。
Three.js-Gallery
https://sketchfab.com/3d-models/sci-fi-girl-v02-walkcycle-test-07ac452d75cc47969234b224422ea85d
Weekly Summary(20220619)
咖啡有个生效过程，如果到了公司才喝，要等到一个小时之后才起效。因此应该起床后就喝。
OpenGL学习笔记
名词部分，可以参考WebGL Fundamentals。
数据可视化的设计方法
3、多挖掘数据之间的关联关系，用关系图/桑基图展示单个周期的数据之间的关系(关联、流向、强弱等等)
Unreal-学习笔记
房大佬说一个月就带着前端团队转UE开发了，这个是很可信的。二者本质上都是一样的。
牛逼的前端是什么样的
https://2022.stateofjs.com/zh-Hans/
Unity学习笔记
另外，Unity界面中的每个功能，都去试一下，比如各个导航栏、操控场景和界面等等，手熟了效率才高。
WebGL学习笔记
https://www.cnblogs.com/wanbo/p/6754066.html
技术拆解-3D饼图
https://threejs.org/docs/index.html?q=line#manual/en/introduction/Drawing-lines
如何正确的理解技术
这篇文章的起因是最近我在学 Three.js 的时候发现了一个现象：以前我看 Three.js 的书很懵，很多 3D 和图形学的概念看不懂；最近补了一些计算机图形学的基础知识后，回头再看 Three.js 的最后两章，根本不用调试代码，很快就看过去并理解了。
Weekly Summary(20210124)
2021 怎么走？还是这样肯定不行，得变更，得跳出舒适圈。
数据可视化的TOP10需求
这里的TOP10需求，是我们整个组的，不一定就是可视化相关的需求，因此提效方面的内容也是可以加进来的。
关于2020上半年工作汇报的思考
给基金团队带来多少帮助？ 给资讯团队带来了多少帮助？ 给 F10 带来了多少帮助？ 他们本来开发一个项目要多久，现在由于我的加入，需要多久？
weekly-summary-20200712
明确业务方向->明确需要什么样的人->明确需要多少人->明确招聘需求->干就是了！
Weekly Summary(20200322)
因为有所求，希望能快点搞定，早点回家。 这说明我自己想去做的事情，动力还是很足的。
Weekly Summary(20200216)
如何将自己这个项目做好，是我需要投入毕生精力去考虑的事情。
CSS学习笔记
记录一些常用的CSS技巧
我的压力来自何方
今年上半年是我工作以来，甚至可以说是有生以来，压力最大的半年。
Java部署运维问题
可以的，只是会报个错，这应该是之前的线程报的错误，不影响新部署的程序的使用：