WebGL based E-Learning Platform on Computer Graphics

Transcription

1 , pp WebGL based E-Learning Platform on Computer Graphics Hae-Gul Pyun, Haeong-A An, Jinho Park, Global School of Media, Soongsil University, Seoul, , South Korea Abstract. Recently, computer graphics technology has been applied in diverse IT fields such as 3D Printer, virtual/augmented reality as well as traditional applications such as visual effects. However, computer graphics contains robust mathematical/physical knowledge including geometry and optics which are burden for novices to study computer graphics. The paper proposes an effective e-learning platform focused on computer graphics. Our block based method which is implemented using WebGL delivers educational interests and enhanced accessibility. Keywords: Computer Graphcis, WebGL, E-Learning, Block Based, Interactive. 1 Introduction If people learn a one programming language, it will be easy to learn the other programming languages. Similarly, if people figure out the principle of computer graphics, they can understand more easily in overall computer graphics area. These days, the interest of software education is increasing and we tried to adolescents greater access to computer graphics area. Therefore, this paper analyzes the computer graphics theory and propose educational software model that learning through block making using this theory. Through block composition method, users can learn computer graphics theory easily and modeling the objects by applying this method [1]. 2 Related Works There are several tried to propose educational computer programming system based on GUI. The research of MIT Media lab is typical example. The purpose of this research, named Scratch [2], is getting computer programming experience for children using graphic environment. Scratch is developed in Smalltalk language based on Squeak. Compare to C and C++ language, it helps people learn the principle of programming more easily by block gesture which likes drag the blocks and make block tower. The characteristic of educational programming method which is based on block helps elementary school Copyright 2015 SERSC

2 students understand programming easily by directional language and affects positive effect on studying immersion [3,4,5]. Our model has different aspect compared to educational programming programs as mentioned above. The former educational programming programs are focused on learning programming languages but our model is focused on learning the theory of computer graphics. Learning programming languages and learning the theory of computer graphics is totally different area. Also, there are the different of structural and technically because of the computer graphics [6]. Learning programming language acquires grammar but learning computer graphics is focused on acquiring the principle of object, camera and lights. 3 Our Method 3.1 Core Model We focus on not using programming language but the theory of computer graphics. Therefore, this model excluded repetitive and conditional statement to concentrate the theory. Also, it is designed based on black combination that users need not considered syntax errors and compile errors which are occurred in common programming. Furthermore, it provides the step-by-step process to learn systematically. Finally, users can use block to modeling using providing contents and feel interesting after learning. The core of this educational computer graphics software is that people can understand the principle of graphics easily. Therefore, there are four functions, programming based on web and block, tutorial system, judgement system, to satisfy this purpose. Users access the internet and follow the tutorial process related to graphics. The tutorials are divided 3 chapters according to the principal theory and there are the goals to achieve in the chapters respectively. If users achieve the goal, the program judges this answer and they can go to the next step if the answer is right. The people who are first introduction to computer graphics learn computer graphics by OpenGL which is the base of computer industry standard application programming interface (API). However, because it has to link to integrated development environment (IDE) to use OpenGL, its accessibility and availability has considerably lowed. The purpose of our program is to understand the principle so complex installation environment should be avoided. Therefore, we propose the web based model which does not have to preinstall the extra software and will be accessible anywhere and anytime [7]. 3.2 Block based Implementation People who first experience the computer graphics feel hard to learn the computer graphics because of the complex library structure. However, people can learn the programming not through the coding but through the block making which have a rule Copyright 2015 SERSC 23

