广东财经大学：湾区影视产业学院《视觉艺术编程基础》课程教学大纲.doc_大学文库

《视觉艺术编程基础》课程教学大纲一、课程基本信息课程代码：19230014 课程名称：视觉艺术编程基础英文名称：Graphics programming foundation for visual art 课程类别：学科基础课（必修）学时：64 学分：4 适用对象：数字媒体（艺术）专业考核方式：考查先修课程：高级语言程序设计、数据结构相关课程：计算机图形学、计算机视觉、美学原理二、课程简介在数字媒体艺术中，视觉占了大部分的比重，图形输入或显示设备及其图形用户界面成为数字艺术交互设计（如新媒体艺术，动画，VR/AR等设计创作）中重要的组成部分。怎么样利用计算机来生成、处理、和显示图形图像，达到数字艺术设计创作的效果呢？通过本课程的学习，欢迎同学们来到图形世界，同学们可以以理解计算机图形学的原理和图形绘制的方法为主线，掌握程序语言支撑图形编程的基本语法和图形绘制几何变换基本素的运用，学会初步的视觉艺术编程。三、课程性质与教学目的 (1)本课程是数字媒体艺术专业学生的一门学科基础课。讲授如何通过国际通用的开放式三维图形标准实现计算机图形学相关的绵程绘制，搭配本专业培养计划的“计算机科学与技术”主干学科中的《计算机图形学》课程学习 (2) 通过本课程学习学生应能够了解计算机图形系统功能结构和可编程道染流水线，在了解光栅图形的生成基础上掌握基本几何元素绘制的编程方法，熟悉一些头现图元及其图元属性的函数方法，理解坐标变换、真实感图形学中光照处理、照相机增强现实和纹理贴图（映射）的基本概念和编程方法。理解面向对象程序设计思相，堂提初步的视微艺术缩程，为学会利用图形程序设计、图形算法设计和图形件入脚本设计做数字艺术创作设计打下基础，一反应对更新的设计软件和层出不穷的高级编程语言。四、教学内容及要求第一章认识图形系统和可编程谊染管线 (一)目的与要求 ·了解当前经典的CG技术在计算机动画和计算机艺术中的应用和研究了解计算机图形系统和可编程渲染管线

1 《视觉艺术编程基础》课程教学大纲一、课程基本信息课程代码：19230014 课程名称：视觉艺术编程基础英文名称：Graphics Programming Foundation for Visual Art 课程类别：学科基础课(必修) 学时：64 学分：4 适用对象: 数字媒体(艺术)专业考核方式：考查先修课程：高级语言程序设计、数据结构相关课程：计算机图形学、计算机视觉、美学原理二、课程简介在数字媒体艺术中，视觉占了大部分的比重，图形输入或显示设备及其图形用户界面成为数字艺术交互设计（如新媒体艺术，动画，VR/AR 等设计创作）中重要的组成部分。怎么样利用计算机来生成、处理、和显示图形图像，达到数字艺术设计创作的效果呢？通过本课程的学习，欢迎同学们来到图形世界，同学们可以以理解计算机图形学的原理和图形绘制的方法为主线，掌握一些高级程序语言支撑图形编程的基本语法和图形绘制几何变换基本元素的运用，学会初步的视觉艺术编程。三、课程性质与教学目的（1）本课程是数字媒体艺术专业学生的一门学科基础课。讲授如何通过国际通用的开放式三维图形标准实现计算机图形学相关的编程绘制，搭配本专业培养计划的“计算机科学与技术”主干学科中的《计算机图形学》课程学习。（2）通过本课程的学习，学生应能够了解计算机图形系统功能结构和可编程渲染流水线，在了解光栅图形的生成基础上掌握基本几何元素绘制的编程方法，熟悉一些实现图元及其图元属性的函数方法，理解坐标变换、真实感图形学中光照处理、照相机增强现实和纹理贴图（映射）的基本概念和编程方法。理解面向对象程序设计思想，掌握初步的视觉艺术编程，为学会利用图形程序设计、图形算法设计和图形软件嵌入脚本设计做数字艺术创作设计打下基础，举一反三应对更新的设计软件版本和层出不穷的高级编程语言。四、教学内容及要求第一章认识图形系统和可编程渲染管线（一）目的与要求 ⚫ 了解当前经典的 CG 技术在计算机动画和计算机艺术中的应用和研究 ⚫ 了解计算机图形系统和可编程渲染管线

