A method for building a float glass production line visual interactive system

Abstract

The application provides a method for building a float glass production line visual interaction system, and relates to the field of float glass production management. The method comprises the following steps: firstly, obtaining model data containing PRB material and skeletal animation information; then, creating a three-dimensional scene through a Three.js library, determining camera attributes according to received camera parameters, and obtaining scene data containing the scene and the camera; then, analyzing the model data through the Three.js library, adding lighting and mapping, creating an animation mixer instance, triggering animation chain playback according to device runtime sequences, creating a ray detector for realizing three-dimensional scene interaction, and detecting device model intersection based on mouse interaction coordinates, so as to obtain a final scene model. The scheme can be used to effectively build a Web-side lightweight deployment, and realize animation interlocking control, interaction and display of the float glass production line visual interaction system.

Description

Technical Field

[0001] This application relates to the field of float glass production management, and more specifically, to a method for building a visual interactive system for a float glass production line. Background Technology

[0002] Under the trends of Industry 4.0 and smart manufacturing, production line digitization and visualization technologies have become key means to improve production efficiency and optimize equipment management. As a continuous industrial process, float glass production relies on the precise collaboration of multiple processes such as feeding, melting, tin bath forming, and annealing. The visualization of its equipment linkage logic and production status is crucial for process optimization and personnel training.

[0003] Currently, solutions for 3D visualization of industrial production lines mainly fall into two categories: The first category uses engines like Unity and Unreal Engine to build offline visualization applications, reconstructing equipment structures through high-precision modeling. However, this requires client software installation, making lightweight web-based access difficult. The second category utilizes libraries like Three.js and Babylon.js to achieve browser-side 3D rendering, supporting cross-platform access. However, this involves modeling the production line machinery as independent 3D models, loading and rendering them on the web using Three.js. It only displays the equipment's appearance and cannot dynamically simulate process connections and mechanical coordination, requiring manual explanation of the operational logic.

[0004] Therefore, how to effectively build a lightweight web-based visual interactive system for float glass production lines that enables animation-interlocked control, interaction, and display has become an urgent technical problem to be solved. Summary of the Invention

[0005] The purpose of this application is to provide a method for building a visual interactive system for a float glass production line, which can be used to effectively build a lightweight web-based deployment system for a float glass production line that enables animation interlocking control, interaction, and display.

[0006] This application is implemented as follows: In a first aspect, this application provides a method for building a visualization and interactive system for a float glass production line, comprising the following steps: acquiring model data containing PRB material and skeletal animation information, wherein the model data is data obtained by reverse modeling various mechanical equipment on the float glass production line; creating a 3D scene using the Three.js library, and determining camera attributes based on received camera parameters to obtain scene data containing the scene and camera; parsing the model data using the Three.js library, adding the model data to the scene data based on the parsing results, and rendering a first scene model; adding lighting and textures to the first scene model using the Three.js library based on received lighting and texture parameters to obtain a second scene model; creating an animation mixer instance in the process model containing skeletal animation in the second scene model using the Three.js library, triggering the chained playback of animations according to the equipment runtime sequence to obtain a dynamically interlocked third scene model; receiving global and single-device audio files using the Three.js library to load and associate audio buffer data in the third scene model to obtain a fourth scene model; creating a ray detector in the fourth scene model using the Three.js library to realize 3D scene interaction, and detecting the intersection points of the equipment models based on mouse interaction coordinates to obtain a fifth scene model.

