特色

前端开发工具大全（Web Front End Awesome）【不断更新，与时俱进】

前言

回顾 4、5 年前开始，我在 Github 上整理过一个 Repo 叫《web-frontend-awesome》当时的想法是把自己在日常工作中会常用到的前端相关的东西记录下来，方便查阅与使用。4、5 年前，那应该还算是一个 jQuery 一招鲜的年代，使用 require.js / sea.js + jQuery / zepto.js、开源的 jQuery 插件、自己扩展一些 jQuery 插件，基本可以解决一切的问题；但随着前端 MVC 的框架 backbone.js 已经被广泛应用，虽然 backbone.js 还是基于 jQuery 来实现。前端 MV+ 框架的思想已经开始逐渐深入人心，紧接着就是 AngularJS、React、Vue.js 的兴起，再到前端实现多端 / hybrid APP 广泛应用（React Native，Weex，phoneGap，Ionic，Electron / nw.js，Flutter）；往后再有 微前端 / 低代码前端 / 前端机器学习 TensorFlow.js 的出现解决越发复杂的多前端应用耦合问题。当时开始整理的内容还是以 jQuery 的思路为主，现下面重新整理一下，逐渐增加一些新的东西吧 继续阅读“前端开发工具大全（Web Front End Awesome）【不断更新，与时俱进】”

从 Blender Guru 的 blender 甜甜圈教程中重新认识图形学【辰龙】

前言

跟着 Blender Guru 的 16 集的 blender 甜甜圈教程【可自行度娘或者去 B 站搜】，全部学完，其实坚持下来也挺不容易的。每晚一集，开着 Blender 边看边做，直接上一个短的我自己跟做的效果视频。。。

Blender 是什么？Blender 是一款免费开源的三维计算机图形软件，被广泛用于动画制作、建模、渲染、视频编辑、特效合成等领域。以下是 Blender 的一些特点和功能：1. 建模和雕刻：Blender 提供了强大的建模工具，包括多边形建模、曲面建模和物理模拟。它还支持高级的雕刻功能，可以创建复杂的有机形状。2. 动画制作：Blender 支持全面的动画制作功能，包括骨骼动画、逐帧动画和动态模拟。它提供了可视化的时间轴编辑器和图形节点编辑器，使动画制作更加直观易用。3. 渲染引擎：Blender 内置了强大的渲染引擎 Cycles，可生成高质量的逼真渲染图像。此外，它还支持实时渲染引擎 Eevee，可以在编辑过程中实时预览场景。4. 特效合成：Blender 提供了视频编辑和特效合成功能，可以对影片进行剪辑、颜色校正、特效添加等操作。它还集成了一个强大的节点编辑器，可用于自定义复杂的特效和过渡效果。5. 游戏开发：Blender 具有游戏开发功能，包括可视化编程逻辑、物理模拟和材质编辑。可以用 Blender 创建游戏场景、角色和动画，并导出到多个游戏引擎中使用。6. 插件和脚本：Blender 支持插件和脚本扩展，可以通过用户社区编写的插件增加功能。它还包含一个 Python API，允许用户自定义和自动化任务。Blender 的免费开源性质使其非常受欢迎，成为了许多艺术家、设计师和动画制作专业人员的首选工具。无论是个人项目还是商业项目，Blender 都提供了强大而灵活的工具来实现创意的想象力 继续阅读“从 Blender Guru 的 blender 甜甜圈教程中重新认识图形学【辰龙】”

关于 Learnopengl 中用 Geometry Shader 实现机器人爆炸【Opengl – 图形学 – C/C++ 系列】【寅虎】

前言

上一回合《Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】》讲到了画三角形、四边形，但 3D 的世界肯定更加精彩，这里我来聊聊在 web 世界的 Webgl / Webgpu 中没有玩过的东西 – Geometry Shader，废话不多说，让各种 aigc 科普下。

一言说：Geometry Shader 是一种可选的着色器，它开始被引入在 Driect3D 10 和 OpenGL 3.2 中，然后在 OpenGL 2.0+ 中被作为扩展使用，在 OpenGL3.x 中它也成为了核心。Geometry Shader 主要的输入是点、线和三角形，输出是点、线带和三角形带。Geometry Shader 的处理阶段处于流水线的栅格化之前，也在视锥体裁剪和裁剪空间坐标归一化之前。另外，Geometry Shader 程序是在 Vertex Shader 程序执行完之后才执行的 继续阅读“关于 Learnopengl 中用 Geometry Shader 实现机器人爆炸【Opengl – 图形学 – C/C++ 系列】【寅虎】”

Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】

前言