能够搭建图形编程实验环境 (二)教学内容 1.介绍CG编程技术的发展史，以及在计算机动画和计算机艺术中的应用和研究（慕课） 2.图形系统简介 CRT基本原理和从CT到3D显示，CG编程中的颜色模型、图像、像素基本知识： 3.可编程染管线简介 4. 讨论有趣的视觉现象和G黑科技：预留问题：如何获得更好的实时道染真实感体验？ 5. 图形编程思维的起点朴素的软光栅：计算机画一根直线的问题 6.可编程者色器和者色器效果 7.演示：环境搭建过程和旋转着色立方体置习1：【实珍环墙搭建 --MinGW+OKE:测试He1 lo Window和旋转着色三角形) 【思政】光线跟算法辐射度算法的提出，标志着真实感图形的显示算法已逐成【思政】研究多通道语义模型、多通道整合算法及其秋件结构和界面花式是当前用户界面和接口方面研究的主就方向，而图形学在其中将起主导作用。 (三)教学方法与手段 Pearse0n1-2,19,22:主教1,2.1：华科幕课1：鹄教1 课堂讲授+多媒体教学+B1aCkb0ard网络平台回顾+P阳L教学：以下各章可第二章图形编程语言程序结构和简单基本语法、函数、头文件、依赖库以C/C+/0 penGL为例 (一)目的与要求 ●会用程序结构流程图表达自己的编程思想认识函数的输入和输出、调用能编译和加载外来模型文件，必要时修政源文件 ●会看帮助文档，函数用法说明（用户手册） (二)教学内容 L图形标准绘制管线和程序结构简介 2）认识结构流程图 3)认识函数的输入和输出、调用 4)基本语法： a)函数、结构体和类 )条件语句、循环语句、开关语句、数组、变量、向量、列表指针和引用数据类型和类型转 d)文件的读写 e)注释 )内存问题calloc和ne )头文件和附加链接依赖库 (着色器语言)程序调试和测 7)演示：三角形的着色变换和shader程序调用讲解练习1蝴导：练习2：《线框和填充模式的正六边形着色》【围政】0如L是目前图形工业界最广泛使用的三雄图形偏程接口和国际通用的图形标准，其前身是 IrighGL,由于Iria GL缺乏续 —的搬范，根难进一步广泛应用，而0 n政进了形接口，特别界

2 ⚫ 能够搭建图形编程实验环境（二）教学内容 1. 介绍 CG 编程技术的发展史，以及在计算机动画和计算机艺术中的应用和研究（慕课） 2. 图形系统简介: CRT 基本原理和从 CRT 到 3D 显示，CG 编程中的颜色模型、图像、像素基本知识； 3. 可编程渲染管线简介 4. 讨论有趣的视觉现象和 CG 黑科技；预留问题：如何获得更好的实时渲染真实感体验？ 5. 图形编程思维的起点-朴素的软光栅：计算机画一根直线的问题 6. 可编程着色器和着色器效果 7. 演示：环境搭建过程和旋转着色立方体布置练习 1：《实验环境搭建 ——MinGW +CMAKE :测试 Hello Window 和旋转着色三角形》【思政】光线跟踪算法和辐射度算法的提出，标志着真实感图形的显示算法已逐渐成熟。【思政】研究多通道语义模型、多通道整合算法及其软件结构和界面范式是当前用户界面和接口方面研究的主流方向，而图形学在其中将起主导作用。（三）教学方法与手段 Pearson 1-2，19，22；主教 1，2.1; 华科慕课 1；辅教 1 课堂讲授 + 多媒体教学 + Blackboard 网络平台回顾 + PBL 教学；以下各章同第二章图形编程语言程序结构和简单基本语法、函数、头文件、依赖库 —— 以 C/C++ /OpenGL 为例（一）目的与要求 ⚫ 会用程序结构流程图表达自己的编程思想 ⚫ 认识函数的输入和输出、调用 ⚫ 能编译和加载外来模型文件,必要时修改源文件 ⚫ 会看帮助文档，函数用法说明（用户手册）（二）教学内容 1) OpenGL 图形标准绘制管线和程序结构简介 2) 认识结构流程图 3) 认识函数的输入和输出、调用 4) 基本语法： a) 函数、结构体和类 b) 条件语句、循环语句、开关语句、数组、变量、向量、列表 c) 指针和引用、数据类型和类型转换 d) 文件的读写 e) 注释 f) 内存问题 calloc 和 new 5) 头文件和附加链接依赖库 6) （着色器语言）程序调试和测试 7) 演示：三角形的着色变换和 shader 程序调用讲解练习 1 辅导；练习 2：《线框和填充模式的正六边形着色》【思政】 OpenGL 是目前图形工业界最广泛使用的三维图形编程接口和国际通用的图形标准，其前身是 Irish GL, 由于 Iris GL 缺乏统一的规范，很难进一步广泛应用，而 OpenGL 改进了该图形接口，特别是