[0007] Secondly, this application provides a system for building a visualization and interactive system for a float glass production line, comprising: a data acquisition module configured to acquire model data containing PRB material and skeletal animation information, wherein the model data is obtained by reverse modeling various mechanical equipment on the float glass production line; a scene construction module configured to create a 3D scene using the Three.js library and determine camera attributes based on received camera parameters to obtain scene data containing the scene and camera; a parsing and rendering module configured to parse the model data using the Three.js library, add the model data to the scene data based on the parsing results, and render a first scene model; and a lighting and texture module configured to, based on received lighting and texture parameters, use the Three.js library to... The hree.js library adds lighting and textures to the first scene model to obtain the second scene model. The animation processing module is configured to create an animation mixer instance in the process model with skeletal animation in the second scene model using the Three.js library, triggering the chained playback of animations according to the device runtime sequence to obtain the dynamically interlocked third scene model. The audio processing module is configured to receive global and single-device audio files through the Three.js library, load and associate audio buffer data in the third scene model to obtain the fourth scene model. The interaction processing module is configured to create a ray detector in the fourth scene model using the Three.js library to realize 3D scene interaction, and detect the intersection points of the device models based on mouse interaction coordinates to obtain the fifth scene model.

[0008] Thirdly, this application provides an electronic device including a memory for storing one or more programs; a processor; and, when the one or more programs are executed by the processor, implementing the method as described in any one of the first aspects above.

[0009] Fourthly, this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method as described in any one of the first aspects above.

[0010] Fifthly, this application provides a computer program product including computer program instructions that, when executed by a processor, implement the method as described in any one of the first aspects above.

[0011] Compared with the prior art, this application has at least the following advantages or beneficial effects: This application proposes a method for building a visual interactive system for a float glass production line. Through a technical chain design of "reverse modeling accuracy assurance—caching optimization for speed—physical rendering enhancement—animation interlocking control—ray interaction deepening," it systematically solves the core problems of existing solutions, such as weak dynamic expressiveness, low loading efficiency, and limited interaction. Furthermore, from model parsing and lighting calculation to audio loading, everything is implemented based on the WebGL technology stack, requiring no plugin dependencies and utilizing only the browser's native support features, thus avoiding the client installation requirements of engines like Unity / Unreal. This addresses the problems of traditional engine solutions relying on local deployment, making cross-platform access difficult; and the fragmented functional modules (such as animation and audio belonging to different libraries) and low integration of existing Web solutions. Attached Figure Description

[0012] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1 This is a flowchart of an embodiment of a method for building a visual interactive system for a float glass production line according to this application; Figure 2 This is a structural block diagram of an embodiment of a visualization and interactive system for a float glass production line, as described in this application. Figure 3 This is a structural block diagram of an electronic device provided in an embodiment of this application.

[0014] Icons: 201, Processor; 202, Memory; 203, Communication Interface. Detailed Implementation

[0015] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. It should be understood that this application is not limited to the exemplary embodiments described herein.

[0016] In this document, relational terms such as first and second are used only to distinguish one entity or operation from another entity or operation, without necessarily requiring or implying any such actual relationship or order between these entities or operations.

[0017] Application Overview Current mainstream solutions for 3D visualization of industrial production lines include traditional engine solutions and existing WebGL solutions. While traditional engine solutions (such as Unity / Unreal) can achieve high-precision rendering, they rely on local deployment, making it difficult to meet the lightweight access requirements of web-based applications, and they cannot be dynamically integrated with real-time industrial data. Existing WebGL solutions (such as Three.js basic applications), while supporting cross-platform compatibility, can only statically display the appearance of equipment, lacking dynamic process connections, multi-device interlocking animation control, and deep interactive functions. This results in users not being able to intuitively understand the production line's operational logic, still requiring manual explanation.

[0018] To address the aforementioned technical issues, this application provides a method for building a visual interactive system for a float glass production line. This method can effectively build a lightweight web-based visual interactive system for a float glass production line that enables animation interlocking control, interaction, and display.

[0019] After introducing the basic principles of this application, various non-limiting embodiments of this application will be described in detail below with reference to the accompanying drawings. Unless otherwise specified, the various embodiments and features described below can be combined with each other.

