相对于 2D 开发，3D 开发由于有大量的概念需要进行学习了解因此门槛较高，近期刚好针对 3D 图形渲染技术中的两种常见技术正向渲染和延迟渲染进行了简单的了解，在此做个简单的记录，另外通过了解这些概念的同时也对光照相关的知识有了更深入的了解。

在此之前，虽然已经进行了相当多的开发实践，但由于场景受限，一直对于 3D 开发中的光照技术应用的偏少，不过恰好近期在学习了解性能相关的知识，在了解到渲染这方面的知识概念时，才意识到光照在 3D 开发中的是一个非常重要的技术。

2023-03-04

终于有机会一览黄山的风采，也算是疫情三年以来第一次游览一座名山，顺便也去了宏村，领略徽式建筑的风采。

在日常工作中，经常被糟糕的项目进度控制和需求变更等因素搞得人身心俱疲，为了缓解这类问题，产品设计、程序设计、项目管理等多个环节都需要参考一些优秀的案例，而《设计原本》就针对设计过程进行了较为深入的探讨，在阅读过后发现其中一些概念是日常在用的，但没有意识到的，也有我们大多数人一直追求的理想状态被作者认为是不合理的，值得一读。

2023-01-25

疫情结束后的第一个春节，也是第一次春节假期出游，四天时间去了上海、苏州、杭州 3 个城市，领略了不同的风景。

通常，对于 Web 页面的交互处理中，尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的，但如果是普通对象呢？问题似乎变得复杂起来了，这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现，讨论一下在复杂场景中处理交互状态的设计方案，如何将命令式编码的复杂性通过声明式编码来降低，该怎样应对复杂场景下的状态叠加问题。

这次是基于中秋节活动时开发 3D 月球组件的经验来开发 3D 地球组件，相比于上一次，这一次很多技术难点都有了现成的解决方案，可以说开发成本降低了三分之二之多，而这些额外的开发成本则花费在隐藏在需求细节中的技术难点。这篇文章主要用来记录开发过程中遇到的一个比较有意义的技术难点，即 3D 空间中的物体投影到 2D 平面中时如何换算像素尺寸，在探索解决该难点的过程中，对 3D 与 2D 空间之间的关系有了一个更深刻的认识。

大概早在一年前就了解到 Meta(Facebook) 发布的一款专门用来构建文档站点的 Docusaurus 工具库，那时候 Docusaurus 就已在社区中受欢迎起来，随着这一年多来看到很多开源项目的文档站点都基于 Docusaurus 构建，便下定决定要找机会尝试一下。于是，前不久在团队内对基建做改进时，对于文档这一块的迭代了解了很多热门的社区方案，一直举棋不定，在某天闲下来时就准备基于 Docusaurus 做一个尝试，最终发现效果还不错，而且迁移起来也几乎没有什么成本。

基于对 Docusaurus 这次尝试留下的好印象，便顺带深入了解了一下，发现还支持博客站点，而且功能很丰富，最吸引人的便是可以借助插件构建本地的离线全站搜索功能。说干就干，找了个周末就把自己的博客站点完全迁移到基于 Docusaurus 构建的站点了。当然，迁移过程是挺顺利的，而且也并没有想象中的麻烦，只是以前的博客页面都是自己写的，而现在基于 Docusaurus 的博客页面是开箱即用的主题，尤其是归档页面并不太符合期望，准备自己重新实现归档页面。经过查看文档，发现 Docusaurus 确实提供了重写归档页面的机制。不过，在重写之前，我心里突然发出一个疑问：我只能在已有的路由下（/archive）重写页面吗？博客的数据解析后是如何存储并传递给页面组件的呢？为了一探究竟，我便带着这些问题对 Docusaurus 的路由机制做了简单的探索，总算是了解了 Docusaurus 是如何以巧妙的方式做到这些事情的。

绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 ZRender 的源码来看看其事件系统是如何设计的。

通常，在 Web UI 设计过程中会用到定制字体，页面开发过程中会使用 CSS 引用（@font-face）该字体资源，不过由于字体资源较大，通常会对页面性能造成一些不利影响。

恰逢中秋节，有机会参与到一项中秋运营活动的项目中，负责为业务方提供一个移动端场景投放的 3D 月球组件。由于一直接触的是 2D 可视化开发，对于 3D 开发（WebGL）的技术未有深入了解和实践经验，基于对现有社区主流技术的简单了解和团队成员的技术背景，遂选定基于 Three.js 进行开发以降低风险。

这篇文章是基于 3D 月球组件的开发实践，记录 3D 开发实践中了解的一些 Web 3D 技术知识和一些典型问题场景的解决方案。