其跨平台性。【思政】尽管OpenGL规范本身和语言是分开的，但其API从一开始就和C语言有着内在的联燕，0oen2.0 之后引入类C 开创性意义且在言GL,成为了可德的基于色的API。显然在当对汇编语言版本的方扩展接具有时用有用的：提升为楼心的0 义功能，支持0pe L2.0实现的硬件厂商，生产出的图形硬件郁必须具备可编程能力并能支持一个用高层语言编写的着色器。第三章基本几何元素绘制 (一)目的与要求 ●了解OpenGL像素阵列图元和显示缓冲区 ·堂捏常用实现图元及属性的方法了解线算法和画家算法 (二)教学内容 2.1编程方法 1)绘图准名和结电 2)设置点线面等图元函 3)设置图元属性函数 4)调用着色器程序 5)设置图元的显示模式 2.2原理概念简介（课】 1)0 penGL像素库列图元和是示缓冲区 2)法向量、失量运算和矩阵运算简 3)直线段和圆弧的扫描转换编程算浏 -画线算法 4)多边形的扫描转换与区域填充编程算法一画家算法 5)按剪、反走样、消隐、混合 6)演示：直线、圆、椭圆生成：OpenGL字符函数：相应的processing范例程序PointArray 7)练习2轴导 8)练习3：《通过面点函数画点阵圆盘》、先画结构流程围、做测试计划【思政-讨论】计算机中的学符可通过国际标准字符集SCTI码和国标字符集GB2312-80表示。，为了在输出设备显示器上显示，系统必须装备有相应的字库，分为点阵型和矢量型两种。显示时都受先从字库里将它们的相关字符信息检索出来：如果是点阵则需要将表示字符位图中的每一位像素都写到帧缓存里，变换时需要对每一像素进行变换：如果是矢量字符则存储轮离信息，变换时只要对其笔面嘴点进行变换就可以了。【思政】光播图形的走样现象包括锯齿状边界、图形细节失真（原本比像素小的图形变宽、狭小的图形遗失)等现象。这些失真现象是由用离散量表示迷续量引起，不可蓬免，但可通过提高分辨率、区域采样和加权区域采样等反走样方法减少或消除这种效果第四章坐标变换和几何造型绘制 (一)目的与要求 ●掌捏基本几何元素绘制方法、熟悉一定图元函数和属性函数了解矩阵表示和齐次坐标，理解窗口到视口的坐标变换 Open 12D八3D图形图像创建和几变换编程示例 ● 理解参数化、参数曲线的代数和几何形式、参数曲面的概色