[0020] Exemplary methods Please see Figure 1 The method for building a visualization and interactive system for a float glass production line includes the following steps: Step S101: Obtain model data containing PRB material and skeletal animation information. The model data is obtained by reverse modeling each mechanical device on the float glass production line. It should be noted that the model data is obtained by reverse engineering the various mechanical equipment on the float glass production line. Using professional modeling tools and techniques, model data containing PRB material (a material with specific optical and physical properties) and skeletal animation information is acquired. This data records in detail the equipment's appearance, material properties, and motion status. It provides a high-quality, high-fidelity model foundation for subsequent visualization. The model containing PRB material can more realistically simulate the appearance of the equipment in actual production, while the skeletal animation information enables dynamic display of the equipment, making the visualization scene more realistic and vivid. For example, in some implementations of this application, the model data is obtained by reverse engineering the feed inlet, melting furnace, tin bath, annealing furnace, testing equipment, cutting machine, stacker crane, and forklift on the float glass production line using Blender software at a proportional scale.

[0021] Step S102: Create a 3D scene using the Three.js library, determine camera properties based on the received camera parameters, and obtain scene data containing the scene and camera. By creating 3D scene objects using the API provided by the Three.js library, and setting camera properties based on received camera parameters (such as viewpoint, field of view, and position), the camera is added to the scene. The resulting scene data, including the scene and camera, provides a spatial environment for displaying the model data. The camera property settings determine the user's viewpoint and range of observation. By flexibly adjusting camera parameters, the observation needs of different users can be met, providing a more personalized visualization experience. In other words, by building a basic visualization environment, it can adapt to the spatial layout of a production line, ensuring that the viewpoint covers key processes.

[0022] Step S103: Parse the model data using the Three.js library, add the model data to the scene data according to the parsing results, and render the first scene model; The acquired model data is parsed using the Three.js library, converting it into a format recognizable by Three.js. Based on the parsing results, the model data is added to the previously created scene data, and the rendering function is called to render the scene, resulting in the first scene model. This achieves the initial presentation of the model in the scene, allowing users to intuitively see the layout and appearance of the various mechanical equipment on the float glass production line in three-dimensional space. The rendering process integrates the model data and scene data, providing a foundation for subsequent additions of lighting, textures, and other effects.

[0023] Step S104: Based on the received lighting and texture parameters, add lighting and textures to the first scene model using the Three.js library to obtain the second scene model; Based on the received lighting parameters (such as light source type, intensity, color, and position) and texture parameters (such as texture image path and mapping method), the lighting and mapping functions provided by the Three.js library are used to add corresponding lighting effects and texture maps to the first scene model to obtain the second scene model. The addition of lighting effects gives the model in the scene variations in brightness and a sense of three-dimensionality (simulating the lighting conditions of a float glass production line, such as the high-temperature red light reflection from the melting furnace and dynamic reflections on the glass surface), enhancing the realism of the scene. The application of texture maps adds rich textural details to the model surface, further improving the model's visual effect and allowing users to more intuitively perceive the appearance characteristics of the equipment.

[0024] Step S105: In the process model with skeletal animation in the second scene model, an animation mixer instance is created using the Three.js library to trigger the chained playback of animations according to the device runtime sequence, resulting in a dynamically interlocked third scene model; Step S105 involves creating an animation mixer instance using the Three.js library within the second scene model for process models with skeletal animation (such as the feeding machine and annealing kiln). Based on the equipment's operational sequence (e.g., actual production sequence: feeding → melting → forming → cutting), the various animation segments are combined in a specific order and logic. By triggering relevant methods of the animation mixer, a chained playback of the animations is achieved, resulting in a dynamically interlocked third scene model. This step demonstrates the dynamic interlocking and collaborative operation between equipment. Through the chained playback of animations, users can clearly see the transition relationships between each process and the coordination between various machines. Without manual explanation, they can gain a deep understanding of the float glass production line's operational flow, improving the intuitiveness and practicality of the visualization system.

