Department: EducationEditors: Beatriz Souza Santos, bss@ua.pt & Ginger Alford, alfordg@smu.edu

Remote Teaching AdvancedRendering Topics using theRayground Platform

A. A. VasilakisDepartment of Computer Science and Engineering, University of Ioannina, GreeceDepartment of Informatics, Athens University of Economics and Business, Greece

G. PapaioannouDepartment of Informatics, Athens University of Economics and Business, Greece

N. VitsasDepartment of Informatics, Athens University of Economics and Business, Greece

A. GkaravelisDepartment of Informatics, Athens University of Economics and Business, Greece

Abstract—Rayground is a novel online framework for fast prototyping and interactivedemonstration of ray tracing algorithms. It aims to set the ground for the online development ofray-traced visualization algorithms in an accessible manner for everyone, stripping off themechanics that get in the way of creativity and the understanding of the core concepts. Due tothe COVID-19 pandemic, remote teaching and online coursework have taken center stage. In thiswork, we demonstrate how Rayground can incorporate advanced instructive rendering mediaduring online lectures as well as offer attractive student assignments in an engaging, hands-onmanner. We cover things to consider when building or porting methods to this new developmentplatform, best practices in remote teaching and learning activities and time-tested assessmentand grading strategies suitable for fully online university courses.

IN THIS WORK, we share our experience on thetransformation of an advanced computer graphicscourse with extensive hands-on coursework to anonline course, with the help of the Raygroundplatform. “Advanced Computer Graphics” is anew elective course of the undergraduate syllabus(6 ECTS) at the Department of Computer Science

and Engineering of Ioannina University in Greecethat had to be offered online because of theCOVID-19 pandemic. The course was attendedby approximately 50 forth-year, full-time, un-dergraduate students in the winter semester ofacademic year 2020-2021. The course mainlycovers 3D graphics techniques for realistic image

IEEE CG&A Published by the IEEE Computer Society © 2021 IEEE 1

Department Education

synthesis and assumes that students are famil-iar with advanced programming skills as wellas basic computer graphics knowledge, wheremodern OpenGL and GLSL shaders knowledgeis adequately covered.

It aims to examine state-of-the-art CGIpipelines and established algorithms alongsideproven computer graphics software systems (e.g.Blender). The course addresses concepts such aslocal and global illumination and related meth-ods, real-time visual effects and ray-tracing-basedmethods for offline and real-time image synthesis.

Our goal was to abstract the programmingenvironment and diverse hardware requirementsby structuring the entire course around Ray-ground, a Web-based educational programmingenvironment for prototyping ray tracing methods.By building educational material on Rayground,students can intuitively learn and easily prototypelight transport algorithms via GPU-acceleratedray tracing, with relatively inexpensive hardware,such as laptops, tablets, and even smartphones.

Ray tracing is an important topic in computergraphics but, due to its complexity and lackof tools to demonstrate its functionality, it isdiscussed briefly during the last couple of lecturesin the major undergraduate course “Introductionto Computer Graphics”, as is the common prac-tice in many computer graphics courses [1]. Asray tracing establishes itself both in productionand real-time rendering as a viable and moreaccurate replacement for approximate methods,in this follow-up course we have elevated itsimportance. Moreover, following the renderingpipeline abstraction model of the computer graph-ics course offered by the department of Infor-matics at the Athens University of Economicsand Business, we divided the rendering pipelineinto four generic stages: a) geometry setup, b)sampling/token generation, c) shading and d)compositing, with a specific note on the re-entrantnature of any of these stages. This allowed us toindependently map the rasterization or ray tracingparadigms to this pipeline and clearly separatecommon topics, such as material properties, lo-cal shading, geometry representation, texturing,image-domain sampling and antialiazing. Ray-ground further assisted in this abstraction processby offering an accessible alternative platform forin-class algorithms and principles demonstration,

Figure 1. The Rayground interface, with the previewwindow (left) and the shader editor (right).

while providing a simpler solution for the prac-tical and accurate experimentation with certainconcepts, such as visibility testing and materials.

Rayground: Online ray tracing platformRayground, developed by the Computer

Graphics group of the Athens University of Eco-nomics and Business, is an interactive educationtool for richer in-class teaching and gradual self-study that provides a convenient introduction intoray tracing programming [2]. It was built usingWebRays, a WebGL-based ray intersection libraryfor the web [3]. Rayground abstracts the function-ality of the underlying ray tracing stages to an ex-tent that still preserves the main concepts taughtin a computer graphics course as well as eases thedevelopment of advanced visual effects in studentprojects. It has not been designed to be a com-plete replacement of teaching computer graph-ics with modern shader-based programming, e.g.OpenGL/WebGL [4], [5], but rather as a comple-mentary educational resource that harmoniouslyenriches the teaching environment. Rayground,hosted at https://rayground.com, does not relyon any browser plugins and thus runs on anyplatform that has a modern, standards-compliantbrowser. The graphical user interface of Ray-ground is designed to have two discrete parts, thepreview window and the shader editor (Figure 1).Visual feedback is interactively provided in theWebGL rendering context of the preview canvas,while the user performs live source code modifi-cations. Rayground is open, cross-platform, andavailable to everyone.

