前言 学习目标 canvas 内置变换方法里的矩阵逻辑 知识点 translate(x,y) rotate(ang) scale(x,y) transform(e0,e1,e3,e4,e6,e7) 前情回顾 之前我们完成了图案编辑器的整体架构，创建了vue+vite+...

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

前言 学习目标 创建相机轨道控制器 操控相机变换视图 知识点 位移 缩放 前情回顾 之前我们创建了Scene对象，接下来我们建立OrbitControler对象。 1-OrbitControler对象的功能分析 OrbitControle...

我正在参加「掘金·启航计划」 从本篇文章开始,我们将正式开启计算机图形学之旅,本系列文章将一步步深入介绍计算机在渲染输出呈现一张图片经历的各种步骤细节以及涉及到的相关其他领域的知识串...

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

空间变换-下(Spatial Transformation) 书接上文,本章我们继续讲变换,上一章介绍了旋转和反射,这章我们开始介绍剩下几种变换:缩放/平移/错切 缩放 均匀缩放 每一个向量被映射到自身与缩放因子的...

前言 学习目标 创建Scene对象 理解Scene对象的功能和运行逻辑 知识点 渲染封装 坐标转换 前情回顾 之前我们创建了Group对象，接下来我们建立Scene对象。 1-Scene对象的功能分析 Scene 对象是场...

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

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

Three.js 学习记录shader黑客帝国数字雨 想锻炼锻炼自己输出能力 实现效果 需要一定shader知识 使用glsl-canvas插件展示效果 分步骤实现 1、生成黑白渐变图 根据y轴高度生成渐变，y值越大越白 #...

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

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

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

什么是渲染流水线 渲染流水线的工作任务在于由一个三维场景出发、生成(或者说渲染)一张二维图像。换句话说，计算机需要从一系列的顶点数据、纹理等信息出发，把这些信息最终转换成一张人眼可以...

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

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

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

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

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

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