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

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

前言 学习目标 创建ImgControler对象 使用ImgControler对象变换图案 知识点 图案选择 图案控制框 鼠标状态与样式 图案变换 前情回顾 之前我们用OrbitControler 对象实现了相机的变换，接下来我...

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

前言 学习目标 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（着色）是将颜色应用于三维模型表面的过程，以便在渲染图像时呈现逼...