WebGL-based three-dimensional cutting method, system and equipment

Abstract

The invention relates to the technical field of three-dimensional cutting, and discloses a WebGL-based three-dimensional cutting method, system and device. The method comprises the following steps: loading a three-dimensional model to be clipped into a browser environment supporting WebGL so as to carry out graphic rendering and splitting; defining a cutting area on the to-be-cut three-dimensional model according to a preset rule; based on the workflow of a graphic rendering pipeline, the cutting area and the to-be-cut three-dimensional model are converted into a fragment shader; judging whether the fragment is located on one side of a preset shearing surface or not, and determining whether the fragment is removed or not according to a judgment result to obtain a sheared model; drawing a cut on the section of the cut model based on the cache template, and coloring to obtain a cut three-dimensional model; and rendering the clipped three-dimensional model on the screen again, and updating a rendering result to reflect a clipping effect. According to the method and the device, the graphic rendering capability of the WebGL is combined with the hardware acceleration characteristic of the GPU, so that efficient, accurate and compatible three-dimensional cutting is realized.

Description

Technical Field

[0001] The present invention relates to the field of three-dimensional clipping technology, and in particular to a three-dimensional clipping method, system and device based on WebGL. Background Art

[0002] With the development of 3D geological modeling technology, 3D models of geological bodies have been widely used in geological exploration, mineral resource assessment and other fields. However, in practical applications, it is often necessary to crop the 3D models of geological bodies to obtain geological body information in a specific area or under specific conditions. Traditional cropping methods often have problems such as low efficiency and insufficient precision, which are difficult to meet the needs of practical applications.

[0003] Current 3D cutting technology mainly relies on original modeling data. The core of its operation is to determine the position and shape of the cutting surface through complex data simulation calculations. However, for the customized model structures of various manufacturers, this method is difficult to process flexibly and efficiently in the absence of original data. Regarding the model itself, in order to alleviate the computing pressure and increase the cutting speed to a certain extent, some 3D cutting technologies rely on powerful back-end computing platforms to complete a large number of computing tasks. The calculation results of this method need to go through a series of conversions and processing before they can be finally transmitted to the front-end interface for display. This process may not only introduce additional delays, but also cause precision loss or information distortion due to data format conversion, thereby reducing overall efficiency and affecting user experience. Summary of the invention

[0004] The main purpose of the present invention is to provide a WebGL-based 3D clipping method, system and device, aiming to solve at least one of the above-mentioned technical problems.

[0005] To achieve the above object, the present invention provides a three-dimensional clipping method based on WebGL, comprising:

[0006] Loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering and splitting of the three-dimensional model to be cut based on WebGL;

[0007] Defining a cutting area on the three-dimensional model to be cut according to a preset rule;

[0008] Based on the workflow of the graphics rendering pipeline, converting the clipping area and the three-dimensional model to be clipped into a fragment shader;

[0009] Determine whether the fragment is located on one side of a preset shearing plane, and determine whether to remove the fragment according to the determination result to obtain a sheared model;

[0010] Drawing cutouts and coloring them on the cut surface of the cut model based on the cache template to obtain a cut three-dimensional model;

[0011] The cropped three-dimensional model is re-rendered onto the screen, and the rendering result is updated to reflect the cropping effect.

[0012] In some embodiments, the step of loading the to-be-cut 3D model into a browser environment supporting WebGL, so as to perform graphics rendering and splitting of the to-be-cut 3D model based on WebGL, includes:

[0013] Loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering on the three-dimensional model to be cut based on WebGL;

[0014] The three-dimensional model to be cut is split according to the layer information so as to cut each layer of the model separately.

[0015] In some embodiments, loading the to-be-cut three-dimensional model into a browser environment supporting WebGL to perform graphics rendering on the to-be-cut three-dimensional model based on WebGL includes:

[0016] Initialize the scene;

[0017] Create a perspective camera;

[0018] Create a WebGL renderer, set the renderer size, and add the renderer's DOM element to the document;

[0019] Define the animation loop function to create a smooth animation and pass the scene and perspective camera to the renderer for rendering;

[0020] Starts the animation rendering loop.

[0021] In some embodiments, the clipping area includes a geometric shape-based area, a polygonal area, or a free curve area.

[0022] In some embodiments, the determining whether the fragment is located on one side of a preset shearing plane and determining whether to remove the fragment according to the determination result to obtain a sheared model includes:

[0023] Determine whether the fragment is located on one side of the preset cutting surface, so as to retain one side or cut one side, and obtain a determination result;

[0024] Determine whether to remove the fragment according to the judgment result, remove the cut pixels, and obtain the cut model.

