最近遇到了一个困扰我许久的难题，现将解决方案分享出来 由于我们的项目侧重点在前端绘图，导致了前后端工作量不协调，我后端接口很快就能写完，而前端一个图要画好久，领导见状将前端的任务分...

前言 学习目标 创建事件分发器 掌握事件分发器的运行原理 知识点 监听者模式 前情回顾 之前我们说过图案编辑器的整体架构，接下来我们会从最底层的EventDispatcher 对象开始写起。 EventDispatc...

控制相机是三维场景中基础而普遍的需求，如展示类项目中控制相机围绕物品全方位观察，游戏类项目中操控相机以第一人称视角移动。常见的相机控件有 orbitControl ，绕场景中某个锚点控制相机移动...

第十四章 其它曲线（Miscellaneous Curves） 原作：Keith Peters www.bit-101.com/blog/2022/1… 译者：池中物王二狗(sheldon) 源码：github: github.com/willian1234… 曲线艺术编程系列 第十...

前言 学习目标 创建Img对象 知识点 drawImage 矩阵 前情回顾 之前我们创建了Object2D对象，接下来我们接着往上写Img对象。 1-Img对象的功能分析 Img对象是对canvas的drawImage() 方法的封装，若...

前言 学习目标 创建T恤图案编辑器 知识点 TransformControler 的应用 canvas 全局合成 canvas 图层控制 DOM和图形组件的数据传递 1-搭建前端静态 1-1-页面结构 T恤图案编辑器的页面结构如下图所...

二维图形学是计算机图形学中的重要分支，主要研究平面内的点、线、形状等基本元素及其相互关系与变换。在本文中，将会详细介绍二维图形学中的点、线和形状，并提供相应的代码实现。 点（Point）...

图像编码 一张图片可以使用一个二维矩阵表示，矩阵中的每一个点被称为像素。每个像素的颜色使用三原色来表示，即红、绿、蓝。 每个像素可以用不同的数据位数来表示，常用的量化位数有 16 位、24...

前言 学习目标 创建相机对象 平移视口 缩放视口 知识点 二维视图投影矩阵 前情回顾 之前我们canvas的矩阵变换原理，接下来我们就可以创建图形对象了，我们先写个相机练练手。 1-相机的功能分析 ...

我正在参加「掘金·启航计划」 本文系原创,转载请注明出处.码字不易,希望大家多多关注,多多点赞! 开新坑啦,本文是系列文章'计算机图形学'的第一篇: 线性代数概览,之所以第一篇就讲线性代数,是因...

抛物线 Parabolas 原作：Keith Peters www.bit-101.com/blog/2022/1… 译者：池中物王二狗(sheldon) 源码：github: github.com/willian1234… 曲线艺术编程系列第7章 我承认这一章脑暴时，再三...

本文主要是Games101 Ray tracing部分的学习笔记。内容主要包括： whitted-style 光线追踪，也是古典光线追踪 光线与物体求交，加速结构（BVH）等 辐射度量学 路径追踪 一、光线追踪的核心逻辑：...

我正在参加「掘金·启航计划」 本文系原创,转载请注明出处.码字不易,希望大家多多关注,多多点赞! 线性变换 在上一篇文章的开头我们说过,线性代数是研究向量空间和它们之间的线性映射的学科,上一...

我正在参加「掘金·启航计划」 通过阅读本文，你将获得以下收获： 1.矩阵变换拓展到3D相关知识 2.OpenGL的坐标系统 3.OpenGL坐标系统之间的转换 4.了解投影变换 上篇回顾 上篇一看就懂的OpenGL ...

至今，我偶尔会遇到一些寻路的寻求，虽然是偶尔，但时间久了，也就多了。 我对寻路是没有太多研究的，所以就去B站搜了一下，搜到一个很棒的dikjstra教程。 我照着这个教程，用ts写了一下这个逻...

前言 学习目标 基于某一基点变换任意图形 知识点 矩阵变换 1-基点变换的思路 此时我突然想起一句让人午夜惊醒的话：来，咱们再把这件事情的来龙去脉从头捋一遍。 我现在就想着把这个基点变换的...

我正在参加「掘金·启航计划」 傅里叶变换(Fourier Transform) 书接上文,我们知道在RnR^nRn空间中我们可以找到一个正交基来构成其基向量,通过之前关于向量空间的介绍我们也知道向量不仅仅是一个...

最近写了几篇二维图形学的，今天来说下三维图像学的最基础的构成，先铺垫下哈，那么下面我们将使用 JavaScript 和 Three.js 来实现相关的代码来介绍三维场景需要的最基础的构成，包括三维空间中...

阅读目录前言天空盒的技术其实挺简单关于反射和折射总结版权申明 回到顶部前言 搞定了天空盒，才算是真正完成了场景的搭建，以后再要进行什么样的图形学测试，都可以在这个场景下进行。比如后面...