With a minimal registration (personal email),students have full access to the platform’s func-tionality. Students can create any number of newprojects from scratch or clone an existing one

2 IEEE CG&A

from a variety of public ray tracing projects avail-able on Rayground. This is also helpful for teach-ers who want to provide a minimal base projectto their students, which the complete assignmentwill be built on. To ensure academic integrity,Rayground gives the ability to each student tohide their projects during the assignment periodin order to avoid their work being plagiarizedfrom their fellow students. Finally, source codecan easily be exported from the platform and besubmitted as per assignment instructions.

Teaching and Learning ActivitiesRemote Teaching

Rayground has been successfully used to in-teractively demonstrate the concepts of advancedimage synthesis during 3-hour weekly lectures(12 in total), enriching and complementing thetheory presented in static slides. Students wereencouraged to actively experiment on their owncomputers at certain periods during remote teach-ing, further transforming the learning processinto a more immersive and engaging one. Asreported by the students themselves (see evalu-ation below), the learning experience was highlyenhanced, since most of them successfully cor-related the presented concepts with their practi-cal implementation and results. Students clarifiedwith ease the recursive nature of ray tracing andhow rays are generated and scattered differentlythough the virtual environment, based on a varietyof object materials. Furthermore, the relationshipbetween sampling and noise produced in theimage is effectively explained by previewing theeffect, when dynamically tuning a specific param-eter inside a programmable stage (Figure 2).

Remote LabsAs is very frequently the case, the computer

graphics lectures were supported by a series ofpractical exercises in a one- to two-hour lab perweek (6 in total), where students were able toremotely apply the theory learned and experimentindividually using simple Rayground projects.The contents of the lab sessions were normallyaligned with the corresponding week’s lecturesas described above. Based on the number ofregistrations, one or two teaching assistants hadto be deployed for this matter. Sessions startedwith an introduction to the topics that would be

few

sam

ples

adeq

uate

sam

ples

long

er p

aths

Figure 2. Interactive remote learning example: Therandom sampling in path tracing causes noise toappear in the rendered image (top). The noise isremoved by letting the algorithm generate more sam-ples (middle). Increasing the ray depth results in adramatic visual difference (bottom).

discussed, followed by a practice exercise for theremainder of the course. The lab assistant waspresent during the exercise, guiding each student,when necessary, and presenting an indicative so-lution at the end. This project series was uniquelydesigned with the aim to help students graduallyunderstand how a ray tracer works in detail, fol-lowing a modern ray tracing programming model.

ResourcesTo encourage more teachers to incorporate

Rayground into their courses, the teaching ma-terial built during this course to support re-mote learning as well as to promote auto-didactic engagement and collaboration are pro-vided freely at the educational section of theRayground Github account: https://github.com/cgaueb/rayground/tree/master/education.

July/August 2021 3

Department Education

Assessment and Grading Methods

Assessment StrategyStudent assessment in this particular course is

not done via written examinations, which tend tobe problematic in remote courses, but rather reliessolely on the students’ final assignment. TheRayground assignment was therefore mandatoryand students were given a two-month period tosubmit their work in teams of up to two members.The project was assigned after midterm, whenteaching of the fundamental concepts about ge-ometry modeling and image synthesis had beensufficiently covered. The students were expectedto provide:

• A written report that contained detailed de-scription about their implementation (usingpseudocode, reference to sources, mathemat-ical formulations, etc.), figures or snapshotsfrom specific viewpoints, that prove the ful-fillment of each requested task and especiallyfor any particularities, problems, special condi-tions, test data, or additional information theyhave used during their experimental evaluation.

• The complete source code written for Ray-ground, associated with the solution to eachrequested task. This could be automaticallyexported from the online platform.

The theme of this year’s assignment was tocreate an image of an indoor billiard room viapath tracing, where the practical design consider-ations and content creation for the 3D scene wereleft to the judgment, imagination and creativityof the students. Figure 3 illustrates the high-quality synthetic image generated from the beststudent work that excelled in both visual fidelityand content creation creativity.

The basic ray tracer features were designedwith an increasing implementation difficulty inmind, and students were allowed to approachthem in an independent and non-sequential man-ner. A complete progressive path tracer had togradually be implemented from scratch. The as-signment was divided in five core tasks in order toavoid confusion and simplify time management.Each task contained several related problems tobe solved. The points corresponding to each taskwere not uniformly weighted (shown in brackets).Bonus points (highlighted with italics) were also

Figure 3. Rendered result from the best studentRayground project, excelling in both creativity andtechnical implementation.

awarded for certain tasks, enabling students toearn more than the maximum possible points forthe assignment.

