62-633 (9 Units)
Carnegie Mellon University College of Fine Arts Interdisciplinary Course
Open to all graduate students; Instructor permission required for undergraduate students
Class Times: W 6:30PM – 8:20PM
Class Room: MMCH 303 (TBC)
Instructor:
- Eddy Man Kim (eddymankim@cmu.edu)
Office Hours: By Appointment
Office Location: MMCH 308
Teaching Assistants:
- Benjamin Scott (bescott@andrew.cmu.edu)
- Rehan Butt (rab@andrew.cmu.edu)
Office Hours & Location: TBA
This course explores experimental applications of web graphics technology in the service of communicating spatial narratives. The spatial narratives will strive to reimagine the concept of space and the practice of storytelling in the context of browser-based graphics environments. This course will contemplate specifically the use of multi-dimensional media via the web as a vehicle for delivering spatial narratives. Web graphics technologies, such as CSS, SVG, Canvas and WebGL, have dramatically increased in their compatibility with both mobile and desktop computing devices and have consequently broadened the reach of graphically rich content to the masses. Students will work on a semester-long project in the form of an interactive web application that challenges, augments, or reaffirms the sense of space through deliberate use of storytelling devices. Upon culmination, the projects will be exhibited on the course website for public viewing. The first half of the course will consist of workshops for building various skills from asset creation to graphics programming. Starting with a brief introduction to HTML/CSS/JS and UI/UX design principles, the workshops will focus primarily on the THREE.js library. The second half of the course will focus on the production of the final project where class times will turn into hack sessions. While there is no prerequisite for this course, some familiarity of the technologies mentioned above and basic programming skills are highly preferred. First class will meet after Labor Day on September 6, 2017.
In short, this course is a research seminar that will explore affordances of spatial narratives by experimenting with various web graphics technologies.
Students will produce an interactive 3D narrative experience for the web, and will gain technical, conceptual, and organizational insights along the way.
By the end of the course, students should have the following outcomes:
- Gain experience in programming web-based interactive 3D applications
- Gain experience in conceptualizing, constructing, and delivering spatial narratives
- Gain theoretical insights into the potential applications for spatial communication using web graphics technologies
From a technical perspective, the students can hope to learn how to:
- Work on web-based multimedia projects, organizing work and assets
- Model evocative environments and models in CAD softwares (3DS Max, Rhino)
- Create simple animations and write simple interactive scripts
- Leverage audio, video, images, and prose in 3D experiences
Experimentation is encouraged in this course. The experiments shall strive to challenge, accentuate, and intertwine the following spatial concepts:
- Dimensionality
- Materiality
- Scale
Week 2: Course Introduction; Github Workflow; Markdown/Jekyll Overview (Recording)
Due next class:
- Fork the course repository
- Create a new Jekyll post with an embedded 3D model (that you've created) using SketchFab
- Analyze and describe the experience of publishing your 3D model
- Describe your motivations for taking this course
Due next class:
- Research and gather more examples of the technologies discussed in class
- Create a gallery within a new Jekyll post that links to the examples
Due next class:
- Create an interactive THREE.js sketch embedded in a new Jekyll post
Week 5: Post-processing Effects; Narrative Devices & Atmospheric Aesthetics; User Experience Design (Recording)
Due next class:
- Narrative proposal(s) in the form of storyboards in a new Jekyll post
Week 6: 3D Modeling; Other asset creation & pipelines; Decimation as low-polygon workflow (Recording)
Due next class:
- Embed two 3D models into a new Jekyll post using SketchFab
Due next class:
- Embed a texture-mapped 3D model into a new Jekyll post
Due next class:
- Animated and interactive THREE.js prototype based on the storyboards in a new Jekyll post
Due next class:
- A new Jekyll post with insights and challenges so far, and goals for next week
Due next class:
- A new Jekyll post with insights and challenges so far, and goals for next week
Due next class:
- A new Jekyll post with insights and challenges so far, and goals for next week
Due next class:
- A new Jekyll post with insights and challenges so far, and goals for next week
Due next class:
- Final project presentation
- Final project live demonstration
- Final Jekyll post summarizing the project
There will be a few field trips organized over the course of the semester to companies, labs, and institutions relevant to the course. More information will be posted here.
- Lynda – HTML Essential Training
- Lynda – CSS Essential Training 1
- Lynda – CSS Essential Training 2
- Lynda – JavaScript Essential Training
- Lynda – Learning 3D Graphics on the Web with Three.js
- Lynda – Rhino 5 Essential Training
- Lynda – 3ds Max 2018 Essential Training
- Lynda – 3ds Max: Hard Surface Modeling
- Udacity – Interactive 3D Graphics
- Progress Work
- 10% Week 3 Assignment
- 10% Week 4 Assignment
- 10% Week 5 Assignment
- 10% Week 6 Assignment
- 10% Week 7 Assignment
- 10% Week 8 Assignment
- Final Project
- 15% Conceptual Execution
- 15% Technical/Organization Implementation
- 10% Documentation & Process