[0025] In some embodiments, the step of drawing a cutout and coloring the cutout on the cut surface of the clipped model based on the cache template to obtain the clipped three-dimensional model includes:

[0026] Turn on the template cache to automatically calculate the number of penetrations based on the graphics rendering pipeline;

[0027] Determining whether the sheared model needs to be sealed according to the number of penetrations;

[0028] When sealing is required, the vertex is projected onto the clipping surface through the vertex shader to draw the cut;

[0029] The cutout is colored to obtain a cropped three-dimensional model.

[0030] In some embodiments, coloring the cutout to obtain a cropped three-dimensional model includes:

[0031] Specifying the cut surface material or texture information according to the attributes of the layered information;

[0032] Based on the section material or texture information, the cutout mapping of the three-dimensional model is realized by model coloring to obtain a cropped three-dimensional model.

[0033] In addition, to achieve the above purpose, the present invention also proposes a three-dimensional clipping system based on WebGL, comprising:

[0034] A model loading module, used for loading the to-be-cut 3D model into a browser environment supporting WebGL, so as to perform graphic rendering and splitting of the to-be-cut 3D model based on WebGL;

[0035] A clipping region definition module is used to define a clipping region on the to-be-cut three-dimensional model according to a preset rule;

[0036] A fragment processing module, used for converting the clipping area and the to-be-cut three-dimensional model into a fragment shader based on the workflow of a graphics rendering pipeline;

[0037] A fragment judgment module is used to judge whether the fragment is located on one side of the preset shearing surface, and determine whether to remove the fragment according to the judgment result to obtain a sheared model;

[0038] A cutout drawing and coloring module, used for drawing and coloring a cutout on a cut surface of the cutout model based on a cache template to obtain a cutout three-dimensional model;

[0039] The rendering module is updated to render the cropped three-dimensional model again on the screen and update the rendering result to reflect the cropping effect.

[0040] In some embodiments, the calculation based on the WebGL three-dimensional clipping system adopts a WebGL framework, and the underlying layer of the WebGL framework adopts GPU computing.

[0041] In addition, to achieve the above-mentioned purpose, the present invention also proposes an electronic device, which includes: a memory, a processor, and a WebGL-based three-dimensional clipping program stored in the memory and executable on the processor, wherein the WebGL-based three-dimensional clipping program is configured to implement the WebGL-based three-dimensional clipping method as described above.

[0042] The present invention provides a three-dimensional clipping method based on WebGL, comprising: loading a three-dimensional model to be clipped into a browser environment supporting WebGL, so as to perform graphic rendering and splitting of the three-dimensional model to be clipped based on WebGL; defining a clipping area on the three-dimensional model to be clipped according to a preset rule; converting the clipping area and the three-dimensional model to be clipped into a fragment shader based on the workflow of a graphics rendering pipeline; judging whether a fragment is located on one side of a preset clipping surface, and determining whether to remove the fragment according to the judgment result to obtain a clipped model; drawing an incision and coloring on the section of the clipped model based on a cache template to obtain a clipped three-dimensional model; re-rendering the clipped three-dimensional model to a screen, and updating the rendering result to reflect the clipping effect. In the present invention, based on WebGL combined with the efficient computing power of a GPU, efficient clipping of any model is achieved, helping to obtain structural information in a specific area or under specific conditions, and by utilizing the graphics rendering capability of WebGL and the hardware acceleration characteristics of a GPU, efficient, accurate and compatible three-dimensional clipping is achieved to meet the needs of accurate clipping of geological body three-dimensional models in the fields of geological exploration, mineral resource assessment, and underground space planning. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 A schematic diagram of the structure of an electronic device in a hardware operating environment involved in an embodiment of the present invention;

[0044] Figure 2 This is a flow chart of an embodiment of a three-dimensional clipping method based on WebGL of the present invention;

[0045] Figure 3 It is a schematic diagram of the operation flow involved in the embodiment of the present invention;

[0046] Figure 4 A schematic diagram of a cropped three-dimensional model and an updated rendering result involved in an embodiment of the present invention;

[0047] Figure 5 This is a structural block diagram of an embodiment of a WebGL-based three-dimensional clipping system of the present invention.

[0048] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0049] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0050] It should be noted that all directional indications in the embodiments of the present invention (such as up, down, left, right, front, back, etc.) are only used to explain the relative position relationship, movement status, etc. between the components under a certain specific posture (as shown in the accompanying drawings). If the specific posture changes, the directional indication will also change accordingly.

[0051] In addition, the descriptions of "first", "second", etc. in the present invention are only used for descriptive purposes and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but it must be based on the ability of ordinary technicians in the field to implement. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such combination of technical solutions does not exist and is not within the scope of protection required by the present invention. It should be understood that the specific embodiments described here are only used to explain the present invention and are not used to limit the present invention.