[0025] Step S106: Receive global and single-device audio files through the Three.js library to load and associate audio buffer data in the third scene model to obtain the fourth scene model; In step S106, the audio processing capabilities of the Three.js library are used to receive global and single-device audio files. These audio files are loaded into an audio buffer and associated with corresponding devices or scene elements in the third scene model, enabling synchronized audio playback during scene display to obtain the fourth scene model. This adds audio interaction functionality to the visualization system, allowing users to more intuitively experience the production line's operation through audio while viewing the visualized scene. For example, equipment operating sounds and alarm notifications enhance user immersion and experience, allowing users to understand the actual operating environment of the production line more realistically.

[0026] Step S107: Create a ray detector in the fourth scene model using the Three.js library to realize 3D scene interaction, and detect the intersection of the device model based on the mouse interaction coordinates to obtain the fifth scene model.

[0027] In step S107, the ray detector function provided by the Three.js library is used to create a ray detector object in the fourth scene model. This ray detector has attributes for starting point, direction, and the farthest / nearest distance of the ray detection. When the user interacts with the mouse, the mouse's interaction coordinates are obtained. A ray is emitted from the camera position towards the mouse coordinates using the ray detector, and the intersection point between the ray and the scene model is detected. Based on the intersection point information, the corresponding interactive operation is implemented, resulting in the fifth scene model. This enables convenient interaction between the user and the visualization system. Users can interact with the model in the scene through mouse operations, such as viewing detailed equipment information and controlling the equipment's operating status. This interaction method improves the convenience and effectiveness of user interaction with the visualization system, enabling users to more proactively explore and understand relevant information about the float glass production line.

[0028] In summary, traditional WebGL solutions can only display static models or simple animations of single devices, failing to reproduce the logical connections between processes (such as the flow of molten glass into a tin bath) and the collaborative relationships between equipment (such as the rhythm matching between a cutting machine and a stacker crane). This application, however, systematically solves the core problems of weak dynamic expressiveness, low loading efficiency, and limited interaction in existing solutions through a technology chain design of "reverse modeling accuracy assurance—caching optimization for speed—physical rendering enhancement—animation interlocking control—raycasting interaction deepening." Furthermore, from model parsing and lighting calculation to audio loading, everything is implemented based on the WebGL technology stack, requiring no plugin dependencies and utilizing only native browser support features (such as IndexedDB and the Web Audio API), avoiding the client installation requirements of engines like Unity / Unreal. This addresses the problems of traditional engine solutions relying on local deployment, making cross-platform access difficult; and the fragmented functional modules of existing Web solutions (such as animation and audio belonging to different libraries), resulting in low integration.

[0029] Based on the aforementioned scheme, in some implementations of this application, the step of determining camera attributes based on received camera parameters includes: the Three.js library calculates the camera's projection matrix based on the received field of view height, aspect ratio, near clipping plane, and far clipping plane parameters, so as to determine the camera attributes carrying the camera's position, orientation, and projection matrix in the three-dimensional scene based on the calculation results.

[0030] The field of view height defines the camera's vertical field of view (in degrees), determining the visible height of the scene. Aspect ratio is the width-to-height ratio of the scene rendering canvas, adapting to different terminal screen sizes. Near and far clipping planes are used to set the nearest and farthest distances within the camera's visible range, excluding the rendering of objects outside the field of view. Therefore, by calculating the projection matrix based on the field of view height, aspect ratio, near clipping plane, and far clipping plane parameters, the camera's viewing angle can be precisely controlled. Users can adjust these parameters according to actual needs to achieve different visual effects. For example, when displaying different parts of a float glass production line, the field of view height can be adjusted to highlight local details or showcase the overall layout.

[0031] Based on the aforementioned scheme, in some implementations of this application, the step of parsing the model data using the Three.js library, adding the model data to the scene data according to the parsing results, and rendering the first scene model includes: parsing the model data using the GLTF loader of the Three.js library, adding the parsed model nodes to the scene data, and rendering the first scene model based on the WebGL renderer.

