STEM EDX: More than One Way to Do It

Daniel Haehn (Department of Computer Science)
STEM EDX Fellow AY 20-21


In CS460 Computer Graphics, I follow the Graphics for Everyone (#GFX4ALL) principle by offering 3 different levels of complexity during the course assignments and for the final project. The first level is based on XTK, a very simple to use framework with very little required code that lets anyone even with minimal coding experience succeed in creating visualizations. I developed XTK in 2012. The intermediate level is the popular framework Three.js which adds functionality but also complexity. The final level is straight WebGL, so the direct programming calls that are extremely complex but have no limitations.

For grading, I expect higher quality for less complex projects with XTK and lower polished quality for the highest complexity with WebGL. In this way, I can address the core goal of the course – to learn how to create interactive 3D visualizations on the web – at a level that is accessible to each individual student.

These 3 frameworks are very specific to CS460 but the concept of multi-layer approach with increasing complexity and functionality could be something transferable to other courses.

Description of the Activity

Students are asked to create an interactive 3-d visualization of a subject of their choice using one of the three tools listed above. 

Students receive feedback and support from the instructor and classmates as they develop their project. As a result, most, if not all, projects receive high grades.

Sample Student Responses

All three examples earned “A” grades.

XTK Example {Zhen Rong (Dennis) Liew}  (least complex programming):
“This project was an exploratory experiment on some personal fMRI data. The main objective was to explore the different ways of visualizing the brain as well as creating 3D meshes from the ground up.” (fMRI Brain Slice, Project Details)

XTK Example

Three.js Example {Neha Goyal}  (intermediate level):
“In nature birds, fishes and various land animals come together as a herd to form large groups which benefit their survival and evolution. Perceiving this fascinating yet complex behavior, Craig Reynolds in 1987, simulated the first model of this behaviour on computer. The aim of this simulation was to replicate the behavior of flocks of birds. Based on the flocking algorithm, this project visually demonstrates the logistics of collective intelligence, where it permits entities (birds) simple decision making to interact with their environment.” (Bird Flocking, Project Details)

Three.JS Example

WebGL Example {Paul Maynard}  (highly complex programming):
“My project was to create a ray-tracing renderer in WebGL, capable of rendering simple scenes composed of graphics primitives.” (WebGL Raytracer, Project Details)

WebGL Example