Pretext深度解析
https://github.com/chenglou/pretext !Pretext 学习从隐藏结构到表征的机制
#Three.js
共 45 篇文章。
浏览器渲染性能优化
在高性能前端开发（尤其是涉及 WebGL、大量 DOM 标注的场景）中，理解浏览器的渲染流水线（Rendering Pipeline）是性能优化的基石。本文将结合实战案例，深入探讨如何利用渲染逻辑和 Chrome DevTools 解决页面卡顿问题。
MediaPipe学习笔记
在现代 Web 开发中，交互方式早已不局限于鼠标和键盘。随着计算机视觉技术的进步，特别是 Google MediaPipe 的出现，我们可以在浏览器中以极低的延迟实现人脸追踪、手势识别等高级功能。
元框架-ECharts
你不是在“学习如何配置”，你是在“学习一个用来描述图表的领域特定语言（DSL）的语法和语义”。
如何突破前端发展的困境
前端不会突然消失，但只会堆页面、追框架的人会越来越被动。更现实的出路，是把业务问题往架构、组件、工具和可衡量价值上推。
技术拆解-PacificVis2025的状态管理与事件机制
本文档分析了 Pacific Vis 2025 可视化项目中使用的状态管理和事件系统模式，并将其与传统的 Flux/Redux 架构模式进行比较。
技术拆解-Recharts
这篇最有价值的地方，是用源码证据把 Recharts 的架构讲清楚：它更像一个 Redux 驱动的可组合声明式图表库，而不是一个可以随手套上“微内核”名词的系统。
可视化项目架构分析
常规的前端开发，大家借助 Vue/React 等框架，可以极大的提升开发效率和质量，这些框架本身就融入了前端的架构设计在里面，也就是定义了一套程序设计的原则和约束，因此才能保证非功能需求的质量。
混合架构-基于D3.js的程序设计
这篇是一次 D3 代码整理。原来的时间线代码把数据处理、路径生成、样式设置、事件绑定都塞在一个类里，写第一版很快，但后面加交互、换主题、做测试都会慢下来。
前端裁剪-Clip
本文汇总 Web 前端可用的裁剪技术、实现原理、特点对比、典型应用场景与代码示例，便于在实际需求中快速选型与落地。
数据可视化组件库的架构模式
这篇把问题从“图表怎么画”往前推了一层。做组件库时，真正先决定的是用户是谁、API 长什么样、渲染层怎么抽、扩展机制要不要开放。
InversifyJS重构3D项目
Pacific Vis 2025 是一个基于 Three.js 的复杂数据可视化项目，用于展示全球女性投资者相关的社会经济数据。随着项目复杂度的增长，我们面临着严重的架构问题：循环依赖、手动依赖管理、模块间耦合度过高等。本文将分享我们引入 InversifyJS 进行重构的真实经验，包括具体的代码对
从J2EE思考可视化的基建该如何建设
在当今数据驱动的时代，可视化系统已成为企业决策和用户体验的核心组成部分。然而，构建一个健壮、可扩展的可视化平台并非易事。本文将借鉴J2EE（Java 2 Platform, Enterprise Edition）的架构思想，探讨如何构建现代化的可视化基础设施。
如何设计一个前端组件库
这篇不是在说“封装几个组件”。我真正想拆的是：一个可视化组件库怎么跨框架使用，怎么同时支持 CDN 和 npm，怎么按需加载，组件销毁时怎么把事件、动画和资源清理干净。
Vibe Coding Experience Summary
Recently, in my development work, I have extensively used Vibe Coding, continuously engaging in a demand-feedback-correction cycle with AI IDEs. Durin
FFCreator学习笔记
一些registry.m.jd.com的包报502，但是没管也能继续跑。 ## 依赖 Node版本：v18 ## 技术拆解
AI浪潮下开发模式的变革
AI 浪潮正在改变软件开发模式，为开发者带来新的机遇和挑战。本文通过实际工作案例讲述了 AI 对个人开发工作的影响，以及 AI 时代下产品开发模式的变革，并分析了大模型时代程序员与 AI 工具的定位，希望能帮助开发人员提前布局，抓住新一轮发展机遇。
技术拆解-3D生长树
此代码实现了一个 3D 生长树效果，使用 Three.js（7.1 版本）进行 3D 渲染。主要思路分为以下几个部分：
3D项目开发流程
以这次的3D关系图为例，我发现做的时候比较迷茫，缺乏一个流程指引。
Three.js-3D关系可视化
这次的文本就是用的CSS2DObject绘制的，事件绑定需要这样处理：
Three.js-GPU拾取
Three.js中常用的处理用户交互的方式，是RayCaster，这是CPU拾取方案。
Three.js-WebGLRenderer
Three.js是通过WebGLRenderer渲染场景的，因此只要把WebGLRenderer的每一个概念和属性搞清楚，做出Demo查看其影响范围，就能把如何调试渲染效果给掌握了。
Three.js-汽车产业链
比如我之前做的质检扫光小飞机、React的汽车Demo里面的发光圆环等，都是起到的这个效果。
Three.js-描边
这是我们初始想到的办法，实际上并不合适，性能差，效果也达不到预期。
Vue3学习笔记
写代码也更倾向于函数式编程，减少了状态的随意传递，后续维护性会更好一些。
Three.js-体积光
参考自这个文章。
现代化开发模式
之所以问这2个问题，是因为就我观察到，公司目前大部分前端开发人员，都是在做体力活，陷入了无尽的业务开发中。这些低效的工作浪费了大家大量的时间。
关于可视化技术选型的思考
最近给海外组做图解财报的3D组件，陆陆续续耗费了我不少时间，但是最终回头来看，这个需求实际上可能只需要1天就能搞出来。究其原因，在于我的技术方案选型上，误入歧途了。
GLSL学习笔记
WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL只需要给它提供这两个东西。 你需要提供两个着色器来做这两件事：
Three.js-性能优化
最近做了一个集群目标策略的3D可视化项目，前面花了2周时间出了个Demo来进行演示，性能极差，在我的i7-12700H+RTX2050的笔记本上，也会出现卡顿。后面这个还要迁移到移动端，性能问题就更严重了，因此借助解决这个需求的性能问题，把Three.js的性能优化方面的内容整理下，方便今后参考。
3D写实风格
https://www.zhihu.com/question/399445153/answer/1311717764
Three.js-Gallery
https://sketchfab.com/3d-models/sci-fi-girl-v02-walkcycle-test-07ac452d75cc47969234b224422ea85d
OpenGL学习笔记
名词部分，可以参考WebGL Fundamentals。
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 的最后两章，根本不用调试代码，很快就看过去并理解了。
可视化组件设计
应该先画图，有哪几个生命周期，每个阶段应该做什么，不应该做什么，把这个想清楚，形成原则，就是设计了，框架也就出来了。
跟月影学可视化
反思：我之前把可视化理解得太狭隘了，没有抓住本质；还是给自己找个老师(陈为、月影)更靠谱。
数据可视化的探索方向
我们团队被定义为A系列团队，即探索型团队，因此我们的年度目标和计划，肯定有很大一部分比重是需要投入到可视化探索中去的。那数据可视化有哪些方向可以探索呢？这是我们必须明确的一个问题。
数据可视化上半年总结与下半年计划
这个是最大的问题。方向不确定，感觉我们组就像浮萍一样，随波逐流，每一天都战战兢兢，如履薄冰。
2019读书计划
工作这么多年，一直都没有读书计划。今年因为一些工作上的原因，迫切的感觉到了读书的重要性，因此这里列下我的读书情况，等到年末回头再检验下。
ZRender学习笔记
注意，HTML 引入 dist 下的文件；如果遇到 TS 报错，设置@ts-ignore 即可。