[0052] Reference Figure 1 , Figure 1 The figure is a schematic diagram of the structure of an electronic device of a hardware operating environment involved in an embodiment of the present invention.

[0053] like Figure 1As shown, the electronic device may include: a processor 1001, such as a central processing unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a wireless fidelity (Wireless-Fidelity, Wi-Fi) interface). The memory 1005 may be a high-speed random access memory (Random Access Memory, RAM memory) or a stable non-volatile memory (Non-Volatile Memory, NVM), such as a disk memory. The memory 1005 may also be a storage device independent of the aforementioned processor 1001.

[0054] Those skilled in the art will understand that Figure 1 The structure shown in the figure does not constitute a limitation on the electronic device, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.

[0055] like Figure 1 As shown, the memory 1005 as a storage medium may include an operating system, a network communication module, a user interface module, and a WebGL-based three-dimensional clipping program.

[0056] exist Figure 1 In the electronic device shown, the network interface 1004 is mainly used for data communication with the network server; the user interface 1003 is mainly used for data interaction with the user; the processor 1001 and the memory 1005 in the electronic device of the present invention can be set in the electronic device, and the electronic device calls the WebGL-based three-dimensional clipping program stored in the memory 1005 through the processor 1001, and executes the WebGL-based three-dimensional clipping method provided by the embodiment of the present invention.

[0057] The present invention provides a three-dimensional clipping method, system and device based on WebGL.

[0058] The embodiment of the present invention provides a three-dimensional clipping method based on WebGL, referring to Figure 2 , Figure 2 The figure is a flowchart of an embodiment of a three-dimensional clipping method based on WebGL of the present invention.

[0059] like Figure 2As shown, the WebGL-based three-dimensional clipping method includes:

[0060] Step S100: loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering and splitting of the three-dimensional model to be cut based on WebGL;

[0061] Step S200: defining a cutting area on the three-dimensional model to be cut according to a preset rule;

[0062] Step S300: based on the workflow of the graphics rendering pipeline, converting the clipping area and the three-dimensional model to be clipped into a fragment shader;

[0063] Step S400: determining whether a fragment is located on one side of a preset shearing plane, and determining whether to remove the fragment according to the determination result to obtain a sheared model;

[0064] Step S500: drawing a cutout on the cut surface of the cut model based on the cache template and coloring it to obtain a cutout three-dimensional model;

[0065] Step S600: re-rendering the cropped 3D model onto the screen, and updating the rendering result to reflect the cropping effect.

[0066] It should be noted that the execution subject in this embodiment may be an electronic device, which may be a computer device with data processing functions, or other devices that can achieve the same or similar functions. This embodiment does not limit this. In this embodiment, a computer device is used as an example for explanation.

[0067] It is understandable that this embodiment is described by taking the clipping of a geological body three-dimensional model as an example. By utilizing the graphics rendering capability of WebGL and the hardware acceleration characteristics of the GPU, an efficient, accurate and compatible three-dimensional clipping method is implemented. First, the three-dimensional model to be cropped is loaded into a browser environment that supports WebGL, and the model is rendered using the graphics rendering capability of WebGL, and the model is split according to the layered information to facilitate the separate cropping calculation of each layer of the model; then the cropping area is defined, and the cropping area is defined on the three-dimensional model according to user needs or preset rules. The cropping area can be based on geometric shapes (such as rectangles), polygons or free curves, etc.; combined with the workflow of the graphics rendering pipeline, the cropping area and the three-dimensional model are converted to the fragment shader, and by judging whether the fragment is located on one side of the specified shearing surface (keeping one side or cutting one side), it is decided whether to discard the fragment to achieve the cropping effect of the model; after the shearing, the model is no longer closed, and the template cache is required to draw the incision surface. By calculating the number of times the ray passes through the shape (even or odd), it is determined whether it needs to be sealed, and the vertex is projected onto the shearing surface in the vertex shader to draw the incision, and the incision is colored by specifying the incision material through the attribute to achieve the effect of three-dimensional model cropping. The method described in this embodiment is described in combination with specific steps below.

[0068] In one embodiment, the three-dimensional model to be cropped is loaded into a browser environment supporting WebGL so as to perform graphics rendering and splitting of the three-dimensional model to be cropped based on WebGL, including: loading the three-dimensional model to be cropped into a browser environment supporting WebGL so as to perform graphics rendering of the three-dimensional model to be cropped based on WebGL; splitting the three-dimensional model to be cropped according to the layered information so as to crop each layer of the model separately.

