CN118096969A - A 3D design system based on Realibox engine - Google Patents

Abstract

The invention discloses a 3D design system based on Realibox engine, comprising the following steps: step 1: 3D real-time rendering; step 2: performance optimization; step 3: data storage and backup. The invention has the following beneficial effects: in the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step, and the mixing step can be ended only after the translucent mixing depth test is passed, so that the translucent object can achieve the effect of deep mixing, and through the set performance optimization steps, the WebAssembly module and script are cached locally to speed up the loading speed after the first access, the ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instantiation renders the same mesh at each drawing call, and each instance has different parameters to increase the variation and reduce the repetition in appearance.

Description

A 3D design system based on Realibox engine

Technical Field

The present invention relates to a 3D design system, in particular to a 3D design system based on a Realibox engine, belonging to the technical field of 3D design systems.

Background technique

In the process of computers rendering 3D scenes with rich content, complex structure and wide spatial range into screen images, the central processing unit and graphics processing unit need to interactively process huge amounts of 3D data.

The existing 3D design system is based on the Three.js rendering library, which allows online editing of industrial product assembly relationships and imported models, and can quickly and easily complete 3D modeling of industrial products.

The defect is that in the process of 3D real-time rendering, it is necessary to carry out varnish, light transmission and volume processing steps in sequence, which requires a lot of translucent entities to be mixed. In the process of mixing, there is incomplete mixing. At the same time, the performance of the 3D design system is difficult to optimize. Therefore, we proposed a 3D design system based on the Realibox engine.

Summary of the invention

The purpose of the present invention is to provide a 3D design system based on the Realibox engine in order to solve the above problems. In the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step. The mixing step can only be ended after passing the semi-transparent mixing depth test, thereby enabling the translucent object to achieve a depth mixing effect.

The present invention achieves the above-mentioned purpose through the following technical solutions, a 3D design system based on Realibox engine, comprising the following steps:

Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments;

Step 2: Performance optimization, optimize rendering performance;

Step 3: Data storage and backup, store and back up the rendering data.

Preferably, the 3D real-time rendering includes:

Step 1: Varnish;

Step 2: Light transmission;

Step 3: Volume;

Step 4: Order-independent translucent blending.

Preferably, the varnishing step is specifically as follows:

Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one is the ClearCoatLayer and the other is the BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as the ClearCoat highlight, and the other part enters the BaseLayer and is divided into diffuse reflection and GGX highlight reflection.

Preferably, the light transmission step is specifically:

Add specular_btdf to the core BRDF using transmission.

Preferably, the volume step is specifically:

Rendering of various objects and the corresponding top-down slice through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction.

Preferably, the order-independent semi-transparent mixing step is specifically:

Over is stacked from back to front, while under is stacked from front to back.

There are three layers from near to far: c-b-a

Over operation: first superimpose ab, then superimpose with c;

Under operation: first superimpose bc, then superimpose with a;

The under operation is performed on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally the over operation is performed with the opaque objects at the bottom layer.

Preferably, the semi-transparent mixed depth test steps are as follows:

Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer.

Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, write directly into the color-buffer, write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer;

Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met;

1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered;

2. Since the transparency in a-buffer increases and approaches 1 after each under, the detection in a-buffer is greater than the threshold;

3. Repeat a fixed number of times;

Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer.

Preferably, the performance optimization comprises the following steps:

Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit;

Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance;

Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance.

Preferably, the model instantiation comprises the following steps:

Step 1: Create the model object and instance quantity to be instantiated;

Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object;

Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance;

Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.

The beneficial effects of the present invention are as follows: in the process of 3D real-time rendering, varnish, light transmission, volume and order-independent translucent mixing steps are successively passed, and a translucent mixing depth test is performed in the order-independent translucent mixing step. The mixing step can be ended only after the translucent mixing depth test is passed, thereby enabling the translucent object to achieve a depth mixing effect, and through the set performance optimization steps, the WebAssembly modules and scripts are cached locally to speed up the loading speed after the first access, the ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instantiation renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system.

BRIEF DESCRIPTION OF THE DRAWINGS

