切换至深色主题
计算机图形学（Graphics）
重要通知
。
基本概况
基本术语
- 计算机图形应用编程接口(CG API): 用于图形应用生物通用软件包。
GPU图形固定渲染管线
坐标系统
硬件设施
阴极射线管(CRT)
阴极射线管(Cathode Ray Tube)CRT，
CRT工作原理
光栅扫描显示器
D3 或 Greensock 等库
# 资源文档
> [WebGL] https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API | [示例代码] https://github.com/mdn/webgl-examples
> WebGL常量：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Constants
> WebGLRenderingContext：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext
> WebGL编程指南：https://sites.google.com/site/webglbook
> [WebGL理论基础] https://webglfundamentals.org/
> [Dev.Opera] https://dev.opera.com/tags/3d/
> Khronos[WebGL网络标准开发商]：https://cn.khronos.org/
> WebGL playground：http://webglplayground.net/
> WebGL academy：http://www.webglacademy.com/
> w3cschool：https://www.w3cschool.cn/webgl/
> 英文教程：https://webglfundamentals.org/
> 中文简体文档：https://webglfundamentals.org/webgl/lessons/zh_cn/
> https://webglfundamentals.org/docs/
> 计算机图形概论：https://math.hws.edu/graphicsbook/
> glMatrix：创建高性能WebGL应用的JavaScript矩阵矢量库。
> PhiloGL：一个用于数据可视化、创意编程和游戏开发的WebGL库。
> Pixi.js：是一种快速的开源2D WebGL渲染器。
> PlayCanvas：是一个开源游戏引擎。
> Sylvester：是一个用于处理向量和矩阵的开源库。尚未针对WebGL进行优化，但功能极其强大。
> three.js：是一个开源的，功能齐全的3D WebGL库。
> Phaser：是一个适用于Canvas和WebGL的浏览器游戏的快速，免费和有趣的开源框架。
> RedGL：是一个开源3D WebGL库。
> vtk.js：是一个JavaScript库，用于在浏览器中进行科学可视化。
3D技术、低代码/零代码技术、协同协作技术、图片处理技术（编码、滤镜、绘画、多功能剪辑、后期处理等）、视频处理技术（编码、滤镜、绘画、多功能剪辑、后期处理等）、音频处理技术（编码、滤镜、绘画、多功能剪辑、后期处理（编码、滤镜、绘画、多功能剪辑、后期处理等）等）、文件处理技术（编码、滤镜、绘画、多功能剪辑、后期处理等）
# WebGL简介
> 一位名叫Vladimir Vukicevic的美国软件工程师做了基础工作,并领导了WebGL的创作。在2007年,弗拉基米尔开始为html文档的画布元素创建OpenGL原型。2011年3月,克洛诺斯集团创建了webgl。
> WebGL 支持的着色器只有顶点着色器与片元着色器。
# 坐标体系
> 笛卡尔坐标体系，默认右手坐标系：x轴正方向向右，y轴正方向向上，z轴正方向朝向屏幕外
# 代码示例
<canvas width="640" height="480"></canvas>
<script>
var canvas = document.createElement('canvas');
let width = document.body.clientWidth;
let height = document.body.clientHeight;
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
document.body.append(canvas);
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
console.log(gl);
</script>
# 基础知识
> UV 映射是将2D 图像投影到 3D 模型表面以进行纹理映射的3D 建模过程。字母“U”和“V”表示 2D 纹理的轴，因为“X”、“Y”和“Z”已经用于表示模型空间中 3D 对象的轴，而“W”（在除了 XYZ) 用于计算四元数旋转，这是计算机图形学中的常见操作。
# 相关案例
> 元宇宙产品：Com2uS集WSWG工作室 | 元宇宙平台《Com2Verse》
> 用于构建 3D/AR/VR 体验的 Web 框架:https://aframe.io/
# 经典案例
> 超级炫酷水：https://madebyevan.com/webgl-water/ | https://madebyevan.com/
> 单机五子棋：https://www.jq22.com/jquery-info24143
> 球形颗粒动画：https://codepen.io/GreenSock/pen/BaarZmV
> 手指手势捕捉：https://fingerspelling.xyz/ | https://fingerspelling.xyz/game
> 精美动画案例：https://www.jq22.com/jquery-plugins%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C-1-jq
> 雷达扫描动画：https://www.jq22.com/demo/jquery360ld201906022127/
> 雪花飘落：https://www.jq22.com/demo/crd20170104/
> 三维太阳系：https://shinewen189.github.io/nigo-vue-planet/
> 掷色子动画：https://www.jq22.com/demo/jquerySaizi202007152141/
> CSS波纹动画：https://www.jq22.com/demo/cssMapdh202007031132/
> HTML5 Canvas 3D环形方块翻转动画DEMO演示：https://www.html5tricks.com/demo/html5-canvas-3d-circle-cube/index.html
> Gl-matrix.js WegGL Canvas 球体光照实验：https://wow.techbrood.com/fiddle/14696
> 木棉树：http://www.mms3d.cn/
> G3D：https://alibaba.github.io/G3D/?spm=taofed.homepage.products.6.cebe5ac8NWBjY4
> 五子棋：https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_voxelpainter.html
https://tympanus.net/codrops/
http://yakudoo.com/
https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/
# 3D建模与渲染引擎框架
> Mars3D：http://mars3d.cn/
> 踏得网 - 发现和展示数字魔法：https://www.techbrood.com/
> https://techbrood.com/
> 动动三维：https://www.ddd.online/
> 计算机图形学：https://max.book118.com/html/2019/0901/6145110210002101.shtm
> 璇玑动画：https://www.viewspread.com/
> 3D云设计平台-酷家乐：https://yun.kujiale.com/ | https://www.3dcat.live/
> 三维家3D家居云设计：https://b.3vjia.com/index.html | https://3d.3vjia.com/V4
> Realibox：在线3D可视化设计_3D效果图云渲染展示_3D数据-realibox | http://open.realibox.com/ | https://realibox.com/
> 3D云设计平台-酷家乐：https://yun.kujiale.com/ | https://www.3dcat.live/
> 三维家3D家居云设计：https://3d.3vjia.com/V4
> 丝路视觉：https://www.silkroadcg.com
> 飞桨：https://www.paddlepaddle.org.cn/
> ThingJS：http://www.thingjs.com/guide/
> Shapespark：https://www.shapespark.com/cn
> Sketchfab 3D建模网站：https://sketchfab.com/
> CG设计网：https://www.cg99.cn/ | 137 1864 7330 | ps123456
> 模型素材：https://www.kenney.nl/
> 欧模网：https://www.om.cn/ | 137 1864 7330 | ps123456
> 知末网：https://www.znzmo.com/
# 相关类库
> CreateJS：https://github.com/CreateJS | https://www.createjs.com/
> EaselJS：https://github.com/CreateJS/EaselJS | https://createjs.com/docs/easeljs/modules/EaselJS.html
> TweenJS：https://www.createjs.com/tweenjs | https://github.com/CreateJS/TweenJS
> SoundJS：https://www.createjs.com/soundjs | https://github.com/CreateJS/SoundJS
> PreloadJS：https://www.createjs.com/preloadjs | https://github.com/CreateJS/PreloadJS
> Zoe：https://github.com/CreateJS/Zoe
> VRControls.js、VREffect.js、WebVR.js、OpenGL和DX、、、、
# 3D 物理引擎
> Cannon.js
> Oimo.js
> Ammo.js
> Energy.js
> Physijs
# 手势识别与控制
> 手指控制技术示例：https://fingerspelling.xyz/
Tracking.js 和 JSFeat
在前端做计算机视觉的，包括提取特征点、人脸识别等。
识别与追踪：Tracking.js、JSFeat、ConvNetJS、deeplearn.js、keras.js 。获取到视频流之后的工作就是识别和追踪。不管是对于 native AR 还是 WebAR，目前的识别算法与框架已经非常成熟，难就难在识别之后如何跟踪，如何更好更稳定更高质量的跟踪。
用滤波算法（比如卡尔曼滤波）将卡顿降到更小，让用户从视觉感受上似乎更流畅
# 谷歌开源基于 ML 的手部跟踪算法
> Gitlab: https://github.com/google/mediapipe
> 官网：https://google.github.io/mediapipe/
> https://mediapipe.dev/
Kalidokit——一个开源的脸部、手势以及身体追踪库：http://k.sina.com.cn/article_5365023264_13fc7c22004001a51q.html
利用openpose轻松搞定手势识别：https://zhuanlan.zhihu.com/p/115438416
仅供学习使用，利用THREE.JS、GLSL实现，圆形扫描、立体扫描、区域高亮、横向扫描、地图飞线、地面线路、珠海市模型导入。未来将接入真实路况数据，AI语音控制场景功能
纹理映射
分形几何、光线追踪、样条、光照模型、表面绘制、计算机动画、虚拟现实、图形算法的并行实现、反走样、超二次曲面、BSP树、粒子系统、基于物理的建模、科学计算可视化、辐射度、凹凸映射和变形;
主要扩展的内容有:动画、对象表示、三维观察流水线、光照模型、表面绘制技术和纹理映射。
图像分割、图像分类、目标检测、目标跟踪
# 数学基础
> 解析几何、线性代数、向量和张量分析、复数、四元数、微积分初步和数值分析等方面的技术。
# 干扰环境
> 摄像机、光照、距离、噪声图元
图元：即图形输出原语(Graphics output primitive), 是图形软件包中用来描述各种图形元素的函数。
几何图元
几何图元，即描述对象几何要素的输出图元。
识别凹多边形
分割凹多边形
画线算法
并行画线算法
圆生成算法
椭圆生成算法
并行曲线算法
# 图形（像）的构成属性
> 几何属性：刻画对象的轮廓、形状。也称几何要素。包括点、线、面、体。
> 非几何属性：视觉属性，刻画对象的颜色、材质等。比如明暗、色彩、纹理、透明性、线型、线宽。
关于图形图像底层原理与相关算法的Web前端技术实践应用
# 像素填充率-Fill rate
> GPU每秒可以渲染到屏幕的像素数量。（估计公式：填充率 = 总像素数 x Shader复杂度 x Overdraw）
# 显存带宽
> 指GPU可以读取和写入的速率。
# 计算机图形显示原理
>
> 显卡(图形适配器)：
> 显示屏：
# GPU（graphics processing unit）图形处理器：又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器。
> GPU使显卡减少了对CPU的依赖，并进行部分原本CPU的工作，尤其是在3D图形处理时GPU所采用的核心技术有硬件T&L（几何转换和光照处理）、立方环境材质贴图和顶点混合、纹理压缩和凹凸映射贴图、双重纹理四像素256位渲染引擎等，而硬件T&L技术可以说是GPU的标志。
# 光栅显示系统
# 帧缓冲区
# 显示终端
# VLSI 技术
# 凹多边形
# 凹多边形
# 2000年加拿大ATI公司推出的 RADEON显卡芯片含有3千万颗晶体管
> 每秒15亿个象素填写率
# 图形处理器由以下器件组成
> 显示主芯片显卡的核心，俗称GPU，它的主要任务是对系统输入的视频信息进行构建和渲染。
> 显示缓冲存储器用来存储将要显示的图形信息以及保存图形运算的中间数据;显示缓存的大小和速度直接影响着主芯片性能的发挥。
> RAMD/A转换器把二进制的数字转换成为和显示器相适应的模拟信号。
染色算法、分形显示、样条曲线、纹理映射、深度缓存、三维查看、三维建模、光照模型、表面渲染方法、射线跟踪、辐射度、计算机动画、、、、、、
透明性、高质量反走样、运动模糊、景深和微多边形染色等问题
实时光线跟踪、Reyes(Renders everything you ever saw) 等更加复杂的图形算法
高质量的实时3D图形需要的全局光照、动态和实时显示以及阴影和反射等问题
# 光照明模型 | 光照模型 | 明暗模型
> 定义：对场景的对象进行透视投影，然后在可见面上产生自然光效果，可以实现场景的真实感显示。
> 功能：主要用于对象表面某光照位置的颜色计算。图形
画线算法
DDA算法
Bresenham画线算法
并行画线算法
圆生成算法 | 中点圆算法
椭圆生成算法 | 中点椭圆算法
并行曲线算法
扫描线填充算法 | 边界填充算法 | 泛滥填充算法
裁剪算法 | 梁友栋-Barsky线段裁剪算法 | Nicholl-Lee-Nicholl线段裁剪算法
多边形绘制算法
曲线拟合算法
场景发光算法
二维
三维
平移
旋转
缩放
变换
投影
建模系统
欧式几何方法
分形几何方法
计算机动画
计算机动画，指场景中任何随时间而发生的视觉变化。
实时动画
逐帧动画
双缓存
双缓存，即使用两个刷新缓存，初始状态时，在第一个缓存中创建动画的一帧；然后，当用该缓存中的帧刷新屏幕时，在第二个缓存中创建下一帧；下一帧创建完成后，互换两个缓存的角色；因而刷新进程开始用第二个缓存中的帧来刷新屏幕，同时在第一个缓存中继续创建下一帧。
重要通知
支持双缓存的图形库通常提供一个激活双缓存的函数和一个互换缓存角色的函数。
- 典型动画功能
- 管理对象运动
- 生成对象视图
- 产生照相机运动
- 生成插值帧
运动捕捉
运动捕捉，即先将真演员的运动进行数字化，以此作为动画角色的基础信息。
样条
样条，指通过一组指定点集而生成平滑曲线的柔性带。
样条曲线
样条曲面
插值
可见面判别算法
深度缓存算法•A缓存算法•扫描线算法•深度排序算法•BSP树算法•区域细分算法•八叉树算法•光线投射算法•线框图可见性算法
物空间算法(object-space)
像空间算法(image-space)
光照模型与面绘制算法
概念术语
- 光照明模型：也称光照模型、明暗模型，指表面上单个点的光强度计算模型，主要用于对象表面某光照位置的颜色计算。
- 表面绘制方法：即将应用一个光照模型获得所有投影的表面位置的像素颜色的过程，使用光照模型为对象的所有投影位置确定像素颜色。
真实成像
真实成像包括表面特性的精确表示、场景中光照效果的物理描述。
- 表面光照效果
- 光的反射
- 透明性
- 表面纹理
- 阴影
光源
表面光照效果
基本光照模型
透明表面
雾气效果
阴影
照相机参数
光强度
半色调模式
抖动技术
多边形绘制算法
光线跟踪算法
Arthur Appel 于 1968 年首次提出用于渲染的光线跟踪算法