[0069] Specifically, Figure 3 As shown, Web geological body model loading: the three-dimensional model to be cut is loaded into a browser environment that supports WebGL, and the model is rendered using the graphics rendering capability of WebGL. Among them, WebGL (Web Graphics Library) is a browser-based 3D graphics API that allows complex 3D graphics rendering and interaction on web pages without installing additional plug-ins. In this embodiment, the efficient rendering and cutting of the geological body three-dimensional model can be achieved by using WebGL technology and efficient computing of GPU.

[0070] In one embodiment, the three-dimensional model to be cropped is loaded into a browser environment that supports WebGL to perform graphics rendering on the three-dimensional model to be cropped based on WebGL, including: initializing the scene; creating a perspective camera; creating a WebGL renderer, setting the renderer size, and adding the DOM element of the renderer to the document; defining an animation loop function to create a smooth animation, and passing the scene and the perspective camera to the renderer for rendering; and starting the animation rendering loop.

[0071] Exemplarily, the code loaded by the Web geological body model includes:

[0072] / / Use the three framework to build a three-dimensional scene

[0073] const scene=new THREE.Scene();

[0074] const camera=new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);

[0075] const renderer=newTHREE.WebGLRenderer();

[0076] renderer.setSize(window.innerWidth,window.innerHeight);

[0077] document.body.appendChild(renderer.domElement);

[0078] / / Rendering loop

[0079] function animate(){

[0080] requestAnimationFrame(animate);

[0081] renderer.render(scene,camera);

[0082] }

[0083] animate();

[0084] It should be noted that the sample code for loading the Web geological model can include the following steps: Initialize the scene: Create a Three.js scene object, which is the basis of all Three.js rendering. The scene object is used to accommodate and track all objects, light sources and cameras to be rendered. Create a perspective camera: Create a perspective camera with the following parameters: Field of View (FOV): 75 degrees, which is the size of the camera's viewing angle, Aspect Ratio: Calculated based on the width and height of the browser window, ensuring the correct image ratio at different resolutions, Near Clipping Plane: 0.1, which is the clipping plane near the camera. Objects within this distance will not be rendered, Far Clipping Plane: 1000, which is the clipping plane far from the camera. Objects outside this distance will not be rendered. Create a WebGL renderer: Create a WebGL renderer to draw the Three.js scene in the browser. Set the renderer size: Set the output size of the renderer, that is, the size of the canvas rendered to the browser window. Add the renderer's DOM element to the document: Add the DOM element (canvas element) created by the renderer to the body of the HTML document to make it visible. Define the animation loop function: This is a recursively called function used to create a continuous animation loop. Inside the function: requestAnimationFrame(animate): Tells the browser to call the animate function before the next redraw, which is usually used to create smooth animations. renderer.render(scene,camera): Performs the actual rendering operation, passing the scene and camera to the renderer for rendering. Start the animation loop: Call the animate function to start an infinite loop of animation rendering process. The above code for loading the Web geological model includes creating a scene, camera, and renderer, setting the renderer size and adding the rendering results to the page, as well as setting a continuous animation loop to render the scene, which means setting up a basic Three.js three-dimensional scene and starting rendering.

[0085] Specifically, Figure 3 As shown in the figure, the model is split into layers: the model is split according to the layer information to facilitate the separate cutting and calculation of each layer of the model.

[0086] Exemplarily, the code for model layer splitting includes:

[0087] / / The 3D model to be cropped is loaded into a browser environment that supports WebGL for rendering

[0088] for(let i=0;i<8;i++)

[0089] {

[0090] loader.load(`examples / data / BIM / ${i}floorglb / floor.glb`,function(gltf){

[0091] scene.add(gltf.scene);

[0092] },undefined,function(error){

[0093] console.error(error);

[0094] });

[0095] }

[0096] It should be noted that the sample code for the above-mentioned model layer splitting can include the following steps: Loop loading: Use a for loop to traverse the indexes from 0 to 7, corresponding to loading 8 model files. Loading model: The loader.load method is called to asynchronously load the GLB file. GLB is the binary version of GLTF (Graphics Library Transmission Format), which is used to describe and transmit 3D scenes and models. The path string uses template string syntax, which inserts the loop variable i into the file path, thereby loading different files according to the loop iteration. Handling successful loading: When the model file is loaded successfully, the provided callback function will be called. The parameter gltf of the callback function contains the loaded model data, including the model's scene (gltf.scene). Scene.add (gltf.scene) adds the loaded model scene to the current Three.js scene. Handling loading errors: If an error occurs during the loading process, the error handling callback function will be called, and the error information will be output to the browser console through console.error (error).

[0097] In one embodiment, a cropping area is defined on the three-dimensional model to be cropped according to a preset rule.