[0032] The model data is parsed using the GLTF loader in the Three.js library, converting node information such as meshes, materials, and skeletal animations into 3D objects recognizable by Three.js. The parsed model nodes (such as the melting furnace mesh and the cutting machine skeleton) are then added to the scene data, and the equipment positions and hierarchical relationships are set according to the actual layout of the production line (e.g., the annealing furnace is located downstream of the melting furnace), thus constructing a complete 3D structure of the float glass production line and ensuring that the spatial distribution of equipment is consistent with reality. Finally, the scene data with added model nodes is rendered using a WebGL renderer. The renderer converts the model data in the 3D scene into a 2D image based on camera settings, lighting conditions, model materials, and other information in the scene, displaying it on the screen to obtain the first scene model.

[0033] It should be noted that WebGL (Web Graphics Library) is a JavaScript API based on OpenGL ES, used to achieve high-performance 3D graphics rendering in web browsers.

[0034] Based on the aforementioned scheme, in some implementations of this application, the step of parsing the model data using the GLTF loader of the Three.js library includes: when loading the model data for the first time, converting the model data into ArrayBuffer format and storing it in the IndexedDB database of the target browser; when loading the model data for the second time, reading the model data from the IndexedDB database according to the input key value.

[0035] When loading and parsing model data, the GLTF loader typically uses a loading animation to transition due to its slow loading speed. However, this still impacts the user experience and doesn't fundamentally improve loading speed. The implementation described above, which uses an IndexedDB database for resource caching on the client side, effectively improves loading efficiency. During secondary loading of model data, data is read directly from the IndexedDB database, avoiding network latency and file parsing time. Compared to reloading model data from the network each time, this method significantly shortens loading time, allowing users to see the visualization scene faster and improving system responsiveness and user experience. Furthermore, since secondary loading doesn't require re-fetching model data from the network, unnecessary network requests are reduced, lowering network bandwidth usage. This is especially important for users with limited network bandwidth or unstable network environments, ensuring smooth system operation and saving on data charges.

[0036] Based on the aforementioned scheme, in some implementations of this application, the step of adding lighting and textures to the first scene model using the Three.js library according to the received lighting and texture parameters includes: using the Three.js library to create and add the created parallel light source and global light source to the first scene model based on the received parallel light intensity and color, as well as the ambient light intensity and color; receiving a .hdr file containing texture parameters, parsing the header and pixel values ​​in the file to create a texture, and adding the texture to all materials in the first scene model.

[0037] .hdr (High Dynamic Range) files are a high dynamic range image format that can store a wider range of brightness and color information than traditional image formats. The .hdr file received by the Three.js library contains header information and pixel values. The header information describes the image's metadata, such as size and format; the pixel values ​​contain the image's color and brightness information. By parsing this information, data for creating textures can be extracted. This parsed data can then be used with the texture creation functionality provided by Three.js to create the corresponding texture object. This texture is then applied to all materials in the first scene model, giving the model's surface rich texture details and enhancing the model's visual effect.

[0038] Based on the foregoing solution, in some implementation manners of the present application, the problems of time sequence fragmentation, poor scalability, resource waste, etc. in traditional animation control are solved through dynamic calculation of time sequence reference + event-driven chain trigger. Specifically, in the process model with skeletal animation in the second scene model, an animation mixer instance is created through the Three.js library, and the chain play of the animation is triggered according to the device operation time sequence, including: First, traverse the AnimationMixer instances of each process model in the second scene model to use the determined longest animation cycle duration as the time sequence reference. Then, determine the chain play of the animation triggered according to the device operation time sequence based on the time sequence reference and the animation advancement state in the AnimationMixer instance. That is, coordinate the animation play sequence and time of each process model according to the time sequence reference, so that the animations can be played in sequence according to the actual operation order of the device, forming a coherent animation effect. Among them, the AnimationMixer instance is a class in the Three.js library used to manage the animation play. Each process model corresponds to an AnimationMixer instance, which contains the animation information of the process model.