Fig. 1 is a schematic diagram of the process of the present invention;

FIG2 is a schematic diagram of a 3D real-time rendering process of the present invention;

FIG3 is a schematic diagram of the varnishing step of the present invention;

FIG4 is a calculation formula for the varnish step of the present invention;

FIG5 is a schematic diagram of the light transmission process of the present invention;

FIG6 is a schematic diagram of the volume steps of the present invention;

FIG. 7 is a schematic diagram of the sequence-independent semi-transparent mixing steps of the present invention;

FIG8 is a schematic diagram of a semi-transparent mixed depth test according to the present invention;

FIG9 is a schematic diagram of data processing according to the present invention;

FIG. 10 is a schematic diagram of data storage backup according to the present invention.

Detailed ways

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.

The embodiment of the present invention discloses a 3D design system based on the Realibox engine.

As shown in Figures 1-10, the method comprises the following steps:

Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments;

Step 2: Performance optimization, optimize rendering performance;

Step 3: Data storage and backup, store and back up the rendering data.

In the process of 3D real-time rendering, it goes through varnish, light transmission, volume and order-independent translucent mixing steps successively, and performs translucent mixing depth test in the order-independent translucent mixing step. The mixing step can be ended only after passing the translucent mixing depth test, so that the translucent objects can achieve the effect of depth mixing. In addition, through the set performance optimization steps, WebAssembly modules and scripts are cached locally to speed up loading after the first access. The ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instancing renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system.

Furthermore, the 3D real-time rendering includes:

Step 1: Varnish;

Step 2: Light transmission;

Step 3: Volume;

Step 4: Order-independent translucent blending.

Furthermore, the varnishing step is specifically as follows:

Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one part is ClearCoatLayer and the other part is BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as ClearCoat highlight, and the diffuse reflection of this part of the light is ignored. The other part enters BaseLayer and is divided into diffuse reflection and GGX highlight reflection.

Furthermore, the light transmission step is specifically as follows:

Add specular_btdf to the core BRDF using transmission.

Preferably, the volume step is specifically:

Rendering of various objects and the corresponding top-down slice through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction.

Specifically disclosed, the order-independent semi-transparent mixing steps are:

Over is stacked from back to front, while under is stacked from front to back.

There are three layers from near to far: c-b-a

Over operation: first superimpose ab, then superimpose with c;

Under operation: first superimpose bc, then superimpose with a;

The under operation is performed on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally the over operation is performed with the opaque objects at the bottom layer.

Specifically disclosed, the semi-transparent mixed depth test steps are as follows:

Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer.

Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, just write it directly into the color-buffer. At the same time, write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer;

Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off;

Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met;

1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered;

2. Since the transparency in a-buffer increases and approaches 1 after each under, the detection in a-buffer is greater than the threshold;

3. Repeat a fixed number of times;

Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer.

Particularly disclosed, the performance optimization comprises the following steps:

Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit;

Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance;

Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance.

Preferably, the model instantiation comprises the following steps:

Step 1: Create the model object and instance quantity to be instantiated;

Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object;

Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance;

Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.

In the process of 3D real-time rendering, it goes through varnish, light transmission, volume and order-independent translucent mixing steps successively, and performs translucent mixing depth test in the order-independent translucent mixing step. The mixing step can be ended only after passing the translucent mixing depth test, so that the translucent objects can achieve the effect of depth mixing. In addition, through the set performance optimization steps, WebAssembly modules and scripts are cached locally to speed up loading after the first access. The ktx texture compression workflow and map conversion to ktx improve the scene performance; GPU instancing renders the same mesh at each drawing call, and each instance has different parameters to increase changes and reduce repetition in appearance, thereby optimizing the performance of the 3D design system.

In addition, it should be understood that although the present specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.

Claims (9)