3 其跨平台性。【思政】尽管 OpenGL 规范本身和语言是分开的，但其 API 从一开始就和 C 语言有着内在的联系。OpenGL 2.0 之后引入类 C 语言 GLSL,成为了可编程的、基于着色器的 API。虽然在当时汇编语言版本的扩展接口具有开创性意义且在当时是很有用的，但它从未被提升为核心的 OpenGL 功能，而任何想要支持 OpenGL 2.0 实现的硬件厂商，生产出的图形硬件都必须具备可编程能力并能支持一个用高层语言编写的着色器。第三章基本几何元素绘制（一）目的与要求 ⚫ 了解 OpenGL 像素阵列图元和显示缓冲区 ⚫ 掌握常用实现图元及属性的方法 ⚫ 了解画线算法和画家算法（二）教学内容 2.1 编程方法： 1）绘图准备和结束 2）设置点线面等图元函数 3）设置图元属性函数 4）调用着色器程序 5）设置图元的显示模式 2.2 原理概念简介（慕课） 1） OpenGL 像素阵列图元和显示缓冲区 2）法向量、矢量运算和矩阵运算简介 3）直线段和圆弧的扫描转换编程算法——画线算法 4）多边形的扫描转换与区域填充编程算法——画家算法 5）裁剪、反走样、消隐、混合 6）演示：直线、圆、椭圆生成；OpenGL 字符函数；相应的 processing 范例程序 PointArray 7）练习 2 辅导 8）练习 3：《通过画点函数画点阵圆盘》、先画结构流程图、做测试计划【思政-讨论】计算机中的字符可通过国际标准字符集 ASCII 码和国标字符集 GB2312-80 表示。为了在输出设备显示器上显示，系统必须装备有相应的字库，分为点阵型和矢量型两种。显示时都要先从字库里将它们的相关字符信息检索出来；如果是点阵则需要将表示字符位图中的每一位像素都写到帧缓存里，变换时需要对每一像素进行变换；如果是矢量字符则存储轮廓信息，变换时只要对其笔画端点进行变换就可以了。【思政】光栅图形的走样现象包括锯齿状边界、图形细节失真（原本比像素小的图形变宽、狭小的图形遗失）等现象。这些失真现象是由用离散量表示连续量引起，不可避免，但可通过提高分辨率、区域采样和加权区域采样等反走样方法减少或消除这种效果。第四章坐标变换和几何造型绘制（一）目的与要求 ⚫ 掌握基本几何元素绘制方法、熟悉一定图元函数和属性函数 ⚫ 了解矩阵表示和齐次坐标，理解窗口到视口的坐标变换 ⚫ 理解 OpenGL 2D\3D 图形图像创建和几何变换编程示例 ⚫ 理解参数化、参数曲线的代数和几何形式、参数曲面的概念

●了解形体的边界表示模型和网格处理概念 ·了解非规则造型的形态学方法：分形几何方法、粒子系统和其他过程方法 (二)教学内容 1 掌捏基本几何元素绘制方法、热悉一定图元函数和属性函数 )了解矩阵表示和齐次坐标，理解物口到视口的坐标变换 3)OpenGL二维图形几何变换编程示例 4)OpenG1.三锥图形的几何变换编程示例，讲解旋转立方体实验代码理解参数化参数曲线的代数和几何形式、参数曲面的概了解形体的边界表示模型和网格处理概 7)了解非规则造型的形态学方法：分形几何方法、粒子系统和其他过程方法 8)练习3辅导 9)练习4：《模型导入》 10习5。【旋转缩放球的给制【思】现在的美术人员，尤其是商业艺术人员都热衷于用计算机软件从率艺术创作。可用于美术创作的款件根多，如二喻平面的画笔程序（如CorelDraw,,Photoshop和PaintShop)1专门的图表绘制软件（如 Visio)\三锥建模和道染软件包（如3DM化ay阳AB)以及一些专门生成动画的牧件（如 Alias\Soft image\Wavefront\Lightwave3D),图像和视频处理库(OpenCY,Assimp,Cimag,std imag Pangolin). 矩运算处理库(B1g G),要注意区分基系统和帐入系统的使用环境（如左手系还是右手系的坐标系由D 是行存储还是列存储？【思政】在早期开发的实体造丞系统中，值得提及的是剑桥大学的U皿-1系统，5年以后又出现了BUID 系统，但都没有公开使用，更遗第的是系统的研究小组在190年也解散了。研究小组的一部分人组建了 Shape Data公司，并开发出实体造型系统Romulu品，孕育了著名的实体造型系续开发环境：Parasolid和 [思政]坐标变换是0 penCL中最重要的操作之 ,想象一个场景，一个相机每个模理及相机都可以通过坐示变换政变自己的位置，朝向，最终通过坐标变换，场景模型才会正确的显示在屏移之上。第五章光照处理和纹理贴图 (一)目的与要求 ●形体的投母影李换 ●光照处理纹理与表面细节添加 OpenGL纹理函数示例光线跟踪方法和0 可见性检查函了解实时阴影的生成 (一)数学内容形体的投影变换：透视投影 2)光照处理 )光源和表而光照效果、基本光照模型 )透明、混合、雾气效果、阴影的生成 c)OpenGL光照模型和面绘制函数示例 3)纹理与表面细节添加 OpenGL纹理函数示例天空盘、法线贴图和阴生成工程讲角 4)光线跟踪方法和0penG1.可见性检查函数 5)练习45辅导 6)练习6：《改变摄像机类的控制键》