[0039] It uses the longest animation cycle duration as the time sequence reference, ensuring that all animations can be coordinated and played within a unified time frame. It avoids problems such as animation out-of-sync and jitter caused by inconsistent animation cycles, making the entire animation play process smoother and more natural. For the visualization system of the float glass production line that includes multiple process models and complex animations, this implementation manner can effectively manage and coordinate the play of each animation, ensuring that the animation effects of the entire scene are consistent and stable. Whether it is a simple single-device animation or a complex production line linkage animation, it can be well processed.

[0040] Based on the foregoing solution, in some implementation manners of the present application, the global and single-device audio files are received through the Three.js library to load and associate the audio buffer data in the third scene model, including: in response to the audio file loading instruction, the Three.js library creates an AudioLoader class for loading the audio file and provides an AudioBuffer class for playing the audio buffer data; pass the path of the audio file into the AudioLoader class to associate the AudioBuffer class to the audio object.

[0041] The AudioLoader class is a utility for loading audio files; it's responsible for reading audio data from a specified path. The AudioBuffer class stores the loaded audio data for subsequent playback. By passing the audio file path to the AudioLoader class, the AudioLoader loads the audio file based on that path and stores the loaded audio data in the AudioBuffer class. Then, the AudioBuffer class is associated with an audio object, allowing the audio object to play the audio data stored in the AudioBuffer class.

[0042] Based on the aforementioned scheme, in some implementations of this application, the step of detecting the intersection point of the device model based on mouse interaction coordinates includes: responding to a mouse click on the fourth scene model, acquiring and sending the acquired planar two-dimensional coordinates to the Three.js library to obtain a two-dimensional vector, using the two-dimensional vector as the direction of the ray detector, using the camera coordinates as the starting point of the ray detector, calculating whether all objects in the fourth scene model intersect with the ray, thereby obtaining an intersection result array containing the coordinates of the intersection point, the intersecting objects, and the distance.

[0043] A mouse click on the screen generates a two-dimensional coordinate, representing the user's click position. This coordinate is sent to the Three.js library, which then converts it into a direction vector in three-dimensional space based on the camera's projection matrix and viewport settings. This vector serves as the direction for the ray detector. The camera coordinates, on the other hand, are a fixed point in three-dimensional space, representing the user's current viewpoint. Using the camera coordinates as the starting point for the ray detector implies that the ray originates from the user's perspective, consistent with actual interaction logic. The intersection result array contains detailed information about all objects that intersect with the ray. For example, the coordinates of the intersection point can be used to mark the intersection location in the scene, the intersecting objects can be used to determine which object the user clicked, and distance information can be used for further logical processing, such as determining which object is closer to the user.

[0044] It should be noted that the functions that can be achieved based on intersecting objects in some of the above implementation methods include: (1) Send the device number of the intersecting object to the server. The server finds the relevant device information (equipment process, operation data, management personnel information, etc.) based on the device number and returns it. Specifically, this includes creating HTML elements based on the returned device data to implement the content information and effects to be displayed; requesting a command from the Three.js library to render HTML tags. After receiving the command, the Three.js library will generate a renderer CSS3DRenderer that can add HTML elements as tags to the scene; using CSS3DRenderer to transform the HTML elements and adding them to the scene based on the intersection point coordinates.

[0045] (2) Determine whether there is animation inside the device based on the intersecting objects. If there is, set the transparency of the material outside the device to 0.

[0046] (3) Implement camera animation using the Tween.js library, where the camera moves closer to the observation device. Specifically, this involves sending an animation command to the Tween.js library, which then creates an animation tween based on the command; using the camera coordinates as the starting point coordinates, evaluating the ending point coordinates based on the intersection point coordinates, and setting the time required to travel from the starting coordinates to the ending point coordinates; passing the starting coordinates, ending coordinates, and time as parameters to the tween library to generate the camera's trajectory animation.