1. A 3D design system based on Realibox engine, characterized by comprising the following steps: Step 1: 3D real-time rendering, standard effects use physically based rendering to achieve realistic and seamless rendering results across different environments; Step 2: Performance optimization, optimize rendering performance; Step 3: Data storage and backup, store and back up the rendering data. 2. A 3D design system based on the Realibox engine according to claim 1, characterized in that the 3D real-time rendering comprises: Step 1: Varnish; Step 2: Light transmission; Step 3: Volume; Step 4: Order-independent translucent blending. 3. A 3D design system based on Realibox engine according to claim 2, characterized in that the varnishing step is specifically: Based on the isotropic GGX distribution and microfacet BRDF roughness, the surface of the varnish material object is divided into two parts, one is the ClearCoatLayer and the other is the BaseLayer. When a beam of light is incident on the surface, part of the light is directly reflected as the ClearCoat highlight, and the other part enters the BaseLayer and is divided into diffuse reflection and GGX highlight reflection. 4. A 3D design system based on the Realibox engine according to claim 2, characterized in that the light transmission step is specifically: Add specular_btdf to the core BRDF using transmission. 5. A 3D design system based on Realibox engine according to claim 2, characterized in that the volume step is specifically: Rendering of various objects and the corresponding top-down slice through the scene. Solid lines represent meshes, grey areas represent volumes, thin-walled materials are applied to open and closed meshes, dashed lines represent imaginary boundaries of infinitely thin volumes, and volumetric materials are applied to closed meshes, creating a volumetric effect of refraction. 6. A 3D design system based on the Realibox engine according to claim 2, characterized in that the order-independent semi-transparent blending step is specifically: Over is stacked from back to front, while under is stacked from front to back. There are three layers from near to far: c-b-a Over operation: first superimpose ab, then superimpose with c; Under operation: first superimpose bc, then superimpose with a; The under operation is performed on the semi-transparent objects layer by layer from front to back, so that all the semi-transparent objects to be rendered are mixed into one layer, and finally the over operation is performed with the opaque objects at the bottom layer. 7. A 3D design system based on the Realibox engine according to claim 6, characterized in that the semi-transparent mixed depth test step is as follows: Step 1: Perform depth testing on all objects in an unordered manner and write the depth of the nearest fragment into the z-buffer. Step 2: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, and if they are the same, execute under the color-buffer with the color-buffer. When executing for the first time, write directly into the color-buffer, write the transparency of the semi-transparent fragment into the a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off; Step 3: Same as step 1, traverse all objects in an unordered manner to perform depth testing, and write the depth of the nearest fragment into the z-buffer; Step 4: Traverse the semi-transparent objects in an unordered manner, compare the depth of the fragment with the depth of the z-buffer, if they are the same, perform under on the color-buffer and write the mixed color and transparency into the color-buffer and a-buffer, and mark the depth of the fragment as a specific value, indicating that this layer is peeled off; Step 5: Repeat Step 3 to Step 4, and terminate when any of the following conditions is met; 1. When traversing a translucent object, the depth of all fragments is not equal to the z-buffer, which means that an opaque object is encountered; 2. Since the transparency in a-buffer increases and approaches 1 after each under, the detection in a-buffer is greater than the threshold; 3. Repeat a fixed number of times; Step 6: Blend the opaque and translucent layers; traverse the opaque objects to perform depth testing, and perform an over operation on the color of the nearest opaque object and the current color-buffer. 8. The 3D design system based on the Realibox engine according to claim 1, wherein the performance optimization comprises the following steps: Step 1: Cache WebAssembly modules and scripts locally to speed up loading after the first visit; Step 2: ktx texture compression, ktx texture compression workflow and map conversion to ktx to improve scene performance; Step 3: Model Instancing, GPU instancing renders the same mesh on each draw call, with each instance having different parameters to increase variation and reduce repetition in appearance. 9. A 3D design system based on the Realibox engine according to claim 8, characterized in that the model instantiation comprises the following steps: Step 1: Create the model object and instance quantity to be instantiated; Step 2: Create an instantiated model object and add the model as a property of the Geomery object to the instantiated model object; Step 3: Use the InstancedBufferGeometry class to create the geometry of the instanced model; this class takes the original model geometry as a parameter and provides buffer data of instance attributes for each instance; Step 4: Create an InstancedMesh object and pass the instanced geometry and instanced model objects as parameters to the InstancedMesh constructor.