[0098] In one embodiment, the clipping area includes an area based on a geometric shape, a polygonal area, or a free curve area.

[0099] Specifically, Figure 3As shown, define a cropping area: define a cropping area on a 3D model (the 3D model to be cropped) according to user requirements or preset rules, and the cropping area includes but is not limited to geometric shapes (such as rectangles), polygons, or free curves. Defining a cropping area can be achieved by drawing a polygon or uploading coordinates, and this embodiment does not limit this.

[0100] In one embodiment, based on the workflow of a graphics rendering pipeline, the clipping region and the to-be-clipped 3D model are converted into a fragment shader.

[0101] Specifically, if Figure 3 As shown, fragment shader processing: Combined with the workflow of the graphics rendering pipeline, the clipping area and the 3D model are converted into the fragment shader.

[0102] It should be noted that in the workflow of the graphics rendering pipeline, the rasterization stage: converts the clipped geometry into fragments (pixels). Performs clipping tests on the fragments to determine which fragments are visible. Outputs visible fragment metadata.

[0103] In one embodiment, it is determined whether a fragment is located on one side of a preset shearing plane, and it is determined whether to remove the fragment based on the determination result to obtain a model after shearing, including: determining whether a fragment is located on one side of a preset shearing plane to retain one side or shear one side to obtain a determination result; determining whether to remove the fragment based on the determination result, removing the sheared pixels, and obtaining a model after shearing.

[0104] Specifically, if Figure 3 In the fragment shader processing, the specified clipping surface can refer to a polygon composed of custom coordinates. The custom coordinates are only drawn on the first layer, but in the calculation, they will be extended and mapped to each layer as the clipping coordinate string of each layer.

[0105] In this embodiment, the operation of determining whether to discard a fragment during the fragment shader processing will select which part of the data to discard based on whether to retain the clipping plane or retain the outer clipping plane. For example, by determining whether the fragment is located on one side of the specified clipping plane (retain one side or clip one side), it is determined whether to discard the fragment, and the clipped pixels are removed to achieve the clipping effect of the model.

[0106] In one example, in a fragment shader, a clipping test is performed using the fragment's clip space coordinates. If the fragment is in front of the clipping plane, the shading operation continues. If the fragment is in the back of the clipping plane, it may be necessary to discard the fragment or perform special clipping plane drawing logic.

[0107] In one embodiment, an incision is drawn and colored on the cut surface of the cropped model based on a cache template to obtain a cropped three-dimensional model, including: opening a template cache, and automatically calculating the number of penetrations based on a graphics rendering pipeline; judging whether the cropped model needs to be sealed according to the number of penetrations; when sealing is required, projecting vertices onto the cropping surface through a vertex shader to draw an incision; and coloring the incision to obtain a cropped three-dimensional model.

[0108] Specifically, Figure 3 As shown, an unsealed clipping surface is obtained, and the incision is drawn using the cache template. After clipping, the model is not closed. By opening the template cache, the graphics rendering pipeline automatically calculates the number of penetrations (even or odd) to determine whether it needs to be sealed, and projects the vertices onto the clipping surface to draw the cut surface: before drawing, set the template function to GL_ALWAYS. Whenever the fragment of the object is rendered, update the template buffer to 1, render the object, then disable template writing and depth testing, use a different fragment shader, output a separate boundary, draw the object again, but only when the template value of their fragment is not equal to 1, and enable template writing and depth testing again. This process sets the template buffer of each object's fragment to 1. When you want to draw a boundary, you mainly draw the part of the object that passes the template test.

[0109] Exemplarily, the code for drawing the cutout using the cache template includes:

[0110] / / Enable template testing

[0111] gl.enable(gl.STENCIL_TEST);

[0112] / / Clear the stencil buffer

[0113] gl.clear(gl.BUFFER_BIT);

[0114] / / Set up template test function

[0115] gl.stencilFunc(gl.EQUAL,1,0xFF);

[0116] / / Set the template buffer write mask to 0xFF

[0117] gl.stencilMask(0xFF);

[0118] / / Set the template buffer operation

[0119] gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCREMENT);

[0120] / / Draw a triangle

[0121] gl.drawArrays(gl.TRIANGLES,0,3);

[0122] / / Coordinate extraction

[0123] gl.readPixels(0,0,canavs.width,canavs.height,gl.RGBA,gl.UNSIGNED_BYTE,pixels)

[0124] pixels.reduce((prev,cur,index)=>{

[0125] if(index%2====0){prev.push([cur])}

[0126] else{prev[prev.length-1].push(cur)}

[0127] returnprev

[0128] },[])

[0129] / / Render the matrix to correctly transform the coordinates of the 3D model

[0130] constpositionLoc=gl.getAttribLocation(program,'a_position');

