# 普明学图形

**Repository Path**: visus/graphics

## Basic Information

- **Project Name**: 普明学图形
- **Description**: 我的图形引擎学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-07
- **Last Updated**: 2024-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 普明学图形引擎

这本书记录我学习图形和引擎相关技术时记录的笔记，
也是我关于图形学的个人知识库。

我学习图形学，是为了做一个AI图形引擎，并写一本配套的开源书：

- [Zaige引擎](https://gitee.com/z-lang/zaige) - AI图形引擎
- [《从零开始制作AI图形引擎》](https://gitee.com/z-lang/zaige_book) - Zaige引擎配套的开源书

因此，这套笔记也算是上面两个工程的参考资料。

## 目录

- [学习路径](#学习路径)
- [视频课程](#视频课程)
- [理论书籍](#理论书籍)
- [WebGPU](#webgpu)
- [Three.js](#threejs)
- [PixiJS](#pixijs)

## 学习路径

我的学习路径是这样的：

1. 先听了几节[GAMES101](games101/README.md)的视频课程
1. 配套的书是[《计算机图形学基础》](fcg/README.md)，也就是“虎书”，我也看了几章
1. 然后就是看[WebGPU-MDN](webgpu/mdn/README.md)的教程。这是因为此时我已经决定先用JS来实现一个图形引擎，所以就先从WebGPU开始学习。
1. 接着了解了一下其他的前端图形引擎，比如[Three.js](three.js/README.md)和[PixiJS](pixijs/README.md)。这两个引擎都是非常优秀的引擎，我也都学习了一下。
1. 现在，前面几个步骤都只完成了一小部分，我的计划如下。

短期计划：

1. 了解另外几个前端引擎，并做出笔记和概览文章。包括babylon.js、phasor、orillusion等。
1. 决定选择哪一个作为突破口，然后开始深入了解相关知识和实现。暂定还是从2D的PixiJS和3D的Three.js开始。
1. 继续深入学习WebGPU，看完Step by Step的教程，然后再另外找本书看看。
1. 继续学习GAME101的视频课程和配套书籍《计算机图形学基础》，把笔记补全。这个任务时间跨度会比较长，我打算做成每日一课的形式，大概3~5个月搞定吧。
1. 在了解清楚前端图形的架构，以及初步熟悉了WebGPU的使用之后，着手开始写自己的图形引擎[zaige](https://gitee.com/z-lang/zaige)，以及配套的开源书[《从零开始制作AI图形引擎》](https://gitee.com/z-lang/zaige_book)。

以上是3~6个月的计划。

## 视频课程

- [GAMES101](games101/README.md) - 图形学入门必看视频课程，B站就有。

## 理论书籍

- [计算机图形学基础](fcg/README.md)  - 也就是常说的“虎书”，学习图形学的必读书目。
- [实时渲染](https://www.realtimerendering.com/) - 这本也是名作。覆盖面非常广，而且紧跟时代。
- [游戏引擎架构](https://www.gameenginebook.com/) - 配合《实时渲染》一起看，非常有用。
- [游戏编程模式](https://gameprogrammingpatterns.com/) - 《Crafting Interpreters》作者的游戏编程书籍。我还没看，但是作者是有保证的。

## WebGPU

### 入门

- [WebGPU-MDN](webgpu/mdn/README.md) - 这个是MDN上的WebGPU教程
- [WebGPU Step by Step](webgpu/WebGPU_step_by_step/README.md) - 这是Github上的一个WebGPU入门教程，配套有视频。

## Three.js

- [three.js](three.js/README.md) - three.js是一个Javascript的3D引擎

## PixiJS

- [PixiJS](pixijs/README.md) - PixiJS是一个2D的渲染引擎