WebGL-based 3D model rendering method, medium and device

Abstract

The invention belongs to the technical field of webpage three-dimensional model rendering, and provides a WebGL-based 3D model rendering method, medium and device. According to the webpage 3D model interaction method constructed by adopting the HTML, the CSS and the JS, webpage 3D model rendering without plug-ins and depending on specific graphic processing equipment can be realized. Meanwhile, the whole process can be operated on any modern browser supporting WebGL, so that any additional software or application does not need to be downloaded; in addition, 3D model interaction using the method is more visual and convenient.

Description

Technical Field

[0001] The present invention belongs to the technical field of web page three-dimensional model rendering, and specifically, relates to a 3D model rendering method, medium and device based on WebGL. Background Art

[0002] With the rapid development of Internet technology, web 3D model rendering has become an important application demand. However, the current 3D model rendering technology mainly faces the following problems: first, the existing rendering technology mostly relies on professional graphics processing equipment and powerful computing power; second, users cannot intuitively perform interactive operations in web pages, such as rotation, scaling, shifting, etc. Therefore, it is necessary to provide a new 3D model interaction method and system to improve the user's interactive experience and improve the rendering efficiency of 3D models. Summary of the invention

[0003] The purpose of the present invention is to provide a 3D model rendering method based on WebGL to solve the technical problems existing in the prior art.

[0004] In order to achieve the above object, the technical solution adopted by the present invention is as follows: A 3D model rendering method based on WebGL, comprising the following steps: Step S1: Use HTML to create a web page container for placing the three-dimensional model; Step S2: Use CSS to set the basic style of the web page container, including color, size and position; Step S3: according to the web page container processed by step S2, use JavaScript to load the three-dimensional model, draw and render the 3D model: step S3 specifically includes: step S3.1: create a WebGL context: create a canvas element in the HTML file, use JavaScript to access the canvas element, and create a WebGL context; step S3.2: create a set of arrays representing the vertices and faces of the 3D model, the array is used to store the geometric information of the 3D model; step S3.3: create a WebGL buffer and bind the array in step S3.2; step S3.4: configure the rendering pipeline; step S3.5: write and use shaders, the shaders include vertex shaders and fragment shaders; step S3.6: start the rendering loop, draw and render the 3D model; Step S4: Create an event listener for the interactive operation, and update the three-dimensional model matrix when the user interacts with the operation; the specific method of step S4 is as follows: Step S4.1: Establish appropriate update methods and parameters for the rotation, scaling and translation of the model; Step S4.2: Create and bind an event listener to capture the user's keyboard or mouse operation, respectively listen to and process mouse events and touch events, and update the model matrix accordingly whenever a user operation is received; Step S5: When the model matrix is ​​updated, it is passed to the shader and the 3D model is redrawn.

[0005] Preferably, the specific method of step S3.3 is as follows: Step S3.3.1. Create a Buffer object; Step S3.3.2. Bind Buffer object: bind the created Buffer object to a buffer type through the bindBuffer() function; Step S3.3.3. Upload data to Buffer: Use the bufferData() function to upload data from the JavaScript array to the bound Buffer object; Step S3.3.4. Specify a buffer for vertex data; Step S3.3.5. Enable each vertex attribute.

[0006] Preferably, the specific implementation method of step S4.1 is as follows: (1) Rotation: Update method: by calculating the position difference between the mouse or touch start and end, use the transformation matrix to rotate the model; parameters: rotation angle, rotation axis, and rotation center point.

[0007] (2) Scaling: Update method: adjust the model size or the distance between the camera and the model by detecting the scrolling distance of the scroll wheel or the change of the touch gesture; parameters: scaling factor or multiple, and scaling limit.

[0008] (3) Translation: Update method: calculate the displacement of the mouse or touch action and update the model position accordingly; parameters: translation distance, translation direction.

[0009] Preferably, the step S4.1 also includes interaction detail processing: anti-shake and easing: during the interaction process, 3D model anti-shake and easing are implemented; edge detection: edge detection is implemented during translation and scaling.

[0010] Preferably, the specific method for updating the model matrix in step S4.2 is as follows: Step S4.2.1: Initialize the model matrix: use the 4x4 identity matrix as the basic matrix of the model; Step S4.2.2: Create basic matrix operation functions; create a translation matrix: create a translation matrix generated according to a given translation vector; create a rotation matrix: rotate around the Y axis; create a scaling matrix; Step S4.2.3: Apply transformation: Based on the user input, create the corresponding transformation matrix using basic matrix operation functions, and then update the model matrix through matrix multiplication.