• Background (1) : flat color, gradient color,(animated) patterns via procedural texturing.

• Camera (2): orthographic & perspective pri-mary rays, antializing. depth of field.

• Modeling (2): main room with light sources,billiard table and indoor details, wall openings(via ray-traced constructive solid geometry).

• Local Shading (2): Lambertian, Phong, Blinn-Phong & Cook-Torrance illumination models,hard and soft shadows from spot and arealights, multiple light sources.

• Global Illumination (3): merging all the abovein a Whitted and/or Stochastic Path Tracer.Next-event estimation, multiple importancesampling and Russian roulette termination.

ExaminationAt the end of the semester, an oral examina-

tion took place for the students, whose project’sscore was at least 5/10 points to prevent anddetect any form of plagiarism and thus ensurefairness. Members of each group were examinedseparately for 10 minutes each, with the aim of(a) highlighting the ability to apply the knowl-edge acquired during the learning process and (b)demonstrating the appropriate skill and compe-tence in the use of the new paradigm for solvingcomputer graphics problems. Moreover, groupperformance had to be translated into individual

4 IEEE CG&A

grades. If a task was not adequately answeredfrom a student during the oral examination, thecorresponding points were not counted towardsthe student’s total assignment grade.

Excluding a couple of cases (see below),project grading went beyond our expectations.Students were able to successfully match pre-viously learned concepts to the new paradigm.The majority (75%) met most of the projectgoals/requirements, providing high-quality workand showing fairly independent effort during theproject. Additionally, a small portion of them(15%) showed evidence of excellent work abovenormal standards (see Figure 3).

ConcernsWe have noted cases where students did not

adopt a learning and creative stance, but ratheronly sought to secure the marginal requirementsfor each task at hand. To this effect, we observedthat a couple of student teams relied heavily oncode scavenged from internet resources, withoutproper information filtering and rationalization.In cases, they resorted to partial code replicationfrom other students’ Rayground projects.

EvaluationStudents were given a questionnaire to fill

in related to the usefulness and practicality ofRayground as an interactive tool for (remotely)teaching computer graphics and more specifically,ray tracing. From the 40 students who activelyparticipated and contributed to the evaluation,more than 75% commented on the very positiveeffect it had on their understanding of difficultconcepts in theoretical lectures and labs, praisingthe use of interactive tools like Rayground in theonline course. On the other hand, many studentsmentioned that the provided API documentationwas too difficult to understand and work with(25%), taking long to learn and thus adverselyaffecting the completion of the programmingassignment. We attribute this learning difficultyto the poor understanding of practical computergraphics concepts and most importantly, (parallel)programming via GLSL shaders, skills adequatelycovered in the preceding introductory ComputerGraphics course. For completeness, we will offeradditional online tutorials and introductory mate-rial, coupled with fundamental ray tracing theory,

to ease the learning curve for beginner graphicsdevelopers, newcomers and graphics enthusiasts.

ConclusionAlthough building knowledge around teaching

of fundamental visualization concepts is challeng-ing because of the open and broad nature ofvisualization and its wide application to differ-ent domains and audiences, we believe that theRayground platform has the potential to func-tion as an online hub for the whole commu-nity, as ray tracing ideas and methods becomemore widespread. To this end, we are eagerto improve the core technology (e.g. WebGPUimplementation) as well as to provide additionalfeatures (such as global textures and 3D scenesloading support, social/community features likeblogs, comments, tags, etc.) that would enhanceusability and user experience for students andteachers alike. We welcome instructors that wantto take advantage of this online teaching platform,adopt the accompanied learning materials andresources, and get inspired by our assessmentstrategies to make 3D visualization knowledgeand practical skills available to a wider audience.

AcknowledgmentMany thanks to the editors for their con-

structive comments and all the students for theirhonest commitment, effort and evaluation. Thiswork was funded by the Epic MegaGrants grantprogram from Epic Games Inc.

REFERENCES1. D. G. Balreira, M. Walter, D, W. Fellner, “What we are

teaching in introduction to computer graphics”, Euro-

graphics 2017 - Educational Papers, April 2017.

2. N. Vitsas, A. Gkaravelis, A. A. Vasilakis, K. Vardis, G.

Papaioannou, “Rayground: An online educational tool for

ray tracing”, Eurographics 2020 - Educational Papers,

May 2020.

3. N. Vitsas, A. Gkaravelis, A. A. Vasilakis, G. Papaioannou,

“WebRays: Ray tracing on the web”, Ray Tracing Gems

II, ch. 18, August 2021.

4. Ed. Angel, “The case for teaching computer graphics

with WebGL: A 25-year perspective”, IEEE Computer

Graphics and Applications 37.2 (2017). pages 106-112.

5. G. Ridge, D. Terzopoulos: “An online collaborative

ecosystem for educational computer graphics”, Web3D

’19, July 2019.

July/August 2021 5