Kusou1 Blog

「离开世界之前一切都是过程」

Create Liquid Effect using CSS-doodle

Creating a cool Liquid page using css-doodle Intro CSS-doodle is A web component for drawing patterns with CSS,Web Components is a suite of different technologies allowing you to create reusa...

Posted by zhangshaohong on July 18, 2022

使用React和Three.js制作3D landing page

Creating a cool 3D landing page using React and Three.js Intro You’ve probably seen some amazing websites using 3D graphics. If you’ve ever only CSS, HTML and JS when creating a webpage achie...

Posted by zhangshaohong on May 28, 2022

Fiber

「Fiber」 1. Fiber 出现的目的是什么为了提高 React 渲染页面的效率，减少页面卡顿，提升用户体验。 2. 在 Fiber 出现之前 React 存在什么问题在 React 15 版本中采用的是 Virtual DOM 对比方案，通过对比 Virtual DOM 找出差异部分，从而只将差异部分更新到页面中，避免更新整体 DOM 以提高性能。 1...

Posted by zhangshaohong on April 30, 2022

Virtual DOM 及 Diff 算法

「Virtual DOM 及 Diff 算法」 1. JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API. ...

Posted by zhangshaohong on April 30, 2022

JavaScript花式表示26个字母

先看效果先来个思考题： 1 2 // 下面这一句会打印什么呢？ [+[][0] + []][0][1] 我们直接看效果：如果觉得打印一个字母不过瘾的话，打印一句话呢？ 1 2 3 // 注意，在Chrome浏览器中打印 [[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0]...

Posted by zhangshaohong on February 17, 2022

当···时发生了什么？

这篇文章试图回答一个古老的面试问题：当你在浏览器中输入 google.com 并且按下回车之后发生了什么？不过我们不再局限于平常的回答，而是想办法回答地尽可能具体，不遗漏任何细节。该内容转载自 github项目:what-happen-when 目录按下”g”键回车键按下 [产生中断非USB键盘] (Windows)一个 WM_KEY...

Posted by zhangshaohong on February 17, 2022

计算机图形学二：视图变换(坐标系转化，正交投影，透视投影，视口变换)

「视图变换（Viewing Transformation）」我们可以这样来描述视图变换的任务：将虚拟世界中以（x,y,z)为坐标的物体变换到以一个个像素位置(x,y) 来表示的屏幕坐标系之中(2 维)，这确实是一个较为复杂的过程，但是整个过程可以被细分为如下几个步骤。模型变换(modeling tranformation)：这一步的目的是将虚拟世界中或者更具...

Posted by zhangshaohong on August 31, 2021

计算机图形学一：基础变换矩阵总结(缩放，旋转，位移)

「变换矩阵 (Transformation Marices)」在图形学中的重要性不用多说，一切物体的缩放，旋转，位移，都可以通过变换矩阵作用得到。同时在投影 (projection) 变换的时候也有很多应用，本文将会介绍一些简要的变换矩阵。 1 2D线性变换我们将如下图所示的简单矩阵乘法定义为对向量的线性变换。 1.1 缩放(scaling) 缩放变换是一种沿着坐标轴...

Posted by zhangshaohong on August 27, 2021

Basic Raytracing

光线追踪器「raytracer」和光栅化器「rasterizer」采用不同的方法将3d场景渲染到2d屏幕上。然而，这两种方法都有一些共同的基本概念。这篇文章将在canvas上的像素「pixels」来定义坐标系「coordinate system」,以及如何表示和操作颜色. The Canvas

Posted by zhangshaohong on August 23, 2021

图形学概念导论

光线追踪器「raytracer」和光栅化器「rasterizer」采用不同的方法将3d场景渲染到2d屏幕上。然而，这两种方法都有一些共同的基本概念。这篇文章将在canvas上的像素「pixels」来定义坐标系「coordinate system」,以及如何表示和操作颜色. The Canvas 在接下来几个章节里，我们将在Canvas上绘制东西: 一个矩形的像素数组，可以单独着色...

Posted by zhangshaohong on August 21, 2021