[0131] It should be noted that the sample code for drawing the cutout of the cached template is an operation performed using the WebGL API, involving template testing, operation of the template buffer, and reading of pixel data. Specifically, the following steps may be included: Enable template testing: Enable the template test function. The template test is a function in WebGL that allows the writing of pixels to be controlled according to the content of the template buffer. Clear the template buffer: Use the gl.clear function to clear the template buffer. gl.BUFFER_BIT is a bit mask, indicating that only the template buffer is cleared. Set the template test function: gl.EQUAL means that the test passes only when the value in the template buffer is equal to the reference value. 1 is the reference value and 0xFF is the mask. Set the write mask of the template buffer: Set the write mask of the template buffer to 0xFF, which means that all bits can be written to the template buffer. Set the operation of the template buffer: gl.KEEP means keeping the existing template value unchanged, and gl.INCREMENT means increasing the template value by 1. Draw a triangle: Use the gl.drawArrays function to draw a triangle. gl.TRIANGLES means that the primitive type to be drawn is a triangle. 0 means starting drawing from the 0th element of the array, and 3 means using 3 vertices. Coordinate extraction: Use the gl.readPixels function to read pixel data from the frame buffer. (0, 0) is the starting coordinate to read. canvas.width and canvas.height are the sizes of the read area. gl.RGBA is the color format to read. gl.UNSIGNED_BYTE is the data type of each color component. pixels is a Uint8Array used to store the read pixel data. Pixel data processing: Use the reduce method to process the pixels array. Since gl.readPixels returns continuous RGBA data, this code reorganizes them into a two-dimensional array, where each sub-array contains the RGBA value of a pixel. Render the matrix to correctly transform the coordinates of the 3D model: Use the gl.getAttribLocation function to get the index of the a_position attribute in the vertex shader. program is the shader program created previously. In the above steps, the template test is enabled and configured, a triangle is drawn, and the pixel data in the frame buffer is read, and then the data is processed. Finally, the index of the position attribute in the vertex shader is obtained, which can be used for subsequent 3D model coordinate transformation.

[0132] In one embodiment, the incision is colored to obtain a cropped three-dimensional model, including: specifying the section material or texture information according to the attributes of the layered information; and realizing the incision mapping of the three-dimensional model by coloring the model based on the section material or texture information to obtain the cropped three-dimensional model.

[0133] Specifically, Figure 3 As shown, material shading is specified through attributes: the surface material or texture information is specified through the attributes of the layered information, and the cutout mapping of the three-dimensional model is achieved through model shading.

[0134] Exemplarily, the code for specifying material shading through attributes includes:

[0135] / / Extract texture

[0136] const texture=gl.createTexture();

[0137] / / Set texture parameters

[0138] gl.bindTexture(gl.TEXTURE_2D,texture);

[0139] gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINE AR);

[0140] gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINE AR);

[0141] It should be noted that the above sample code for specifying material shading through attributes can include the following steps: Create texture: Use gl.createTexture function to create a new texture object, and the texture variable stores the created texture object. Bind texture: Use gl.bindTexture function to bind the created texture object to the 2D texture target, indicating that the following texture operations will act on this bound texture. Set texture filtering parameters: Set the texture's minification filtering parameters. gl.TEXTURE_MIN_FILTER specifies the filtering mode used when the texture needs to be minified (that is, when a part of the texture is mapped to a pixel on the screen). Among them, gl.LINEAR means filtering using linear interpolation, which usually produces a smooth effect on the edges of the texture. Set texture magnification parameters: Set the texture's magnification filtering parameters. gl.TEXTURE_MAG_FILTER specifies the filtering mode used when the texture needs to be magnified (that is, when a pixel of the texture is mapped to multiple pixels on the screen). Similarly, gl.LINEAR means filtering using linear interpolation. In the above steps, by setting the filter parameters of the texture, the display quality of the texture when it is scaled on the screen can be controlled. The gl.LINEAR filter provides a smooth result. Other filter modes, such as gl.NEAREST (nearest neighbor filter, which may produce sharper edges), and more advanced filter modes, including but not limited to gl.NEAREST_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR, gl.LINEAR_MIPMAP_NEAREST and gl.LINEAR_MIPMAP_LINEAR (Mipmap layered filter, used to improve the rendering quality of distant textures), are also available. After the filter parameters of the texture are set, the texture image data will be uploaded to the texture object for use in rendering, which can be done through the gl.texImage2D or gl.texSubImage2D function.

[0142] In one embodiment, if Figure 4 As shown, the cropped three-dimensional model is re-rendered onto the screen, and the rendering result is updated to reflect the cropping effect.