[0011] Preferably, the expression of the initialization model matrix is ​​as follows:

[0012] Preferably, the expression of the translation matrix is ​​as follows:

[0013]

[0014] The expression of the rotation matrix is ​​as follows:

[0015]

[0016] The expression of the scaling matrix is ​​as follows:

[0017] .

[0018] Preferably, the calculation method of the matrix multiplication is as follows:

[0019] Among them, A ik and B kj are two 4x4 matrices, C ij is the product of the two; each element C ij It is obtained by traversing the accumulation of all k.

[0020] In order to achieve the above-mentioned object, the present invention further provides a computer-readable storage medium having a computer program stored thereon, characterized in that the computer program is executed by a processor to implement the WebGL-based 3D model rendering method.

[0021] In order to achieve the above-mentioned purpose, the present invention also provides a device for 3D model rendering based on WebGL, comprising: a processor and a memory; the memory is used to store a computer program; the processor is connected to the memory, and is used to execute the computer program stored in the memory, so that the device for 3D model rendering based on WebGL executes the 3D model rendering method based on WebGL.

[0022] Compared with the prior art, the present invention has the following beneficial effects: The present invention uses a web page 3D model interaction method constructed by HTML, CSS and JS to achieve plug-in-free, web page 3D model rendering without relying on a specific graphics processing device. At the same time, since the entire process can be run on any modern browser that supports WebGL, there is no need to download any additional software or application; in addition, the 3D model interaction using this method will be more intuitive and convenient. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 This is a schematic diagram of the principle of Example 1 of the present invention.

[0024] Figure 2 This is a principle block diagram of Example 3 of the present invention. DETAILED DESCRIPTION

[0025] In order to make those skilled in the art have a clearer understanding and knowledge of the present invention, the present invention is further described in detail below in conjunction with the embodiments. It should be known that the specific embodiments described below are only used to explain the present invention, and are convenient for understanding. The technical solutions provided by the present invention are not limited to the technical solutions provided by the following embodiments, and the technical solutions provided by the embodiments should not limit the protection scope of the present invention.

[0026] It should be noted that the illustrations provided in the following embodiments are only used to illustrate the basic concept of the present invention in a schematic manner. Therefore, the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the form, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0027] Example 1 like Figure 1 As shown, this embodiment provides a 3D model rendering method based on WebGL. The method is based on 3D model interaction of HTML, CSS and JS, adopts open Web standard language, does not rely on dedicated hardware or powerful computing power, and can run on any modern browser that supports WebGL.

[0028] In this embodiment, the 3D model rendering method based on WebGL specifically includes the following steps: 1. Step S1: Use HTML to create a web page container to place the 3D model First, create an HTML file and determine its standard tags and elements; create a specific Elements act as containers for 3D models.

[0029] Step S2: Use CSS to set the basic style of the web page container, including color, size and position The created HTML container will be styled appropriately to match the overall web design style. CSS can be used to define the model container's width, height, color, margins and other properties.

[0030] Step S3: Use JavaScript to load the 3D model and generate 3D scene rendering This step involves using JavaScript to create and control 3D models. In this embodiment, WebGL (a component of modern browsers) is used to implement 3D rendering. The specific steps are as follows: Step S3.1: Create a WebGL context: Create a canvas element in the HTML file, use JavaScript to access the canvas element, and create a WebGL context; Step S3.2: Create a set of arrays representing the vertices and faces of the 3D model, the arrays are used to store the geometric information of the 3D model; Step S3.3: Create a WebGL buffer and bind the array in step S3.2, the buffer can be used to efficiently transfer data between the GPU and the WebGL program; Step S3.4: Configure the rendering pipeline, set the WebGL viewport size, clear the color, and depth test parameters; Step S3.5: Write and use shaders, write vertex shaders and fragment shaders respectively, these two shaders will provide control over specific rendering effects, including vertex positions, colors, materials, etc.; Step S3.6: Start the rendering loop, draw and render the 3D model.

[0031] Among them, the specific method of step S3.3 is as follows: step S3.3.1. Create a Buffer object; step S3.3.2. Bind the Buffer object: bind the created Buffer object to a buffer type through the bindBuffer() function; step S3.3.3. Upload data to Buffer: use the bufferData() function to upload the array from the JavaScript array to the bound Buffer object; step S3.3.4. Specify a Buffer for vertex data; step S3.3.5. Enable each vertex attribute.