[0047] (4) When the camera moves to the designated position, the audio data in the fourth scene model is combined to realize the audio playback of the device information.

[0048] Exemplary System Please see Figure 2 This application provides a system for building a visual interactive system for a float glass production line, which includes: The data acquisition module is configured to: acquire model data containing PRB material and skeletal animation information, wherein the model data is obtained by reverse modeling various mechanical equipment on the float glass production line; the scene construction module is configured to: create a 3D scene using the Three.js library, determine camera attributes based on received camera parameters, and obtain scene data containing the scene and camera; the parsing and rendering module is configured to: parse the model data using the Three.js library, add the model data to the scene data based on the parsing results, and render the first scene model; the lighting and texture module is configured to: add lighting and texture parameters to the first scene model using the Three.js library. The lighting and texture mapping processes are used to obtain the second scene model. The animation processing module is configured to create an animation mixer instance in the process model containing skeletal animation in the second scene model using the Three.js library, triggering the chained playback of animations according to the device runtime sequence to obtain a dynamically interlocked third scene model. The audio processing module is configured to receive global and single-device audio files through the Three.js library, load and associate audio buffer data in the third scene model to obtain the fourth scene model. The interaction processing module is configured to create a ray detector in the fourth scene model using the Three.js library to implement 3D scene interaction, and detect the intersection points of the device model based on mouse interaction coordinates to obtain the fifth scene model.

[0049] For the specific implementation process of the above system, please refer to the method for building a visual interactive system for a float glass production line provided in the "Exemplary Methods" section, which will not be repeated here.

[0050] Exemplary electronic devices Please see Figure 3 This application provides an electronic device including at least one processor 201 and at least one memory 202. The processor 201 and memory 202 are directly connected to each other, or communicate with each other through a communication interface 203, or are electrically connected through one or more communication buses or signal lines to achieve data transmission or interaction. The memory 202 stores program instructions executable by the processor 201, which can call the program instructions to execute them, thereby implementing a method for building a visual interactive system for a float glass production line according to various embodiments of this application, as described in the "Exemplary Methods" section above.

[0051] The memory 202 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc.

[0052] The processor 201 can be an integrated circuit chip with signal processing capabilities. The processor 201 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0053] Understandable. Figure 3 The structure shown is for illustrative purposes only; the electronic device may also include components that are more advanced than those shown. Figure 3 The more or fewer components shown, or having the same Figure 3 The different configurations shown. Figure 3 The components shown can be implemented using hardware, software, or a combination thereof.

[0054] Exemplary computer-readable storage media and computer program products This application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor 201, implements a method for building a visual interactive system for a float glass production line according to various embodiments of this application as described in the "Exemplary Methods" section above.

[0055] The computer-readable storage medium may be any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may, for example, include, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0056] Furthermore, embodiments of this application may also be computer program products, which include computer program instructions that, when executed by a processor, implement the steps of a method for building a visual interactive system for a float glass production line according to various embodiments of this application as described in the "Exemplary Methods" section above.

[0057] The computer program product can be written in any combination of one or more programming languages ​​to perform the operations of the embodiments of this application. The programming languages ​​include object-oriented programming languages ​​such as Java and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0058] It will be apparent to those skilled in the art that this application is not limited to the details of the exemplary embodiments described above, and that this application can be implemented in other specific forms without departing from the spirit or essential characteristics of this application. Therefore, the embodiments should be considered illustrative and non-limiting in all respects, and the scope of this application is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be included within this application. No reference numerals in the claims should be construed as limiting the scope of the claims.

Claims

