计算机图形学基础-03-光栅图像

计算机图形学基础-02-数学杂项

计算机图形学基础-01 引言

《Fundamentals of Computer Graphics》5th（计算机图形学基础/虎书）中文翻译。

前言、致谢、作者简介


## Preface 前言

本版《计算机图形学基础》对着色、光反射和路径追踪的材料进行了大量改写，并且进行了许多修正。现在，这本书提供了更好的介绍名为“基于物理材料”和“基于物理渲染”的技术，这些技术在实际应用中变得主导。这些材料现在被更好地整合，我们认为这本书很好地满足了目前许多教师组织图形学课程的方式。

本书的组织结构与第四版基本相似。随着这本书多年来的修订，我们一直努力保留早期版本所具有的非正式、直观的呈现风格，同时提高了一致性、准确性和完整性。我们希望读者会发现结果是一个吸引人的平台，适用于各种计算机图形学课程。

### About the Cover 关于封面

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/focg/cover.jpg" style="max-height: 600px">

封面图片取自 J.W. Baker（刷涂和喷涂亚克力画布，16 英寸 ×20 英寸，www.jwbart.com）的《水中的老虎》。

老虎的主题是对 Alain Fournier（1943-2000）1998 年在康奈尔大学研讨会上做出的精彩演讲的一个参考。他的讲话描述了一只老虎的运动，令人回味无穷。他总结了自己的观点：

尽管在过去的 35 年里，计算机图形学中的建模和渲染已经得到了极大的改进，但我们还没有达到可以自动模拟老虎在河中游泳的所有辉煌细节的阶段。自动化的意思是不需要艺术家/专家进行仔细的手动微调。

坏消息是我们还有很长的路要走。

好消息是我们还有很长的路要走。

### Online Resources 在线资源

本书的网站是 http://www.cs.cornell.edu/~srm/fcg5/。我们将继续维护勘误表和使用本书的课程链接，以及与本书风格相匹配的教学材料。本书中的大多数图形都以 Adobe Illustrator 格式呈现，如果有需求，我们很乐意将特定的图形转换为可移植格式。请随时通过 srm@cs.cornell.edu 或 ptrshrl@gmail.com 与我们联系。

## Acknowledgments 致谢

以下人员对本书各个版本提供了有益的信息、评论或反馈：

Ahmet Oğuz Akyüz, Josh Andersen, Beatriz Trinchãao Andrade Zeferino Andrade, Bagossy Attila, Kavita Bala, Mick Beaver, Robert Belleman, Adam Berger, Adeel Bhutta, Solomon Boulos, Stephen Chenney, Michael Coblenz, Greg Coombe, Frederic Cremer, Brian Curtin, Dave Edwards, Jonathon Evans, Karen Feinauer, Claude Fuhrer, Yotam Gingold, Amy Gooch, Eungyoung Han, Chuck Hansen, Andy Hanson, Razen Al Harbi, Dave Hart, John Hart, Yong Huang, John “Spike” Hughes, Helen Hu, Vicki Interrante, Wenzel Jakob, Doug James, Henrik Wann Jensen, Shi Jin, Mark Johnson, Ray Jones, Revant Kapoor, Kristin Kerr, Erum Arif Khan, Mark Kilgard, Fangjun Kuang, Dylan Lacewell, Mathias Lang, Philippe Laval, Joshua Levine, Marc Levoy, Howard Lo, Joann Luu, Mauricio Maurer, Andrew Medlin, Ron Metoyer, Keith Morley, Eric Mortensen, Koji Nakamaru, Micah Neilson, Blake Nelson, Michael Nikelsky, James O’Brien, Hongshu Pan , Steve Parker, Sumanta Pattanaik, Matt Pharr, Ken Phillis Jr, Nicolò Pinciroli, Peter Poulos, Shaun Ramsey, Rich Riesenfeld, Nate Robins, Nan Schaller, Chris Schryvers, Tom Sederberg, Richard Sharp, Sarah Shirley, Peter-Pike Sloan, Hannah Story, Tony Tahbaz, Jan-Phillip Tiesel, Bruce Walter, Alex Williams, Amy Williams, Chris Wyman, Kate Zebrose, and Angela Zhang.

Ching-Kuang Shene 和 David Solomon 允许我们借用他们的例子。Henrik Wann Jensen、Eric Levin、Matt Pharr 和 Jason Waltman 慷慨地提供了图像。Brandon Mansfield 帮助改进了射线跟踪的分层边界体讨论。Philip Greenspun（philip.greenspun.com）慷慨地允许我们使用他的照片。John “Spike” Hughes 帮助改进了抽样理论的讨论。Wenzel Jakob 的 Mitsuba 渲染器在创建许多图例中非常宝贵。我们非常感谢 J.W. Baker 帮助创作 Pete 设想的封面。除了是一位才华横溢的艺术家，他还是一个令人愉快的合作伙伴。