[0032] Step S4: Create an event listener for the interactive operation and update the 3D model matrix when the user interacts This step is used to respond to user interaction operations and implement model updates, which specifically includes the following steps: Step S4.1: Establish appropriate update methods and parameters for rotation, scaling and translation of the model, as follows: (1) Rotation: Update method: By calculating the position difference between the start and end of the mouse or touch, the model is rotated using a transformation matrix; parameters: rotation angle, rotation axis, and center point of rotation; (2) Scaling: Update method: By detecting the scrolling distance of the scroll wheel or the change of the touch gesture, the model size or the distance between the camera and the model is adjusted; parameters: scaling factor or multiple, and scaling limit; (3) Translation: Update method: Calculate the displacement of the mouse or touch action and update the model position accordingly; parameters: translation distance, translation direction.

[0033] In a further preferred scheme, it also includes interaction detail processing: anti-shake and easing: adding anti-shake and easing technology. Easing technology is a technology commonly used in animation and interaction design, which is used to smoothly adjust the change speed of animation or interactive elements. Usually, it changes the movement speed of elements to make the change process more natural and avoid abrupt effects; easing technology allows elements to smoothly transition from one state to another, making the user experience smoother, and can enhance the interaction effect and visual appeal; it also includes edge detection: when panning and zooming, there is edge detection. Edge detection is a computer vision and image processing technology used to identify the boundaries or edges between different areas in an image. In 3D model rendering, edge detection is usually used to determine whether the object exceeds the field of view of the screen during translation or zooming, or to determine whether the size of the object is scaled to an unreasonable proportion; through edge detection, unreasonable or unexpected situations can be avoided during model movement, ensuring the quality of user experience and visualization effects; Step S4.2: Create and bind an event listener to capture the user's keyboard or mouse operations, monitor and process mouse events and touch events respectively, and update the model matrix accordingly whenever a user operation is received. The specific method of updating the model matrix is ​​as follows: Step S4.2.1: Initialize the model matrix: Use the 4x4 identity matrix as the basic matrix of the model, which is expressed as follows:

[0034] Step S4.2.2: Create basic matrix operation functions; create a translation matrix: create a translation matrix generated according to a given translation vector; create a rotation matrix: rotate around the Y axis; create a scaling matrix; the expressions corresponding to each matrix are as follows: The expression of the translation matrix is ​​as follows:

[0035]

[0036] The expression of the rotation matrix is ​​as follows:

[0037]

[0038] The expression of the scaling matrix is ​​as follows:

[0039]

[0040] Step S4.2.3: Apply transformation: Based on the user input, create the corresponding transformation matrix using the previously defined function, and then update the model matrix through matrix multiplication; the standard expression of matrix multiplication is as follows:

[0041] Matrix multiplication is calculated as follows:

[0042] Among them, A ik and B kj are two 4x4 matrices, C ij is the product of the two; each element C ij It is obtained by traversing the accumulation of all k.

[0043] 5. Step S5: When the model matrix is ​​updated, it is passed to the shader and the 3D model is redrawn.

[0044] Through the above settings, a 3D model interaction method based on HTML, CSS and JS is implemented to improve the user's interactive experience and improve the rendering efficiency of the 3D model.

[0045] Example 2 This embodiment provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to implement the WebGL-based 3D model rendering method provided in Embodiment 1. A person of ordinary skill in the art can understand that all or part of the steps of implementing the method provided in Embodiment 1 can be completed by hardware related to the computer program, and the above-mentioned computer program can be stored in a computer-readable storage medium, and when the program is executed, the steps of the method provided in Embodiment 1 are executed; and the above-mentioned storage medium includes: ROM, RAM, magnetic disk or optical disk, etc., various media that can store program codes.

[0046] Example 3 like Figure 2 As shown, this embodiment provides a 3D model rendering device based on WebGL, including: a processor and a memory; the memory is used to store a computer program; the processor is connected to the memory, and is used to execute the computer program stored in the memory, so that the 3D model rendering device based on WebGL executes the 3D model rendering method based on WebGL provided in Example 1.

[0047] Specifically, the memory includes: ROM, RAM, disk, USB flash drive, memory card or CD and other media that can store program codes.

[0048] Preferably, the processor can be a general-purpose processor, including a central processing unit, a network processor, etc.; it can also be a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component.

[0049] The above embodiments are merely illustrative of the principles and effects of the present invention, and are not intended to limit the present invention. Anyone familiar with the art may modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by a person of ordinary skill in the art without departing from the spirit and technical concept disclosed by the present invention shall still be covered by the claims of the present invention.

Claims