1. A method for constructing a visual interactive system for a float glass production line, characterized in that, Includes the following steps: Obtain model data containing PRB material and skeletal animation information. The model data is obtained by reverse modeling various mechanical equipment on the float glass production line. A 3D scene is created using the Three.js library, and camera properties are determined based on the received camera parameters to obtain scene data containing the scene and the camera. The model data is parsed using the Three.js library, and the model data is added to the scene data based on the parsing results to obtain the first scene model; Based on the received lighting and texture parameters, the second scene model is obtained by adding lighting and textures to the first scene model using the Three.js library; In the process model with skeletal animation in the second scene model, an animation mixer instance is created using the Three.js library to trigger the chained playback of animations according to the device runtime sequence, resulting in a dynamically interlocked third scene model; The Three.js library receives global and single-device audio files to load and associate audio buffer data in the third scene model, resulting in the fourth scene model. Using the Three.js library, a ray detector is created in the fourth scene model to enable 3D scene interaction, and the intersection of the device model is detected based on the mouse interaction coordinates to obtain the fifth scene model.

2. The method according to claim 1, characterized in that, The model data was obtained by using Blender software to perform proportional reverse modeling of the feed inlet, melting furnace, tin bath, annealing furnace, testing equipment, cutting machine, stacker crane and forklift on the float glass production line.

3. The method according to claim 1, characterized in that, The step of determining camera attributes based on received camera parameters includes: The Three.js library calculates the camera's projection matrix based on the received field of view height, aspect ratio, near clipping plane, and far clipping plane parameters, and determines the camera attributes carrying the camera's position, orientation, and projection matrix in the 3D scene based on the calculation results.

4. The method according to claim 1, characterized in that, The process of parsing the model data using the Three.js library, adding the model data to the scene data based on the parsing results, and rendering the first scene model includes: The model data is parsed using the GLTF loader of the Three.js library, the parsed model nodes are added to the scene data, and the first scene model is rendered using the WebGL renderer.

5. The method according to claim 4, characterized in that, The process of parsing the model data using the GLTF loader from the Three.js library includes: When loading model data for the first time, the model data is converted into ArrayBuffer format and stored in the target browser's IndexedDB database; When loading model data for the second time, the model data is read from the IndexedDB database based on the input key value.

6. The method according to claim 1, characterized in that, The step of adding lighting and textures to the first scene model using the Three.js library based on the received lighting and texture parameters includes: Using the Three.js library, parallel light sources and global light sources are created and added to the first scene model based on the received light intensity and color of parallel light and ambient light. Receives an .hdr file containing texture parameters, parses the header and pixel values ​​in the file to create a texture, and adds the texture to all materials in the first scene model.

7. The method according to claim 1, characterized in that, In the process model where skeletal animation exists in the second scene model, an animation mixer instance is created using the Three.js library to trigger chained animation playback according to the device runtime sequence, including: In the second scene model, iterate through the AnimationMixer instances of each process model to use the determined longest animation cycle duration as the timing reference. Based on the timing baseline and the advancement animation status in the AnimationMixer instance, determine the triggering of the animation chain playback according to the device runtime sequence.

8. The method according to claim 1, characterized in that, The process of receiving global and single-device audio files via the Three.js library to load and associate audio buffer data in the third scene model includes: In response to the instruction to load an audio file, the Three.js library creates the AudioLoader class for loading audio files and provides the AudioBuffer class for audio buffer data that can be used for playback; Pass the path to the audio file to the AudioLoader class to associate the AudioBuffer class with the audio object.

9. The method according to claim 1, characterized in that, The ray detector is a ray detector with attributes of starting point, direction, and the farthest / nearest distance for ray detection.

10. The method according to claim 1 or 9, characterized in that, The intersection point of the device model based on mouse interaction coordinate detection includes: In response to a mouse click on the fourth scene model, the obtained two-dimensional coordinates are acquired and sent to the Three.js library to obtain a two-dimensional vector. This two-dimensional vector is used as the direction of the ray detector, and the camera coordinates are used as the starting point of the ray detector. The system calculates whether all objects in the fourth scene model intersect with the ray, thus obtaining an intersection result array containing the coordinates of the intersection point, the intersecting objects, and the distance.

Images