The article examines the process of designing and developing a virtual (remote) physics laboratory. The authors have identified the requirements of the laboratory for studying the difraction efect (visibility, accessibility, flexibility and visualization). The ability to set additional working parameters such as measurement error, material types and performance conditions. No additional software is required to carry out laboratory work, only an Internet connection and a browser.). The research analyzes the available digital tools for developing 3D models and ultimately selects the 3D library Theree.js. The researchers then proceed to create a suitable model for representing laboratory objects and processing experimental data. The virtual laboratory enables students to measure the line widths of the difraction pattern when using monochromatic light (red, blue, green). It also enables the solution of the inverse problem, allowing determination and verification of the wavelength. Additionally, students may calculate measurement errors through the virtual laboratory.
Experiments and laboratory work are an essential part of modern physics education in secondary
schools, colleges and universities. They facilitate learners’ understanding of physical principles.
Laboratory assignments aid students in gaining a better understanding of theoretical concepts by
enabling them to observe the operation of physics principles in the natural world. Additionally,
practical laboratory sessions allow teachers to assess students‘ knowledge and understanding.
Lab exercises also facilitate student acquisition of skills in data manipulation, processing, and
analysis. These skills are valuable not only for the study of physics but also for a wide range
of other fields in science and technology. Laboratory experiments promote critical thinking
and problem-solving and have the potential to stimulate an interest in science. Furthermore,
practical skills are refined through lab work, such as operating scientific apparatus and practical
abilities with potential applications in the real world [
Currently, remote training is a common practice. Therefore, relevant software has been
developed by many vendors and educators [
The absence of practical experience and restricted engagement of students are drawbacks of virtual laboratories. Some concepts may have limited comprehension due to a lack of interaction with physical equipment. Furthermore, students may not adequately develop skills working with equipment. Therefore, it is advisable to incorporate a combined approach, combining both practical and virtual modelling. Virtual models aid students’ readiness for laboratory experiments by facilitating comprehension and application of the material.
To set up a remote physics laboratory, an educator can make use of readily available software
or create their own. There are some free virtual laboratories such as [
All of them were created using HTML5, JavaScript, or Java technologies. Significant disadvantages that prevent the use of existing laboratories are the lack of monitoring of students’ laboratory work, the inability to conduct measurements without displaying the finished results (in fact, simulations of physical processes are performed), and the perfection of the results, which does not allow for the assessment of measurement errors.
We decided to develop our service for running virtual physics labs. This study aims to systematise the design and development process of creating a remote physics laboratory for difraction investigation.
Based on the analysis of studies by Holly et al. [
Internet connection and a browser. • Flexibility. The ability to set additional working parameters such as measurement error, material types and performance conditions. • Visualisation. The appearance of virtual equipment should be similar to that of real laboratory equipment.
To establish remote laboratories, it is essential to carefully choose adequate development tools,
which can include frameworks, engines, and 3D libraries. When considering the comparison of
3D graphics libraries, it is crucial to establish unambiguous standards to evaluate their aptitude
and eficacy. The following are essential criteria to consider when evaluating 3D graphics
libraries:
1. Performance and rendering quality. This criteria assesses the frame rate and rendering
speed of intricate scenes, and the quality of graphics rendered, comprising lighting,
shadows, and textures.
2. Ease of use and learning curve. The criteria are an assessment of the accessibility of
tutorials, documentation, community support and ease of use of the library. It also
includes the intuitiveness of the API and overall developer-friendliness.
3. Flexibility and customization. The assessment of this criterion involves determining the
levels of ability to customize the rendering pipeline, efects and support for various 3D
models, file formats, and asset management.
4. Extensibility and modularity for integrating with other technologies.
5. Feature set and capabilities are evaluated through the availability of essential 3D features
and support for physics simulation, collisions, and particle systems. It also includes
VR/AR support, if needed for the project.
6. Community and ecosystem. This criteria assesses the size, activity of the developer
community, availability of third-party plugins, extensions, or add-ons, and frequency of
updates and ongoing development.
7. Cross-platform compatibility provides for the definition the levels of support for various
web browsers or platforms (desktop, mobile, VR devices), and the performance consistency
across diferent devices and browsers.
8. Integration and interoperability. The criteria are an assessment of the compatibility with
other popular frameworks, libraries, or technologies and ease of integration with existing
workflows, tools, IDEs.
9. Real-time collaboration and deployment are evaluated through support for real-time
collaboration among team members and smooth deployment and hosting options for web-based
3D applications.
10. Project size and loading speed. The criterion defines the impact of the library on the overall
project size. It also includes booting time and eficiency in loading assets and scenes.
11. License and open-source nature is important in terms of material costs for project
development. It involves assessing licensing terms (open-source, commercial, etc.), associated
costs, and availability of a free or trial version for evaluation.
12. Use cases and education adoption This criteria assesses the relevance of the library to
physics education tasks and examples of successful projects or applications built using
the library. The criterion is interdisciplinary. To assess it, there is a demand for training
STEM education specialists who are competent in physics and able to develop and deploy
virtual and augmented reality software [
There are some well-known libraries and frameworks that can be used to create 3D graphics
and animations. These include Three.js, Babylon.js, A-Frame and Cannon.js. Based on the
literature reviews by [
So, we chose the Three.js library to develop a virtual physical laboratory to investigate the difraction efect.
The process of designing our virtual laboratory to investigate difraction predicted took place during such stages.
2. Selecting development tools and obtaining the required libraries. 3. The creation and design of a laboratory model. 4. Implementation and testing.
The difraction grating’s constant, , the distance from the grating to the screen, , and the difraction order, , are provided. Students are to measure the distance from the centre to the maximum . From these two distances, they have to determine the angle . Since the angle is small, ( ) ≈ ( ) ≈ (figure 1.) We assume that a plane light wave is normally incident on the grating.
There are several steps in the process of conducting an experiment, whether in reality or virtually.
1. The difraction spectrum on the screen should be captured accurately. Finally, the spectrum should be analysed. 2. Position the difraction grating at a specific distance, , from the screen. 3. Calculate the distance , which represents the distance between the center of the line in the given order’s spectrum and the zero spectrum, as illustrated in figure 1. 4. Employ formula (1) to calculate the wavelength .
= ·
· where is the distance between the adjacent slits (grating period), is the difraction order (an integer). 5. Alter the distance between the screen and the grating repeat step 3. (1)
As mentioned above, we chose the Three.js library. Additionally, we employed Bootstrap, an open-source CSS framework designed for front-end web development. Therefore we have obtained the necessary libraries, such as three.js-master and bootstrap-dist and uploaded them to the web-server folder. The virtual laboratory model is shown in figure 2.
To actually be able to display difraction with three.js, we need to create scene, camera and renderer. All objects in our virtual lab are placed in a <div> container on the canvas. The left menu contains the parameters of the laboratory objects such as switching on the lamp, activating light filters, moving the dynamic screen, changing the camera position, difraction grating step, moving the pointer position (see figure 3).
There are a few diferent cameras in three.js. We used a PerspectiveCamera. It is designed to
mimic the way the human eye sees [
Listing 1: Camera creation example c a m e r a =new THREE . P e r s p e c t i v e C a m e r a ( 4 5 , w e b g l _ w i d t h / w e b g l _ h e i g h t , 1 , 1 0 0 0 0 ) ; c a m e r a . p o s i t i o n . s e t ( c a m e r a P o s 1 . px , c a m e r a P o s 1 . py , c a m e r a P o s 1 . pz ) ; c a m e r a . r o t a t i o n . s e t ( c a m e r a P o s 1 . rx , c a m e r a P o s 1 . ry , c a m e r a P o s 1 . r z ) ; c a m e r a . name = " Camera1 " ; s c e n e . add ( c a m e r a ) ;
To create the lighting, we used 3D objects such as PointLight and AmbientLight. The first
one is emitted from a single point in all directions. The second globally illuminates all objects
in the scene equally [
Then an instance of the WebGLRenderer class was created with parameters such as
• alpha controls the default opacity value. Its value was set to zero; • antialias is used to reset the internal WebGL state; • domElement is a canvas where the renderer draws its output; • setSize sets dimension of the scene; The figure 3 displays the menu for the virtual laboratory designed for investigating difraction.
In order to enable camera movement around a grating, an instance of the OrbitControls class was instantiated. The properties of this instance determine the maximum and minimum distance of the dynamic screen and the angle‘s limit of vertical rotation (see code 2).
c o n t r o l s = new O r b i t C o n t r o l s ( camera , r e n d e r e r . domElement ) ; c o n t r o l s . m i n D i s t a n c e = 2 ; c o n t r o l s . m a x D i s t a n c e = 2 5 ; c o n t r o l s . m a x P o l a r A n g l e = Math . P I / 2 ; c o n t r o l s . t a r g e t . s e t ( 0 , 4 , 0 ) ; The scene objects were created by using geometric shapes and importing 3D models. BoxGeometry was used to create the main objects in the scene. These include the table, ruler, dynamic screen, stand and difraction grating. It is a geometry class for a rectangular box with a given width, height and depth. The view of these objects from camera 1 is shown in figure 4.
The materials from which these objects are made were created using the Mesh class. It
represents triangular polygon mesh-based objects [
Other laboratory items were produced similarly, including a colour filter, mobile pointer, and dynamic screen ruler. They allow students to change the difraction efect and measure the distance between the centre of the spectral line of a given order and the spectral line at zero order. To utilize the dynamic screen ruler, employ camera view #3 figure 5.
We used three groups to create complex objects such as a lamp and a tripod. They combined graphic primitives and imported images. The code for forming the lamp can be found in the listing 4.
{ LampBase . p o s i t i o n . s e t ( 0 , 0 , 0 ) ;
L a m p V e r t i c a l C y l i n d e r 1 . p o s i t i o n . s e t ( 0 , 1 . 8 , 0 ) ; L a m p H o r i z o n t a l C y l i n d e r 1 . p o s i t i o n . s e t ( 0 , 3 . 5 8 , 0 ) ; L a m p H o r i z o n t a l C y l i n d e r 1 . r o t a t i o n . x = 1 . 6 ; L a m p H o r i z o n t a l C y l i n d e r 1 . r o t a t i o n . x = 1 . 6 ; L a m p H o r i z o n t a l C o l o r C y l i n d e r . p o s i t i o n . s e t ( 0 , 3 . 5 7 2 , 0 . 2 7 5 ) ; L a m p H o r i z o n t a l C o l o r C y l i n d e r . r o t a t i o n . x = 1 . 6 ; GroupLamp . add ( LampBase ) ; GroupLamp . add ( L a m p V e r t i c a l C y l i n d e r 1 ) ; GroupLamp . add ( L a m p H o r i z o n t a l C y l i n d e r 1 ) ; GroupLamp . add ( L a m p H o r i z o n t a l C o l o r C y l i n d e r ) ; GroupLamp . p o s i t i o n . s e t ( 0 , 1 . 1 5 , − 7 ) ; }
The colour filter was created as a Mesh object with the values THREE.BoxGeometry and THREE.MeshStandardMaterial (see listing 5).
Listing 5: The code for forming blue filter
The calcPosSpectr() method computes the distance between the centre of the spectral line of a given order and the spectral line at zero order for the three colours (red, green, and blue) utilizing the formula (1). For example, the calculation for the first green line from the left is as follows (see listing 6)
Listing 6: The fragment of method for calculation the distance between the spectral lines f u n c t i o n c a l c P o s S p e c t r ( ) { v a r e l e m L i n e = GroupDinamLine . g e t O b j e c t B y N a m e
( ’ D i n a m L i n e L e f t B o x ’ ) ; v a r w i d t h _ d i n a m _ l i n e = ( g e t W i d t h ( e l e m L i n e ) / 1 5 0 ) ; v a r PR = ( ( c u r r e n t P o s D i n a m B o x / 1 0 0 0 ) /
c u r r e n t G r a t t i n g S i z e ) ∗ 1 0 0 0 ; v a r g l 1 = s p e c t r . rw ∗ 1 ∗ PR ; }
The first two lines of the calcPosSpectr() method convert matrix distances into screen coordinates. The constant 150 is the length of the ruler on the dynamic screen. In code (5), the variable PR is equal to , spectr.gw is the width of the first green line.
Students are expected to perform their own calculations, including using cloud-based
platforms such as CoCalc, Maxima, etc [
As a result, the difraction efect can be observed in camera #2 (see figure 6). It also allows the student to measure the position and width of the spectral lines. In addition, boundary conditions are imposed on the positions of the ruler and pointer to ensure that they do not exceed the permitted limits. The displacement of the ruler is exactly 1mm. This was achieved by editing the texture of the ruler itself.
In the virtual lab, we made sure that the measurement result was not artificially tied to a particular value of physical quantities. This is why the difraction pattern of the slit on the screen is slightly blurred. This makes it possible to obtain diferent values of distance during visual observation and to calculate the measurement error accordingly.
The real difraction spectrum can be seen in figure 7. As you can see, the image is rather unclear and it is dificult to determine the position of the spectrum by looking through the difraction grating. For this purpose, a pointer is provided in the virtual work and it is possible to switch to the view of camera #3 to measure distances more accurately.
We compare the results of the virtual and real experiments. When students used a blue light filter during virtual laboratory work, the following data were obtained: light wavelength = 485 ± 12 nm with a relative measurement error of 2.3 %. During work on real equipment, the light wavelength was = 472 ± 25 nm with a relative measurement error of 5.3 %. As we can see, the results within the margin of error coincide and correspond to the wavelength of blue light.
Developing virtual physics labs is a real problem. Modern digital tools such as frameworks and programming language libraries make this possible. Based on comparative analysis was selected one of these tools is Three.js. It is a JavaScript 3D library. In this research, the design and development of a virtual physics laboratory for studying the efects of difraction using Three.js was carried out. The lab development process took place in several stages, such as creating scene, adding camera, creating main instances of classes (WebGLRenderer, OrbitControls), creating scene objects, and defining methods for calculating distances between spectral lines. The developed lab can be useful for blended learning in physics at colleges and universities. It can also be combined with real installations for the study of optics. The disadvantage of this virtual laboratory is the requirement of the Three.js library for modern hardware of the student’s or teacher’s device. This can be a limitation when working with older computers.
Three laboratory virtual works out of five, which are provided by the curriculum of the "Physics" course covering diferent sections (mechanics, molecular physics and thermodynamics), were developed using this method. In the future, it is planned to complete the development of the remaining works and combine them into a single integrated environment. This will allow students, in addition to performing work, to collect and process experimental data and prepare reports. We see prospects for further research, such as development of a version of this laboratory to provide student collaboration and its integration with modern learning management systems.