1. A 3D model rendering method based on WebGL, characterized in that: The following steps are involved: Step S1: Use HTML to create a web page container for placing the three-dimensional model; Step S2: Use CSS to set the basic style of the web page container, including color, size and position; Step S3: according to the web page container processed by step S2, use JavaScript to load the three-dimensional model, draw and render the 3D model: step S3 specifically includes: step S3.1: create a WebGL context: create a canvas element in the HTML file, use JavaScript to access the canvas element, and create a WebGL context; step S3.2: create a set of arrays representing the vertices and faces of the 3D model, the array is used to store the geometric information of the 3D model; step S3.3: create a WebGL buffer and bind the array in step S3.2; step S3.4: configure the rendering pipeline; step S3.5: write and use shaders, the shaders include vertex shaders and fragment shaders; step S3.6: start the rendering loop, draw and render the 3D model; Step S4: Create an event listener for the interactive operation, and update the three-dimensional model matrix when the user interacts with the operation; the specific method of step S4 is as follows: Step S4.1: Establish appropriate update methods and parameters for the rotation, scaling and translation of the model; Step S4.2: Create and bind an event listener to capture the user's keyboard or mouse operations, respectively listen to and process mouse events and touch events, and update the model matrix accordingly whenever a user operation is received; Step S5: When the model matrix is ​​updated, it is passed to the shader and the 3D model is redrawn.

2. The WebGL-based 3D model rendering method according to claim 1, characterized in that: The specific method of step S3.3 is as follows: Step S3.3.

1. Create a Buffer object; Step S3.3.

2. Bind Buffer object: bind the created Buffer object to a buffer type through the bindBuffer() function; Step S3.3.

3. Upload data to Buffer: Use the bufferData() function to upload the array from the JavaScript array to the bound Buffer object; Step S3.3.

4. Specify a buffer for vertex data; Step S3.3.

5. Enable each vertex attribute.

3. The WebGL-based 3D model rendering method according to claim 2, characterized in that: The specific implementation method of step S4.1 is as follows: (1) Rotation: Update method: by calculating the position difference between the mouse or touch start and end, use the transformation matrix to rotate the model; parameters: rotation angle, rotation axis, and rotation center point; (2) Scaling: Update method: adjust the model size or the distance between the camera and the model by detecting the scrolling distance of the scroll wheel or the change of the touch gesture; Parameters: scaling factor or multiple, and scaling limit; (3) Translation: Update method: calculate the displacement of the mouse or touch action and update the model position accordingly; parameters: translation distance, translation direction.

4. The WebGL-based 3D model rendering method according to claim 3, characterized in that: The step S4.1 also includes interaction details processing: Anti-shake and easing: During the interaction process, 3D models can be anti-shake and easing. Edge detection: Edge detection can be implemented during translation and scaling.

5. The WebGL-based 3D model rendering method according to claim 4, characterized in that: The specific method for updating the model matrix in step S4.2 is as follows: Step S4.2.1: Initialize the model matrix: use the 4x4 identity matrix as the basic matrix of the model; Step S4.2.2: Create basic matrix operation functions: Create translation matrix: Create a translation matrix generated according to a given translation vector; Create a rotation matrix: rotate around the Y axis; Create a scaling matrix; Step S4.2.3: Apply transformation: Based on the user input, create the corresponding transformation matrix using basic matrix operation functions, and then update the model matrix through matrix multiplication.

6. The WebGL-based 3D model rendering method according to claim 5, characterized in that: The expression of the initialization model matrix is ​​as follows:

7. The WebGL-based 3D model rendering method according to claim 6, characterized in that: The expression of the translation matrix is ​​as follows: in: tx is the translation along the x-axis ty is the translation along the y axis tz is the translation along the z-axis The expression of the rotation matrix is ​​as follows: in: ·θ is the rotation angle in radians cos(θ) represents the projection factor along the x-axis and z-axis sin(θ) represents the sine component when rotating around the y-axis The expression of the scaling matrix is ​​as follows: in: sx is the scaling factor along the x-axis sy is the scaling factor along the y-axis sz is the scaling factor along the z-axis.

8. The WebGL-based 3D model rendering method according to claim 7, characterized in that: The matrix multiplication is calculated as follows: Among them, A ik and B kj are two 4x4 matrices, C ij is the product of the two; each element C ij It is obtained by traversing the accumulation of all k.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: The computer program is executed by a processor to implement the WebGL-based 3D model rendering method according to any one of claims 1 to 8.

10. A device for rendering a 3D model based on WebGL, characterized in that: include: Processor and memory; The memory is used to store computer programs; The processor is connected to the memory, and is used to execute the computer program stored in the memory, so that the WebGL-based 3D model rendering device performs the WebGL-based 3D model rendering method according to any one of claims 1 to 8.

Images