计算机图形学
介绍 & 知识储备
计算机图形学是个相对广泛的领域，涉及很多方向。
eg: 三维图形学, 计算机视觉, 计算机动画等。
需要去学习的内容也很多,有
离散数学,线性代数(为了更好地理解计算机图形学算法和理论)光栅化,三角形部分,坐标变更,投影,着色等 (图形学基本概念)- 使用图形 API,如
OpenGL,DirectX等进行图形渲染，理解图形渲染流程，着色器语言等。 - 计算机视觉和图像处理，eg:
图像滤波,边缘检测,图像分割,目标识别。 - 计算机动画和游戏开发的基础知识，eg:
动画制作,物理模拟,游戏引擎等。 - 一些实践:
实现简单的渲染器,模型编辑器,游戏等。(借助现有的开源库和框架: openGL, Unity3D, Unreal Engine) - 一些参考: 《计算机图形学基础》, 《Real-Time rendering》, GPU Gems 等书籍, SIGGRAPH 等学术会议。
,,,,,,,,,
基础常识
Object3D & mesh & popMesh
- Object3D 表示了三维空间中的对象或场景，并且可以包含其他对象或组件，用于构建负责的场景层级结构。
- Mesh: 在计算机图形学中用于描述三维几何形状。一个 Mesh 由顶点，边和面组成，并且可以附加材质，纹理等属性进行渲染。 (相当于 geometry+material)
- popMesh: 一些框架下，表示网格模型的类或数据结构。
光源 & 阴影
光源
常见的光源：
- AmbientLight： 无法产生阴影。因为它没有方向
- DirectionalLight(一般用来模拟太阳光的效果，或者吸顶灯，不会产生明显的阴影) => DirectionalLightShadow
- SpotLight => SpotLightShadow(类似手电筒,发射的光线是朝着一个特定的方向,比如灯塔,车头灯等)
- RectAreaLight(模拟窗户光源||条状灯光光源)。不支持阴影
- pointLight: 主要用于模拟无方向性光源(灯泡,太阳,星星)
RGBA
在计算机图形学中，RGBA 颜色值是一种常见的表示颜色的方式。RGBA 颜色值由 4 个分量组成。 在 openGL 和 three.js 等许多图形库和框架中，RGBA 颜色值的分量通常以浮点数的形式表示，并规定取值范围为[0~1]。这种颜色值称为归一化颜色值。 eg: RGBA 颜色值为(128, 64, 255, 0.5)的颜色可以表示为(0.5, 0.25,1, 0.5)。其中每个分量都除以 255,就能得到 0-1 的值。
补间动画
补间动画（Tween Animation）是一种基于关键帧动画实现的动画效果，也被称为插值动画。在补间动画中，用户指定初始状态和结束状态之后，系统会自动计算中间过渡状态并生成一系列图像帧，从而形成平滑的动画效果。 补间动画可以应用于多种类型的动画，例如移动、旋转、缩放、颜色变化等。其中，常用的补间动画包括线性动画、贝塞尔曲线动画、弹簧动画等。补间动画不仅可以提供流畅的动画效果，还能够通过控制关键帧来实现动画的精细调整。 补间动画被广泛应用于游戏开发、交互设计、多媒体制作等领域，是一种非常实用的动画技术。与传统的逐帧动画相比，补间动画具有更高的效率和灵活性，并且易于实现和修改。
有一些三方库可以用，eg: gsap。(商用需授权)
阻尼
阻尼（Damping）是指控制系统中的一种减振机制，用于减少由于外部干扰或系统自身震动引起的过度振荡或闪烁现象。在物理学和工程学领域中，阻尼通常是通过添加摩擦阻力、惯性阻力或电磁感应等机制来实现。 在计算机图形学和交互设计中，阻尼常被用于控制界面元素或模型的运动效果，以实现更加真实、流畅的交互效果。例如，在拖拽操作中，添加阻尼可以使得界面元素跟随鼠标移动的速度变化而产生渐进式的变化，并最终停止在一个稳定位置；在 3D 建模软件中，添加阻尼可以使得模型的旋转过程更加平滑、自然。 总之，阻尼是一种重要的物理和工程学概念，在计算机图形学和交互设计中也有广泛的应用，可以提高交互体验和界面美感。
控制器阻尼（Controller Damping）是指在实现交互设计时，通过调整用户输入的响应速度和缓动效果来增强用户体验。通俗点说，就是让物体或界面元素随着用户操作的变化而产生缓动效果，在移动结束后慢慢停下来，从而使得用户感觉到更加自然、流畅。 控制器阻尼一般由两个参数决定：阻尼值和质量值。其中，阻尼值用于控制物体或界面元素的缓动速度，一般越大，缓动速度越慢，反之则越快；而质量值用于控制物体或界面元素的惯性大小，一般越大，惯性越大，物体或元素会越难被改变方向或速度。 控制器阻尼常被应用于游戏中的镜头跟踪、UI 界面元素的拖拽、3D 模型的旋转等场景，可以使得用户交互更加真实、自然。但需要注意的是，如果阻尼值过小或者质量值过大，可能会导致物体或界面元素产生过度反弹或晃动的效果，影响用户体验。因此，在使用控制器阻尼时，需要根据具体场景和用户反馈进行合理的设置和调整。
HDR
high dynamic range 对不同程度的明暗有不同的曝光处理，使得图片细节更生动 这里可以下载 hdr 格式的图
文件类型
glb 格式
颜色色值转换
一般的颜色分量值取值范围为 0~255 之间，但是 webGL 继承自 OpenGL，所以遵循传统的 OpenGL 颜色分量的取值范围，即 0.0~1.0, RGB 的值越高，则颜色就越亮。
reference
webgl-fundamentals 3d-graphics-a-webgl-tutorial youtube-webGL MDN-webGL
CSDN: 理解矩阵 3blue1brown