基于 WebGL 的交互式计算机图形学

Interactive Computer Graphics with WebGL

Applications of computer graphics are ubiquitous, ranging from animations in movies to computer aided design of mechanical parts. In this course, we will learn how to create three-dimensional interactive applications using WebGL that run within the latest web browsers. We will disucss all aspects of computer graphics from hardware to software to applications.

新墨西哥大学

分享

基于 WebGL 的交互式计算机图形学
  • 分类: 计算机
  • 平台: Coursera
  • 语言: 英语

课程概述

OpenGL is the standard application programming interface (API) to graphics systems for both education and industry. Recent advances in hardware and software have focussed application development on the Web and for mobile devices such as smart phones. Over the past year there has been enormous interest in WebGL, the version of OpenGL that runs within Web browsers and even on newer smart phones. Consequently, for the first time both students and practitioners can develop exciting three-dimensional interactive applications that are independent of the particular platform and can be accessed like any other Web application.

In this course, we will learn how to create three-dimensional, interactive applications using WebGL that run within the latest web browsers. By the end of the course, every student will have written and tested a complete interactive three-dimensional application. Because WebGL is the JavaScript implementation of OpenGL ES 2.0, all code will be developed in JavaScript. No prior knowledge of JavaScript is required as long as participants can program in C++, C# or Java. The content of the course will be based on the instructor’s recent textbook (not required) and course which is the first university course to use WebGL as the API.

授课大纲

Week 1: Introduction and Background
Lecture 1: Course Overview
Lecture 2: Outline via Examples
Lecture 3: Prerequisites and References
Lecture 4: A Simple WebGL Example
Lecture 5: Getting Started with WebGL
Lecture 6: OpenGL and WebGL
Lecture 7: HTML and Browsers
Lecture 8: JavaScript

Week 2: WebGL
Lecture 1: Square Program
Lecture 2: Shader Execution Model
Lecture 3: Square Program: The HTML file
Lecture 4: Square Program: The JavaScript File
Lecture 5: WebGL Primitves and Viewing
Lecture 6: Tessellation and Twist
Lecture 7: The Sierpinski Gasket
Lecture 8: Moving to Three Dimensions

Week 3: The Open GL Shading Language and Interaction
Lecture 1: Color
Lecture 2: GLSL and Shaders
Lecture 3: Input and Interaction
Lecture 4: Animation
Lecture 5: Buttons and Menus
Lecture 6: Keyboard and Sliders

Week 4: Displaying Geometry in WebGL
Lecture 1: Position Input
Lecture 2: Picking
Lecture 3: Matrices
Lecture 4: Representation
Lecture 5: Geometry 1
Lecture 6: Geometry 2
Lecture 7: Homogeneous Coordinates
Lecture 8: Some Caveats

Week 5: Transformations
Lecture 1: Affine Transformations
Lecture 2: Rotation, Translation, Scaling
Lecture3: Concatenating Transformation
Lecture 4: Transformations in WebGL
Lecture 5: Representing a Cube
Lecture 6: Animating the Cube

Week 6: Viewing in WebGL
Lecture 1: Classical Viewing
Lecture 2: Positioning the Camera
Lecture 3: Projection
Lecture 4: Projection in WebGL
Lecture 5: Orthogonal Projection Matrices
Lecture 6: Perspective Projection Matrices
Lecture 7: Representing and Displaying Meshes
Lecture 8: Lighting and Shading
Lecture 9: The Phone Lighting Model

Week 7: Lighting, Shading and Texture Mapping
Lecture 1: Lighting and Shading in WebGL
Lecture 2: Polygon Shading
Lecture 3: Per Vertex vs per Fragment Shading
Lecture 4: Buffers in WebGL
Lecture 5: Texture Mapping Overview
Lecture 6: Approaches to Texture Mapping
Lecture 7: WebGL Texture Mapping

Week 8: WebGL Texture Mapping
Lecture 1: WebGL Texture Objects
Lecture 2: Texture Mapping to the Cube
Lecture 3: Texture Mapping Variations
Lecture 4: Reflection and Environment Maps
Lecture 5: Bump Maps
Lecture 6: Compositing and Blending
Lecture 7: Imaging Applications

Week 9: Using the GPU
Lecture 1: The Mandelbrot Set
Lecture 2: Generating the Mandelbrot Set in the CPU
Lecture 3: Generating the Mandelbrot Set in the GPU
Lecture 4: Framebuffer Objects
Lecture 5: Renderbuffers
Lecture 6: Render to Texture

Week: 10: Render-to-Texture Applications
Lecture 1: Picking by Color
Lecture 2: Buffer Pingponging
Lecture 3: Diffusion Example
Lecture 4: Agent-Based Models

先修知识

Participants should be proficient in a high-level programming language sich as Java, C++ or JavaScript. Although all examples and assignments will be done in JavaScript, participants should be able to pick up sufficient JavaScript knowledge through the lectures, examples and online resources.

参考资料

Although the lectures are designed to be self-contained, we recommend (but do not require) that students refer to the book E. Angel and D. Shreiner, Interactive Computer Graphics (Seventh Edition), Pearson Education, 2015 (released March 2014).

授课形式

The instructor will present short video lectures as well as a full set of slides, coding examples, supplementary code libraries and the figures from the instructor’s textbook. Numerous websites are available that provide examples of WebGL applications and tutorials on JavaScript. It will include 5-6 practice code assignments and a final project.

常见问题解答

Will I get a Statement of Accomplishment after completing this class?
Yes. Students who successfully complete the class will receive a Statement of Accomplishment signed by the instructor.

What resources will I need for this class?
The only resources required for this class are an internet connection, a fairly recent graphics card and a web browser that supports WebGL. All recent versions of Chrome, Firefox, Safari, Opera and Internet Explorer support WebGL.

What background is expected for learners in this class?
Participants should be have good programming skills in a high-level language such as Java, C, C++ or JavaScript.

Do I have to know JavaScript, HTML, CSS or jQuery before taking this class?
No. We will use only JavaScript and HTML5 but you will not need any prior knowledge of either.

What is the coolest thing I’ll learn if I take this class?
You will able to create your own three-dimensional interactive applications that will run with on almost all recent browsers and even on the latest smart phones.

声明:MOOC中国收录之课程均源自下列机构,版权均归他们所有。本站仅作报道并尊重其著作权益,感谢他们对MOOC事业做出的贡献!(排名不分先后)
  • Coursera
  • edX
  • OpenLearning
  • FutureLearn
  • iversity
  • Udacity
  • NovoEd
  • Canvas
  • Open2Study
  • Google
  • ewant
  • FUN
  • IOC-Athlete-MOOC
  • World-Science-U
  • Codecademy
  • CourseSites
  • opencourseworld
  • ShareCourse
  • gacco
  • MiriadaX
  • JANUX
  • openhpi
  • Stanford-Open-Edx
  • 网易云课堂
  • 中国大学MOOC
  • 学堂在线
  • 顶你学堂
  • 华文慕课
  • 好大学在线CnMooc

Copyright © 2008-2015 MOOC.CN 慕课改变你,你改变世界