在章节注释中引用了许多有助于编写本书的作品。然而，这里需要特别认可几本对内容和呈现方式产生影响的关键文本。其中包括我们两个都学习基础知识的两个经典计算机图形学文本：《计算机图形学：原理与实践》（Foley、Van Dam、Feiner 和 Hughes，1990 年）和《计算机图形学》（Hearn 和 Baker，1986 年）。其他文本包括 Alan Watt 的两本有影响力的书（Watt，1993 年，1991 年）、Hill 的《使用 OpenGL 的计算机图形学》（Francis S. Hill，2000 年）、Angel 的《交互式计算机图形学：使用 OpenGL 的自上而下方法》（Angel，2002 年）、Hugues Hoppe 的华盛顿大学博士论文（Hoppe，1994 年）和 Rogers 的两本优秀的图形学文本（Rogers，1985 年，1989 年）。

我们特别感谢 Alice 和 Klaus Peters 鼓励 Pete 撰写本书第一版，并为实现书籍的出版做出了巨大贡献。他们对作者的耐心以及致力于使他们的书籍尽可能完美的精神在使本书成为现在这个样子方面发挥了关键作用。没有他们非凡的努力，这本书肯定不会存在。

Steve Marschner, Ithaca, NY

Peter Shirley, Salt Lake City, UT

February 2021

## Authors 作者简介

Steve Marschner 是康奈尔大学计算机科学系的教授。他于 1993 年获得布朗大学的 Sc.B. 学位，于 1998 年获得康奈尔大学的博士学位。他曾在微软研究院和斯坦福大学担任研究职位，于 2002 年加入康奈尔大学。他获得了 2015 年 SIGGRAPH 计算机图形学成就奖，并与其他人共同获得了 2003 年技术学院奖。

Peter Shirley 是 NVIDIA 公司的杰出研究科学家。他曾在印第安纳大学、康奈尔大学和犹他大学担任学术职位。他于 1985 年在里德学院获得物理学学士学位，并于 1991 年在伊利诺伊大学获得计算机科学博士学位。

计算机图形学基础-00 前言

2023-1-27 日，[第 623 期 JavaScript Weekly](https://javascriptweekly.com/issues/623) 介绍了最新的原生深拷贝函数 structuredClone()，借此总结一下 JavaScript 中 clone 相关的方法。



JavaScript 中的数据类型分为原始类型和引用类型，他们的区别之一，就是在拷贝时的表现不一样。

- 原始类型存储在栈内存中，每次拷贝都会生成一份新的数据，对新数据的任何操作都不会影响原有数据。
- 引用类型存储在堆内存中，拷贝时只会拷贝指向对象的指针，修改新数据会影响原有数据。

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/ecma/JavaScript-copy.gif" style="max-height: 300px">

## 浅拷贝 shallow clone

原始类型生成新数据；引用类型生成新的指针，还是指向原有的对象。

### Object.assign

```js
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
}

let clone = Object.assign({}, user)

alert( user.sizes === clone.sizes ) // true，同一个对象
```

### Spread 语法（对象解构）

```js
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
}

let clone = {...user}

alert( user.sizes === clone.sizes ) // true，同一个对象
```

## 深拷贝 deep clone

### JSON.parse(JSON.stringify())

```js
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
}

let clone = JSON.parse(JSON.stringify(user))

alert( user.sizes === clone.sizes ) // false，不是同一个对象
```

**缺点**

- 无法处理递归数据解构
- 无法处理部分 JS 内置数据类型：Map, Set, Date, RegExp, ArrayBuffer.
- 无法拷贝对象的方法

```js
const obj = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regexp: /foo/,
  deep: { array: [ new File(someBlobData, 'file.txt') ] },
  error: new Error('Hello!')
}

const clone = JSON.parse(JSON.stringify(obj))

console.log(clone)

// 我们会得到 🙂
{
  set: {},
  map: {},
  regex: {},
  deep: {
    array: [
      {}
    ]
  },
  error: {},
}
```

### lodash.cloneDeep()

- 使用 Object.prototype.toString.call 来获取详细类型，不同类型分别处理；
- 递归克隆，数组遍历项，对象遍历属性；
- 使用 Array/Map 缓存引用，解决循环引用的问题；
- loadsh 不会拷贝函数，将返回 {}。 因为克隆函数没有实际意义，公用同一个函数也没问题。 而且涉及到 科里化，this，闭包等问题，无法克隆相等价值的函数。
- 非要克隆函数的话，可以使用 `new Function('return ' + fn.toString())() `

**缺点**

需要额外装包。

### structuredClone（结构化克隆）

2022 年，[HTML Living Standard](https://html.spec.whatwg.org/multipage/structured-data.html#dom-structuredclone) 新增了一个全局函数 structuredClone，可以直接深拷贝引用类型。

```js
const obj = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}

const clone = structuredClone(obj)
console.log(clone)

// 我们将得到 😍
{
  title: "Builder.io Conf",
  date: "1970-01-01T00:00:00.123Z",
  attendees: ["Steve"]
}
```

浏览器支持情况（2023 年 1 月 30 日）：

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/ecma/92e855a767a3ed67facefdb103917ab8.png">

**缺点**

- 原型链丢失，如果在类实例中使用 structuredClone() ，那么将得到一个普通对象；
- structuredClone 同样不会克隆函数；
- 有些值是不能够被结构化的，比如 Error 对象和 DOM 节点，structuredClone 不会克隆这些对象；

## 参考

- [javascript.info](https://zh.javascript.info/object-copy)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)
- [builder.io](https://www.builder.io/blog/structured-clone)
- [web.dev](https://web.dev/structured-clone/)