[0143] This embodiment mainly adopts WebGL technology to realize the clipping of any 3D model based on WebGL. It utilizes the graphics processing capability of WebGL, does not require additional plug-ins, does not rely on the complex computing power of the desktop, does not require original modeling data, can implement clipping operations for any model, and realizes fast clipping of 3D models. Compared with the traditional complex clipping algorithm, this embodiment improves the performance of clipping operations by optimizing the rendering process, which is particularly obvious for processing large-scale and complex 3D geological models, making clipping operations more intuitive and efficient. Through WebGL rendering, shader processing and GPU computing, the clipping efficiency is improved, and the precise clipping of geological body 3D models in the fields of geological exploration, mineral resource assessment, underground space planning, etc. is effective.

[0144] The present embodiment provides a three-dimensional clipping method based on WebGL, including: loading a three-dimensional model to be clipped into a browser environment supporting WebGL, so as to perform graphic rendering and splitting of the three-dimensional model to be clipped based on WebGL; defining a clipping area on the three-dimensional model to be clipped according to a preset rule; converting the clipping area and the three-dimensional model to be clipped into a fragment shader based on the workflow of the graphics rendering pipeline; judging whether the fragment is located on one side of a preset clipping surface, and determining whether to remove the fragment according to the judgment result, so as to obtain a clipped model; drawing an incision and coloring on the cut surface of the clipped model based on a cache template, so as to obtain a clipped three-dimensional model; re-rendering the clipped three-dimensional model to the screen, and updating the rendering result to reflect the clipping effect. In the present embodiment, based on WebGL combined with the efficient computing power of GPU, efficient clipping of any model is realized, which helps to obtain structural information in a specific area or under specific conditions. By utilizing the graphics rendering capability of WebGL and the hardware acceleration characteristics of GPU, efficient, accurate and compatible three-dimensional clipping is realized to meet the needs of accurate clipping of geological body three-dimensional models in the fields of geological exploration, mineral resource assessment, underground space planning, etc.

[0145] In addition, an embodiment of the present invention further provides a storage medium, on which a WebGL-based 3D clipping program is stored. When the WebGL-based 3D clipping program is executed by a processor, the steps of the WebGL-based 3D clipping method described above are implemented.

[0146] Reference Figure 5 , Figure 5 This is a structural block diagram of an embodiment of a WebGL-based three-dimensional clipping system of the present invention.

[0147] like Figure 5 As shown, the WebGL-based three-dimensional clipping system includes:

[0148] The model loading module 10 is used to load the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphic rendering and splitting of the three-dimensional model to be cut based on WebGL;

[0149] A clipping region definition module 20, used to define a clipping region on the to-be-clipped three-dimensional model according to a preset rule;

[0150] A fragment processing module 30, configured to convert the clipping area and the to-be-clipped three-dimensional model into a fragment shader based on a workflow of a graphics rendering pipeline;

[0151] A fragment judgment module 40 is used to judge whether a fragment is located on one side of a preset shearing plane, and determine whether to remove the fragment according to the judgment result to obtain a sheared model;

[0152] A cutout drawing and coloring module 50, used for drawing and coloring a cutout on a cut surface of the cutout model based on a cache template to obtain a cutout three-dimensional model;

[0153] The updating rendering module 60 is used to re-render the cropped 3D model onto the screen and update the rendering result to reflect the cropping effect.

[0154] In one embodiment, the calculation based on the WebGL three-dimensional clipping system adopts a WebGL framework, and the bottom layer of the WebGL framework adopts GPU computing.

[0155] It is understandable that a large amount of calculations involved in traditional cropping are processed by backend services. In this embodiment, the underlying WebGL framework uses GPU computing. WebGL and hardware development GPU computing improve the efficiency of cropping on the web.

[0156] This embodiment provides a three-dimensional clipping system based on WebGL, which mainly adopts WebGL technology to realize the clipping of any three-dimensional model based on WebGL. It uses the graphics processing capabilities of WebGL, does not require additional plug-ins, does not rely on the complex computing capabilities of the desktop, does not require original modeling data, and can implement clipping operations for any model, thereby realizing rapid clipping of three-dimensional models. Compared with traditional complex clipping algorithms, this embodiment improves the performance of clipping operations by optimizing the rendering process, which is particularly obvious for processing large-scale and complex three-dimensional geological models, making clipping operations more intuitive and efficient. Through WebGL rendering, shader processing and GPU computing, the clipping efficiency is improved, and the precise clipping of geological three-dimensional models in the fields of geological exploration, mineral resource assessment, underground space planning, etc. is effective.

[0157] It should be noted that the technical details that are not described in detail in the embodiment of the WebGL-based 3D clipping system can be found in the WebGL-based 3D clipping method described above provided in any embodiment of the present invention, and will not be repeated here.