4 ⚫ 了解形体的边界表示模型和网格处理概念 ⚫ 了解非规则造型的形态学方法：分形几何方法、粒子系统和其他过程方法（二）教学内容 1) 掌握基本几何元素绘制方法、熟悉一定图元函数和属性函数 2) 了解矩阵表示和齐次坐标，理解窗口到视口的坐标变换 3) OpenGL 二维图形几何变换编程示例 4) OpenGL 三维图形的几何变换编程示例，讲解旋转立方体实验代码 5) 理解参数化、参数曲线的代数和几何形式、参数曲面的概念 6) 了解形体的边界表示模型和网格处理概念 7) 了解非规则造型的形态学方法：分形几何方法、粒子系统和其他过程方法 8) 练习 3 辅导 9) 练习 4：《模型导入》 10) 练习 5：《旋转缩放球的绘制》【思政】现在的美术人员，尤其是商业艺术人员都热衷于用计算机软件从事艺术创作。可用于美术创作的软件很多，如二维平面的画笔程序（如 CorelDraw,Photoshop 和 PaintShop）\专门的图表绘制软件（如 Visio ） \ 三维建模和渲染软件包（如 3DMAX, Maya\AE ）以及一些专门生成动画的软件（如 Alias\Softimage\Wavefront\Lightwave3D）,图像和视频处理库（OpenCV, Assimp, Cimag, std_imag, Pangolin）, 矩阵运算处理库(Eigen， GLM…),需要注意区分基础系统和嵌入系统的使用环境（如左手系还是右手系的坐标系？由 DX 支持还是 OpenGL 支持？是行存储还是列存储？）【思政】在早期开发的实体造型系统中，值得提及的是剑桥大学的 BUIL-1 系统，5 年以后又出现了 BUILD-2 系统，但都没有公开使用，更遗憾的是系统的研究小组在 1980 年也解散了。研究小组的一部分人组建了 Shape Data 公司，并开发出实体造型系统 Romulus,孕育了著名的实体造型系统开发环境：Parasolid 和 ACIS. [思政]坐标变换是 OpenGL 中最重要的操作之一。想象一个场景，摆放若干个模型和一个相机，每个模型及相机都可以通过坐标变换改变自己的位置，朝向，最终通过坐标变换，场景模型才会正确的显示在屏幕之上。第五章光照处理和纹理贴图（一）目的与要求 ⚫ 形体的投影变换 ⚫ 光照处理 ⚫ 纹理与表面细节添加， OpenGL 纹理函数示例 ⚫ 光线跟踪方法和 OpenGL 可见性检查函数 ⚫ 了解实时阴影的生成（二）教学内容 1) 形体的投影变换：透视投影 2) 光照处理 a) 光源和表面光照效果、基本光照模型 b) 透明、混合、雾气效果、阴影的生成 c) OpenGL 光照模型和面绘制函数示例 3) 纹理与表面细节添加， OpenGL 纹理函数示例：天空盒、法线贴图和阴影生成工程讲解 4) 光线跟踪方法和 OpenGL 可见性检查函数 5) 练习 4-5 辅导 6）练习6：《改变摄像机类的控制键》

