=Paper=
{{Paper
|id=Vol-2874/paper9
|storemode=property
|title=A WebGL-based Virtual Puzzle Game for Spatial Skill Development Purposes
|pdfUrl=https://ceur-ws.org/Vol-2874/paper9.pdf
|volume=Vol-2874
|authors=Bence Dániel Erős,Roland Kunkli
}}
==A WebGL-based Virtual Puzzle Game for Spatial Skill Development Purposes==
https://ceur-ws.org/Vol-2874/paper9.pdf
A WebGL-based Virtual Puzzle Game for
Spatial Skill Development Purposes∗
Bence Dániel Erősab , Roland Kunklib
a
University of Debrecen, Doctoral School of Informatics
b
University of Debrecen, Faculty of Informatics
{eros.bence,kunkli.roland}@inf.unideb.hu
Proceedings of the 1st Conference on Information Technology and Data Science
Debrecen, Hungary, November 6–8, 2020
published at http://ceur-ws.org
Abstract
Because of their unique challenges, twisty puzzles and similar logical
games are popular with children and adults alike. Therefore, they are one of
the key tools of skill development in public opinion since their first appear-
ance. The physical environment creates specific limitations to these games,
but new tools from computer graphics and its virtual environments allow us
to reach new possibilities.
We introduce an application that helps the users to try rotations on 3D
models based on the rules of the well-known puzzle Rubik’s Cube. In our
solution, these models could be different from the usually used symmetric
and convex shapes.
Keywords: Virtual spatial puzzle, Rubik’s Cube, skill development, WebGL
AMS Subject Classification: 00A09, 97G30, 97R60
1. Introduction
The first phases of skill development start in the early stages of our life when
we learn how to interact with our environment efficiently. All these stages can
Copyright © 2021 for this paper by its authors. Use permitted under Creative Commons License
Attribution 4.0 International (CC BY 4.0).
∗ This work was supported by the construction EFOP-3.6.3-VEKOP-16-2017-00002. The
project was supported by the European Union, co-financed by the European Social Fund.
90
prepare us for adulthood, where we can easily solve all the tasks of our everyday
lives. For decades, researchers have been interested in how they could develop
and measure specific skills. One related example is the relationship between ed-
ucational psychology and spatial skills. Today a skill development direction has
emerged in science, where the combination of classical tests and new technological
opportunities provides new methods for us. For example, the work by Tóth et al.
[13], where the authors introduce the classical Mental Cutting Test enriched with
features from AR. The work implements principles with elements delivered from
games also, according to the so-called gamification.
However, games and playing can be a primary method for this skill develop-
ing process, on their own. With playing, we can discover our environment and
make explorations about our reality, and here learning happens in a fun way, as a
pleasurable and entertaining process [5].
From the related research by Caillois [3], we can see that not every kind of
game is suitable for skill development purposes. In his work, the author creates a
categorization for games to examine the nature of these activities. The categories
are based on two attributes, the mode and the motive of playing. On the one hand,
the mode has determined by the quantities of rules. Here we can meet with the
concept of paidia, which means the arbitrary, uncontrolled form of playing. On
the opposite side, there is ludus, where playing appears in a deliberated, rule-based
form. When we analyze the motive of playing with Caillois’s systematization, we
can find four different—but more or less overlapping—segments. The first two
are agôn, the games of skills and competition (chess or football), and alea, where
games only claim the faith of luck (lottery). A third one is mimicry, which includes
all theatrical interpretations and behavioral changes. The fourth category in his
system is ilinx, where all activities help us to experience the fun and save form of
panic, fall, or fast speed (skiing, roller coaster).
With this knowledge, we can discover a wide range of games to start a plan
for our application. At this point, the question can be, what the benefits are of
the virtual implementation of our selected game, compared to its physical form [9].
Considering the limitations of both games and computers or other devices, we can
find properties that make some adaptation less enjoyable in a new, virtual form
than in the original case. A computer probably has limited memory or response
time and always has a 2D display. Even so, the virtual environment can help us
improve the original interface. It can teach the rules of the game, or it can give a
hint to help the player who tries to reach the goal whenever some difficulties are
appearing [9].
In this work, we have selected spatial puzzle games. The goal of these games is
easily understandable and acceptable to everyone, like in the case of the well-known
spatial puzzle toy, the Rubik’s Cube. The following paragraphs analyze our choice
through the aspects mentioned earlier:
• A game of abilities. The success or failure of finding a solution depends only
on the player’s abilities and efforts (agôn) [3]. Even though if the players trust
the luck of some random rotations, if they are not persistent enough, or they do
91
not spend enough time memorizing algorithmic steps, they can easily get lost in
the variety of shuffles.
• Developing new skills. For today, research has shown that spatial puzzle
games have a measurable skill-developing effect on our visual-spatial skills [5].
These games can affect those areas in our brains, which help us to create a mental
representation of the objects in our environment. When we develop this ability,
we can also express our ideas and thoughts in drawing with the employment of
spatial concepts [5, 16]. In this regard, these puzzle games can help us to achieve
our skill-developing purposes in our application.
• The physical limitations are eliminated. Twisty puzzles contain a well-
designed inner mechanism inside of their central part, which is responsible for
two main tasks: this part interlocks all of the puzzle pieces, and at the same
time, it allows us to perform rotations on our puzzle. In terms of the shape of the
puzzle, we can face new challenges and limitations also [12]. These requirements
will be mentioned in Section 2.2 in more detail. In our work, we have tried to
relieve the burden of these challenges, and we have done experiments to try new
possibilities beyond physical boundaries, such as floating puzzle pieces.
• 3D technologies in education result in good practice. 3D content has
gained a victory on consumer culture with 3D movies, software, and other 3D
products. With this in mind, no wonder that research has started to observe
the effectiveness of these 3D technologies on societies and education. Today, it
is clear that the benefits of these technologies exist, and the necessity of them
in education is not a yes or no question. However, the employment of some
technologies, unfortunately, looks unavailable for public education these days.
In their work, Papp et al. [11] have collected the main benefits and limitations
of 3D printers in education. Here, the authors characterized 3D printers as
expensive technologies. In this regard, a 3D web application looks like a much
more realizable product. Moreover, people have become confident users of web
applications in the digital era.
• Help in solution. A unique advantage of the computer is that it is available
at any time as a patient teacher. If the player has uncertainty about the rules
of the game, or if the solution is hard to find, an algorithm with an interactive
interface can help us learn to overcome the difficulties [9]. In our application,
the user can generate the steps of a complete solution path.
• Giving up the tactile experience. It is quite evident that a 3D toy cannot be
translated into our 2D screen perfectly. In the case of spatial puzzle games, we
will face the loss of the simplicity of rotations by hand, and we cannot naturally
reach any point of view [9]. However, technology can reduce this drawback
because modern 3D graphical libraries provide more and more tools to create
the best possible spatial virtual environments. These libraries will be mentioned
in Section 2.1 in more detail.
92
These thoughts (with, keep in mind, the limitations from the last item) make
it a reasonable decision to build a web application based on the idea of spatial
puzzles. In the next sections, we will introduce more details about the technical
and theoretical background of our work. In Section 2, we introduce some other
research cases about specific graphical problems. In these experiments, similarly
for this work, the WebGL-based Three.js library [2] or the Blender graphical toolset
[1] have been used. This section also introduces some motive for our virtual puzzle
design plans. Later, in Section 3, we detail the concept of permutation group
and its connection to our implemented solution algorithm, which appears in the
application to help the user. The last main part, Section 4, is a guide from our
prototype to the overview of the full application. After the conclusion in Section 5,
this paper ends with Section 6, which is a quick insight into the possible directions
of future software versions.
2. Related Work
The first subsection of this part collects some examples, where technologies like
WebGL and the Blender graphical toolset were useful for researchers to solve their
problems. Later in this section, we describe the closely related research topic of
puzzle design. Although these works search for solutions to challenges which mainly
resulted from the physical environment and its laws, we can find one of the best
bases of comparison here for a virtual puzzle application.
2.1. 3D Web Applications with WebGL and Blender
In the last decade, the creation and usage of 3D web applications have significantly
changed. Before the WebGL API, the multimedia experience on the web had got
limitations by its plug-in-based nature. In those years, users had to download an
external applet just to reach the 3D graphical content. This method needed a
burden of download time and extra storage space that resulted in a struggle by
users and mobile devices with limited capacity also [4, 7].
Later, 3D content could move into web browsers. Based on OpenGL ES 2.0
by Khronos Group, the WebGL platform is in conjunction with web development
technologies. The drawn context appears in an HTML5