[0158] It should be understood that the above is only an example and does not constitute any limitation on the technical solution of the present invention. In specific applications, technicians in this field can make settings as needed, and the present invention does not limit this.

[0159] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of the present invention. In practical applications, technicians in this field can select part or all of them according to actual needs to achieve the purpose of the present embodiment, and no limitation is made here.

[0160] In addition, it should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.

[0161] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0162] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as a read-only memory (ROM) / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0163] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A three-dimensional clipping method based on WebGL, characterized in that: include: Loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering and splitting of the three-dimensional model to be cut based on WebGL; Defining a cutting area on the three-dimensional model to be cut according to a preset rule; Based on the workflow of the graphics rendering pipeline, converting the clipping area and the three-dimensional model to be clipped into a fragment shader; Determine whether the fragment is located on one side of a preset shearing plane, and determine whether to remove the fragment according to the determination result to obtain a sheared model; Drawing cutouts and coloring them on the cut surface of the cut model based on the cache template to obtain a cut three-dimensional model; The cropped three-dimensional model is re-rendered onto the screen, and the rendering result is updated to reflect the cropping effect.

2. The method according to claim 1, characterized in that The step of loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering and splitting of the three-dimensional model to be cut based on WebGL, comprises: Loading the three-dimensional model to be cut into a browser environment supporting WebGL, so as to perform graphics rendering on the three-dimensional model to be cut based on WebGL; The three-dimensional model to be cut is split according to the layer information so as to cut each layer of the model separately.

3. The method according to claim 2, characterized in that The step of loading the three-dimensional model to be cut into a browser environment supporting WebGL to perform graphic rendering on the three-dimensional model to be cut based on WebGL includes: Initialize the scene; Create a perspective camera; Create a WebGL renderer, set the renderer size, and add the renderer's DOM element to the document; Define the animation loop function to create a smooth animation and pass the scene and perspective camera to the renderer for rendering; Starts the animation rendering loop.

4. The method according to claim 1, characterized in that The clipping area includes an area based on a geometric shape, a polygonal area or a free curve area.

5. The method according to claim 1, characterized in that The determining whether the fragment is located on one side of a preset shearing plane and determining whether to remove the fragment according to the determination result to obtain a sheared model includes: Determine whether the fragment is located on one side of the preset cutting surface, so as to retain one side or cut one side, and obtain a determination result; Determine whether to remove the fragment according to the judgment result, remove the cut pixels, and obtain the cut model.

6. The method according to claim 1, characterized in that Drawing an incision and coloring the cut surface of the clipped model based on the cache template to obtain the clipped three-dimensional model includes: Turn on the template cache to automatically calculate the number of penetrations based on the graphics rendering pipeline; Determining whether the sheared model needs to be sealed according to the number of penetrations; When sealing is required, the vertex is projected onto the clipping surface through the vertex shader to draw the cut; The cutout is colored to obtain a cropped three-dimensional model.

7. The method according to claim 6, characterized in that The step of coloring the cutout to obtain a cropped three-dimensional model includes: Specifying the cut surface material or texture information according to the attributes of the layered information; Based on the section material or texture information, the cutout mapping of the three-dimensional model is realized by model coloring to obtain a cropped three-dimensional model.

8. A 3D clipping system based on WebGL, characterized in that: include: A model loading module, used for loading the to-be-cut 3D model into a browser environment supporting WebGL, so as to perform graphic rendering and splitting of the to-be-cut 3D model based on WebGL; A clipping region definition module is used to define a clipping region on the to-be-cut three-dimensional model according to a preset rule; A fragment processing module, used for converting the clipping area and the to-be-cut three-dimensional model into a fragment shader based on the workflow of a graphics rendering pipeline; A fragment judgment module is used to judge whether the fragment is located on one side of the preset shearing surface, and determine whether to remove the fragment according to the judgment result to obtain a sheared model; A cutout drawing and coloring module, used for drawing and coloring a cutout on a cut surface of the cutout model based on a cache template to obtain a cutout three-dimensional model; The rendering module is updated to render the cropped three-dimensional model again on the screen and update the rendering result to reflect the cropping effect.

9. The system according to claim 8, characterized in that The calculation based on the WebGL three-dimensional clipping system adopts the WebGL framework, and the bottom layer of the WebGL framework adopts GPU calculation.

10. An electronic device, characterized in that: The electronic device comprises: a memory, a processor, and a WebGL-based three-dimensional clipping program stored in the memory and executable on the processor, wherein the WebGL-based three-dimensional clipping program is configured to implement the WebGL-based three-dimensional clipping method according to any one of claims 1 to 7.

Images