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

1-heuristic寻路简介 heuristic是启发式的意思，因此heuristic寻路就是启发式寻路，其所用的算法是贪心算法。 启发式寻路之所以是启发式的，是因为在寻路的过程中，我们会给它一个提示，比如你...

作业3陆陆续续的做了一周，在透视投影矫正、interpolated_shadingcoords等地方卡了很久，不理解。参考网上一些博客文章，总结自己在做作业3的过程中的一些收获。 参考的一些博文： Games101：作...

前言 课前准备 具备前端基础，如HTML、css、js。 多多少少敲过一点vue。 具备canvas基础，若没有，可以看一下我的《canvas从入门到放飞自我-基础篇》 学习目标 以面向对象的思路架构canvas。 使...

前言 学习目标 创建二维对象 理解二维对象的基本功能 知识点 矩阵变换 前情回顾 之前我们创建了EventDispatcher 对象，接下来我们接着往上写Object2D对象。 1-Object2D对象的功能分析 我们之前...

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

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

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

第十三章 超级椭圆与超级方程（Superellipses and Superformulas） 原作：Keith Peters www.bit-101.com/blog/2022/1… 译者：池中物王二狗(sheldon) 源码：github: github.com/willian1234… ...

本节是Games101 shading部分的学习笔记 光照和基本的着色模型 Shading在图形学中是指模拟光照和彩照相互作用的过程。Shading（着色）是将颜色应用于三维模型表面的过程，以便在渲染图像时呈现逼...

前言 学习目标 根据任意图形的变换原理，修改之前变换图案的代码，使其可以变换任意图形 知识点 矩阵变换 1-Object2D 整体代码如下： import { Vector2 } from '../math/Vector2' import { Grou...

前言 学习目标 创建Group对象 知识点 集合 前情回顾 之前我们创建了Img对象，接下来我们建立Group对象。 1-Group对象的功能 Group 是二维图形的集合，它可以对这些图形进行管理，比如增删改查。...

前言 学习目标 创建二维文字对象 知识点 ctx.fillText() ctx.strokeText() 1-文字的样式对象 首先咱们先看一下样式对象的架构思路。 最底层的是BasicStyle，再上面的StandStyle和TextStyle依次...

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

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

前言 学习目标 快速创建vue+vite+ts+vitest 项目 搭建测试环境 知识点 vue vite ts vitest 1-创建vite+vue3.0+ts 项目 在敲代码之前，我们先初始化一个专门写图形组件的项目。 1.建立vue 项目。...

我正在参加「掘金·启航计划」 本章我们将开始学习空间变换,空间变换在图形学中有非常广泛的应用,对于我们深入了解图形学底层有很重要的意义,特别在光栅化渲染管线中, 我们知道最初输入的顶点坐...

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

前言 学习目标 对图案编辑器进行整体架构 认识各种常见的矩阵 知识点 图形架构 矩阵 1-架构思想 图形项目的基本架构思想是面向对象。 我在架构图形项目的时候，一般会架构两棵树，一个棵是用于...

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