7)练习7：《缩放旋转大棱柱的纹理》 8)练习8：《修改光照模型和照相机增强现实示例代码》【思政】纹理贴图早期的技术是在顶点上设定颜色，每个面片上像内颤色使用各顶点颜色的插值：后来的方是对像素点，值得到它的纹理坐然后通过坐标取图中的像素值”，再根据这个值来决定像素的颜色。由于读取出来的紋理图像“像素值”不一定要被直接用来代表面片像素的颜色，而是有可能作为输入数据通过各种计算来确定最终的颜色，所以通常称为纹素或者纹理单元(texel), 第六章计算机动画编程和基于图像的三维重建 (一)目的与要求了动画列的设了解计算机动画语言了解关键慎系统 ●了解运动的描述、角色动画和周期性运动 (二)教学内容 1) 了解动画序列的设 2)了解计算机动画语言 3)了解关键的系统 4)了解运动的描述、角色动通和周期性运动了解OpenGL ES 6) 了解基于图像的三潍重建 7)OpenGL动画子程序示例 8)OpenGL粒子系统编程示例讲钢 9)OpenGI.实时阴影编程示例讲解 10)相应Processing范例 1D练习6-8销导 12)练习9：《易季花开花谢实现透明渐变效果》【思攻】世界着名的动画大师John Halas曾经说过“动画的本质在于运动”，也有人称动画为“动的艺术”。计算机动画与传统动面（手绘多张静态面面）都以满足人跟暂留效应的顿率播放（典型：24顿/秒，最小： 8熊/秒)。但是计健机动画在植的制作上与传统动百是有区别的，即关键的通过新字化采集方式得到，或者用交互式国形编器生成，对于复杂的形体还可以通过编程来生成【思政】可以通过在两个关健帆之间的播值转变多边形的形状来将一个对象形态变换到另一个形态。运动略径可以通过样条曲线给出，也可以基于作用力等其他基于物理建模的方式给出。【思政】实时动西受到计算机的速度、存储容量、字长、指令系统及图形处理能力等因素的限制，要满足不闪烁的流畅实时感，“时间”是一个致命的限制。利用航缓存预存逐顺动面是一种解决方案，但是该放映技术目前还不能实现带有纹理、反射、透明和阴影等真实家效果的三维实时动面期中测验期末课程设计：综合应用（校园漫游场景幻变万花简特效）五、各教学环节学时分配教学环节习讨教学时数实验其他教课学环节课课程内容第一章 4

5 7）练习7：《缩放旋转六棱柱的纹理》 8）练习8：《修改光照模型和照相机增强现实示例代码》【思政】纹理贴图早期的技术是在顶点上设定颜色，每个面片上像素的颜色使用各顶点颜色的插值；后来 OpenGL处理纹理的方法是对于每一个像素点，插值得到它的纹理坐标，然后通过纹理坐标读取图像中的“像素值”，再根据这个值来决定像素的颜色。由于读取出来的纹理图像“像素值”不一定要被直接用来代表面片像素的颜色，而是有可能作为输入数据通过各种计算来确定最终的颜色，所以通常称为纹素或者纹理单元（texel）. 第六章计算机动画编程和基于图像的三维重建（一）目的与要求 ⚫ 了解动画序列的设计 ⚫ 了解计算机动画语言 ⚫ 了解关键帧系统 ⚫ 了解运动的描述、角色动画和周期性运动（二）教学内容 1) 了解动画序列的设计 2) 了解计算机动画语言 3) 了解关键帧系统 4) 了解运动的描述、角色动画和周期性运动 5) 了解 OpenGL ES 6) 了解基于图像的三维重建 7) OpenGL 动画子程序示例 8) OpenGL 粒子系统编程示例讲解 9) OpenGL 实时阴影编程示例讲解 10) 相应 Processing 范例 11) 练习 6-8 辅导 12) 练习 9：《易季花开花谢——实现透明渐变效果》【思政】世界著名的动画大师John Halas曾经说过“动画的本质在于运动”，也有人称动画为“动的艺术”。计算机动画与传统动画（手绘多张静态画面）都以满足人眼暂留效应的帧率播放（典型：24帧/秒，最小： 8帧/秒），但是计算机动画在帧的制作上与传统动画是有区别的，即关键帧通过数字化采集方式得到，或者用交互式图形编辑器生成，对于复杂的形体还可以通过编程来生成。【思政】可以通过在两个关键帧之间的插值帧转变多边形的形状来将一个对象形态变换到另一个形态。运动路径可以通过样条曲线给出，也可以基于作用力等其他基于物理建模的方式给出。【思政】实时动画受到计算机的速度、存储容量、字长、指令系统及图形处理能力等因素的限制，要满足不闪烁的流畅实时感，“时间”是一个致命的限制。利用帧缓存预存逐帧动画是一种解决方案，但是该放映技术目前还不能实现带有纹理、反射、透明和阴影等真实感效果的三维实时动画。期中测验期末课程设计：综合应用（校园漫游场景幻变万花筒特效）五、各教学环节学时分配教学环节教学时数课程内容讲课习题课讨论课实验其他教学环节小计第一章 2 1 1 4