上一回合讲到 C/C++ 开发环境的搭建，基础搞好了，这里终于可以进入正题了，废话不多话，先找 gpt 帮忙开个头，it goes like this:)
PROMPT：介绍一下GLFW和GLAD
ANSWER：GLFW和GLAD是两个常用的库，用于在现代OpenGL应用程序中进行窗口管理和加载OpenGL函数。
1、 GLFW（OpenGL Framework）是一个轻量级的开源库，用于创建和管理窗口、处理用户输入（如键盘、鼠标、游戏手柄等），以及获取时间间隔。它提供了一个简单的接口，方便开发者快速搭建OpenGL应用程序的窗口环境。GLFW跨平台，可以在Windows、MacOS和Linux等操作系统上使用。
2、 GLAD（OpenGL Loading Library）是一个开源的库，用于加载OpenGL函数。在早期版本的OpenGL中，需要手动查找和加载函数指针才能使用OpenGL的功能。而GLAD简化了这个过程，它自动生成了跨平台的OpenGL加载器代码，可以自动获取系统支持的OpenGL版本和扩展，并将相关函数指针加载到程序中，方便开发者使用OpenGL的各种功能。
glfw和glad常常被一起使用。开发者可以使用GLFW创建窗口、处理用户输入，然后使用GLAD加载特定OpenGL版本的函数，并在GLFW创建的窗口环境中使用这些函数实现图形渲染以及其他OpenGL相关的操作。这样，开发者能够更方便地进行现代OpenGL应用程序的开发 继续阅读“Opengl – 图形学 – C/C++ 每天进步一点点【丑牛】”

Opengl – 图形学 – C/C++ 每天进步一点点【子鼠】

前言

废话不多话，先找 gpt 帮忙开个头，it goes like this:)
在过去的四、五年里，学习 Web3D 一直是我不断探索和学习的一个领域。从一开始学习的时候，我就深深地迷上了这种技术所带来的无限可能性和创新性。在这个过程中，我不断地在探索和学习，不断地克服着困难和挑战。今天，回顾这些年来的收获和经验，我深深感谢自己的坚持和努力，也深深感谢这个领域里的各位前辈和同行，他们的经验和技术为我的学习之路提供了巨大的支持和帮助。然而，最近我开始关注更加深入和高级的图形编程技术，因此我决定开始学习 C / C++ 和 OpenGL，并将 Web3D 技术与之相结合。这不仅可以使我更好地理解和掌握计算机图形学的基本原理，也可以让我更好地实现自己的项目和构建更加高效和复杂的3D场景。在这篇文章中，我将不定期分享我从 Web3D 技术转向 C++ 和 OpenGL 图形编程的经历和心得，包括遇到的挑战和克服困难的过程，并希望以此鼓励更多的人不断探索、学习和学以致用 继续阅读“Opengl – 图形学 – C/C++ 每天进步一点点【子鼠】”

A Simple Introduction to Ray Algorithms

Ray

What is Ray? Ray is known as casting a ray line from a point (Ray Origin) in space to a point or to a certain direction (Ray Direction) in space. Literally, a ray is a line segment that starts at a point and extends in a direction. We can use two values to define a ray: the origin and the direction. What ever dimension space the ray is in, we can use the origin and direction to define a ray. Ok, so how to define a ray origin and direction? Commonly, we can use vectors to define the origin and direction. When it comes to vectors, Wow! 继续阅读“A Simple Introduction to Ray Algorithms”

How To Optimize The Page Loading Time In Your Create-react-app Project?

Recently, I have been working on optimizing the page loading time of a complex low-code application. Previously, I have done some similar optimization work in other projects, but they are not react projects. As it’s based on Webpack, in order to reduce the page loading time, I have to try to optimize the webpack bundle size or the chunk size of the application, 继续阅读“How To Optimize The Page Loading Time In Your Create-react-app Project?”

Something About Computer Graphics

忽然就想用英语来写写技术系列之二 – 浅谈计算机图形学。接着上一篇我之前写的《Web 图形学从入门到 “放弃” 指南》的文章，我再来畅谈一下计算机图形学的皮毛。

In last few years, I have been learning computer graphics from 2d Canvas, 2D Svg, Webgl, Three.js, Webgpu and Glsl
shader programs.

As the saying goes, “There are three romantic areas in programming: 1. Operating System 2. Compiler 3. Computer
Graphics”. 继续阅读“Something About Computer Graphics”

Something About Design Pattern In Javascript

忽然，就想用英语来写写技术相关的东西哈：），水平有限，不过还得硬写（模仿老外也行），不写口语铁定退化。

The article is divided into several sections:
1.The Factory Design Pattern in Javascript
2.Editor’s Commands
3.Protect Your Class’s Properties or Methods
4.How To Use Super in Javascript / Typescript
5.In a Class, How To Add a Clone Method without using “New” keyword
6.How To Use static in Javascript / Typescript
继续阅读“Something About Design Pattern In Javascript”

再次遇见 React 找回初恋的感觉

背景

脱离了 Vue，最近几个月一直接在使用新版 React 来搞低代码平台，那真是找到了初恋的感觉。由于代码平台的超高复杂度及 React 其完备的生态，使用 React 的技术栈应该算是最佳选择。上一次使用 React 已经是 4 年前的事了（转到我四年前写的一个 Repo《https://github.com/nelsonkuang/ant-admin》），那其实只是我当前的无心插柳之作，居然吸到了不少粉。话说回来，新版的 React 变化确实有点大，但感觉有种万变不离其中的感觉 继续阅读“再次遇见 React 找回初恋的感觉”

一次对复杂的古董问卷系统项目的前端优化之旅

背景

年前接盘了一个项目的优化任务，这是一套类似“问卷网 / 问卷星”之类的，集问卷拖拉创建、预览、发布、数据收集、数据可视化报表等非常齐全的复杂的古董问卷系统，由于产物是出生于 jQuery 一招先，jQuery 称王称霸的年代。实现的逻辑当然是 Dom 操作为王的思路。加之、先前的开发作者是偏后端的全栈开发， 继续阅读“一次对复杂的古董问卷系统项目的前端优化之旅”