3 of mapping the blocks to core functions in our model. This means, users can focus on only the functions role and they can learn the graphics theory easily. Therefore, blocks are mapped to API functions which are used in OpenGL. It helps to learning the role of functions by making block structure and concerns the result of rendering in real time. However, if all of the blocks that build one object are mapped together, the structure will be complex because there are a number of blocks. Therefore, the basic blocks and the explanation of functions are attached in advance, the principle blocks that helps users understand the core principal are used at least for users can understand directly. Each block has unique parameter values and users combine these blocks to make object or manipulate these values. Basically, blocks are situated in specific space to make combination by drag and drop methods. Also, whenever blocks are combined, the result is rendered in Viewport and users can check their result in real time. 3.3 Tutorial System. This paper focus on learning difficult the theory of computer graphics easily. When users begin the tutorial, the web shows explanation to knowledge related to that chapter. Then display the result that derived from that theory and let users combine the blocks to make the same result. As a result, users combine blocks by themselves, check the result in real time and understand the role of blocks each one operated in their work. In the tutorial, tutorial is designed to learn the basic principle, 2D and 3D, Matrix and camera controlling. In 2D and 3D chapter, users can learn how to draw the object. The tutorials progress gradually and users learn 2D at first because it is easier than 3D. In 2D, users learn how to draw point, line and face and then how to draw the 2D object such as triangle, rectangle. If users done the 2D tutorial, users learn to make 3D object such as cuboid. Our model needs the method that checks the users understanding and ability to follow the tutorials because the purpose of this model is education. Therefore, each tutorial has the goal to achieve and the model evaluates the result that is combined as our intent. All objects can be described by the combination of vertex in computer graphics. These vertex has x,y,z coordinates and means the front or back of object in that pointed order. This is used in evaluation and learning objects. For example, triangle can be made three vertex A,B,C. These three vertex can be combined 2^3 numbers. If users know the order to draw object is CCW method and given start vertex A, they can evaluate the answer is drawing the vertex A,B,C counterclockwise. It does not matter not to following the order but the shape of rectangle can be changed to following the order. Therefore, it evaluates the parameter value by checking the order of drawing vertex and the value which was in the range of our intention in the case of light or camera. 24 Copyright 2015 SERSC

4 4 Result The tutorial page consists of four sections [Fig. 1]. The first section is about the explanation how to combine the block and the theory of computer graphics. Users have to make the same renderer screen of 4 th section by combining blocks. Fig. 1. The center section has blocks that can be used in that chapter and users can combine blocks by dragging two section s block to three section. Users can set block s parameters in Medal window which can be seen by clicking EDIT button. If the block is set in 3th section, the result can be seen in the 4 th section s renderer section following the kind of blocks. The evaluation algorithm operates when the renderer window coincides with the expected window, and then clicks the run button on the number 1 section. Users can go next step if they set the right combination of blocks and parameters. If not, users can check the message that helps them to know which part was wrong. Additionally, users can share their information through the Q&A board among them. Finally, users can be modeling the object they want if they clear the all the tutorials. The using method is the same to tutorial and the order of combined block or parameter s values can gain the same result that is coded in OpenGL or Processing. Therefore, users can learn not only the theory using blocks but also how to use programming library such as OpenGL. 5 Conclusion This paper proposes the software model that can helps users to learn computer graphics by combining the blocks through the web whenever they want. The main purpose of most educational software is teaching programming languages but the purpose of this model is studying the theory of computer graphics. Users can learn Copyright 2015 SERSC 25

5 theory and be not to subordinate to programming languages and also make graphics programming following the environment. Furthermore, users can understand directly as they can know the result of rendering whenever the blocks are combined. Also users can be concentrated on the learning because they don t have to worry about the compile error. However, some programming statements such as strong condition and repetitive statements are excepted because this model is focused on the graphics theory. Therefore, the animation which uses condition, repetitive statement has excluded, but this can be realized by applying the theory and languages that users learned in this model. We expect that the interest of computer graphics area will be increasing, and if people can learn the graphics theory easily, the accessibility of computer graphics will also be increasing in the future. Reference 1. Goo, S.K.: Computer Graphics, Intuition and Idea. In: Journal of Korean Society of Media and Arts, Vol. 11, No. 1, pp77-88 (2013) 2. Resnick, M.: Scratch: programming for all. In: Communications of the ACM, Vol. 52, No. 11, pp60-67 (2009) 3. Song, J.B., Cho, S.H., Lee, T.W.: The Effect of Learning Scratch Programming on Students' Motivation and Problem Solving Ability. In: Korea Association of information education, Vol. 12, No. 3, pp (2008) 4. Ahn, K.M., Sohn, W.S., Choy, W.C.: The Effect of Scratch Programming Education on Learning-Flow and Programming Ability for Elementary Students. In: orea Association of information education, Vol. 15, No. 1, pp1-10 (2011) 5. Cho, S.H., Song, J.B., Kim, S.S., Lee, K.H.: The Effect of CPS-based Scratch EPL on Problem Solving Ability and Programming Attitude. In: Korea Association of information education, Vol. 12, No. 1, pp77-88 (2008). 6. Chen, B., Cheng, H.H.: Interpretive OpenGL for computer graphics. In: Computers & Graphics, Vol. 29, No. 3, pp (2005). 7. Edward, A.: Teaching a three-dimensional computer graphics class using OpenGL. In: ACM SIGGRAPH Computer Graphics, Vol. 31, No. 3, pp54-55 (1997). 26 Copyright 2015 SERSC